From 62b3bc2c44302356b50983e9d1f6e05476c6a6e8 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 13 Nov 2023 12:27:13 +0200
Subject: [PATCH] final step submit
---
editors/demo/src/HHMI/HHMI.js | 100 +++++++++---------
.../components/ExactAnswerComponent.js | 30 +++++-
.../components/PreciseAnswerComponent.js | 27 ++++-
.../components/RangeAnswerComponent.js | 28 ++++-
4 files changed, 132 insertions(+), 53 deletions(-)
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 9e0127515..4c1d96095 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -68,55 +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 = {
- 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 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({
@@ -192,7 +192,7 @@ const Hhmi = () => {
customValues={{ showFeedBack: submitted, testMode }}
fileUpload={file => renderImage(file)}
value={content}
- targetFormat="JSON"
+ // targetFormat="JSON"
readonly={readOnly}
layout={HhmiLayout}
onChange={source => console.log(source)}
diff --git a/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
index e845c9e8e..6b03d59b9 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
@@ -27,6 +27,16 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
+const ResultContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+
+const FinalResult = styled.span`
+ color: ${props => (props.isCorrect ? ' #008000' : 'red')};
+ font-weight: 999;
+`;
+
const ExactAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
const context = useContext(WaxContext);
const [exact, setExact] = useState(node.attrs.answersExact.exactAnswer || '');
@@ -99,6 +109,14 @@ const ExactAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
});
};
+ // SUBMIT
+ const exactMultMargin = parseFloat((exact * marginError) / 100);
+ const computedMaxValue = Number(exactMultMargin) + Number(exact);
+ const computedMinValue = Number(exact) - Number(exactMultMargin);
+ const isCorrect = !!(
+ exactStudent <= computedMaxValue && exactStudent >= computedMinValue
+ );
+
return (
<AnswerContainer>
{!testMode && !showFeedBack && (
@@ -151,7 +169,17 @@ const ExactAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
</label>
</ValueContainer>
)}
- {readOnly && showFeedBack && <span>SUBMIT</span>}
+ {readOnly && showFeedBack && (
+ <ResultContainer>
+ <span>
+ Accepted Answer Range: {computedMinValue} - {computedMaxValue}
+ </span>
+ <span>
+ Answer:{' '}
+ <FinalResult isCorrect={isCorrect}>{exactStudent}</FinalResult>
+ </span>
+ </ResultContainer>
+ )}
</AnswerContainer>
);
};
diff --git a/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
index 7220ca907..3ebc0a4ab 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
@@ -27,6 +27,16 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
+const ResultContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+
+const FinalResult = styled.span`
+ color: ${props => (props.isCorrect ? ' #008000' : 'red')};
+ font-weight: 999;
+`;
+
const PreciseAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
const context = useContext(WaxContext);
const [precise, setPrecise] = useState(
@@ -93,6 +103,10 @@ const PreciseAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
});
};
+ const isCorrect = precise
+ .split(';')
+ .find(element => element === preciseStudent.trim());
+
return (
<AnswerContainer>
{!testMode && !showFeedBack && (
@@ -128,7 +142,18 @@ const PreciseAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
</label>
</ValueContainer>
)}
- {readOnly && showFeedBack && <span>SUBMIT</span>}
+ {readOnly && showFeedBack && (
+ <ResultContainer>
+ <span>
+ Accepted Answer Range:{' '}
+ {`(Accepted Answers : ${precise.replaceAll(';', ' -')})`}
+ </span>
+ <span>
+ Answer:{' '}
+ <FinalResult isCorrect={isCorrect}>{preciseStudent}</FinalResult>
+ </span>
+ </ResultContainer>
+ )}
</AnswerContainer>
);
};
diff --git a/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
index 7d38bb699..612e0702d 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
@@ -27,6 +27,16 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
+const ResultContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+
+const FinalResult = styled.span`
+ color: ${props => (props.isCorrect ? ' #008000' : 'red')};
+ font-weight: 999;
+`;
+
const RangeAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
const context = useContext(WaxContext);
const [minValue, setMinValue] = useState(
@@ -103,6 +113,12 @@ const RangeAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
});
};
+ // SUBMIT
+
+ const isCorrect = !!(
+ rangeStudentValue <= maxValue && rangeStudentValue >= minValue
+ );
+
return (
<AnswerContainer>
{!testMode && !showFeedBack && (
@@ -155,7 +171,17 @@ const RangeAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
</label>
</ValueContainer>
)}
- {readOnly && showFeedBack && <span>SUBMIT</span>}
+ {readOnly && showFeedBack && (
+ <ResultContainer>
+ <span>
+ Accepted Answer Range: {minValue} - {maxValue}
+ </span>
+ <span>
+ Answer:{' '}
+ <FinalResult isCorrect={isCorrect}>{rangeStudentValue}</FinalResult>
+ </span>
+ </ResultContainer>
+ )}
</AnswerContainer>
);
};
--
GitLab