From 18e81d3a2414b050c8c4bdc6b852273f79acd3fe Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Sun, 20 Feb 2022 14:28:00 +0200
Subject: [PATCH] submit question: rest of multiple types

---
 .../components/SwitchComponent.js             | 56 +++++++++++++++++++
 .../components/SwitchComponent.js             | 56 +++++++++++++++++++
 .../components/SwitchComponent.js             | 56 +++++++++++++++++++
 3 files changed, 168 insertions(+)

diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
index fe9203524..587a80d04 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 e30e34754..0a589b035 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 4826676ba..293699457 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}
-- 
GitLab