From e05d166a6af5fdf9a042535f6a327e4c860e454f Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 22 Jan 2024 12:47:24 +0200
Subject: [PATCH] numerical answer fixes
---
.../components/YesNoSwitch.js | 1 +
.../components/ExactAnswerComponent.js | 21 ++++++++++++++--
.../components/PreciseAnswerComponent.js | 21 ++++++++++++++--
.../components/RangeAnswerComponent.js | 25 ++++++++++++++++---
4 files changed, 61 insertions(+), 7 deletions(-)
diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/components/YesNoSwitch.js b/wax-questions-service/src/MultipleChoiceQuestionService/components/YesNoSwitch.js
index bbea9e0bd..3615b90cc 100644
--- a/wax-questions-service/src/MultipleChoiceQuestionService/components/YesNoSwitch.js
+++ b/wax-questions-service/src/MultipleChoiceQuestionService/components/YesNoSwitch.js
@@ -42,6 +42,7 @@ const StyledIconWrong = styled(Icon)`
pointer-events: none;
width: 24px;
`;
+
const YesNoSwitch = ({
customProps,
node: { node },
diff --git a/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
index 6b03d59b9..ce36de4d8 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
@@ -1,7 +1,7 @@
/* eslint-disable react/prop-types */
import React, { useRef, useState, useContext } from 'react';
import styled from 'styled-components';
-import { DocumentHelpers, WaxContext } from 'wax-prosemirror-core';
+import { DocumentHelpers, WaxContext, Icon } from 'wax-prosemirror-core';
const AnswerContainer = styled.div`
display: flex;
@@ -37,6 +37,20 @@ const FinalResult = styled.span`
font-weight: 999;
`;
+const StyledIconCorrect = styled(Icon)`
+ fill: #008000;
+ height: 24px;
+ pointer-events: none;
+ width: 24px;
+`;
+
+const StyledIconWrong = styled(Icon)`
+ fill: red;
+ height: 24px;
+ pointer-events: none;
+ width: 24px;
+`;
+
const ExactAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
const context = useContext(WaxContext);
const [exact, setExact] = useState(node.attrs.answersExact.exactAnswer || '');
@@ -176,7 +190,10 @@ const ExactAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
</span>
<span>
Answer:{' '}
- <FinalResult isCorrect={isCorrect}>{exactStudent}</FinalResult>
+ <FinalResult isCorrect={isCorrect}>
+ {exactStudent} {isCorrect && <StyledIconCorrect name="done" />}
+ {!isCorrect && <StyledIconWrong name="close" />}
+ </FinalResult>
</span>
</ResultContainer>
)}
diff --git a/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
index eca3b188a..84f671787 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
@@ -1,7 +1,7 @@
/* eslint-disable react/prop-types */
import React, { useRef, useState, useContext } from 'react';
import styled from 'styled-components';
-import { DocumentHelpers, WaxContext } from 'wax-prosemirror-core';
+import { DocumentHelpers, WaxContext, Icon } from 'wax-prosemirror-core';
const AnswerContainer = styled.div`
display: flex;
@@ -37,6 +37,20 @@ const FinalResult = styled.span`
font-weight: 999;
`;
+const StyledIconCorrect = styled(Icon)`
+ fill: #008000;
+ height: 24px;
+ pointer-events: none;
+ width: 24px;
+`;
+
+const StyledIconWrong = styled(Icon)`
+ fill: red;
+ height: 24px;
+ pointer-events: none;
+ width: 24px;
+`;
+
const PreciseAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
const context = useContext(WaxContext);
const [precise, setPrecise] = useState(
@@ -147,7 +161,10 @@ const PreciseAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
<span>{`(Accepted Answers : ${precise.replaceAll(';', ' -')})`}</span>
<span>
Answer:{' '}
- <FinalResult isCorrect={isCorrect}>{preciseStudent}</FinalResult>
+ <FinalResult isCorrect={isCorrect}>
+ {preciseStudent} {isCorrect && <StyledIconCorrect name="done" />}
+ {!isCorrect && <StyledIconWrong name="close" />}
+ </FinalResult>
</span>
</ResultContainer>
)}
diff --git a/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
index 612e0702d..3896b668c 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
@@ -1,7 +1,7 @@
/* eslint-disable react/prop-types */
import React, { useRef, useState, useContext } from 'react';
import styled from 'styled-components';
-import { DocumentHelpers, WaxContext } from 'wax-prosemirror-core';
+import { DocumentHelpers, WaxContext, Icon } from 'wax-prosemirror-core';
const AnswerContainer = styled.div`
display: flex;
@@ -37,6 +37,20 @@ const FinalResult = styled.span`
font-weight: 999;
`;
+const StyledIconCorrect = styled(Icon)`
+ fill: #008000;
+ height: 24px;
+ pointer-events: none;
+ width: 24px;
+`;
+
+const StyledIconWrong = styled(Icon)`
+ fill: red;
+ height: 24px;
+ pointer-events: none;
+ width: 24px;
+`;
+
const RangeAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
const context = useContext(WaxContext);
const [minValue, setMinValue] = useState(
@@ -116,7 +130,8 @@ const RangeAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
// SUBMIT
const isCorrect = !!(
- rangeStudentValue <= maxValue && rangeStudentValue >= minValue
+ Number(rangeStudentValue) <= Number(maxValue) &&
+ Number(rangeStudentValue) >= Number(minValue)
);
return (
@@ -178,7 +193,11 @@ const RangeAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
</span>
<span>
Answer:{' '}
- <FinalResult isCorrect={isCorrect}>{rangeStudentValue}</FinalResult>
+ <FinalResult isCorrect={isCorrect}>
+ {rangeStudentValue}{' '}
+ {isCorrect && <StyledIconCorrect name="done" />}
+ {!isCorrect && <StyledIconWrong name="close" />}
+ </FinalResult>
</span>
</ResultContainer>
)}
--
GitLab