From 92f857962c004ead8f894e808da85546626d245c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=98=8E?= <775174143@qq.com>
Date: Thu, 26 Mar 2020 16:41:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=99=E5=B8=88=E8=A7=86=E8=A7=92=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E9=A2=98=E3=80=81=E5=88=A4=E6=96=AD=E9=A2=98=E3=80=81?=
 =?UTF-8?q?=E5=A1=AB=E7=A9=BA=E9=A2=98=E3=80=81=E7=BC=96=E7=A8=8B=E9=A2=98?=
 =?UTF-8?q?quill=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/react/src/common/educoder.js           |  2 +
 .../courses/exercise/ExerciseDisplay.js       | 85 +++++++------------
 .../courses/exercise/new/JudgeDisplay.js      | 56 ++++--------
 .../courses/exercise/new/MainDisplay.js       | 58 ++++---------
 .../courses/exercise/new/NullDisplay.js       | 61 +++++--------
 .../exercise/new/QestionDisplayHeader.js      | 55 ++++++------
 .../courses/exercise/new/ShixunDisplay.js     | 51 +++++------
 .../courses/exercise/new/ShixunProgramming.js | 70 +++++++++++++++
 .../courses/exercise/new/SingleDisplay.js     | 65 ++++++--------
 9 files changed, 228 insertions(+), 275 deletions(-)
 create mode 100644 public/react/src/modules/courses/exercise/new/ShixunProgramming.js

diff --git a/public/react/src/common/educoder.js b/public/react/src/common/educoder.js
index c990b5dea..d8194d7f1 100644
--- a/public/react/src/common/educoder.js
+++ b/public/react/src/common/educoder.js
@@ -59,6 +59,8 @@ export { default as ActionBtn } from './course/ActionBtn'
 
 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 Clappr } from './components/media/Clappr'
diff --git a/public/react/src/modules/courses/exercise/ExerciseDisplay.js b/public/react/src/modules/courses/exercise/ExerciseDisplay.js
index 42702e9cb..17d8f1f18 100644
--- a/public/react/src/modules/courses/exercise/ExerciseDisplay.js
+++ b/public/react/src/modules/courses/exercise/ExerciseDisplay.js
@@ -1,30 +1,14 @@
 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 {getUrl, ActionBtn, markdownToHTML} from 'educoder';
-
 import SingleDisplay from './new/SingleDisplay'
 import JudgeDisplay from './new/JudgeDisplay'
 import NullDisplay from './new/NullDisplay'
 import MainDisplay from './new/MainDisplay'
 import ShixunDisplay from './new/ShixunDisplay'
