m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

教师视角选择题、判断题、填空题、编程题quill渲染

Browse Source
dev_chen
杨树明 5 years ago
parent be232f799d
commit 92f857962c
9 changed files with 228 additions and 275 deletions
Show Stats Download Patch File Download Diff File

2
public/react/src/common/educoder.js
Unescape View File

@ -59,6 +59,8 @@ export { default as ActionBtn } from './course/ActionBtn'
export { default as MarkdownToHtml } from './components/markdown/MarkdownToHtml' export { default as MarkdownToHtml } from './components/markdown/MarkdownToHtml'
export { default as QuillForEditor } from './quillForEditor'
export { default as DMDEditor } from './components/markdown/DMDEditor' export { default as DMDEditor } from './components/markdown/DMDEditor'
export { default as Clappr } from './components/media/Clappr' export { default as Clappr } from './components/media/Clappr'

85
public/react/src/modules/courses/exercise/ExerciseDisplay.js
Unescape View File

@ -1,30 +1,14 @@
import React,{ Component } from "react"; import React,{ Component } from "react";
import {
Form, Input, InputNumber, Switch, Radio,
Slider, Button, Upload, Icon, Rate, Checkbox, message,
Row, Col, Select, Modal, Tooltip
} from 'antd';
import axios from 'axios' import axios from 'axios'
import {getUrl, ActionBtn, markdownToHTML} from 'educoder';
import SingleDisplay from './new/SingleDisplay' import SingleDisplay from './new/SingleDisplay'
import JudgeDisplay from './new/JudgeDisplay' import JudgeDisplay from './new/JudgeDisplay'
import NullDisplay from './new/NullDisplay' import NullDisplay from './new/NullDisplay'
import MainDisplay from './new/MainDisplay' import MainDisplay from './new/MainDisplay'
import ShixunDisplay from './new/ShixunDisplay' import ShixunDisplay from './new/ShixunDisplay'
import ShixunProgramming from './new/ShixunProgramming'
import './new/common.css' import './new/common.css'
const { TextArea } = Input;
const confirm = Modal.confirm;
const $ = window.$
const { Option } = Select;
const tagArray = [
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
]
class ExerciseDisplay extends Component{ class ExerciseDisplay extends Component{
constructor(props){ constructor(props){
@ -51,7 +35,7 @@ class ExerciseDisplay extends Component{
} }
} }
componentDidMount = () => { componentDidMount = () => {
const Id = this.props.match.params.Id const Id = this.props.match.params.Id
if (Id) { if (Id) {
const url = `/${this.props.urlPath || 'exercises'}/${Id}.json` const url = `/${this.props.urlPath || 'exercises'}/${Id}.json`
axios.get(url) axios.get(url)
@ -87,20 +71,7 @@ class ExerciseDisplay extends Component{
} }
} }
render() { render() {
// let { question_title, question_score, question_type, question_choices, standard_answer,
// question_id, question_number, index, displayCount,
// multi_count
// } = this.props;
const { exercise_questions,exercise,exercise_types} = this.state; const { exercise_questions,exercise,exercise_types} = this.state;
// // const { getFieldDecorator } = this.props.form;
// const isAdmin = this.props.isAdmin()
// const courseId=this.props.match.params.coursesId;
// const isEdit = this.isEdit
// const qNumber = `question_${index}`;
// let length = 5;
// const qName = qNameArray[question_type]
const commonHandler = {} const commonHandler = {}
return( return(
@ -153,40 +124,46 @@ class ExerciseDisplay extends Component{
</div> </div>
{ exercise_questions.map((item, index) => { { exercise_questions.map((item, index) => {
if (item.question_type == 0 || item.question_type == 1) { if (item.question_type == 0 || item.question_type == 1) {
return <SingleDisplay {...this.props} {...item} index={index} {...commonHandler} return <SingleDisplay {...this.props} {...item} index={index} {...commonHandler} {...this.state}
displayCount={exercise_questions.length} showActionButton={false} key={index} displayCount={exercise_questions.length} showActionButton={false} key={index}
></SingleDisplay> ></SingleDisplay>
} else if (item.question_type == 2) { } else if (item.question_type == 2) {
return <JudgeDisplay return <JudgeDisplay
showActionButton={false} key={index} showActionButton={false} key={index} {...this.state}
{...this.props} {...item} index={index} {...commonHandler} ></JudgeDisplay> {...this.props} {...item} index={index} {...commonHandler} ></JudgeDisplay>
} else if (item.question_type == 3) { } else if (item.question_type == 3) {
return <NullDisplay return <NullDisplay
showActionButton={false} key={index} showActionButton={false} key={index} {...this.state}
{...this.props} {...item} index={index} {...commonHandler} ></NullDisplay> {...this.props} {...item} index={index} {...commonHandler} ></NullDisplay>
} else if (item.question_type == 4) { } else if (item.question_type == 4) {
return <MainDisplay return <MainDisplay
showActionButton={false} key={index} showActionButton={false} key={index} {...this.state}
{...this.props} {...item} index={index} {...commonHandler} ></MainDisplay> {...this.props} {...item} index={index} {...commonHandler} ></MainDisplay>
} else if (item.question_type == 5) { } else if (item.question_type == 5) {
return <ShixunDisplay Testpapersettinghomepage return <ShixunDisplay Testpapersettinghomepage
showActionButton={false} key={index} showActionButton={false} key={index} {...this.state}
{...this.props} {...item} index={index} {...commonHandler} ></ShixunDisplay> {...this.props} {...item} index={index} {...commonHandler} ></ShixunDisplay>
}else if (item.question_type == 6) {
return <ShixunProgramming Testpapersettinghomepage
showActionButton={false} key={index} {...this.state}
{...this.props} {...item} index={index} {...commonHandler} ></ShixunProgramming>
} }
return <div></div> return <div></div>
})} })}

56
public/react/src/modules/courses/exercise/new/JudgeDisplay.js
Unescape View File

@ -1,24 +1,9 @@
import React,{ Component } from "react"; import React,{ Component } from "react";
import {Radio} from 'antd';
import { import {QuillForEditor, MarkdownToHtml } from 'educoder';
Form, Input, InputNumber, Switch, Radio,
Slider, Button, Upload, Icon, Rate, Checkbox, message,
Row, Col, Select, Modal, Tooltip
} from 'antd';
import axios from 'axios'
import { qNameArray } from './common'
import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml } from 'educoder';
import QestionDisplayHeader from './QestionDisplayHeader' import QestionDisplayHeader from './QestionDisplayHeader'
const { TextArea } = Input;
const confirm = Modal.confirm;
const $ = window.$
const { Option } = Select;
const tagArray = [
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
]
class JudgeDisplay extends Component{ class JudgeDisplay extends Component{
constructor(props){ constructor(props){
@ -31,7 +16,7 @@ class JudgeDisplay extends Component{
} }
} }
componentDidMount = () => { componentDidMount = () => {
const Id = this.props.match.params.Id const Id = this.props.match.params.Id
this.isEdit = !!Id this.isEdit = !!Id
if (Id) { if (Id) {
const url = `/exercises/${Id}/edit.json` const url = `/exercises/${Id}/edit.json`
@ -47,23 +32,14 @@ class JudgeDisplay extends Component{
} }
} }
render() { render() {
let { question_title, question_score, question_type, question_choices, standard_answer, let { question_choices,
question_id, question_number, index, displayCount question_id, index,
} = this.props; } = this.props;
// const { getFieldDecorator } = this.props.form;
const isAdmin = this.props.isAdmin()
const courseId=this.props.match.params.coursesId;
const isEdit = this.isEdit
const qNumber = `question_${index}`; const qNumber = `question_${index}`;
// TODO show模式 isNew为false isEdit为false // TODO show模式 isNew为false isEdit为false
// [true, false, true] -> [0, 2]
// const answerTagArray = standard_answer.map((item, index) => { return item == true ? tagArray[index] : -1 }).filter(item => item != -1);
let length = 5;
const qName = qNameArray[question_type]
return( return(
<div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}> <div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}>
<style>{` <style>{`
@ -87,16 +63,20 @@ class JudgeDisplay extends Component{
return ( return (
<div key={optionIndex} className="fl mr30 df"> <div key={optionIndex} className="fl mr30 df">
<Radio disabled className="lineh-25" checked={item.standard_boolean}></Radio> <Radio disabled className="lineh-25" checked={item.standard_boolean}></Radio>
{/* <span>{item.choice_text}</span> */}
<MarkdownToHtml content={item.choice_text} selector={'judge_' + (index + 1) + optionIndex} {this.props.exercise&&this.props.exercise.is_md?<MarkdownToHtml content={item.choice_text} selector={'judge_' + (index + 1) + optionIndex}
className="" className=""
></MarkdownToHtml> ></MarkdownToHtml>:<QuillForEditor
{/* <span style={{ display: 'inline-block'}} className="markdown-body" readOnly={true}
dangerouslySetInnerHTML={{__html: markdownToHTML1(item.choice_text)}}></span> */} style={{ float: 'left', display: 'inline-block' ,padding:'0px',margin: '2px 0px 0px'}}
value={item.choice_text?JSON.parse(item.choice_text):""}
// showUploadImage={this.handleShowUploadImage}
/>}
</div>) </div>)
})} })}
</div> </div>
</div> </div>
) )

58
public/react/src/modules/courses/exercise/new/MainDisplay.js
Unescape View File

@ -1,24 +1,8 @@
import React,{ Component } from "react"; import React,{ Component } from "react";
import { MarkdownToHtml,QuillForEditor} from 'educoder';
import {
Form, Input, InputNumber, Switch, Radio,
Slider, Button, Upload, Icon, Rate, Checkbox, message,
Row, Col, Select, Modal, Tooltip
} from 'antd';
import axios from 'axios'
import { qNameArray } from './common'
import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder';
import QestionDisplayHeader from './QestionDisplayHeader' import QestionDisplayHeader from './QestionDisplayHeader'
const { TextArea } = Input;
const confirm = Modal.confirm;
const $ = window.$
const { Option } = Select;
const tagArray = [
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
]
class MainDisplay extends Component{ class MainDisplay extends Component{
constructor(props){ constructor(props){
@ -31,23 +15,14 @@ class MainDisplay extends Component{
componentDidMount = () => { componentDidMount = () => {
} }
render() { render() {
let { question_title, question_score, question_type, standard_answer, let {standard_answer,
question_id, question_number, index, displayCount question_id, index
} = this.props; } = this.props;
// const { getFieldDecorator } = this.props.form;
const isAdmin = this.props.isAdmin()
const courseId=this.props.match.params.coursesId;
const isEdit = this.isEdit
const qNumber = `question_${index}`; const qNumber = `question_${index}`;
// TODO show模式 isNew为false isEdit为false // TODO show模式 isNew为false isEdit为false
// [true, false, true] -> [0, 2]
// const answerTagArray = standard_answer.map((item, index) => { return item == true ? tagArray[index] : -1 }).filter(item => item != -1);
let length = 5;
const qName = qNameArray[question_type]
return( return(
<div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}> <div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}>
<style>{` <style>{`
@ -64,24 +39,25 @@ class MainDisplay extends Component{
`}</style> `}</style>
<QestionDisplayHeader {...this.props}></QestionDisplayHeader> <QestionDisplayHeader {...this.props}></QestionDisplayHeader>
{ standard_answer[0] && { standard_answer[0] &&
<React.Fragment> <React.Fragment>
<div style={{color: '#05101A'}} className="font-16 mb5 font-bd">参考答案：</div> <div style={{color: '#05101A'}} className="font-16 mb5 font-bd">参考答案：</div>
<MarkdownToHtml content={standard_answer[0]} selector={'answer_' + qNumber} {this.props.exercise&&this.props.exercise.is_md?<MarkdownToHtml content={standard_answer[0]} selector={'answer_' + qNumber}
className="" className=""
></MarkdownToHtml> ></MarkdownToHtml>:<QuillForEditor
{/* <div className="mainQuestionDisplay markdown-body" readOnly={true}
dangerouslySetInnerHTML={{__html: markdownToHTML1(standard_answer[0])}} style={{ float: 'left', display: 'inline-block' ,padding:'0px',margin: '2px 0px 0px'}}
> value={standard_answer[0]?JSON.parse(standard_answer[0]):""}
</div> */} // showUploadImage={this.handleShowUploadImage}
</React.Fragment> />}
</React.Fragment>
} }
</div> </div>
) )
} }
} }
// RouteHOC()
export default (MainDisplay); export default (MainDisplay);

61
public/react/src/modules/courses/exercise/new/NullDisplay.js
Unescape View File

@ -1,24 +1,7 @@
import React,{ Component } from "react"; import React,{ Component } from "react";
import {QuillForEditor,MarkdownToHtml} from 'educoder';
import {
Form, Input, InputNumber, Switch, Radio,
Slider, Button, Upload, Icon, Rate, Checkbox, message,
Row, Col, Select, Modal, Tooltip
} from 'antd';
import axios from 'axios'
import { qNameArray } from './common'
import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder';
import QestionDisplayHeader from './QestionDisplayHeader' import QestionDisplayHeader from './QestionDisplayHeader'
const { TextArea } = Input;
const confirm = Modal.confirm;
const $ = window.$
const { Option } = Select;
const tagArray = [
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
]
class NullDisplay extends Component{ class NullDisplay extends Component{
constructor(props){ constructor(props){
@ -31,7 +14,7 @@ class NullDisplay extends Component{
} }
} }
componentDidMount = () => { componentDidMount = () => {
const Id = this.props.match.params.Id const Id = this.props.match.params.Id
this.isEdit = !!Id this.isEdit = !!Id
if (Id) { if (Id) {
const url = `/exercises/${Id}/edit.json` const url = `/exercises/${Id}/edit.json`
@ -47,16 +30,10 @@ class NullDisplay extends Component{
} }
} }
render() { render() {
let { question_title, question_score, question_type, question_choices, standard_answer, let { question_type, standard_answer,
question_id, question_number, index, displayCount, question_id,index,
multi_count
} = this.props; } = this.props;
// const { getFieldDecorator } = this.props.form;
const isAdmin = this.props.isAdmin()
const courseId=this.props.match.params.coursesId;
const isEdit = this.isEdit
const qNumber = `question_${index}`; const qNumber = `question_${index}`;
/** /**
is_ordered: true is_ordered: true
@ -68,8 +45,7 @@ class NullDisplay extends Component{
question_type: 3 question_type: 3
standard_answer: [{choice_id: 1, answer_text: ["2", "22"]}] standard_answer: [{choice_id: 1, answer_text: ["2", "22"]}]
*/ */
let length = 5;
const qName = qNameArray[question_type]
return( return(
<div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}> <div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}>
<style>{` <style>{`
@ -98,31 +74,32 @@ class NullDisplay extends Component{
`}</style> `}</style>
<QestionDisplayHeader {...this.props}></QestionDisplayHeader> <QestionDisplayHeader {...this.props}></QestionDisplayHeader>
{/* <span>答案（填空{index+1}）：</span>
<div className="answers">
{ answers.map((item, itemIndex) => {
return <span className="answer" key={itemIndex}>{item}</span>
})}
</div> */}
<div className="options"> <div className="options">
{ {
standard_answer.map((answers, _index) => { standard_answer.map((answers, _index) => {
return <div className="df answerRow" key={_index}> return <div className="df answerRow" key={_index}>
<span className="lineh-40">答案（填空{_index+1}）：</span> <span className="lineh-40">答案（填空{_index+1}）：</span>
<div className="answers"> <div className="answers">
{ answers.answer_text.map((item, itemIndex) => { { answers.answer_text.map((item, itemIndex) => {
return <MarkdownToHtml return(
this.props.exercise&&this.props.exercise.is_md?<MarkdownToHtml
className="answer" key={itemIndex} className="answer" key={itemIndex}
content={item} selector={'null_' + (index + 1) + (_index + 1) + (itemIndex + 1)} content={item} selector={'null_' + (index + 1) + (_index + 1) + (itemIndex + 1)}
></MarkdownToHtml> ></MarkdownToHtml>:<QuillForEditor
readOnly={true}
style={{ float: 'left', display: 'inline-block' ,padding:'0px',margin: '2px 0px 0px'}}
value={item?JSON.parse(item):""}
// showUploadImage={this.handleShowUploadImage}
/>
)
})} })}
{/* <span className="answer" key={itemIndex}>{item}</span> */}
</div> </div>
</div> </div>
}) })
} }
</div> </div>
</div> </div>
) )

55
public/react/src/modules/courses/exercise/new/QestionDisplayHeader.js
Unescape View File

@ -1,17 +1,8 @@
import React,{ Component } from "react"; import React,{ Component } from "react";
import {Tooltip} from 'antd';
import {
Form, Input, InputNumber, Switch, Radio,
Slider, Button, Upload, Icon, Rate, Checkbox, message,
Row, Col, Select, Modal, Tooltip
} from 'antd';
import axios from 'axios'
import { qNameArray } from './common' import { qNameArray } from './common'
import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder'; import {QuillForEditor, MarkdownToHtml} from 'educoder';
const { TextArea } = Input;
const confirm = Modal.confirm;
const $ = window.$
const { Option } = Select;
class QestionDisplayHeader extends Component{ class QestionDisplayHeader extends Component{
constructor(props){ constructor(props){
@ -19,24 +10,26 @@ class QestionDisplayHeader extends Component{
this.state = { this.state = {
} }
} }
componentDidMount = () => { componentDidMount = () => {
} }
render() { render() {
let { question_title, question_score, question_type, question_choices, standard_answer, let { question_title, question_score, question_type,
question_id, question_number, index, displayCount, question_id, index, displayCount,
topRight, showActionButton, exerciseIsPublish topRight, showActionButton, exerciseIsPublish
} = this.props; } = this.props;
const isAdmin = this.props.isAdmin() // const isAdmin = this.props.isAdmin()
const courseId=this.props.match.params.coursesId; // const courseId=this.props.match.params.coursesId;
const isEdit = this.isEdit // const isEdit = this.isEdit
const qNumber = `question_${index}`; // const qNumber = `question_${index}`;
const qName = qNameArray[question_type] const qName = qNameArray[question_type]
// console.log(this.props)
return( return(
<React.Fragment> <React.Fragment>
<div className="new_li"> <div className="new_li">
@ -44,6 +37,9 @@ class QestionDisplayHeader extends Component{
.actionBtns { .actionBtns {
height: 28px height: 28px
} }
.ql-editor{
padding:0px !important;
}
`}</style> `}</style>
<div className="font-16 fl"> <div className="font-16 fl">
<span className="color-blue">{index+1}、{qName}</span> <span className="color-blue">{index+1}、{qName}</span>
@ -80,11 +76,16 @@ class QestionDisplayHeader extends Component{
</React.Fragment>} </React.Fragment>}
</div> </div>
</div> </div>
{ question_title && { question_title &&
<MarkdownToHtml content={question_title} selector={'qtitle_' + (index + 1)} style={{ display: 'inline-block', width:'100%' , margin: '10px 0px 15px' }} this.props.exercise&&this.props.exercise.is_md?<MarkdownToHtml content={question_title} selector={'qtitle_' + (index + 1)} style={{ display: 'inline-block', width:'100%' , margin: '10px 0px 15px' }}
></MarkdownToHtml> ></MarkdownToHtml>:<QuillForEditor
// <div className="markdown-body" dangerouslySetInnerHTML={{__html: markdownToHTML1(question_title)}} style={{ display: 'inline-block', width:'100%' , margin: '10px 0px 15px',padding:'0px'}}
readOnly={true}
value={question_title?JSON.parse(question_title):""}
// showUploadImage={this.handleShowUploadImage}
/>
// <div className="markdown-body" dangerouslySetInnerHTML={{__html: markdownToHTML1(question_title)}}
// style={{ display: 'inline-block', width:'100%' , margin: '10px 0px 15px' }}></div> // style={{ display: 'inline-block', width:'100%' , margin: '10px 0px 15px' }}></div>
} }
</React.Fragment> </React.Fragment>

51
public/react/src/modules/courses/exercise/new/ShixunDisplay.js
Unescape View File

@ -1,25 +1,7 @@
import React,{ Component } from "react"; import React,{ Component } from "react";
import {Link} from 'react-router-dom'; import {QuillForEditor,markdownToHTML} from 'educoder';
import {
Form, Input, InputNumber, Switch, Radio,
Slider, Button, Upload, Icon, Rate, Checkbox, message,
Row, Col, Select, Modal, Tooltip
} from 'antd';
import axios from 'axios'
import { qNameArray } from './common'
import {getUrl, ActionBtn, markdownToHTML} from 'educoder';
import QestionDisplayHeader from './QestionDisplayHeader' import QestionDisplayHeader from './QestionDisplayHeader'
const { TextArea } = Input;
const confirm = Modal.confirm;
const $ = window.$
const { Option } = Select;
const tagArray = [
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
]
class ShixunDisplay extends Component{ class ShixunDisplay extends Component{
constructor(props){ constructor(props){
@ -32,17 +14,17 @@ class ShixunDisplay extends Component{
componentDidMount = () => { componentDidMount = () => {
} }
render() { render() {
let { question_title, question_score, question_type, standard_answer, let { question_title,
question_id, question_number, index, displayCount, question_id, index,
shixun_name, shixun, shixun_id, shixun_identifier shixun_name, shixun, shixun_identifier
} = this.props; } = this.props;
// const { getFieldDecorator } = this.props.form; // const { getFieldDecorator } = this.props.form;
const isAdmin = this.props.isAdmin() // const isAdmin = this.props.isAdmin()
const courseId=this.props.match.params.coursesId; // const courseId=this.props.match.params.coursesId;
const isEdit = this.isEdit // const isEdit = this.isEdit
const qNumber = `question_${index}`; const qNumber = `question_${index}`;
// TODO show模式 isNew为false isEdit为false // TODO show模式 isNew为false isEdit为false
@ -102,8 +84,8 @@ class ShixunDisplay extends Component{
] ]
} }
*/ */
let length = 5; // let length = 5;
const qName = qNameArray[question_type] // const qName = qNameArray[question_type]
return( return(
<div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}> <div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}>
<style>{` <style>{`
@ -121,12 +103,17 @@ class ShixunDisplay extends Component{
>实训详情</a> >实训详情</a>
} }
></QestionDisplayHeader> ></QestionDisplayHeader>
{/* <div style={{color: '#05101A', fontWeight: 'bold'}}>参考答案：</div> */}
<div className="mainQuestionDisplay color-grey-9 markdown-body" {this.props.exercise&&this.props.exercise.is_md?<div className="mainQuestionDisplay color-grey-9 markdown-body"
dangerouslySetInnerHTML={{__html: markdownToHTML(question_title)}} dangerouslySetInnerHTML={{__html: markdownToHTML(question_title)}}
> >
</div> </div>:<QuillForEditor
readOnly={true}
style={{ float: 'left', display: 'inline-block' ,padding:'0px',margin: '2px 0px 0px'}}
value={question_title?JSON.parse(question_title):""}
// showUploadImage={this.handleShowUploadImage}
/>}
{shixun.map((ch, index) => { {shixun.map((ch, index) => {
return <div> return <div>

70
public/react/src/modules/courses/exercise/new/ShixunProgramming.js
Unescape View File

@ -0,0 +1,70 @@
import React,{ Component } from "react";
import {QuillForEditor,markdownToHTML} from 'educoder';
import QestionDisplayHeader from './QestionDisplayHeader'
class ShixunProgramming extends Component{
constructor(props){
super(props);
this.state = {
}
}
componentDidMount = () => {
}
render() {
let { question_title,
question_id, index,
shixun_name, shixun_identifier
} = this.props;
const qNumber = `question_${index}`;
// TODO show模式 isNew为false isEdit为false
console.log(this.props)
// console.log(this.state)
// question_id: 32336
// q_position: 4
// question_title: "C语言测试排序3333333333"
// question_type: 6
// question_score: "10.0"
return(
<div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}>
<style>{`
.mainQuestionDisplay {
margin-bottom:15px;
}
`}</style>
<QestionDisplayHeader {...this.props} question_title={question_title}
topRight={
<a target="_blank" href={`/shixuns/${shixun_identifier}/challenges`} className="mr30"
style={{color: '#4CACFF'}}
>实训详情</a>
}
></QestionDisplayHeader>
{/*{this.props.exercise&&this.props.exercise.is_md?<div className="mainQuestionDisplay color-grey-9 markdown-body"*/}
{/* dangerouslySetInnerHTML={{__html: markdownToHTML(question_title)}}*/}
{/*>*/}
{/*</div>:<QuillForEditor*/}
{/* readOnly={true}*/}
{/* style={{ float: 'left', display: 'inline-block' ,padding:'0px',margin: '2px 0px 0px'}}*/}
{/* value={question_title?JSON.parse(question_title):""}*/}
{/* // showUploadImage={this.handleShowUploadImage}*/}
{/*/>}*/}
{/*{shixun.map((ch, index) => {*/}
{/* return <div>*/}
{/* {`第${index+1}关`}　{ch.challenge_name}　{ch.challenge_score}分*/}
{/* </div>*/}
{/*})}*/}
</div>
)
}
}
// RouteHOC()
export default (ShixunProgramming);

65
public/react/src/modules/courses/exercise/new/SingleDisplay.js
Unescape View File

@ -1,31 +1,13 @@
import React,{ Component } from "react"; import React,{ Component } from "react";
import { Radio, Checkbox } from 'antd';
import {
Form, Input, InputNumber, Switch, Radio,
Slider, Button, Upload, Icon, Rate, Checkbox, message,
Row, Col, Select, Modal, Tooltip
} from 'antd';
import axios from 'axios'
import QestionDisplayHeader from './QestionDisplayHeader' import QestionDisplayHeader from './QestionDisplayHeader'
import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder'; import {MarkdownToHtml,QuillForEditor} from 'educoder';
const { TextArea } = Input;
const confirm = Modal.confirm;
const $ = window.$
const { Option } = Select;
const tagArray = [ const tagArray = [
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
] ]
const qNameArray = [
'单选题',
'多选题',
'判断题',
'填空题',
'简答题',
'实训题',
]
class SingleDisplay extends Component{ class SingleDisplay extends Component{
constructor(props){ constructor(props){
super(props); super(props);
@ -53,25 +35,15 @@ class SingleDisplay extends Component{
} }
} }
render() { render() {
let { question_title, question_score, question_type, question_choices, standard_answer, let { question_type, question_choices,
question_id, question_number, index, displayCount, showActionButton question_id, index,
} = this.props; } = this.props;
// const { getFieldDecorator } = this.props.form;
const isAdmin = this.props.isAdmin()
const courseId=this.props.match.params.coursesId;
const isEdit = this.isEdit
const qNumber = `question_${index}`; const qNumber = `question_${index}`;
// TODO show模式 isNew为false isEdit为false // TODO show模式 isNew为false isEdit为false
// [true, false, true] -> [0, 2]
// const answerTagArray = standard_answer.map((item, index) => { return item == true ? tagArray[index] : -1 }).filter(item => item != -1);
let length = 5;
const qName = qNameArray[question_type]
const isPreviewPage = showActionButton == false
return( return(
<div className="bor-bottom-greyE padding20-30 singleDisplay" id={qNumber} _id={question_id}> <div className="bor-bottom-greyE padding20-30 singleDisplay" id={qNumber} _id={question_id}>
@ -85,6 +57,9 @@ class SingleDisplay extends Component{
.actionBtns { .actionBtns {
height: 28px height: 28px
} }
.ql-editor{
padding:0px !important;
}
`}</style> `}</style>
<QestionDisplayHeader {...this.props}></QestionDisplayHeader> <QestionDisplayHeader {...this.props}></QestionDisplayHeader>
@ -103,11 +78,15 @@ class SingleDisplay extends Component{
flexDirection:"row", flexDirection:"row",
}} key={optionIndex}> }} key={optionIndex}>
<Radio disabled className="fl lineh-25 w50" checked={item.standard_boolean}>{prefix}</Radio> <Radio disabled className="fl lineh-25 w50" checked={item.standard_boolean}>{prefix}</Radio>
<MarkdownToHtml content={item.choice_text} selector={'single_' + (index + 1) + '' + (optionIndex + 1)} style={{ float: 'left', display: 'inline-block' }} {this.props.exercise&&this.props.exercise.is_md?<MarkdownToHtml content={item.choice_text} selector={'single_' + (index + 1) + '' + (optionIndex + 1)} style={{ float: 'left', display: 'inline-block' }}
></MarkdownToHtml>:<QuillForEditor
readOnly={true}
style={{ float: 'left', display: 'inline-block',padding:'0px',margin: '2px 0px 0px'}}
value={item.choice_text?JSON.parse(item.choice_text):""}
// showUploadImage={this.handleShowUploadImage}
/>}
></MarkdownToHtml>
{/* <span style={{ display: 'inline-block'}} className="markdown-body fl"
dangerouslySetInnerHTML={{__html: markdownToHTML1(item.choice_text)}}></span> */}
</div>) </div>)
} else { } else {
@ -117,11 +96,15 @@ class SingleDisplay extends Component{
flexDirection:"row", flexDirection:"row",
}} key={optionIndex}> }} key={optionIndex}>
<Checkbox disabled className="fl lineh-25 w50" checked={item.standard_boolean}>{prefix}</Checkbox> <Checkbox disabled className="fl lineh-25 w50" checked={item.standard_boolean}>{prefix}</Checkbox>
<MarkdownToHtml content={item.choice_text} selector={'single_' + (index + 1)+ '' + (optionIndex + 1)} style={{ float: 'left', display: 'inline-block' }} {this.props.exercise&&this.props.exercise.is_md?<MarkdownToHtml content={item.choice_text} selector={'single_' + (index + 1)+ '' + (optionIndex + 1)} style={{ float: 'left', display: 'inline-block' }}
></MarkdownToHtml>:<QuillForEditor
readOnly={true}
style={{ float: 'left', display: 'inline-block' ,padding:'0px',margin: '2px 0px 0px'}}
value={item.choice_text?JSON.parse(item.choice_text):""}
// showUploadImage={this.handleShowUploadImage}
/>}
></MarkdownToHtml>
{/* <span style={{ display: 'inline-block'}} className="markdown-body fl"
dangerouslySetInnerHTML={{__html: markdownToHTML1(item.choice_text)}}></span> */}
</div>) </div>)
} }
})} })}
@ -131,5 +114,5 @@ class SingleDisplay extends Component{
) )
} }
} }
// RouteHOC()
export default (SingleDisplay); export default (SingleDisplay);

Write Preview
Loading…
Cancel
Save