diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js index fe92035249017cfeb6e6aeb3b66df528acb7eb1a..587a80d04fc05ef82a92c3c3da431174da99458a 100644 --- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js +++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js @@ -1,8 +1,10 @@ +/* eslint-disable react/destructuring-assignment */ /* eslint-disable react/prop-types */ import React, { useState, useContext, useEffect } from 'react'; import { WaxContext } from 'wax-prosemirror-core'; import { DocumentHelpers } from 'wax-prosemirror-utilities'; +import { Icon } from 'wax-prosemirror-components'; import { NodeSelection } from 'prosemirror-state'; import styled from 'styled-components'; import Switch from '../../components/Switch'; @@ -16,6 +18,37 @@ const StyledSwitch = styled(Switch)` } `; +const AnswerContainer = styled.span` + margin-left: auto; +`; + +const Correct = styled.span` + margin-right: 10px; + span { + color: #008000; +`; + +const Answer = styled.span` + margin-right: 10px; + span { + color: ${props => (props.isCorrect ? ' #008000' : 'red')}; + } +`; + +const StyledIconCorrect = styled(Icon)` + fill: #008000; + pointer-events: none; + height: 24px; + width: 24px; +`; + +const StyledIconWrong = styled(Icon)` + fill: red; + pointer-events: none; + height: 24px; + width: 24px; +`; + const CustomSwitch = ({ node, getPos }) => { const context = useContext(WaxContext); const [checked, setChecked] = useState(false); @@ -29,6 +62,8 @@ const CustomSwitch = ({ node, getPos }) => { return editable; }); + const customProps = context.view.main.props.customValues; + useEffect(() => { const allNodes = getNodes(main); allNodes.forEach(singNode => { @@ -90,6 +125,27 @@ const CustomSwitch = ({ node, getPos }) => { main.dispatch(tr); }; + if (customProps.showFeedBack) { + const correct = node.attrs.correct ? 'YES' : 'NO'; + const answer = node.attrs.answer ? 'YES' : 'NO'; + const isCorrect = node.attrs.correct === node.attrs.answer; + + return ( + <AnswerContainer> + <Correct> + Correct: + <span>{correct}</span> + </Correct> + + <Answer isCorrect={isCorrect}> + Answer: <span>{answer}</span> + </Answer> + {isCorrect && <StyledIconCorrect name="done" />} + {!isCorrect && <StyledIconWrong name="close" />} + </AnswerContainer> + ); + } + return ( <StyledSwitch checked={isEditable ? checked : checkedAnswerMode} diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js index e30e3475446dc7bc721300eef8602df4f45dba6f..0a589b035df67bc3fa591bb10269feafa21daca3 100644 --- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js +++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js @@ -1,8 +1,10 @@ +/* eslint-disable react/destructuring-assignment */ /* eslint-disable react/prop-types */ import React, { useState, useContext, useEffect } from 'react'; import { WaxContext } from 'wax-prosemirror-core'; import { DocumentHelpers } from 'wax-prosemirror-utilities'; +import { Icon } from 'wax-prosemirror-components'; import styled from 'styled-components'; import Switch from '../../components/Switch'; @@ -23,6 +25,37 @@ const StyledSwitch = styled(Switch)` } `; +const AnswerContainer = styled.span` + margin-left: auto; +`; + +const Correct = styled.span` + margin-right: 10px; + span { + color: #008000; +`; + +const Answer = styled.span` + margin-right: 10px; + span { + color: ${props => (props.isCorrect ? ' #008000' : 'red')}; + } +`; + +const StyledIconCorrect = styled(Icon)` + fill: #008000; + pointer-events: none; + height: 24px; + width: 24px; +`; + +const StyledIconWrong = styled(Icon)` + fill: red; + pointer-events: none; + height: 24px; + width: 24px; +`; + const CustomSwitch = ({ node, getPos }) => { const context = useContext(WaxContext); const [checked, setChecked] = useState(false); @@ -33,6 +66,8 @@ const CustomSwitch = ({ node, getPos }) => { view: { main }, } = context; + const customProps = context.view.main.props.customValues; + const isEditable = view.main.props.editable(editable => { return editable; }); @@ -65,6 +100,27 @@ const CustomSwitch = ({ node, getPos }) => { }); }; + if (customProps.showFeedBack) { + const correct = node.attrs.correct ? 'TRUE' : 'FALSE'; + const answer = node.attrs.answer ? 'TRUE' : 'FALSE'; + const isCorrect = node.attrs.correct === node.attrs.answer; + + return ( + <AnswerContainer> + <Correct> + Correct: + <span>{correct}</span> + </Correct> + + <Answer isCorrect={isCorrect}> + Answer: <span>{answer}</span> + </Answer> + {isCorrect && <StyledIconCorrect name="done" />} + {!isCorrect && <StyledIconWrong name="close" />} + </AnswerContainer> + ); + } + return ( <StyledSwitch checked={isEditable ? checked : checkedAnswerMode} diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/SwitchComponent.js index 4826676bafeb8be8c6439cd3c44ec7996dd0ff38..293699457bcd0da25f66f0d18863e0bc7042442f 100644 --- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/SwitchComponent.js +++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseSingleCorrectQuestionService/components/SwitchComponent.js @@ -1,8 +1,10 @@ +/* eslint-disable react/destructuring-assignment */ /* eslint-disable react/prop-types */ import React, { useState, useContext, useEffect } from 'react'; import { WaxContext } from 'wax-prosemirror-core'; import { DocumentHelpers } from 'wax-prosemirror-utilities'; +import { Icon } from 'wax-prosemirror-components'; import { NodeSelection } from 'prosemirror-state'; import styled from 'styled-components'; import Switch from '../../components/Switch'; @@ -16,6 +18,37 @@ const StyledSwitch = styled(Switch)` } `; +const AnswerContainer = styled.span` + margin-left: auto; +`; + +const Correct = styled.span` + margin-right: 10px; + span { + color: #008000; +`; + +const Answer = styled.span` + margin-right: 10px; + span { + color: ${props => (props.isCorrect ? ' #008000' : 'red')}; + } +`; + +const StyledIconCorrect = styled(Icon)` + fill: #008000; + pointer-events: none; + height: 24px; + width: 24px; +`; + +const StyledIconWrong = styled(Icon)` + fill: red; + pointer-events: none; + height: 24px; + width: 24px; +`; + const CustomSwitch = ({ node, getPos }) => { const context = useContext(WaxContext); const [checked, setChecked] = useState(false); @@ -26,6 +59,8 @@ const CustomSwitch = ({ node, getPos }) => { view: { main }, } = context; + const customProps = context.view.main.props.customValues; + const isEditable = view.main.props.editable(editable => { return editable; }); @@ -90,6 +125,27 @@ const CustomSwitch = ({ node, getPos }) => { main.dispatch(tr); }; + if (customProps.showFeedBack) { + const correct = node.attrs.correct ? 'TRUE' : 'FALSE'; + const answer = node.attrs.answer ? 'TRUE' : 'FALSE'; + const isCorrect = node.attrs.correct === node.attrs.answer; + + return ( + <AnswerContainer> + <Correct> + Correct: + <span>{correct}</span> + </Correct> + + <Answer isCorrect={isCorrect}> + Answer: <span>{answer}</span> + </Answer> + {isCorrect && <StyledIconCorrect name="done" />} + {!isCorrect && <StyledIconWrong name="close" />} + </AnswerContainer> + ); + } + return ( <StyledSwitch checked={isEditable ? checked : checkedAnswerMode}