submit multiple choice

wax-prosemirror-components/index.js

@@ -3,6 +3,7 @@ export { default as Button } from './src/components/Button';
 export { default as UndoRedoButton } from './src/components/UndoRedoButton';
 export { default as MenuButton } from './src/ui/buttons/MenuButton';
 export { default as icons } from './src/icons/icons';
+export { default as Icon } from './src/helpers/Icon';
 export { default as TableDropDown } from './src/components/tables/TableDropDown';
 export { default as ImageUpload } from './src/components/images/ImageUpload';
 export { default as TitleButton } from './src/components/TitleButton';

wax-prosemirror-components/src/components/SaveButton.js

@@ -16,7 +16,7 @@ const SaveButton = ({ view = {}, item }) => {
 
   const [isSaving, setIsSaving] = useState(false);
 
-  const handleMouseDown = (e, editorState, editorDispatch) => {
+  const handleMouseDown = () => {
     // view.props.onChange(state.doc.content);
     setIsSaving(true);
     setTimeout(() => {
@@ -55,9 +55,7 @@ const SaveButton = ({ view = {}, item }) => {
         disabled={isDisabled}
         iconName={iconTodisplay}
         label={label}
-        onMouseDown={e =>
-          handleMouseDown(e, main.view.state, main.view.dispatch)
-        }
+        onMouseDown={handleMouseDown}
         title={title}
       />
     ),

wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js

+/* 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 './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);
@@ -32,6 +65,8 @@ const CustomSwitch = ({ node, getPos }) => {
     view: { main },
   } = context;
 
+  const customProps = context.view.main.props.customValues;
+
   const isEditable = view.main.props.editable(editable => {
     return editable;
   });
@@ -64,6 +99,26 @@ const CustomSwitch = ({ node, getPos }) => {
     });
   };
 
+  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}