+import ShixunProgramming from './new/ShixunProgramming'
 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{
   constructor(props){
@@ -51,7 +35,7 @@ class ExerciseDisplay extends Component{
     }
   }
   componentDidMount = () => {
-    const Id = this.props.match.params.Id    
+    const Id = this.props.match.params.Id
     if (Id) {
       const url = `/${this.props.urlPath || 'exercises'}/${Id}.json`
       axios.get(url)
@@ -87,20 +71,7 @@ class ExerciseDisplay extends Component{
     }
   }
   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 { 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 = {}
 
     return(
@@ -153,40 +124,46 @@ class ExerciseDisplay extends Component{
 					</div>
           { exercise_questions.map((item, index) => {
             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}
                 ></SingleDisplay>
-              
+
             } else if (item.question_type == 2) {
-              
-              
-                return <JudgeDisplay 
-                      showActionButton={false} key={index}
+
+
+                return <JudgeDisplay
+                      showActionButton={false} key={index}  {...this.state}
                       {...this.props} {...item} index={index} {...commonHandler} ></JudgeDisplay>
-              
+
             } else if (item.question_type == 3) {
-              
-              
-                return <NullDisplay 
-                      showActionButton={false} key={index}
+
+
+                return <NullDisplay
+                      showActionButton={false} key={index}  {...this.state}
                       {...this.props} {...item} index={index} {...commonHandler} ></NullDisplay>
-              
+
             } else if (item.question_type == 4) {
-              
-              
-                return <MainDisplay 
-                      showActionButton={false} key={index}
+
+
+                return <MainDisplay
+                      showActionButton={false} key={index}  {...this.state}
                       {...this.props} {...item} index={index} {...commonHandler} ></MainDisplay>
-              
+
             } else if (item.question_type == 5) {
-              
-              
+
+
                 return <ShixunDisplay Testpapersettinghomepage
-                      showActionButton={false} key={index}
+                      showActionButton={false} key={index}  {...this.state}
                       {...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>
           })}
diff --git a/public/react/src/modules/courses/exercise/new/JudgeDisplay.js b/public/react/src/modules/courses/exercise/new/JudgeDisplay.js
index d340f5fa4..24e753a1d 100644
--- a/public/react/src/modules/courses/exercise/new/JudgeDisplay.js
+++ b/public/react/src/modules/courses/exercise/new/JudgeDisplay.js
@@ -1,24 +1,9 @@
 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 { qNameArray } from './common'
-import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml } from 'educoder';
+import {Radio} from 'antd';
+import {QuillForEditor, MarkdownToHtml } from 'educoder';
 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{
   constructor(props){
@@ -31,7 +16,7 @@ class JudgeDisplay extends Component{
     }
   }
   componentDidMount = () => {
-    const Id = this.props.match.params.Id    
+    const Id = this.props.match.params.Id
     this.isEdit = !!Id
     if (Id) {
       const url = `/exercises/${Id}/edit.json`
@@ -47,23 +32,14 @@ class JudgeDisplay extends Component{
     }
   }
   render() {
-    let { question_title, question_score, question_type, question_choices, standard_answer,
-        question_id, question_number, index, displayCount
+    let { question_choices,
+        question_id, index,
      } = 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}`;
     // 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(
         <div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}>
             <style>{`
@@ -87,16 +63,20 @@ class JudgeDisplay extends Component{
                     return (
                         <div key={optionIndex} className="fl mr30 df">
                             <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=""
-                            ></MarkdownToHtml>
-                            {/* <span style={{ display: 'inline-block'}} className="markdown-body"
-                                    dangerouslySetInnerHTML={{__html: markdownToHTML1(item.choice_text)}}></span> */}
+                            ></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}
+                          />}
+
                         </div>)
-                  
+
                 })}
-                
+
             </div>
         </div>
       )
diff --git a/public/react/src/modules/courses/exercise/new/MainDisplay.js b/public/react/src/modules/courses/exercise/new/MainDisplay.js
index 44a795374..d91cfbc24 100644
--- a/public/react/src/modules/courses/exercise/new/MainDisplay.js
+++ b/public/react/src/modules/courses/exercise/new/MainDisplay.js
@@ -1,24 +1,8 @@
 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 { qNameArray } from './common'
-import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder';
+import { MarkdownToHtml,QuillForEditor} from 'educoder';
 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{
   constructor(props){
@@ -31,23 +15,14 @@ class MainDisplay extends Component{
   componentDidMount = () => {
   }
   render() {
-    let { question_title, question_score, question_type, standard_answer,
-        question_id, question_number, index, displayCount
+    let {standard_answer,
+        question_id, index
      } = 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}`;
     // 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(
         <div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}>
             <style>{`
@@ -64,24 +39,25 @@ class MainDisplay extends Component{
             `}</style>
 
             <QestionDisplayHeader {...this.props}></QestionDisplayHeader>
-            
-            { standard_answer[0] && 
+
+            { standard_answer[0] &&
             <React.Fragment>
               <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=""
-              ></MarkdownToHtml>
-              {/* <div className="mainQuestionDisplay markdown-body" 
-                  dangerouslySetInnerHTML={{__html: markdownToHTML1(standard_answer[0])}}
-              >
-              </div> */}
-            </React.Fragment>            
+              ></MarkdownToHtml>:<QuillForEditor
+                readOnly={true}
+                style={{ float: 'left', display: 'inline-block' ,padding:'0px',margin: '2px 0px 0px'}}
+                value={standard_answer[0]?JSON.parse(standard_answer[0]):""}
+                // showUploadImage={this.handleShowUploadImage}
+                />}
+            </React.Fragment>
             }
 
         </div>
       )
     }
 }
-// RouteHOC()
+
 export default (MainDisplay);
\ No newline at end of file
diff --git a/public/react/src/modules/courses/exercise/new/NullDisplay.js b/public/react/src/modules/courses/exercise/new/NullDisplay.js
index f84daf193..8f4d1bd7b 100644
--- a/public/react/src/modules/courses/exercise/new/NullDisplay.js
+++ b/public/react/src/modules/courses/exercise/new/NullDisplay.js
@@ -1,24 +1,7 @@
 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 { qNameArray } from './common'
-import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder';
+import {QuillForEditor,MarkdownToHtml} from 'educoder';
 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{
   constructor(props){
@@ -31,7 +14,7 @@ class NullDisplay extends Component{
     }
   }
   componentDidMount = () => {
-    const Id = this.props.match.params.Id    
+    const Id = this.props.match.params.Id
     this.isEdit = !!Id
     if (Id) {
       const url = `/exercises/${Id}/edit.json`
@@ -47,16 +30,10 @@ class NullDisplay extends Component{
     }
   }
   render() {
-    let { question_title, question_score, question_type, question_choices, standard_answer,
-        question_id, question_number, index, displayCount,
-        multi_count
+    let { question_type, standard_answer,
+        question_id,index,
      } = 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}`;
     /**
     is_ordered: true
@@ -68,8 +45,7 @@ class NullDisplay extends Component{
     question_type: 3
     standard_answer: [{choice_id: 1, answer_text: ["2", "22"]}]
      */
-    let length = 5;
-    const qName = qNameArray[question_type]
+
     return(
         <div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}>
             <style>{`
@@ -98,31 +74,32 @@ class NullDisplay extends Component{
             `}</style>
 
             <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">
-                { 
+                {
                     standard_answer.map((answers, _index) => {
                         return <div className="df answerRow" key={_index}>
                             <span className="lineh-40">答案（填空{_index+1}）：</span>
                             <div className="answers">
                                 { answers.answer_text.map((item, itemIndex) => {
-                                    return <MarkdownToHtml 
+                                    return(
+                                      this.props.exercise&&this.props.exercise.is_md?<MarkdownToHtml
                                         className="answer" key={itemIndex}
-                                        content={item} selector={'null_' + (index + 1) + (_index + 1) + (itemIndex + 1)}     
-                                    ></MarkdownToHtml>
+                                        content={item} selector={'null_' + (index + 1) + (_index + 1) + (itemIndex + 1)}
+                                      ></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>
       )
diff --git a/public/react/src/modules/courses/exercise/new/QestionDisplayHeader.js b/public/react/src/modules/courses/exercise/new/QestionDisplayHeader.js
index c90d87dac..4dc8370d3 100644
--- a/public/react/src/modules/courses/exercise/new/QestionDisplayHeader.js
+++ b/public/react/src/modules/courses/exercise/new/QestionDisplayHeader.js
@@ -1,17 +1,8 @@
 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 {Tooltip} from 'antd';
 import { qNameArray } from './common'
-import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder';
-const { TextArea } = Input;
-const confirm = Modal.confirm;
-const $ = window.$
-const { Option } = Select;
+import {QuillForEditor, MarkdownToHtml} from 'educoder';
+
 
 class QestionDisplayHeader extends Component{
   constructor(props){
@@ -19,24 +10,26 @@ class QestionDisplayHeader extends Component{
 
 
     this.state = {
-        
+
     }
   }
   componentDidMount = () => {
-      
+
   }
   render() {
-    let { question_title, question_score, question_type, question_choices, standard_answer,
-        question_id, question_number, index, displayCount,
+    let { question_title, question_score, question_type,
+        question_id, index, displayCount,
         topRight, showActionButton, exerciseIsPublish
      } = this.props;
-     
-    const isAdmin = this.props.isAdmin()
-    const courseId=this.props.match.params.coursesId;
-    const isEdit = this.isEdit
-    const qNumber = `question_${index}`;
-    
+
+    // const isAdmin = this.props.isAdmin()
+    // const courseId=this.props.match.params.coursesId;
+    // const isEdit = this.isEdit
+    // const qNumber = `question_${index}`;
+
     const qName = qNameArray[question_type]
+
+    // console.log(this.props)
     return(
         <React.Fragment>
         <div className="new_li">
@@ -44,6 +37,9 @@ class QestionDisplayHeader extends Component{
             .actionBtns {
                 height: 28px
             }
+             .ql-editor{
+               padding:0px !important;
+              }
             `}</style>
             <div className="font-16 fl">
                 <span className="color-blue">{index+1}、{qName}</span>
@@ -80,11 +76,16 @@ class QestionDisplayHeader extends Component{
                 </React.Fragment>}
             </div>
         </div>
-        { question_title && 
-         <MarkdownToHtml content={question_title} selector={'qtitle_' + (index + 1)} style={{ display: 'inline-block', width:'100%' , margin: '10px 0px 15px' }}
-            
-         ></MarkdownToHtml>
-        //  <div className="markdown-body" dangerouslySetInnerHTML={{__html: markdownToHTML1(question_title)}} 
+        { question_title &&
+        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>:<QuillForEditor
+          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>
           }
         </React.Fragment>
diff --git a/public/react/src/modules/courses/exercise/new/ShixunDisplay.js b/public/react/src/modules/courses/exercise/new/ShixunDisplay.js
index e26a00791..f7bccec60 100644
--- a/public/react/src/modules/courses/exercise/new/ShixunDisplay.js
+++ b/public/react/src/modules/courses/exercise/new/ShixunDisplay.js
@@ -1,25 +1,7 @@
 import React,{ Component } from "react";
-import {Link} from 'react-router-dom';
-
-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 {QuillForEditor,markdownToHTML} from 'educoder';
 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{
   constructor(props){
@@ -32,17 +14,17 @@ class ShixunDisplay extends Component{
   componentDidMount = () => {
   }
   render() {
-    let { question_title, question_score, question_type, standard_answer,
-        question_id, question_number, index, displayCount,
+    let { question_title,
+        question_id, index,
 
-        shixun_name, shixun, shixun_id, shixun_identifier
+        shixun_name, shixun, shixun_identifier
      } = this.props;
-    
+
     // const { getFieldDecorator } = this.props.form;
 
-    const isAdmin = this.props.isAdmin()
-    const courseId=this.props.match.params.coursesId;
-    const isEdit = this.isEdit
+    // const isAdmin = this.props.isAdmin()
+    // const courseId=this.props.match.params.coursesId;
+    // const isEdit = this.isEdit
     const qNumber = `question_${index}`;
     // TODO show模式  isNew为false isEdit为false
 
@@ -102,8 +84,8 @@ class ShixunDisplay extends Component{
             ]
         }
      */
-    let length = 5;
-    const qName = qNameArray[question_type]
+    // let length = 5;
+    // const qName = qNameArray[question_type]
     return(
         <div className="bor-bottom-greyE padding20-30" id={qNumber} _id={question_id}>
             <style>{`
@@ -121,12 +103,17 @@ class ShixunDisplay extends Component{
                     >实训详情</a>
                 }
             ></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)}}
             >
-            </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) => {
                 return <div>
diff --git a/public/react/src/modules/courses/exercise/new/ShixunProgramming.js b/public/react/src/modules/courses/exercise/new/ShixunProgramming.js
new file mode 100644
index 000000000..cf8967b58
--- /dev/null
+++ b/public/react/src/modules/courses/exercise/new/ShixunProgramming.js
@@ -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);
diff --git a/public/react/src/modules/courses/exercise/new/SingleDisplay.js b/public/react/src/modules/courses/exercise/new/SingleDisplay.js
index 6b84df8ce..1a56fde96 100644
--- a/public/react/src/modules/courses/exercise/new/SingleDisplay.js
+++ b/public/react/src/modules/courses/exercise/new/SingleDisplay.js
@@ -1,31 +1,13 @@
 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 { Radio,  Checkbox } from 'antd';
 import QestionDisplayHeader from './QestionDisplayHeader'
-import {getUrl, ActionBtn, markdownToHTML, MarkdownToHtml} from 'educoder';
-const { TextArea } = Input;
-const confirm = Modal.confirm;
-const $ = window.$
-const { Option } = Select;
+import {MarkdownToHtml,QuillForEditor} from 'educoder';
 
 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'
 ]
-const qNameArray = [
-    '单选题',
-    '多选题',
-    '判断题',
-    '填空题',
-    '简答题',
-    '实训题',
-]
 class SingleDisplay extends Component{
   constructor(props){
     super(props);
@@ -53,25 +35,15 @@ class SingleDisplay extends Component{
     }
   }
   render() {
-    let { question_title, question_score, question_type, question_choices, standard_answer,
-        question_id, question_number, index, displayCount, showActionButton
+    let {   question_type, question_choices,
+        question_id, index,
      } = 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}`;
     // 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(
         <div className="bor-bottom-greyE padding20-30 singleDisplay" id={qNumber} _id={question_id}>
@@ -85,6 +57,9 @@ class SingleDisplay extends Component{
               .actionBtns {
                   height: 28px
               }
+              .ql-editor{
+               padding:0px !important;
+              }
             `}</style>
 
             <QestionDisplayHeader {...this.props}></QestionDisplayHeader>
@@ -103,11 +78,15 @@ class SingleDisplay extends Component{
 													flexDirection:"row",
 												}} key={optionIndex}>
                             <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>)
                   } else {
 
@@ -117,11 +96,15 @@ class SingleDisplay extends Component{
 													flexDirection:"row",
 												}} key={optionIndex}>
                             <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>)
                   }
                 })}
@@ -131,5 +114,5 @@ class SingleDisplay extends Component{
       )
     }
 }
-// RouteHOC()
+
 export default (SingleDisplay);