numerical answer fixes

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 },

wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js

 /* 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>
       )}

wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js

 /* 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>
       )}

wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js

 /* 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>
       )}