From d495b8ccd1a334568133735c7d7f4aaef387ed12 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Sun, 12 Nov 2023 14:13:35 +0200
Subject: [PATCH] readonly mode
---
editors/demo/src/HHMI/HHMI.js | 100 +++++++++---------
.../components/ExactAnswerComponent.js | 10 +-
.../NumericalAnswerContainerComponent.js | 18 +++-
.../components/PreciseAnswerComponent.js | 9 +-
.../components/RangeAnswerComponent.js | 12 ++-
5 files changed, 87 insertions(+), 62 deletions(-)
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 7f543eb13..9e0127515 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -68,31 +68,55 @@ const SubmitButton = styled.button`
`}
`;
-const initialContent = `<p class="paragraph"></p>
-<div id="1624fa06-2075-488a-9912-9794a3763aca" class="multiple-drop-down-container" feedback="">
- <p class="paragraph">Lorem ipsum dolor sit amet,<span id="fa9ff44d-19a6-4f47-99d9-d77d3dc02fbf" class="multiple-drop-down-option" options="[{"label":"option 1","value":"6c4aa0f3-43b1-40a7-a066-bc73449523df"},{"label":"option 2","value":"29365b0c-c00d-40c1-8a5e-118dbdf47e50"},{"label":"option 3","value":"743a425e-6340-4a72-a07c-d2e78154fcc8"}]" correct="6c4aa0f3-43b1-40a7-a066-bc73449523df" answer="29365b0c-c00d-40c1-8a5e-118dbdf47e50"></span>consectetur adipiscing elit. Nulla cursus ultricies enim, id condimentum dui facilisis a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed euismod posuere orci. Praesent consectetur augue ut lorem suscipit, nec molestie libero pellentesque.</p>
- <p class="paragraph">Nullam porttitor ligula neque. In aliquam<span id="f8380222-11fa-46e7-91a9-0bf67ff3d1d7" class="multiple-drop-down-option" options="[{"label":"option 4","value":"4e2c45fe-0aad-4c59-9a92-ed44f01a82e2"},{"label":"option 5","value":"15e27b91-682a-4e10-a5d0-149192fd2e4c"},{"label":"option 6","value":"886c921d-2e75-41ea-a1a6-2d49e7921a57"},{"label":"option 7","value":"d14c2409-f66a-47d1-8f63-72686d24df37"}]" correct="4e2c45fe-0aad-4c59-9a92-ed44f01a82e2" answer="4e2c45fe-0aad-4c59-9a92-ed44f01a82e2"></span> ex neque, sit amet sagittis nulla volutpat sed. Nulla blandit facilisis ante, vel tempus ante porta quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer nulla tellus, dictum at laoreet eu, hendrerit at quam. Sed consectetur, neque vel ornare malesuada, eros sem commodo purus, <span id="c13f5243-03c0-433c-8e44-440d536d9150" class="multiple-drop-down-option" options="[{"label":"option 9","value":"3b9cd3b4-9e70-45de-975d-31407c48812c"},{"label":"option 10","value":"3baf86a8-a3fa-4e64-bfe8-f01ce4320489"},{"label":"option 11","value":"f1c6023c-5cde-445a-b9fb-cc23f06c8132"}]" correct="f1c6023c-5cde-445a-b9fb-cc23f06c8132" answer="f1c6023c-5cde-445a-b9fb-cc23f06c8132"></span> sagittis volutpat elit leo in diam. Aliquam mattis, est non placerat euismod, nisl nisl vestibulum mauris, non interdum dui urna et tellus.</p>
-</div>
-<p class="paragraph"></p>
-<div id="2257aaf4-20cf-44ff-bd45-0e0a4561b764" class="matching-container" options="[{"label":"option 1","value":"941cebeb-58bd-44c5-bf42-c78d20c23b7a"},{"label":"option 2","value":"ab2e7cfc-c700-4ba2-9ac3-3040974f67bf"}]" feedback="">
- <p class="paragraph">
- <div id="2bf9d3ca-166d-4354-9ebf-5d0fc6e75d8d" class="matching-option" isfirst="true" answer="">some text</div>
- </p>
-</div>
-<div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc323" 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>
-<div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback="some feedback">
- <p class="paragraph">first <span id="16ec8f33-db5b-4839-9567-8aa73b776bcf" class="fill-the-gap" answer="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" answer="">answer 4; answer5;</span></p>
-</div>`;
+// const initialContent = `<p class="paragraph"></p>
+// <div id="1624fa06-2075-488a-9912-9794a3763aca" class="multiple-drop-down-container" feedback="">
+// <p class="paragraph">Lorem ipsum dolor sit amet,<span id="fa9ff44d-19a6-4f47-99d9-d77d3dc02fbf" class="multiple-drop-down-option" options="[{"label":"option 1","value":"6c4aa0f3-43b1-40a7-a066-bc73449523df"},{"label":"option 2","value":"29365b0c-c00d-40c1-8a5e-118dbdf47e50"},{"label":"option 3","value":"743a425e-6340-4a72-a07c-d2e78154fcc8"}]" correct="6c4aa0f3-43b1-40a7-a066-bc73449523df" answer="29365b0c-c00d-40c1-8a5e-118dbdf47e50"></span>consectetur adipiscing elit. Nulla cursus ultricies enim, id condimentum dui facilisis a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed euismod posuere orci. Praesent consectetur augue ut lorem suscipit, nec molestie libero pellentesque.</p>
+// <p class="paragraph">Nullam porttitor ligula neque. In aliquam<span id="f8380222-11fa-46e7-91a9-0bf67ff3d1d7" class="multiple-drop-down-option" options="[{"label":"option 4","value":"4e2c45fe-0aad-4c59-9a92-ed44f01a82e2"},{"label":"option 5","value":"15e27b91-682a-4e10-a5d0-149192fd2e4c"},{"label":"option 6","value":"886c921d-2e75-41ea-a1a6-2d49e7921a57"},{"label":"option 7","value":"d14c2409-f66a-47d1-8f63-72686d24df37"}]" correct="4e2c45fe-0aad-4c59-9a92-ed44f01a82e2" answer="4e2c45fe-0aad-4c59-9a92-ed44f01a82e2"></span> ex neque, sit amet sagittis nulla volutpat sed. Nulla blandit facilisis ante, vel tempus ante porta quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer nulla tellus, dictum at laoreet eu, hendrerit at quam. Sed consectetur, neque vel ornare malesuada, eros sem commodo purus, <span id="c13f5243-03c0-433c-8e44-440d536d9150" class="multiple-drop-down-option" options="[{"label":"option 9","value":"3b9cd3b4-9e70-45de-975d-31407c48812c"},{"label":"option 10","value":"3baf86a8-a3fa-4e64-bfe8-f01ce4320489"},{"label":"option 11","value":"f1c6023c-5cde-445a-b9fb-cc23f06c8132"}]" correct="f1c6023c-5cde-445a-b9fb-cc23f06c8132" answer="f1c6023c-5cde-445a-b9fb-cc23f06c8132"></span> sagittis volutpat elit leo in diam. Aliquam mattis, est non placerat euismod, nisl nisl vestibulum mauris, non interdum dui urna et tellus.</p>
+// </div>
+// <p class="paragraph"></p>
+// <div id="2257aaf4-20cf-44ff-bd45-0e0a4561b764" class="matching-container" options="[{"label":"option 1","value":"941cebeb-58bd-44c5-bf42-c78d20c23b7a"},{"label":"option 2","value":"ab2e7cfc-c700-4ba2-9ac3-3040974f67bf"}]" feedback="">
+// <p class="paragraph">
+// <div id="2bf9d3ca-166d-4354-9ebf-5d0fc6e75d8d" class="matching-option" isfirst="true" answer="">some text</div>
+// </p>
+// </div>
+// <div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc323" 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>
+// <div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback="some feedback">
+// <p class="paragraph">first <span id="16ec8f33-db5b-4839-9567-8aa73b776bcf" class="fill-the-gap" answer="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" answer="">answer 4; answer5;</span></p>
+// </div>`;
+
+const initialContent = {
+ type: 'doc',
+ content: [
+ {
+ type: 'numerical_answer_container',
+ attrs: {
+ id: 'f9c33d03-68ee-4c27-8a03-5072447fac1a',
+ class: 'numerical-answer',
+ feedback: '',
+ answerType: 'exactAnswer',
+ answersExact: [],
+ },
+ content: [
+ {
+ type: 'paragraph',
+ attrs: {
+ class: 'paragraph',
+ },
+ },
+ ],
+ },
+ ],
+};
const Hhmi = () => {
const [stateProps, setStateProps] = useState({
@@ -142,30 +166,6 @@ const Hhmi = () => {
const { readOnly, testMode, submitted, content } = stateProps;
- const data = {
- type: 'doc',
- content: [
- {
- type: 'numerical_answer_container',
- attrs: {
- id: 'f9c33d03-68ee-4c27-8a03-5072447fac1a',
- class: 'numerical-answer',
- feedback: '',
- answerType: 'exactAnswer',
- answersExact: [],
- },
- content: [
- {
- type: 'paragraph',
- attrs: {
- class: 'paragraph',
- },
- },
- ],
- },
- ],
- };
-
return (
<>
<ButtonContainer>
@@ -191,7 +191,7 @@ const Hhmi = () => {
ref={editorRef}
customValues={{ showFeedBack: submitted, testMode }}
fileUpload={file => renderImage(file)}
- value={data}
+ value={content}
targetFormat="JSON"
readonly={readOnly}
layout={HhmiLayout}
diff --git a/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
index c4d552494..3e5996337 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
@@ -26,10 +26,12 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
-const ExactAnswerComponent = ({ node }) => {
+const ExactAnswerComponent = ({ node, readOnly, testMode }) => {
const context = useContext(WaxContext);
- const [exact, setExact] = useState('');
- const [marginError, setMarginError] = useState('');
+ const [exact, setExact] = useState(node.attrs.answersExact.exactAnswer || '');
+ const [marginError, setMarginError] = useState(
+ node.attrs.answersExact.marginError || '',
+ );
const exactRef = useRef(null);
const errorRef = useRef(null);
@@ -81,6 +83,7 @@ const ExactAnswerComponent = ({ node }) => {
<ValueInnerContainer>
<span>Exact Answer</span>
<input
+ disabled={readOnly}
name="exactAnswer"
onChange={onChangeExact}
ref={exactRef}
@@ -95,6 +98,7 @@ const ExactAnswerComponent = ({ node }) => {
<ValueInnerContainer>
<span>Margin of error (%)</span>
<input
+ disabled={readOnly}
name="errorAnswer"
onChange={onChangeError}
ref={errorRef}
diff --git a/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerContainerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerContainerComponent.js
index 92b3d794f..6342e65b3 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerContainerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerContainerComponent.js
@@ -115,13 +115,25 @@ export default ({ node, view, getPos }) => {
<>No Type Selected</>
)}
{options[node.attrs.id]?.numericalAnswer === 'exactAnswer' && (
- <ExactAnswerComponent node={node} />
+ <ExactAnswerComponent
+ node={node}
+ readOnly={readOnly}
+ testMode={testMode}
+ />
)}
{options[node.attrs.id]?.numericalAnswer === 'rangeAnswer' && (
- <RangeAnswerComponent node={node} />
+ <RangeAnswerComponent
+ node={node}
+ readOnly={readOnly}
+ testMode={testMode}
+ />
)}
{options[node.attrs.id]?.numericalAnswer === 'preciseAnswer' && (
- <PreciseAnswerComponent node={node} />
+ <PreciseAnswerComponent
+ node={node}
+ readOnly={readOnly}
+ testMode={testMode}
+ />
)}
</NumericalAnswerOption>
{!testMode && !(readOnly && feedback === '') && (
diff --git a/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
index 1e7149589..58d171c6c 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
@@ -26,9 +26,11 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
-const PreciseAnswerComponent = ({ node }) => {
+const PreciseAnswerComponent = ({ node, readOnly, testMode }) => {
const context = useContext(WaxContext);
- const [precise, setPrecise] = useState('');
+ const [precise, setPrecise] = useState(
+ node.attrs.answersPrecise.preciseAnswer || '',
+ );
const preciseRef = useRef(null);
@@ -44,7 +46,7 @@ const PreciseAnswerComponent = ({ node }) => {
allNodes.forEach(singleNode => {
if (singleNode.node.attrs.id === node.attrs.id) {
const obj = {
- exactAnswer: onlyNumbers(preciseRef.current.value),
+ preciseAnswer: onlyNumbers(preciseRef.current.value),
};
context.pmViews.main.dispatch(
@@ -73,6 +75,7 @@ const PreciseAnswerComponent = ({ node }) => {
<ValueInnerContainer>
<span>Precise Answer</span>
<input
+ disabled={readOnly}
name="preciseAnswer"
onChange={onChangePrecice}
ref={preciseRef}
diff --git a/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
index ad9d36ac2..96ba53032 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
@@ -26,10 +26,14 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
-const RangeAnswerComponent = ({ node }) => {
+const RangeAnswerComponent = ({ node, readOnly, testMode }) => {
const context = useContext(WaxContext);
- const [minValue, setMinValue] = useState('');
- const [maxValue, setMaxValue] = useState('');
+ const [minValue, setMinValue] = useState(
+ node.attrs.answersRange.minAnswer || '',
+ );
+ const [maxValue, setMaxValue] = useState(
+ node.attrs.answersRange.maxAnswer || '',
+ );
const minRef = useRef(null);
const maxRef = useRef(null);
@@ -81,6 +85,7 @@ const RangeAnswerComponent = ({ node }) => {
<ValueInnerContainer>
<span>Min</span>
<input
+ disabled={readOnly}
name="minAnswer"
onChange={onChangeMin}
ref={minRef}
@@ -95,6 +100,7 @@ const RangeAnswerComponent = ({ node }) => {
<ValueInnerContainer>
<span>Max</span>
<input
+ disabled={readOnly}
name="maxAnswer"
onChange={onChangeMax}
ref={maxRef}
--
GitLab