diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js index ed078b6555ec5cdb075a3f0206f11ac8e942f17b..86c00af088ac7789b527cbe3bb8cb9549f615de5 100644 --- a/editors/demo/src/HHMI/HHMI.js +++ b/editors/demo/src/HHMI/HHMI.js @@ -99,41 +99,53 @@ const initialContent = `<p class="paragraph"></p> </div>`; const Hhmi = () => { - const [submitted, isSubmitted] = useState(false); - const [readOnly, isReadOnly] = useState(false); - const [testMode, isTestMode] = useState(false); - const [content, setContent] = useState(initialContent); + const [stateProps, setStateProps] = useState({ + readOnly: false, + testMode: false, + submitted: false, + content: initialContent, + }); const normalQuestions = () => { - isReadOnly(false); - isTestMode(false); - isSubmitted(false); - setContent(editorRef.current.getContent()); + setStateProps({ + readOnly: false, + testMode: false, + submitted: false, + content: editorRef.current.getContent(), + }); }; const readOnlyQuestions = () => { - isReadOnly(true); - isTestMode(false); - isSubmitted(false); - setContent(editorRef.current.getContent()); + setStateProps({ + readOnly: true, + testMode: false, + submitted: false, + content: editorRef.current.getContent(), + }); }; const testModeQuestions = () => { - isReadOnly(true); - isTestMode(true); - isSubmitted(false); - setContent(editorRef.current.getContent()); + setStateProps({ + readOnly: true, + testMode: true, + submitted: false, + content: editorRef.current.getContent(), + }); }; const submitQuestions = () => { - isReadOnly(true); - isTestMode(false); - isSubmitted(true); - setContent(editorRef.current.getContent()); + setStateProps({ + readOnly: true, + testMode: false, + submitted: true, + content: editorRef.current.getContent(), + }); }; const editorRef = useRef(); + const { readOnly, testMode, submitted, content } = stateProps; + return ( <> <NormalButton isActive={!readOnly} onClick={normalQuestions}> @@ -158,7 +170,7 @@ const Hhmi = () => { ref={editorRef} customValues={{ showFeedBack: submitted, testMode }} fileUpload={file => renderImage(file)} - // value={content} + value={content} readonly={readOnly} layout={HhmiLayout} onChange={source => console.log(source)} diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js index 47ea3ed3a312e810c4dbe2ab4bd0c6e33cfa0d7b..71c67b37b93ab78f6ad00e4db30a1688f1794d62 100644 --- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js +++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js @@ -174,6 +174,7 @@ export default ({ node, view, getPos }) => { }; const readOnly = !isEditable; + const { testMode } = customProps; return ( <Wrapper> @@ -186,7 +187,7 @@ export default ({ node, view, getPos }) => { <QuestionData> <EditorComponent getPos={getPos} node={node} view={view} /> </QuestionData> - {!(readOnly && customProps && !customProps.showFeedBack) && ( + {!testMode && ( <FeedbackComponent getPos={getPos} node={node} diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js index cba371caf7b343f761e89efcf3a73f70fa1eaffe..76e66cd82a9deea15d0f921fe11bbdb06367a64b 100644 --- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js +++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js @@ -173,6 +173,7 @@ export default ({ node, view, getPos }) => { }; const readOnly = !isEditable; + const { testMode } = customProps; return ( <Wrapper> @@ -185,7 +186,7 @@ export default ({ node, view, getPos }) => { <QuestionData> <EditorComponent getPos={getPos} node={node} view={view} /> </QuestionData> - {!(readOnly && customProps && !customProps.showFeedBack) && ( + {!testMode && ( <FeedbackComponent getPos={getPos} node={node} diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/TrueFalseSwitch.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/TrueFalseSwitch.js index eb604d4f8e07893773428d275d0ffcb14daa184e..74afdedd98ea4bfb33d96148a88d03cf1acc20fb 100644 --- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/TrueFalseSwitch.js +++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/TrueFalseSwitch.js @@ -67,7 +67,9 @@ const TrueFalseSwitch = ({ checked, checkedAnswerMode, }) => { - if (customProps && customProps.showFeedBack) { + const { testMode, showFeedBack } = customProps; + + if (showFeedBack) { const correct = node.attrs.correct ? 'TRUE' : 'FALSE'; const answer = node.attrs.answer ? 'TRUE' : 'FALSE'; const isCorrect = node.attrs.correct === node.attrs.answer; @@ -90,8 +92,11 @@ const TrueFalseSwitch = ({ return ( <StyledSwitch - checked={isEditable ? checked : checkedAnswerMode} + checked={ + isEditable || (!isEditable && !testMode) ? checked : checkedAnswerMode + } checkedChildren="True" + disabled={!isEditable && !testMode} label="True/false?" labelPosition="left" onChange={handleChange} diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js index a939693f71294fc3f2d2269a3935778e3a5537ac..8ce1dcdad62130c13542ab0b713b910bd1e306b8 100644 --- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js +++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js @@ -173,6 +173,7 @@ export default ({ node, view, getPos }) => { }; const readOnly = !isEditable; + const { testMode } = customProps; return ( <Wrapper> @@ -185,7 +186,7 @@ export default ({ node, view, getPos }) => { <QuestionData> <EditorComponent getPos={getPos} node={node} view={view} /> </QuestionData> - {!(readOnly && customProps && !customProps.showFeedBack) && ( + {!testMode && ( <FeedbackComponent getPos={getPos} node={node}