submit matching

editors/demo/src/HHMI/HHMI.js

@@ -59,12 +59,10 @@ const initialContent = `<p class="paragraph"></p>
    <p class="paragraph">first <span id="16ec8f33-db5b-4839-9567-8aa73b776bcf" class="fill-the-gap" answer="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" answer="">answer 4; answer5;</span></p>
 </div>`;
 
-const val = `<p class="paragraph"></p><div id="9703faf4-523d-49b2-a719-3f4ecfff65b2" class="matching-container" options="[{&quot;label&quot;:&quot;dsdsd&quot;,&quot;value&quot;:&quot;633b428e-4fda-4b6d-a660-8e3f1f221391&quot;}]" feedback=""><p class="paragraph"><div id="60ccd550-7f65-4624-9e1e-eef7e4e68a73" class="matching-option" isfirst="true" answer="" correct="">dsdsdd</div></p><p class="paragraph"></p></div>`;
-
 const Hhmi = () => {
   const [submited, isSubmited] = useState(false);
   const [readOnly, isReadOnly] = useState(false);
-  const [content, setContent] = useState(val);
+  const [content, setContent] = useState(initialContent);
 
   const readOnlyQuestions = () => {
     setContent(editorRef.current.getContent());
@@ -92,7 +90,7 @@ const Hhmi = () => {
         value={content}
         readonly={readOnly}
         layout={HhmiLayout}
-        onChange={source => console.log(source)}
+        // onChange={source => console.log(source)}
       />
     </>
   );

editors/demo/src/OEN/config/config.js

@@ -43,7 +43,7 @@ import {
   CustomTagInlineToolGroupService,
   CustomTagBlockToolGroupService,
   CustomTagService,
-  OenContainersService,
+  OENContainersService,
 } from 'wax-prosemirror-services';
 
 import { EditoriaSchema } from 'wax-prosemirror-utilities';
@@ -153,7 +153,7 @@ export default {
   },
 
   services: [
-    new OenContainersService(),
+    new OENContainersService(),
     new CustomTagService(),
     new DisplayBlockLevelService(),
     new DisplayToolGroupService(),

wax-prosemirror-services/index.js

@@ -53,7 +53,7 @@ export { default as MatchingService } from './src/MatchingService/MatchingServic
 export { default as EnterService } from './src/EnterService/EnterService';
 export { default as MultipleDropDownService } from './src/MultipleDropDownService/MultipleDropDownService';
 
-export { default as OenContainersService } from './src/OenContainersService/OenContainersService';
+export { default as OENContainersService } from './src/OENContainersService/OENContainersService';
 /*
 ToolGroups
 */

wax-prosemirror-services/src/MatchingService/components/EditorComponent.js

@@ -58,7 +58,6 @@ const EditorWrapper = styled.div`
 
 const EditorComponent = ({ node, view, getPos }) => {
   const editorRef = useRef();
-  console.log(node);
 
   const context = useContext(WaxContext);
   const {

wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js

 /* eslint-disable react/prop-types */
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { TextSelection } from 'prosemirror-state';
 import { Fragment } from 'prosemirror-model';
@@ -43,6 +43,23 @@ const StyledIconAction = styled(Icon)`
   width: 24px;
 `;
 
+const AnswerContainer = styled.div`
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+`;
+const CorrectAnswer = styled.span`
+  span {
+    color: #008000;
+  }
+`;
+
+const Answer = styled.span`
+  span {
+    color: ${props => (props.isCorrect ? '#008000' : '#FF3030')};
+  }
+`;
+
 export default ({ node, view, getPos }) => {
   const context = useContext(WaxContext);
   const {
@@ -90,6 +107,16 @@ export default ({ node, view, getPos }) => {
     });
   };
 
+  const answer = node.attrs.options.find(
+    option => option.value === node.attrs.answer,
+  );
+
+  const correct = node.attrs.options.find(
+    option => option.value === node.attrs.correct,
+  );
+
+  const isCorrect = node.attrs.correct === node.attrs.answer;
+
   return (
     <Option>
       {!readOnly && (
@@ -115,7 +142,15 @@ export default ({ node, view, getPos }) => {
         )}
 
         {readOnly && customProps && customProps.showFeedBack && (
-          <span> Submit </span>
+          <AnswerContainer>
+            <CorrectAnswer>
+              Correct : &nbsp;{correct && <span>{correct.label} </span>}
+            </CorrectAnswer>
+            <Answer isCorrect={isCorrect}>
+              Answer : &nbsp;
+              {answer && <span>{answer.label} </span>}
+            </Answer>
+          </AnswerContainer>
         )}
       </DropDownContainer>
     </Option>

wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js

@@ -31,9 +31,9 @@ const StyledIconAction = styled(Icon)`
 const AnswerContainer = styled.div`
   display: inline-block;
   border-bottom: ${props =>
-    props.isCorrect ? '1px solid green;' : '1px solid red'};
+    props.isCorrect ? '1px solid #008000;' : '1px solid #FF3030'};
   border-top: ${props =>
-    props.isCorrect ? '1px solid green;' : '1px solid red'};
+    props.isCorrect ? '1px solid #008000;' : '1px solid #FF3030'};
   border-radius: 192px;
   padding: 2px 4px 2px 4px;
 `;

wax-prosemirror-services/src/OenContainersService/OenContainersService.js → wax-prosemirror-services/src/OENContainersService/OENContainersService.js

@@ -2,8 +2,8 @@ import { OenContainerNode } from 'wax-prosemirror-schema';
 import Service from '../Service';
 import './oenContainers.css';
 
-class OenContainersService extends Service {
-  name = 'OenContainersService';
+class OENContainersService extends Service {
+  name = 'OENContainersService';
 
   boot() {}
 
@@ -16,4 +16,4 @@ class OenContainersService extends Service {
   }
 }
 
-export default OenContainersService;
+export default OENContainersService;