|
|
|
@ -1,159 +1,159 @@
|
|
|
|
import React,{ Component } from "react";
|
|
|
|
import React,{ Component } from "react";
|
|
|
|
import {Checkbox,Radio, Input} from "antd";
|
|
|
|
import {Checkbox,Radio, Input} from "antd";
|
|
|
|
import {DMDEditor,markdownToHTML } from 'educoder'
|
|
|
|
import {DMDEditor,markdownToHTML } from 'educoder'
|
|
|
|
|
|
|
|
|
|
|
|
import axios from 'axios'
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
|
|
|
|
|
|
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'
|
|
|
|
]
|
|
|
|
]
|
|
|
|
class fillEmpty extends Component{
|
|
|
|
class fillEmpty extends Component{
|
|
|
|
constructor(props){
|
|
|
|
constructor(props){
|
|
|
|
super(props);
|
|
|
|
super(props);
|
|
|
|
this.mdRef = React.createRef()
|
|
|
|
this.mdRef = React.createRef()
|
|
|
|
let { questionType }=this.props;
|
|
|
|
let { questionType }=this.props;
|
|
|
|
let array=[];
|
|
|
|
let array=[];
|
|
|
|
for(var i=0;i < questionType.multi_count; i++){
|
|
|
|
for(var i=0;i < questionType.multi_count; i++){
|
|
|
|
let item="";
|
|
|
|
let item="";
|
|
|
|
if(questionType.user_answer.length>0){
|
|
|
|
if(questionType.user_answer.length>0){
|
|
|
|
if(questionType.user_answer[i]){
|
|
|
|
if(questionType.user_answer[i]){
|
|
|
|
item=questionType.user_answer[i].answer_text;
|
|
|
|
item=questionType.user_answer[i].answer_text;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
array.push({
|
|
|
|
array.push({
|
|
|
|
value:item,
|
|
|
|
value:item,
|
|
|
|
q_id:questionType.question_number
|
|
|
|
q_id:questionType.question_number
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
this.state={
|
|
|
|
this.state={
|
|
|
|
array
|
|
|
|
array
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
toMDMode = (that) => {
|
|
|
|
toMDMode = (that) => {
|
|
|
|
// if ( this.mdReactObject) {
|
|
|
|
// if ( this.mdReactObject) {
|
|
|
|
// let mdReactObject = this.mdReactObject;
|
|
|
|
// let mdReactObject = this.mdReactObject;
|
|
|
|
// this.mdReactObject = null
|
|
|
|
// this.mdReactObject = null
|
|
|
|
// mdReactObject.toShowMode()
|
|
|
|
// mdReactObject.toShowMode()
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
this.mdReactObject = that;
|
|
|
|
this.mdReactObject = that;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onOptionContentChange = (value, index) => {
|
|
|
|
onOptionContentChange = (value, index) => {
|
|
|
|
let array = this.state.array.slice(0);
|
|
|
|
let array = this.state.array.slice(0);
|
|
|
|
array[index].value = value;
|
|
|
|
array[index].value = value;
|
|
|
|
this.setState({ array })
|
|
|
|
this.setState({ array })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onBlurEmpty=(index,number)=>{
|
|
|
|
onBlurEmpty=(index,number)=>{
|
|
|
|
let array = this.state.array.slice(0);
|
|
|
|
let array = this.state.array.slice(0);
|
|
|
|
let v=array[index].value;
|
|
|
|
let v=array[index].value;
|
|
|
|
let question_id=this.props.questionType.question_id;
|
|
|
|
let question_id=this.props.questionType.question_id;
|
|
|
|
let url=`/exercise_questions/${question_id}/exercise_answers.json`
|
|
|
|
let url=`/exercise_questions/${question_id}/exercise_answers.json`
|
|
|
|
axios.post((url),{
|
|
|
|
axios.post((url),{
|
|
|
|
exercise_choice_id:parseInt(index)+1,
|
|
|
|
exercise_choice_id:parseInt(index)+1,
|
|
|
|
answer_text:v
|
|
|
|
answer_text:v
|
|
|
|
}).then((result)=>{
|
|
|
|
}).then((result)=>{
|
|
|
|
if(result.status==200){
|
|
|
|
if(result.status==200){
|
|
|
|
//this.refs[`md${number}${index}`].toShowMode();
|
|
|
|
//this.refs[`md${number}${index}`].toShowMode();
|
|
|
|
let count=0;
|
|
|
|
let count=0;
|
|
|
|
for(var i=0;i<array.length;i++){
|
|
|
|
for(var i=0;i<array.length;i++){
|
|
|
|
if(array[i].value ==""){ count++; }
|
|
|
|
if(array[i].value ==""){ count++; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
let k = count==array.length ? 0 : 1;
|
|
|
|
let k = count==array.length ? 0 : 1;
|
|
|
|
this.props.changeQuestionStatus && this.props.changeQuestionStatus(parseInt(this.props.questionType.q_position)-1,k);
|
|
|
|
this.props.changeQuestionStatus && this.props.changeQuestionStatus(parseInt(this.props.questionType.q_position)-1,k);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}).catch((error)=>{
|
|
|
|
}).catch((error)=>{
|
|
|
|
console.log(error);
|
|
|
|
console.log(error);
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
render(){
|
|
|
|
render(){
|
|
|
|
let {
|
|
|
|
let {
|
|
|
|
questionType ,
|
|
|
|
questionType ,
|
|
|
|
exercise ,
|
|
|
|
exercise ,
|
|
|
|
user_exercise_status,
|
|
|
|
user_exercise_status,
|
|
|
|
}=this.props
|
|
|
|
}=this.props
|
|
|
|
let {
|
|
|
|
let {
|
|
|
|
array
|
|
|
|
array
|
|
|
|
}=this.state
|
|
|
|
}=this.state
|
|
|
|
let isAdmin = this.props.isAdmin();
|
|
|
|
let isAdmin = this.props.isAdmin();
|
|
|
|
let isStudent = this.props.isStudent();
|
|
|
|
let isStudent = this.props.isStudent();
|
|
|
|
return(
|
|
|
|
return(
|
|
|
|
<div className="pl30 pr30">
|
|
|
|
<div className="pl30 pr30">
|
|
|
|
<style>{`
|
|
|
|
<style>{`
|
|
|
|
.emptyPanel div#content_editorMd_show{
|
|
|
|
.emptyPanel div#content_editorMd_show{
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
border-radius: 4px;
|
|
|
|
border-radius: 4px;
|
|
|
|
height: 35px;
|
|
|
|
height: 35px;
|
|
|
|
margin-top:0px;
|
|
|
|
margin-top:0px;
|
|
|
|
background-color:#fafafa;
|
|
|
|
background-color:#fafafa;
|
|
|
|
color:#999;
|
|
|
|
color:#999;
|
|
|
|
line-height:25px;
|
|
|
|
line-height:25px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.answerStyle{
|
|
|
|
.answerStyle{
|
|
|
|
background:#f5f5f5;
|
|
|
|
background:#f5f5f5;
|
|
|
|
border-radius:4px;
|
|
|
|
border-radius:4px;
|
|
|
|
border: 1px solid #eaeaea;
|
|
|
|
border: 1px solid #eaeaea;
|
|
|
|
padding:5px;
|
|
|
|
padding:5px;
|
|
|
|
min-height:35px;
|
|
|
|
min-height:35px;
|
|
|
|
box-sizing:border-box;
|
|
|
|
box-sizing:border-box;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`}</style>
|
|
|
|
`}</style>
|
|
|
|
{
|
|
|
|
{
|
|
|
|
array.map((item,key)=>{
|
|
|
|
array.map((item,key)=>{
|
|
|
|
return(
|
|
|
|
return(
|
|
|
|
<li className="df mb10 emptyPanel">
|
|
|
|
<li className="df mb10 emptyPanel">
|
|
|
|
<span className="mr10 lineh-35 font-16">答案(填空{key+1})</span>
|
|
|
|
<span className="mr10 lineh-35 font-16">答案(填空{key+1})</span>
|
|
|
|
<div className="flex1" style={{width:"0"}}>
|
|
|
|
<div className="flex1" style={{width:"0"}}>
|
|
|
|
{
|
|
|
|
{
|
|
|
|
user_exercise_status == 1 ?
|
|
|
|
user_exercise_status == 1 ?
|
|
|
|
<input value={item.value} className="input-100-35" style={{backgroundColor: "#F5F5F5",cursor:"default"}} placeholder={ isStudent && item.value ? `请输入填空${key+1}的答案` : "" } readOnly/>
|
|
|
|
<input value={item.value} className="input-100-35" style={{backgroundColor: "#F5F5F5",cursor:"default"}} placeholder={ isStudent && item.value ? `请输入填空${key+1}的答案` : "" } readOnly/>
|
|
|
|
:
|
|
|
|
:
|
|
|
|
<DMDEditor
|
|
|
|
<DMDEditor
|
|
|
|
ref={`md${questionType.q_position}${key}`}
|
|
|
|
ref={`md${questionType.q_position}${key}`}
|
|
|
|
toMDMode={this.toMDMode} toShowMode={this.toShowMode}
|
|
|
|
toMDMode={this.toMDMode} toShowMode={this.toShowMode}
|
|
|
|
height={150} className={'optionMdEditor'} watch={false} noStorage={true}
|
|
|
|
height={150} className={'optionMdEditor'} watch={false} noStorage={true}
|
|
|
|
mdID={questionType.question_id +"_"+ key} placeholder={`输入填空${key+1}的答案`} onChange={(value) => this.onOptionContentChange(value, key)}
|
|
|
|
mdID={questionType.question_id +"_"+ key} placeholder={`输入填空${key+1}的答案`} onChange={(value) => this.onOptionContentChange(value, key)}
|
|
|
|
initValue={item.value} onCMBlur={()=>this.onBlurEmpty(key,questionType.q_position)}
|
|
|
|
initValue={item.value} onCMBlur={()=>this.onBlurEmpty(key,questionType.q_position)}
|
|
|
|
></DMDEditor>
|
|
|
|
></DMDEditor>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
{
|
|
|
|
{
|
|
|
|
// 答案公开，且试卷已经截止
|
|
|
|
// 答案公开，且试卷已经截止
|
|
|
|
isAdmin &&
|
|
|
|
isAdmin &&
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<p className="bor-top-greyE pt20 mt20 font-16 mb10">参考答案：</p>
|
|
|
|
<p className="bor-top-greyE pt20 mt20 font-16 mb10">参考答案：</p>
|
|
|
|
{ questionType.standard_answer && questionType.standard_answer.map((item,k)=>{
|
|
|
|
{ questionType.standard_answer && questionType.standard_answer.map((item,k)=>{
|
|
|
|
return(
|
|
|
|
return(
|
|
|
|
<ul className="df font-16">
|
|
|
|
<ul className="df font-16">
|
|
|
|
<span className="mr10">填空{k+1}:</span>
|
|
|
|
<span className="mr10">填空{k+1}:</span>
|
|
|
|
<li className="flex1">
|
|
|
|
<li className="flex1">
|
|
|
|
{
|
|
|
|
{
|
|
|
|
item.answer_text && item.answer_text.map((i,index)=>{
|
|
|
|
item.answer_text && item.answer_text.map((i,index)=>{
|
|
|
|
return(
|
|
|
|
return(
|
|
|
|
<div className="standardAnswer markdown-body answerStyle mb10" dangerouslySetInnerHTML={{__html: markdownToHTML(i)}}></div>
|
|
|
|
<div className="standardAnswer markdown-body answerStyle mb10" dangerouslySetInnerHTML={{__html: markdownToHTML(i)}}></div>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
export default fillEmpty
|
|
|
|
export default fillEmpty
|
