diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index ed078b6555ec5cdb075a3f0206f11ac8e942f17b..c34a0449aaab258cf0deab9234dd1953ad824535 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,10 +170,10 @@ 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)}
+ // onChange={source => console.log(source)}
/>
</>
);
diff --git a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
index 4dfbba33502713291f1d07c76bc0e19ed6a754be..e8f921166516974e98997672d1bec162ae39048b 100644
--- a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
@@ -44,7 +44,7 @@ const DropdownStyled = styled(Dropdown)`
`;
const DropComponent = ({ getPos, node, view }) => {
- const [selectedOption, setSelectedOption] = useState(undefined);
+ const [selectedOption, setSelectedOption] = useState(node.attrs.correct);
const context = useContext(WaxContext);
const {
@@ -52,7 +52,6 @@ const DropComponent = ({ getPos, node, view }) => {
} = context;
const onChange = option => {
- setSelectedOption(option);
const allNodes = getNodes(main);
allNodes.forEach(singleNode => {
if (singleNode.node.attrs.id === node.attrs.id) {
@@ -68,14 +67,13 @@ const DropComponent = ({ getPos, node, view }) => {
});
};
- useEffect(() => {
- const value = selectedOption ? selectedOption.value : '';
- const found = find(node.attrs.options, { value });
+ // useEffect(() => {
+ // const found = find(node.attrs.options, { value: node.attrs.correct });
- if (!found) {
- setSelectedOption(undefined);
- }
- }, [node.attrs.options]);
+ // if (found) {
+ // setSelectedOption(found);
+ // }
+ // }, [node.attrs.options]);
const MultipleDropDown = useMemo(
() => (
diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
index 166d1a35df8683441377396cd17a2baa66a4678e..64248282a210bba24b50158a59535df2281f2194 100644
--- a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
@@ -200,6 +200,8 @@ export default ({ node, view, getPos }) => {
});
};
+ const { testMode } = customProps;
+
return (
<MatchingWrapper>
<span>Matching</span>
@@ -252,8 +254,7 @@ export default ({ node, view, getPos }) => {
)}
</CreateOptions>
)}
- {(!(readOnly && !customProps.showFeedBack) ||
- (readOnly && !customProps.testMode && !customProps.showFeedBack)) && (
+ {!testMode && (
<FeedbackComponent
getPos={getPos}
node={node}
diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
index 5bd695e1b95dfa42c6886c3f1823c5238f650d66..2e9d9e8b4b184b7fbfc7e0612241dbed858128d6 100644
--- a/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
@@ -8,7 +8,7 @@ import { Icon } from 'wax-prosemirror-components';
import { WaxContext } from 'wax-prosemirror-core';
import EditorComponent from './EditorComponent';
import DropDownComponent from './DropDownComponent';
-import ReadOnlyDropDownComponent from './ReadOnlyDropDownComponent';
+import TestModeDropDownComponent from './TestModeDropDownComponent';
const Option = styled.div`
display: flex;
@@ -139,7 +139,7 @@ export default ({ node, view, getPos }) => {
)}
{readOnly && testMode && !showFeedBack && (
- <ReadOnlyDropDownComponent getPos={getPos} node={node} view={view} />
+ <TestModeDropDownComponent getPos={getPos} node={node} view={view} />
)}
{readOnly && showFeedBack && (
diff --git a/wax-prosemirror-services/src/MatchingService/components/ReadOnlyDropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/TestModeDropDownComponent.js
similarity index 95%
rename from wax-prosemirror-services/src/MatchingService/components/ReadOnlyDropDownComponent.js
rename to wax-prosemirror-services/src/MatchingService/components/TestModeDropDownComponent.js
index e5121aca8e739960257d3b5b28dcc82b8ecb478f..bb7a38eb82e1947ff2cabb46fe09f90dc9d95081 100644
--- a/wax-prosemirror-services/src/MatchingService/components/ReadOnlyDropDownComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/TestModeDropDownComponent.js
@@ -41,7 +41,7 @@ const DropdownStyled = styled(Dropdown)`
}
`;
-const ReadOnlyDropDownComponent = ({ getPos, node, view }) => {
+const TestModeDropDownComponent = ({ getPos, node, view }) => {
const [selectedOption, setSelectedOption] = useState(undefined);
const context = useContext(WaxContext);
@@ -97,7 +97,7 @@ const ReadOnlyDropDownComponent = ({ getPos, node, view }) => {
return ReadOnlyMultipleDropDown;
};
-export default ReadOnlyDropDownComponent;
+export default TestModeDropDownComponent;
const getNodes = view => {
return DocumentHelpers.findInlineNodes(view.state.doc);
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}
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js b/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js
index 169846680e849c6802c354d53ddf82dc26c50a9b..6fd68ec91634f6bc5b629df605c93da40d0fce02 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js
@@ -1,7 +1,6 @@
/* eslint-disable no-underscore-dangle */
-import React, { useContext, useMemo, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
-import { find } from 'lodash';
import { ReactDropDownStyles } from 'wax-prosemirror-components';
import { WaxContext } from 'wax-prosemirror-core';
import { DocumentHelpers } from 'wax-prosemirror-utilities';
@@ -51,6 +50,14 @@ const DropComponent = ({ getPos, node, options }) => {
} = context;
const customProps = main.props.customValues;
+ const { testMode } = customProps;
+
+ useEffect(() => {
+ const currentOption = node.attrs.options.filter(option => {
+ return option.value === node.attrs.correct;
+ });
+ if (!testMode && currentOption[0]) setSelectedOption(currentOption[0]);
+ }, []);
const onChange = option => {
const allNodes = getNodes(main);
@@ -66,12 +73,11 @@ const DropComponent = ({ getPos, node, options }) => {
main.dispatch(tr);
};
- useEffect(() => {}, []);
-
const MultipleDropDown = useMemo(
() => (
<Wrapper key={uuidv4()}>
<DropdownStyled
+ disabled={!testMode}
key={uuidv4()}
onChange={option => onChange(option)}
options={options}