From a8fb3c97ca5f7b561dcfa66d686027cdf9f81753 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 15 Feb 2022 16:20:47 +0200
Subject: [PATCH] answermode for rest of multiple types
---
editors/demo/src/HHMI/HHMI.js | 6 ++---
.../components/AnswerComponent.js | 7 +++++-
.../components/SwitchComponent.js | 17 ++++++++++---
.../components/AnswerComponent.js | 7 +++++-
.../components/SwitchComponent.js | 15 ++++++++++--
.../components/AnswerComponent.js | 7 +++++-
.../components/SwitchComponent.js | 17 ++++++++++---
.../components/SwitchComponent.js | 24 +++++++------------
8 files changed, 71 insertions(+), 29 deletions(-)
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 5d85c3ced..8f01580d9 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -22,7 +22,7 @@ const SubmitButton = styled.button`
top: 16px;
`;
-const t = `<p class="paragraph"></p><div id="" class="multiple-choice"><div class="multiple-choice-question" id="38de8538-647a-489d-8474-f92d0d256c32"><p class="paragraph">question </p></div><div class="multiple-choice-option" id="debb868e-bbfe-4ba2-bf93-c963153ff791" correct="false" correctanswer="false" feedback="feedback 1"><p class="paragraph">answer 1</p></div><div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" correctanswer="false" feedback="feedback 2"><p class="paragraph">answer 2</p></div></div>`;
+const t = `<p class="paragraph"></p><div id="" class="multiple-choice"><div class="multiple-choice-question" id="38de8538-647a-489d-8474-f92d0d256c32"><p class="paragraph">question </p></div><div class="multiple-choice-option" id="debb868e-bbfe-4ba2-bf93-c963153ff791" correct="false" answer="false" feedback="feedback 1"><p class="paragraph">answer 1</p></div><div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" answer="false" feedback="feedback 2"><p class="paragraph">answer 2</p></div></div>`;
const Hhmi = () => {
const [submited, isSubmited] = useState(false);
@@ -39,9 +39,9 @@ const Hhmi = () => {
customValues={{ showFeedBack: submited }}
fileUpload={file => renderImage(file)}
value={t}
- // readonly
+ readonly
layout={HhmiLayout}
- onChange={source => console.log(source)}
+ // 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 157a61c4f..c013fc7b7 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/AnswerComponent.js
@@ -76,6 +76,9 @@ export default ({ node, view, getPos }) => {
view: { main },
} = context;
+ // eslint-disable-next-line react/destructuring-assignment
+ const customProps = context.view.main.props.customValues;
+
const isEditable = main.props.editable(editable => {
return editable;
});
@@ -176,7 +179,9 @@ export default ({ node, view, getPos }) => {
<QuestionData>
<EditorComponent getPos={getPos} node={node} view={view} />
</QuestionData>
- <FeedbackComponent getPos={getPos} node={node} view={view} />
+ {!(readOnly && !customProps.showFeedBack) && (
+ <FeedbackComponent getPos={getPos} node={node} view={view} />
+ )}
</QuestionWrapper>
</QuestionControlsWrapper>
<IconsWrapper>
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
index 24f3e9981..fe9203524 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
@@ -19,10 +19,16 @@ const StyledSwitch = styled(Switch)`
const CustomSwitch = ({ node, getPos }) => {
const context = useContext(WaxContext);
const [checked, setChecked] = useState(false);
+ const [checkedAnswerMode, setCheckedAnswerMode] = useState(false);
const {
+ view,
view: { main },
} = context;
+ const isEditable = view.main.props.editable(editable => {
+ return editable;
+ });
+
useEffect(() => {
const allNodes = getNodes(main);
allNodes.forEach(singNode => {
@@ -34,6 +40,11 @@ const CustomSwitch = ({ node, getPos }) => {
const handleChange = () => {
setChecked(!checked);
+ setCheckedAnswerMode(!checkedAnswerMode);
+
+ const key = isEditable ? 'correct' : 'answer';
+ const value = isEditable ? !checked : !checkedAnswerMode;
+
main.dispatch(
main.state.tr.setSelection(
NodeSelection.create(main.state.doc, getPos()),
@@ -63,7 +74,7 @@ const CustomSwitch = ({ node, getPos }) => {
) {
tr.setNodeMarkup(getPos(), undefined, {
...element.attrs,
- correct: !checked,
+ [key]: value,
});
} else if (
element.type.name === 'multiple_choice_single_correct' &&
@@ -71,7 +82,7 @@ const CustomSwitch = ({ node, getPos }) => {
) {
tr.setNodeMarkup(parentPosition + position + 1, undefined, {
...element.attrs,
- correct: false,
+ [key]: false,
});
}
});
@@ -81,7 +92,7 @@ const CustomSwitch = ({ node, getPos }) => {
return (
<StyledSwitch
- checked={checked}
+ checked={isEditable ? checked : checkedAnswerMode}
checkedChildren="YES"
label="Correct?"
labelPosition="left"
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js
index fda493238..7303a8847 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/AnswerComponent.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/prop-types */
import React, { useContext } from 'react';
import styled from 'styled-components';
@@ -76,6 +77,8 @@ export default ({ node, view, getPos }) => {
view: { main },
} = context;
+ const customProps = context.view.main.props.customValues;
+
const isEditable = main.props.editable(editable => {
return editable;
});
@@ -176,7 +179,9 @@ export default ({ node, view, getPos }) => {
<QuestionData>
<EditorComponent getPos={getPos} node={node} view={view} />
</QuestionData>
- <FeedbackComponent getPos={getPos} node={node} view={view} />
+ {!(readOnly && !customProps.showFeedBack) && (
+ <FeedbackComponent getPos={getPos} node={node} view={view} />
+ )}
</QuestionWrapper>
</QuestionControlsWrapper>
<IconsWrapper>
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js
index 8b3de4318..e30e34754 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js
@@ -26,10 +26,17 @@ const StyledSwitch = styled(Switch)`
const CustomSwitch = ({ node, getPos }) => {
const context = useContext(WaxContext);
const [checked, setChecked] = useState(false);
+ const [checkedAnswerMode, setCheckedAnswerMode] = useState(false);
+
const {
+ view,
view: { main },
} = context;
+ const isEditable = view.main.props.editable(editable => {
+ return editable;
+ });
+
useEffect(() => {
const allNodes = getNodes(main);
allNodes.forEach(singNode => {
@@ -41,13 +48,17 @@ const CustomSwitch = ({ node, getPos }) => {
const handleChange = () => {
setChecked(!checked);
+ setCheckedAnswerMode(!checkedAnswerMode);
+ const key = isEditable ? 'correct' : 'answer';
+ const value = isEditable ? !checked : !checkedAnswerMode;
const allNodes = getNodes(main);
+
allNodes.forEach(singleNode => {
if (singleNode.node.attrs.id === node.attrs.id) {
main.dispatch(
main.state.tr.setNodeMarkup(getPos(), undefined, {
...singleNode.node.attrs,
- correct: !checked,
+ [key]: value,
}),
);
}
@@ -56,7 +67,7 @@ const CustomSwitch = ({ node, getPos }) => {
return (
<StyledSwitch
- checked={checked}
+ checked={isEditable ? checked : checkedAnswerMode}
checkedChildren="True"
label="True/false?"
labelPosition="left"
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js
index 37091b159..665837da3 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/AnswerComponent.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/prop-types */
import React, { useContext } from 'react';
import styled from 'styled-components';
@@ -76,6 +77,8 @@ export default ({ node, view, getPos }) => {
view: { main },
} = context;
+ const customProps = context.view.main.props.customValues;
+
const isEditable = main.props.editable(editable => {
return editable;
});
@@ -176,7 +179,9 @@ export default ({ node, view, getPos }) => {
<QuestionData>
<EditorComponent getPos={getPos} node={node} view={view} />
</QuestionData>
- <FeedbackComponent getPos={getPos} node={node} view={view} />
+ {!(readOnly && !customProps.showFeedBack) && (
+ <FeedbackComponent getPos={getPos} node={node} view={view} />
+ )}
</QuestionWrapper>
</QuestionControlsWrapper>
<IconsWrapper>
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/SwitchComponent.js
index 91169bd35..4826676ba 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/SwitchComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/SwitchComponent.js
@@ -19,10 +19,17 @@ const StyledSwitch = styled(Switch)`
const CustomSwitch = ({ node, getPos }) => {
const context = useContext(WaxContext);
const [checked, setChecked] = useState(false);
+ const [checkedAnswerMode, setCheckedAnswerMode] = useState(false);
+
const {
+ view,
view: { main },
} = context;
+ const isEditable = view.main.props.editable(editable => {
+ return editable;
+ });
+
useEffect(() => {
const allNodes = getNodes(main);
allNodes.forEach(singNode => {
@@ -34,6 +41,10 @@ const CustomSwitch = ({ node, getPos }) => {
const handleChange = () => {
setChecked(!checked);
+ setCheckedAnswerMode(!checkedAnswerMode);
+ const key = isEditable ? 'correct' : 'answer';
+ const value = isEditable ? !checked : !checkedAnswerMode;
+
main.dispatch(
main.state.tr.setSelection(
NodeSelection.create(main.state.doc, getPos()),
@@ -63,7 +74,7 @@ const CustomSwitch = ({ node, getPos }) => {
) {
tr.setNodeMarkup(getPos(), undefined, {
...element.attrs,
- correct: !checked,
+ [key]: value,
});
} else if (
element.type.name === 'true_false_single_correct' &&
@@ -71,7 +82,7 @@ const CustomSwitch = ({ node, getPos }) => {
) {
tr.setNodeMarkup(parentPosition + position + 1, undefined, {
...element.attrs,
- correct: false,
+ [key]: false,
});
}
});
@@ -81,7 +92,7 @@ const CustomSwitch = ({ node, getPos }) => {
return (
<StyledSwitch
- checked={checked}
+ checked={isEditable ? checked : checkedAnswerMode}
checkedChildren="True"
label="True/false?"
labelPosition="left"
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
index 446f801fb..b4f746399 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
@@ -48,24 +48,18 @@ const CustomSwitch = ({ node, getPos }) => {
const handleChange = () => {
setChecked(!checked);
setCheckedAnswerMode(!checkedAnswerMode);
+ const key = isEditable ? 'correct' : 'answer';
+ const value = isEditable ? !checked : !checkedAnswerMode;
const allNodes = getNodes(main);
+
allNodes.forEach(singleNode => {
if (singleNode.node.attrs.id === node.attrs.id) {
- if (isEditable) {
- main.dispatch(
- main.state.tr.setNodeMarkup(getPos(), undefined, {
- ...singleNode.node.attrs,
- correct: !checked,
- }),
- );
- } else {
- main.dispatch(
- main.state.tr.setNodeMarkup(getPos(), undefined, {
- ...singleNode.node.attrs,
- answer: !checkedAnswerMode,
- }),
- );
- }
+ main.dispatch(
+ main.state.tr.setNodeMarkup(getPos(), undefined, {
+ ...singleNode.node.attrs,
+ [key]: value,
+ }),
+ );
}
});
};
--
GitLab