diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/EditorComponent.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/EditorComponent.js index 9ed73a3641785dae74a2216ac558f4ddd12dd4aa..4cf2038ef79b8500508714d5939ff050e54bb41d 100644 --- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/EditorComponent.js +++ b/wax-prosemirror-services/src/FillTheGapQuestionService/components/EditorComponent.js @@ -45,6 +45,7 @@ const EditorWrapper = styled.span` const StudentAnswer = styled.span` border-bottom: 1px solid black; margin-right: 5px; + color: ${props => (props.isCorrect ? ' #008000' : 'red')}; `; const CorrectAnswers = styled.span` @@ -168,6 +169,15 @@ const EditorComponent = ({ node, view, getPos }) => { } }; + let isCorrect = false; + if ( + node.textContent + .split(';') + .find(element => element === node.attrs.answer.trim()) + ) { + isCorrect = true; + } + return ( (isEditable && !testMode && !showFeedBack && ( <EditorWrapper> @@ -181,7 +191,7 @@ const EditorComponent = ({ node, view, getPos }) => { )) || (showFeedBack && !testMode && ( <> - <StudentAnswer>{node.attrs.answer}</StudentAnswer> + <StudentAnswer isCorrect={isCorrect}>{node.attrs.answer}</StudentAnswer> <CorrectAnswers>{`(Aceepted Answers : ${node.textContent.replaceAll(';', ' -')})`}</CorrectAnswers> </> )) || <InputComponent getPos={getPos} node={node} view={view} />