diff --git a/public/react/config/webpack.config.dev.js b/public/react/config/webpack.config.dev.js index 11cfc1962..80973be75 100644 --- a/public/react/config/webpack.config.dev.js +++ b/public/react/config/webpack.config.dev.js @@ -29,7 +29,7 @@ const env = getClientEnvironment(publicUrl); module.exports = { // You may want 'eval' instead if you prefer to see the compiled output in DevTools. // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.s - // devtool: "source-map", // 开启调试 + devtool: "source-map", // 开启调试 // These are the "entry points" to our application. // This means they will be the "root" imports that are included in JS bundle. // The first two entry points enable "hot" CSS and auto-refreshes for JS. diff --git a/public/react/config/webpackDevServer.config.js b/public/react/config/webpackDevServer.config.js index 0eb313cbe..f12d31594 100644 --- a/public/react/config/webpackDevServer.config.js +++ b/public/react/config/webpackDevServer.config.js @@ -62,7 +62,7 @@ module.exports = function(proxy, allowedHost) { publicPath: config.output.publicPath, // WebpackDevServer is noisy by default so we emit custom message instead // by listening to the compiler events with `compiler.plugin` calls above. - quiet: false, + quiet: true, // Reportedly, this avoids CPU overload on some systems. // https://github.com/facebookincubator/create-react-app/issues/293 // src/node_modules is not ignored to support absolute imports diff --git a/public/react/src/common/SnackbarHOC.js b/public/react/src/common/SnackbarHOC.js index 1fd1407dd..a59607bf4 100644 --- a/public/react/src/common/SnackbarHOC.js +++ b/public/react/src/common/SnackbarHOC.js @@ -1,63 +1,72 @@ -import React, { Component } from 'react'; -import Snackbar from 'material-ui/Snackbar'; -import Fade from 'material-ui/transitions/Fade'; - -export function SnackbarHOC(options = {}) { - return function wrap(WrappedComponent) { - return class Wrapper extends Component { - constructor(props) { - super(props); - this.showSnackbar = this.showSnackbar.bind(this) - this.state = { - snackbarText: '', - snackbarOpen: false, - } - } - - handleSnackbarClose() { - this.setState({ - snackbarOpen: false, - snackbarVertical: '', - snackbarHorizontal: '', - }) - } - - // 全局的snackbar this.props.showSnackbar调用即可 - showSnackbar(text, vertical, horizontal) { - this.setState({ - snackbarOpen: true, - snackbarText: text, - snackbarVertical: vertical, - snackbarHorizontal: horizontal, - }) - } - render() { - const { snackbarOpen, snackbarText, snackbarHorizontal, snackbarVertical } = this.state; - - - return ( - - this.handleSnackbarClose()} - transition={Fade} - SnackbarContentProps={{ - 'aria-describedby': 'message-id', - }} - resumeHideDuration={2000} - message={{this.state.snackbarText}} - /> - - - - - ) - } - } - } +import React, { Component } from 'react'; +import Snackbar from 'material-ui/Snackbar'; +import Fade from 'material-ui/transitions/Fade'; +import { notification } from 'antd' +export function SnackbarHOC(options = {}) { + return function wrap(WrappedComponent) { + return class Wrapper extends Component { + constructor(props) { + super(props); + this.showSnackbar = this.showSnackbar.bind(this) + this.state = { + snackbarText: '', + snackbarOpen: false, + } + } + + handleSnackbarClose() { + this.setState({ + snackbarOpen: false, + snackbarVertical: '', + snackbarHorizontal: '', + }) + } + + // 全局的snackbar this.props.showSnackbar调用即可 + showSnackbar(description, message = "提示",icon) { + // this.setState({ + // snackbarOpen: true, + // snackbarText: text, + // snackbarVertical: vertical, + // snackbarHorizontal: horizontal, + // }) + const data = { + message, + description + } + if (icon) { + data.icon = icon; + } + notification.open(data); + } + + render() { + const { snackbarOpen, snackbarText, snackbarHorizontal, snackbarVertical } = this.state; + + + return ( + + this.handleSnackbarClose()} + transition={Fade} + SnackbarContentProps={{ + 'aria-describedby': 'message-id', + }} + resumeHideDuration={2000} + message={{this.state.snackbarText}} + /> + + + + + ) + } + } + } } \ No newline at end of file diff --git a/public/react/src/modules/tpm/challengesnew/TPMquestion.js b/public/react/src/modules/tpm/challengesnew/TPMquestion.js index aba4743d9..d05cc086e 100644 --- a/public/react/src/modules/tpm/challengesnew/TPMquestion.js +++ b/public/react/src/modules/tpm/challengesnew/TPMquestion.js @@ -14,7 +14,11 @@ import './css/TPMchallengesnew.css'; import {getUrl} from 'educoder'; -import TPMeditorMD from './editorMD'; +import TpmQuestionMain from './TpmQuestionMain'; + +import TpmQuestionNew from './TpmQuestionNew'; + +import TpmQuestionEdit from './TpmQuestionEdit'; let origin = getUrl(); @@ -31,127 +35,15 @@ for (var i = 65, j = 0; i < 91; i++, j++) { letterArr[j] = String.fromCharCode(i); } -// 恢复数据 -function md_rec_data(k,mdu,id, editor){ - if(window.sessionStorage.getItem(k+mdu) !== null){ - editor.setValue(window.sessionStorage.getItem(k+mdu)); - md_clear_data(k,mdu,id); - } -} - -// 保存数据 -function md_add_data(k,mdu,d){ - window.sessionStorage.setItem(k+mdu,d); -} - -// 清空保存的数据 -function md_clear_data(k,mdu,id){ - window.sessionStorage.removeItem(k+mdu); - var id1 = "#e_tip_"+id; - var id2 = "#e_tips_"+id; - if(k == 'content'){ - $(id2).html(""); - }else{ - $(id1).html(""); - } -} - -function md_elocalStorage(editor,mdu,id){ - - if (window.sessionStorage){ - var oc = window.sessionStorage.getItem('content'+mdu); - if(oc !== null ){ - // console.log("#e_tips_"+id) - $("#e_tips_"+id).data('editor', editor); - var h = '您上次有已保存的数据，是否恢复 ? / 不恢复'; - $("#e_tips_"+id).html(h); - } - setInterval(function() { - var d = new Date(); - var h = d.getHours(); - var m = d.getMinutes(); - var s = d.getSeconds(); - h = h < 10 ? '0' + h : h; - m = m < 10 ? '0' + m : m; - s = s < 10 ? '0' + s : s; - if(editor.getValue().trim() != ""){ - md_add_data("content",mdu,editor.getValue()); - var id1 = "#e_tip_"+id; - var id2 = "#e_tips_"+id; - - $(id1).html(" 数据已于 " + h + ':' + m + ':' + s +" 保存 "); - $(id2).html(""); - } - },10000); - - }else{ - $("#e_tip_"+id).after('您的浏览器不支持localStorage.无法开启自动保存草稿服务,请升级浏览器！'); - } -} - -function create_editorMD(id, width, high, placeholder, imageUrl,initValue, callback) { - var editorName = window.editormd(id, { - width: width, - height: high, - path: path, // "/editormd/lib/" - markdown : initValue, - syncScrolling: "single", - tex: true, - tocm: true, - emoji: true, - taskList: true, - codeFold: true, - searchReplace: true, - htmlDecode: "style,script,iframe", - sequenceDiagram: true, - autoFocus: false, - placeholder: placeholder, - toolbarIcons: function () { - // Or return editormd.toolbarModes[name]; // full, simple, mini - // Using "||" set icons align right. - return ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "|", "testIcon", "testIcon1", '|', "image", "table", '|', "watch", "clear"] - }, - toolbarCustomIcons: { - testIcon: "
", - testIcon1: "
" - }, - //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。 - saveHTMLToTextarea: true, - // 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标 - dialogMaskOpacity: 0.6, - imageUpload: true, - imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"], - imageUploadURL: imageUrl,//url - onload: function () { - // this.previewing(); - $("#" + id + " [type=\"latex\"]").bind("click", function () { - editorName.cm.replaceSelection("```latex"); - editorName.cm.replaceSelection("\n"); - editorName.cm.replaceSelection("\n"); - editorName.cm.replaceSelection("```"); - var __Cursor = editorName.cm.getDoc().getCursor(); - editorName.cm.setCursor(__Cursor.line - 1, 0); - }); - - $("#" + id + " [type=\"inline\"]").bind("click", function () { - editorName.cm.replaceSelection("$$$$"); - var __Cursor = editorName.cm.getDoc().getCursor(); - editorName.cm.setCursor(__Cursor.line, __Cursor.ch - 2); - editorName.cm.focus(); - }); - $("[type=\"inline\"]").attr("title", "行内公式"); - $("[type=\"latex\"]").attr("title", "多行公式"); - - callback && callback() - } - }); - return editorName; -} - export default class TPMquestion extends Component { constructor(props) { super(props) + this.contentMdRef = React.createRef(); + this.newquestioMDMdRef = React.createRef(); + this.newquestioMDMdCont=React.createRef(); + this.neweditanswerRef=React.createRef(); + this.editanswersRef=React.createRef(); this.state = { choice_url: undefined, practice_url: undefined, @@ -159,7 +51,7 @@ export default class TPMquestion extends Component { position: undefined, task_pass_default: undefined, submit_url: undefined, - questionInputvalue:undefined, + questionsInputvalue:undefined, questionaddsum:0, questionaddarray:[], questionaddtype:true, @@ -193,157 +85,14 @@ export default class TPMquestion extends Component { sumittype:false } } -questioMD=(initValue, id)=> { - - this.contentChanged = false; - const placeholder = "请输入选择题的过关任务内容"; -// amp; -// 编辑时要传memoId - // const imageUrl = `/upload_with_markdown?container_id=&container_type=Memo`; - const imageUrl = `/api/attachments.json`; -// 创建editorMd - - let questio_editormd = create_editorMD(id, '100%', 400, placeholder, imageUrl, initValue,() => { - setTimeout(() => { - questio_editormd.resize() - questio_editormd.cm && questio_editormd.cm.refresh() - }, 500) - - if (initValue != undefined) { - questio_editormd.setValue(initValue) - } - questio_editormd.cm.on("change", (_cm, changeObj) => { - console.log('....contentChanged') - this.contentChanged = true; - }) - }); - md_elocalStorage(questio_editormd, `MemoQuestion_${id}`, `${id}Question`); - this.questio_editormd = questio_editormd; - window.questio_editormd = questio_editormd; - -} - -newanswerMD=(initValue, id)=> { - - this.contentChanged = false; -// amp; -// 编辑时要传memoId - const imageUrl = `/api/attachments.json`; -// 创建editorMd - let newanswerMD_editormd = create_editorMD(id, '100%', 400, "请输入各个选项的具体解析或其他相关信息", imageUrl, initValue,() => { - setTimeout(() => { - newanswerMD_editormd.resize() - newanswerMD_editormd.cm && newanswerMD_editormd.cm.refresh() - }, 500) - if (initValue != undefined) { - newanswerMD_editormd.setValue(initValue) - } - newanswerMD_editormd.cm.on("change", (_cm, changeObj) => { - console.log('....contentChanged') - this.contentChanged = true; - }) - }); - - md_elocalStorage(newanswerMD_editormd, `MemoQuestion_${id}`, `${id}Question`); - - this.newanswerMD_editormd = newanswerMD_editormd; - window.newanswerMD_editormd = newanswerMD_editormd; - -} - -newquestioMD=(initValue, id)=>{ - this.contentChanged = false; -// amp; -// 编辑时要传memoId - const imageUrl = `/api/attachments.json`; -// 创建editorMd - - let newquestioMD_editormd = create_editorMD(id, '100%', 400, "请输入选择题的题干内容", imageUrl, initValue,() => { - setTimeout(() => { - newquestioMD_editormd.resize() - newquestioMD_editormd.cm && newquestioMD_editormd.cm.refresh() - }, 500) - - if (initValue != undefined) { - newquestioMD_editormd.setValue(initValue) - } - newquestioMD_editormd.cm.on("change", (_cm, changeObj) => { - console.log('....contentChanged') - this.contentChanged = true; - }) - }); - md_elocalStorage(newquestioMD_editormd, `MemoQuestion_${id}`, `${id}Question`); - this.newquestioMD_editormd = newquestioMD_editormd; - window.newquestioMD_editormd = newquestioMD_editormd; - -} - -editanswerMD=(initValue, id)=> { - - this.contentChanged = false; - const placeholder = ""; -// amp; -// 编辑时要传memoId - const imageUrl = `/api/attachments.json`; -// 创建editorMd - - const neweditanswer_editormd =create_editorMD(id, '100%', 400, "请输入选择题的题干内容", imageUrl, initValue,()=> { - setTimeout(() => { - neweditanswer_editormd.resize() - neweditanswer_editormd.cm && neweditanswer_editormd.cm.refresh() - }, 500) - - if (initValue != undefined) { - neweditanswer_editormd.setValue(initValue) - } - neweditanswer_editormd.cm.on("change", (_cm, changeObj) => { - console.log('....contentChanged') - this.contentChanged = true; - }) - }); - md_elocalStorage(neweditanswer_editormd, `MemoQuestion_${id}`, `${id}Question`); - this.neweditanswer_editormd = neweditanswer_editormd; - window.neweditanswer_editormd = neweditanswer_editormd; - -} - -editanswersMD=(initValue, id)=> { - - this.contentChanged = false; - const placeholder = ""; -// amp; -// 编辑时要传memoId - const imageUrl = `/api/attachments.json`; -// 创建editorMd - - const editanswersMD_editormd = create_editorMD(id, '100%', 400, "请输入各个选项的具体解析或其他相关信息", imageUrl, initValue,() => { - setTimeout(() => { - editanswersMD_editormd.resize() - editanswersMD_editormd.cm && editanswersMD_editormd.cm.refresh() - }, 500) - - if (initValue != undefined) { - editanswersMD_editormd.setValue(initValue) - } - editanswersMD_editormd.cm.on("change", (_cm, changeObj) => { - console.log('....contentChanged') - this.contentChanged = true; - }) - }); - md_elocalStorage(editanswersMD_editormd, `MemoQuestion_${id}`, `${id}Question`); - this.editanswersMD_editormd = editanswersMD_editormd; - window.editanswersMD_editormd = editanswersMD_editormd; - -} - - //_______________________________________________________________________________ questionInputvalue=(e)=>{ this.setState({ - questionInputvalue: e.target.value + questionsInputvalue: e.target.value }) } + componentDidMount() { if(this.props.status===2){ @@ -380,18 +129,15 @@ editanswersMD=(initValue, id)=> { }) if (response.data.status === 403||response.data.status === 401||response.data.status === 500) { - this.questioMD("", "questioMD"); - this.setState({ - questioMD:"" + contentMdRefval:"" }) } else { - this.questioMD("", "questioMD"); - // this.create_mackdown(response.data.task_pass_default, "questioMD","") this.setState({ - questioMD:response.data.task_pass_default + contentMdRefval:response.data.task_pass_default }) + this.contentMdRef.current.setValue(response.data.task_pass_default || '') } this.shixunsautoHeight() } @@ -404,13 +150,6 @@ editanswersMD=(initValue, id)=> { //编辑模式 let url = "/shixuns/"+ id +"/challenges/"+checkpointId+"/edit.json?st=1" axios.get(url).then((response) => { - // if(choose_idlist!=undefined){ - // - // for(var i=0; i { activetype:"first", prev_challenge:newprev_challenge, next_challenge:next_challenge, - questionInputvalue:response.data.subject, + questionsInputvalue:response.data.subject, questionaddarray:response.data.chooses, challenge_id:response.data.id, mancheckpointId:checkpointId, @@ -449,11 +188,15 @@ editanswersMD=(initValue, id)=> { answer:response.data.answer }) - this.questioMD(response.data.task_pass, "questioMD"); + + this.setState({ + contentMdRefval:response.data.task_pass + }) + this.contentMdRef.current.setValue(response.data.task_pass || '') if(response.data.chooses.length===0){ this.questionadd() } - // this.create_mackdown(response.data.task_pass, "questioMD","","questio_editormd") + this.shixunsautoHeight() } @@ -472,13 +215,6 @@ editanswersMD=(initValue, id)=> { let id = this.props.match.params.shixunId; let url = "/shixuns/"+ id +"/challenges/"+checkpointId+"/edit.json?st=1" axios.get(url).then((response) => { - // if(choose_idlist!=undefined){ - // - // for(var i=0; i { newquestionaddtype:false, prev_challenge:newprev_challenge, next_challenge:next_challenge, - questionInputvalue:response.data.subject, + questionsInputvalue:response.data.subject, questionaddarray:response.data.chooses, challenge_id:response.data.id, mancheckpointId:checkpointId, @@ -515,11 +251,14 @@ editanswersMD=(initValue, id)=> { questioMD:response.data.task_pass, }) - this.questioMD(response.data.task_pass, "questioMD"); + + this.setState({ + contentMdRefval:response.data.task_pass + }) + this.contentMdRef.current.setValue(response.data.task_pass || '') if(response.data.chooses.length===0){ this.questionadd() } - // this.create_mackdown(response.data.task_pass, "questioMD","","questio_editormd") this.shixunsautoHeight() } @@ -549,12 +288,13 @@ editanswersMD=(initValue, id)=> { challenge_choose_id:this.props.match.params.choose_id, standard_answer:response.data.standard_answer, subject:response.data.subject, - answer:response.data.answer + answer:response.data.answer, + neweditanswerRefval:response.data.subject, + editanswersRefval:response.data.answer, }) - this.editanswerMD(response.data.subject, "neweditanswer") - - this.editanswersMD(response.data.answer, "editanswers") + this.neweditanswerRef.current.setValue(response.data.subject||'') + this.editanswersRef.current.setValue(response.data.answer||'') this.shixunsautoHeight() } @@ -578,11 +318,12 @@ editanswersMD=(initValue, id)=> { }) return } - let {questionInputvalue} =this.state; - const exercise_editormdvalue = this.questio_editormd.getValue(); + let {questionsInputvalue} =this.state; + // const exercise_editormdvalue = this.questio_editormd.getValue(); + const exercise_editormdvalue = this.contentMdRef.current.getValue().trim(); let id = this.props.match.params.shixunId; - if(questionInputvalue===undefined||questionInputvalue===null||questionInputvalue===""){ + if(questionsInputvalue===undefined||questionsInputvalue===null||questionsInputvalue===""){ this.setState({ questionInputvaluetype:true }) @@ -614,7 +355,7 @@ editanswersMD=(initValue, id)=> { axios.post(url, { identifier:id, - subject: questionInputvalue, + subject: questionsInputvalue, task_pass: exercise_editormdvalue, st: 1 }).then((response) => { @@ -637,7 +378,7 @@ editanswersMD=(initValue, id)=> { let url ="/shixuns/"+id+"/challenges/"+checkpointId+".json"; axios.put(url, { tab:0, - subject: questionInputvalue, + subject: questionsInputvalue, task_pass: exercise_editormdvalue, }).then((response) => { if(response.data.status===1){ @@ -659,13 +400,12 @@ editanswersMD=(initValue, id)=> { } questionall=()=>{ - let {task_pass_default}=this.state; this.setState({ activetype:"first", newquestionaddtype:false, - editquestionaddtype:false + editquestionaddtype:false, + questionaddtype:false }) - this.questioMD(task_pass_default, "questioMD"); } questionadd=()=>{ $('html').animate({ @@ -675,11 +415,21 @@ editanswersMD=(initValue, id)=> { let questionaddsums=questionaddarray.length; - if(questionaddarray.length-1>9){ + if(questionaddsums-1>9){ + this.props.showSnackbar("选择题目最大支持设置9道题") return } let questionaddarrays=questionaddarray; + + questionaddarrays.map((item,key)=>{ + if(item.choose_id===0){ + questionaddarrays.splice(key,1) + } + }) + + + questionaddarrays.push({type:0,choose_id:0}); this.setState({ activetype:0, @@ -692,14 +442,19 @@ editanswersMD=(initValue, id)=> { answeoptions:[10,20], answeonshixunsmark:10, shixunssanswerkillvalue:"", - shixunsskillanswerlist:[] + shixunsskillanswerlist:[], + contentMdRefval:"", + newquestioMDMdContval:"" }) - this.newanswerMD("","challenge_choose_answer") - this.newquestioMD("","newquestioMDs") - // this.create_mackdown("", "newquestioMDs","请输入选择题的题干内容","newanswerMD_editormd") - // this.create_mackdown("", "challenge_choose_answer","请输入各个选项的具体解析或其他相关信息","newquestioMD_editormd") - this.shixunsautoHeight() + + // setTimeout(() => { + // this.newquestioMDMdCont.current.setValue('') + // this.newquestioMDMdRef.current.setValue('') + // + // }, 2000) + + this.shixunsautoHeight() } editquestionlists=(newquestionlists)=>{ @@ -834,7 +589,6 @@ editanswersMD=(initValue, id)=> { } answer_subit=(sumtype,challenge_choose_id)=>{ - let {challenge_id,questionlists,shixunsskillanswerlist,answeonshixunsmark,answeshixunsGroup,questionaddarray} =this.state; if(challenge_id===undefined){ message.error("关卡id为空"); @@ -924,9 +678,7 @@ editanswersMD=(initValue, id)=> { let id = this.props.match.params.shixunId; let url; if(sumtype==="edit"){ - let newquestioMDvalue = this.neweditanswer_editormd.getValue(); - - + let newquestioMDvalue = this.neweditanswerRef.current.getValue().trim(); if(newquestioMDvalue===""||newquestioMDvalue==="请输入选择题的题干内容"){ this.setState({ newquestioMDvaluetype:true, @@ -938,21 +690,13 @@ editanswersMD=(initValue, id)=> { return } - let newnewanswerMDvalue = this.editanswersMD_editormd.getValue(); + + let newnewanswerMDvalue = this.editanswersRef.current.getValue().trim(); console.log(newnewanswerMDvalue) if(newnewanswerMDvalue===""||newnewanswerMDvalue===" "){ newnewanswerMDvalue=newlist } - // if(newnewanswerMDvalue===""||newnewanswerMDvalue==="请输入选择题的题干内容"){ - // this.setState({ - // newquestioMDvaluetypes:true, - // }) - // $('html').animate({ - // scrollTop:1300 - // }, 200); - // this.props.showSnackbar("参考答案为空"); - // return - // } + url="/shixuns/" + id + "/challenges/" + challenge_id + "/update_choose_question.json?choose_id="+challenge_choose_id; axios.post(url, { challenge_choose: {subject: newquestioMDvalue, answer: newnewanswerMDvalue, standard_answer:newlist, score: answeonshixunsmark, difficult: answeshixunsGroup}, @@ -976,8 +720,8 @@ editanswersMD=(initValue, id)=> { console.log(error) }); }else{ - let newquestioMDvalue = this.newquestioMD_editormd.getValue(); + let newquestioMDvalue = this.newquestioMDMdRef.current.getValue().trim(); if(newquestioMDvalue===""||newquestioMDvalue==="请输入选择题的题干内容"){ this.setState({ newquestioMDvaluetype:true, @@ -988,19 +732,8 @@ editanswersMD=(initValue, id)=> { message.error("题干为空"); return } - let newnewanswerMDvalue = this.newanswerMD_editormd.getValue(); - // - // if(newnewanswerMDvalue===""||newnewanswerMDvalue==="请输入选择题的题干内容"){ - // this.setState({ - // newquestioMDvaluetypes:true, - // }) - // - // $('html').animate({ - // scrollTop:1300 - // }, 200); - // this.props.showSnackbar("参考答案为空"); - // return - // } + let newnewanswerMDvalue = this.newquestioMDMdCont.current.getValue().trim(); + if(newnewanswerMDvalue===""||newnewanswerMDvalue===" "){ newnewanswerMDvalue=newlist } @@ -1042,39 +775,7 @@ editanswersMD=(initValue, id)=> { } - // getanswer_subitlist=()=>{ - // let{challenge_choose_id,challenge_id,questionaddarray} =this.state - // let id = this.props.match.params.shixunId; - // let url ='/shixuns/'+id+'/challenges/'+challenge_id+'/edit_choose_question.json?choose_id='+challenge_choose_id; - // axios.get(url).then((response) => { - // if(response.status===200){ - // this.create_mackdown(response.data.subject, "neweditanswer","","neweditanswer_editormd") - // this.create_mackdown(response.data.standard_answer, "editanswers","","editanswersMD_editormd") - // let choose_contents=response.data.choose_contents; - // let newchoose_contentslist=[] - // for(var i=0; i { - // }); - // } - questionlist=(key,challenge_choose_id,type)=>{ - $('html').animate({ scrollTop:10 }, 500); @@ -1083,8 +784,9 @@ editanswersMD=(initValue, id)=> { if(challenge_choose_id===""||type===0){ - this.newanswerMD("","neweditanswer") - this.editanswersMD("","editanswers") + + // this.neweditanswerRef.current.setValue('') + // this.editanswersRef.current.setValue('') this.setState({ activetype:challenge_choose_id, editquestionaddtype:true, @@ -1095,12 +797,11 @@ editanswersMD=(initValue, id)=> { answeoptions:[10,20], answeonshixunsmark:10, shixunssanswerkillvalue:"", - shixunsskillanswerlist:[] + shixunsskillanswerlist:[], + neweditanswerRefval:'', + editanswersRefval:'' }) - // this.create_mackdown("", "newquestioMDs","请输入选择题的题干内容","newanswerMD_editormd") - // this.create_mackdown("", "challenge_choose_answer","请输入各个选项的具体解析或其他相关信息","newquestioMD_editormd") - }else{ let id = this.props.match.params.shixunId; let url ='/shixuns/'+id+'/challenges/'+challenge_id+'/edit_choose_question.json?choose_id='+challenge_choose_id; @@ -1125,13 +826,13 @@ editanswersMD=(initValue, id)=> { challenge_choose_id:challenge_choose_id, standard_answer:response.data.standard_answer, subject:response.data.subject, - answer:response.data.answer + answer:response.data.answer, + neweditanswerRefval:response.data.subject, + editanswersRefval:response.data.subject }) - this.editanswerMD(response.data.subject, "neweditanswer") - - this.editanswersMD(response.data.answer, "editanswers") - + this.neweditanswerRef.current.setValue(response.data.subject||'') + this.editanswersRef.current.setValue(response.data.answer||'') this.shixunsautoHeight() } @@ -1152,9 +853,7 @@ editanswersMD=(initValue, id)=> { if(elem.scrollHeight===0){ elem.style.height = 62 + 'px'; }else{ - // if(elem.style.height>140){ - // - // } + elem.style.height = elem.scrollHeight + 'px'; } @@ -1170,56 +869,30 @@ editanswersMD=(initValue, id)=> { } gochooseid=(url)=>{ - window.location.href =url - } - onshixunsmarks=()=> { - this.setState({ - marktype:true - }) - } - - onshixunsmarkss=()=> { - this.setState({ - marktype:false - }) + window.location.href =url + // this.props.history.replace( url ); + // this.props.history.push( url ); + // 返回 + // this.props.history.goBack(); } + render() { let {choice_url, practice_url, go_back_url, position, - questionInputvalue, - challenge_tagtype, - questionInputvaluetype, - answeshixunsGroup, answeoptions, - answeonshixunsmark, - shixunssanswerkillvalue, - questionlistss,power, questionaddarray, questionaddtype, activetype, newquestionaddtype, - newquestioMDvaluetype, editquestionaddtype, - questionlists, - shixunsskillanswerlist, - newcnttype, challenge_choose_id, - mancheckpointId, - challenge_id, - questioMD, - standard_answer, - subject, - newquestioMDvaluetypes, - questionInputvaluetypes, prev_challenge, next_challenge, - newcnttypesum, - marktype, answer, - sumittype + } = this.state; let options; @@ -1230,7 +903,6 @@ editanswersMD=(initValue, id)=> { ) }) - console.log(answer) return (
@@ -1261,9 +933,11 @@ editanswersMD=(initValue, id)=> {
-
  • - 本关任务 -
    • + +
  • + 本关任务 +
    • +     { questionaddarray.length===0?"":questionaddarray.map((item,key)=>{ @@ -1277,7 +951,7 @@ editanswersMD=(initValue, id)=> { item.choose_id!=0? this.gochooseid("/shixuns/"+this.props.match.params.shixunId+"/challenges/"+this.props.match.params.checkpointId+"/editquestion"+"/"+item.choose_id)}> {key+1}.{item.type===2?"多选题":item.type===1?"单选题":'选择题'} - :{key+1}.{item.type===2?"多选题":item.type===1?"单选题":'选择题'} + :activetype==="first"?"":{key+1}.{item.type===2?"多选题":item.type===1?"单选题":'选择题'} } @@ -1295,458 +969,57 @@ editanswersMD=(initValue, id)=> {
    -
    - -
    -
    -

    任务名称

    -
    - * -
    - -
    -
    - 必填项 -
    -
    -
    -
    - - -
    -

    过关任务

    -
    - * -
    -
    - -
    -
    -
    - {/**/} -
    -
    - 必填项 -
    -
    -

    -

    -
    - - -
    4||this.props.identity===undefined||power===false?"none":"block"}}> - 提交 - 取消 - -
    - -
    + {/*x选择题首页*/} + {activetype==="first"?this.questionInputvalue(e)} + clickquestionsumit={(e)=>this.clickquestionsumit(e)} + />:""} {/*新建*/} - {newquestionaddtype===true?
    - -
    -
    -

    题干

    -
    - * -
    -
    - {/**/} - {/*
    */} - {/*
    */} - {/**/} -
    - -
    - - -
    - 必填项 -
    - -
    -

    -

    - - -
    - { - questionlists===undefined||questionlists.length===0?"":questionlists.map((item,key)=>{ - return( -
  • - - - this.delquestionlists(key)}> - - - - - -
    • - ) - }) - } -

    - 新增选项 - - - {newcnttypesum===0?"请选择答案":"选项内容不能为空"} - -

    -
  • - - -
    • -
    -
    -
    - - -
    -
    -

    参考答案

    -
    -
    - {/**/} - {/*
    */} - {/*
    */} -
    - -
    - 必填项 -
    -
    -

    -

    - -
    -
    - -
    -

    难度系数

    -
    - - - 简单 - 中等 - 困难 - - -
    -

    奖励经验值

    -
    - * - - - -

    - 如果学员答题错误，则不能得到相应的经验值
    - 如果学员成功得到经验值，那么将同时获得等值的金币奖励，如：+10经验值、+10金币 -

    - - 必填项 -
    -
    - -
    -

    技能标签

    -
    - * -
    - - {/*+ 添加*/} -
    学员答题正确将获得技能，否则不能获得技能 - - 必填项 - -
    -
    - - { - shixunsskillanswerlist.length === 0 ? "" : shixunsskillanswerlist.map((itme, key) => { - return ( -
  • {itme} - this.delshixunssnswerllist(key)}>× -
    • - ) - }) - } - - -
    - -
    - -
    -
    - - -
    4||this.props.identity===undefined||power===false?"none":"block"}}> - 提交 - 取消 -
    - -
    :""} + {newquestionaddtype===true? + this.selquestionlists(key)} + onInputoquestionption={(e,key)=>this.onInputoquestionption(e,key)} + delquestionlists={(key)=>this.delquestionlists(key)} + addquestionlists={(e)=>this.addquestionlists(e)} + onshixunGroupanswe={(e)=>this.onshixunGroupanswe(e)} + onshixunsansweSelect={(e)=>this.onshixunsansweSelect(e)} + shixunssanswerkill={(e)=>this.shixunssanswerkill(e)} + clickshixunsanswerskill={(e)=>this.clickshixunsanswerskill(e)} + delshixunssnswerllist={(key)=>this.delshixunssnswerllist(key)} + answer_subit={()=>this.answer_subit()} + />:""} {/*修改*/} - {editquestionaddtype===true?
    - -
    -
    -

    题干

    -
    - * -
    -
    - -
    -
    -
    -
    - - -
    - 必填项 -
    - -
    -

    -

    -
    - { - questionlists===undefined||questionlists.length===0?"":questionlists.map((item,key)=>{ - return( -
  • - - - this.delquestionlists(key)}> - - -
    • - ) - }) - } -

    - 新增选项 - - - {newcnttypesum===0?"请选择答案":"选项内容不能为空"} - -

    -
  • - - -
    • -
    -
    -
    - - -
    -
    -

    参考答案

    -
    -
    - {/**/} - {/*
    */} - {/*
    */} -
    -
    - 必填项 -
    -
    -

    -

    -
    -
    - -
    -

    难度系数

    -
    - - - 简单 - 中等 - 困难 - - -
    -

    奖励经验值

    -
    - * - - - -

    - 如果学员答题错误，则不能得到相应的经验值
    - 如果学员成功得到经验值，那么将同时获得等值的金币奖励，如：+10经验值、+10金币 -

    - - 必填项 -
    -
    - -
    -

    技能标签

    -
    - * -
    - - {/*+ 添加*/} -
    学员答题正确将获得技能，否则不能获得技能 - - 必填项 - -
    -
    - - { - shixunsskillanswerlist.length === 0 ? "" : shixunsskillanswerlist.map((itme, key) => { - return ( -
  • {itme} - this.delshixunssnswerllist(key)}>× -
    • - ) - }) - } - - -
    - -
    - -
    -
    - - -
    4||this.props.identity===undefined||power===false?"none":"block"}}> - this.answer_subit("edit",challenge_choose_id)}>提交 - 取消 -
    - -
    + {editquestionaddtype===true? + this.selquestionlists(key)} + onInputoquestionption={(e,key)=>this.onInputoquestionption(e,key)} + delquestionlists={(key)=>this.delquestionlists(key)} + addquestionlists={(e)=>this.addquestionlists(e)} + onshixunGroupanswe={(e)=>this.onshixunGroupanswe(e)} + onshixunsansweSelect={(e)=>this.onshixunsansweSelect(e)} + shixunssanswerkill={(e)=>this.shixunssanswerkill(e)} + clickshixunsanswerskill={(e)=>this.clickshixunsanswerskill(e)} + delshixunssnswerllist={(key)=>this.delshixunssnswerllist(key)} + answer_subit={()=>this.answer_subit("edit",challenge_choose_id)} + /> :""}
    @@ -1755,4 +1028,3 @@ editanswersMD=(initValue, id)=> { } } - diff --git a/public/react/src/modules/tpm/challengesnew/TpmQuestionEdit.js b/public/react/src/modules/tpm/challengesnew/TpmQuestionEdit.js new file mode 100644 index 000000000..7de8529d7 --- /dev/null +++ b/public/react/src/modules/tpm/challengesnew/TpmQuestionEdit.js @@ -0,0 +1,220 @@ +import React, {Component} from 'react'; + +import {Input, Select, Radio, Checkbox, Popconfirm, message, Modal,Tooltip} from 'antd'; + +import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom"; + +import TPMMDEditor from '../../tpm/challengesnew/TPMMDEditor'; + +const Option = Select.Option; + +const RadioGroup = Radio.Group; + +export default class TpmQuestionEdit extends Component { + constructor(props) { + super(props) + this.state = { + + } + } + + componentDidMount() { + + } + + + render() { + console.log( this.props.questionlists) + return ( +
    + +
    +
    +

    题干

    +
    + * +
    + +
    + + +
    + 必填项 +
    + +
    +

    +

    +
    + { + this.props.questionlists===undefined||this.props.questionlists.length===0?"":this.props.questionlists.map((item,key)=>{ + return( +
  • + + + this.props.delquestionlists(key)}> + + +
    • + ) + }) + } +

    + this.props.addquestionlists()} + className="fl edu-default-btn edu-greyline-btn mb20 option_icon_add">新增选项 + + + {this.props.newcnttypesum===0?"请选择答案":"选项内容不能为空"} + +

    +
  • + + +
    • +
    +
    +
    + + +
    +
    +

    参考答案

    +
    +
    + +
    +
    + 必填项 +
    +
    +

    +

    +
    +
    + +
    +

    难度系数

    +
    + + this.props.onshixunGroupanswe(e)}> + 简单 + 中等 + 困难 + + +
    +

    奖励经验值

    +
    + * + + + +

    + 如果学员答题错误，则不能得到相应的经验值
    + 如果学员成功得到经验值，那么将同时获得等值的金币奖励，如：+10经验值、+10金币 +

    + + 必填项 +
    +
    + +
    +

    技能标签

    +
    + * +
    + this.props.shixunssanswerkill(e)} + value={this.props.shixunssanswerkillvalue} + onPressEnter={(e)=>this.props.clickshixunsanswerskill(e)} + onBlur={(e)=>this.props.clickshixunsanswerskill(e)} + /> + {/*+ 添加*/} +
    学员答题正确将获得技能，否则不能获得技能 + + 必填项 + +
    +
    + + { + this.props.shixunsskillanswerlist.length === 0 ? "" : this.props.shixunsskillanswerlist.map((itme, key) => { + return ( +
  • {itme} + this.props.delshixunssnswerllist(key)}>× +
    • + ) + }) + } + + +
    + +
    + +
    +
    + + +
    4||this.props.identity===undefined||this.props.power===false?"none":"block"}}> + this.props.answer_subit()}>提交 + 取消 +
    + +
    + + ) + } +} + + + diff --git a/public/react/src/modules/tpm/challengesnew/TpmQuestionMain.js b/public/react/src/modules/tpm/challengesnew/TpmQuestionMain.js new file mode 100644 index 000000000..2de04f56a --- /dev/null +++ b/public/react/src/modules/tpm/challengesnew/TpmQuestionMain.js @@ -0,0 +1,84 @@ +import React, {Component} from 'react'; + +import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom"; +import TPMMDEditor from '../../tpm/challengesnew/TPMMDEditor'; + + +export default class TpmQuestionMain extends Component { + constructor(props) { + super(props) + this.state = { + + } + } + + componentDidMount() { + + } + + + render() { + return ( +
    +
    +
    +

    任务名称

    +
    + * +
    + +
    +
    + 必填项 +
    +
    +
    +
    + + +
    +

    过关任务

    +
    + * +
    + +
    +
    + 必填项 +
    +
    +

    +

    +
    + + +
    4 || this.props.identity === undefined || this.props.power === false ? "none" : "block"}}> + 提交 + 取消 + +
    + +
    + + ) + } + } + + + diff --git a/public/react/src/modules/tpm/challengesnew/TpmQuestionNew.js b/public/react/src/modules/tpm/challengesnew/TpmQuestionNew.js new file mode 100644 index 000000000..76a540e0c --- /dev/null +++ b/public/react/src/modules/tpm/challengesnew/TpmQuestionNew.js @@ -0,0 +1,225 @@ +import React, {Component} from 'react'; + +import {Input, Select, Radio, Checkbox, Popconfirm, message, Modal,Tooltip} from 'antd'; + +import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom"; + +import TPMMDEditor from '../../tpm/challengesnew/TPMMDEditor'; + +const Option = Select.Option; + +const RadioGroup = Radio.Group; + +export default class TpmQuestionNew extends Component { + constructor(props) { + super(props) + this.state = { + + } + } + + componentDidMount() { + + } + + + render() { + console.log( this.props.questionlists) + return ( +
    + +
    +
    +

    题干

    +
    + * +
    + +
    + + +
    + 必填项 +
    + +
    +

    +

    + + +
    + { + this.props.questionlists===undefined||this.props.questionlists.length===0?"":this.props.questionlists.map((item,key)=>{ + return( +
  • + + + this.props.delquestionlists(key)}> + + + + + +
    • + ) + }) + } +

    + this.props.addquestionlists()} + className="fl edu-default-btn edu-greyline-btn mb20 option_icon_add">新增选项 + + + {this.props.newcnttypesum===0?"请选择答案":"选项内容不能为空"} + +

    +
  • + + +
    • +
    +
    +
    + + +
    +
    +

    参考答案

    +
    +
    + +
    +
    + 必填项 +
    +
    +

    +

    + +
    +
    + +
    +

    难度系数

    +
    + + this.props.onshixunGroupanswe(e)} + > + 简单 + 中等 + 困难 + + +
    +

    奖励经验值

    +
    + * + + + +

    + 如果学员答题错误，则不能得到相应的经验值
    + 如果学员成功得到经验值，那么将同时获得等值的金币奖励，如：+10经验值、+10金币 +

    + + 必填项 +
    +
    + +
    +

    技能标签

    +
    + * +
    + this.props.shixunssanswerkill(e)} + value={this.props.shixunssanswerkillvalue} + onPressEnter={(e)=>this.props.clickshixunsanswerskill(e)} + onBlur={(e)=>this.props.clickshixunsanswerskill(e)} + /> + {/*+ 添加*/} +
    学员答题正确将获得技能，否则不能获得技能 + + 必填项 + +
    +
    + + { + this.props.shixunsskillanswerlist.length === 0 ? "" : this.props.shixunsskillanswerlist.map((itme, key) => { + return ( +
  • {itme} + this.props.delshixunssnswerllist(key)}>× +
    • + ) + }) + } + + +
    + +
    + +
    +
    + + +
    4||this.props.identity===undefined||this.props.power===false?"none":"block"}}> + 提交 + 取消 +
    + +
    + + ) + } +} + + + diff --git a/public/react/src/modules/tpm/challengesnew/css/TPMchallengesnew.css b/public/react/src/modules/tpm/challengesnew/css/TPMchallengesnew.css index 5087e2f0d..37a65ef97 100644 --- a/public/react/src/modules/tpm/challengesnew/css/TPMchallengesnew.css +++ b/public/react/src/modules/tpm/challengesnew/css/TPMchallengesnew.css @@ -60,21 +60,21 @@ a{ #exercisememoMD .CodeMirror { margin-top: 31px !important; - height: 658px !important; + height: 370px !important; /*width: 579px !important;*/ } #exercisememoMD .editormd-preview { top: 40px !important; - height: 700px !important; + height: 370px !important; width: 578px !important; } #exercisememoMD{ - height: 700px !important; + /*height: 700px !important;*/ } #questioMD{ /*width: 95% !important;*/ - height: 586px !important; + height: 417px !important; margin-left: 0% !important; } @@ -82,13 +82,13 @@ a{ #questioMD .CodeMirror { /*width: 550.5px !important;*/ margin-top: 31px !important; - height: 550px !important; + height: 374px !important; } #questioMD .editormd-preview { top: 40px !important; - height: 550px !important; - width: 578px !important; + height: 375px !important; + width: 550px !important; } #newquestioMD .CodeMirror {