diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js index 4111f98a60ebdd11ae5b28f087ce674d173f02e8..7411d81183457c50d9b921afb64ecd161a264771 100644 --- a/editors/demo/src/HHMI/HHMI.js +++ b/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="[{"label":"dsdsd","value":"633b428e-4fda-4b6d-a660-8e3f1f221391"}]" 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)} /> </> ); diff --git a/editors/demo/src/OEN/config/config.js b/editors/demo/src/OEN/config/config.js index ea98ba3479001fff60b074d261b5ceb9d46355cc..79590eeabb59eb5e18356642d8271ae99d07a545 100644 --- a/editors/demo/src/OEN/config/config.js +++ b/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(), diff --git a/wax-prosemirror-services/index.js b/wax-prosemirror-services/index.js index 51d1b2d171b2f8e8c5c0a69a0f35ca0811335d7d..fadcf73d30176bee408179e7501c2298df4a4bf3 100644 --- a/wax-prosemirror-services/index.js +++ b/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 */ diff --git a/wax-prosemirror-services/src/MatchingService/components/EditorComponent.js b/wax-prosemirror-services/src/MatchingService/components/EditorComponent.js index 9278ffd3a85597f3e2e456d7bba8f46fb88960a0..c66af0e13360d20bb17dfcc7546391ed8086a037 100644 --- a/wax-prosemirror-services/src/MatchingService/components/EditorComponent.js +++ b/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 { diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js index 162276143503a4f6cdf15083e5c2bb17d9e4c34d..71a30cccf070fcf68fae874d6f68b2dc943a3740 100644 --- a/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js +++ b/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js @@ -1,5 +1,5 @@ /* 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 : {correct && <span>{correct.label} </span>} + </CorrectAnswer> + <Answer isCorrect={isCorrect}> + Answer : + {answer && <span>{answer.label} </span>} + </Answer> + </AnswerContainer> )} </DropDownContainer> </Option> diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js index 226da23006ec222fde04c34cb0fcd48a10bb5a62..dce01efde821d6c3a6a6ec2bf4117c80e1cfc480 100644 --- a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js +++ b/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; `; diff --git a/wax-prosemirror-services/src/OenContainersService/OenContainersService.js b/wax-prosemirror-services/src/OENContainersService/OENContainersService.js similarity index 71% rename from wax-prosemirror-services/src/OenContainersService/OenContainersService.js rename to wax-prosemirror-services/src/OENContainersService/OENContainersService.js index df00c33bd078579c4b1d6f6c376ef335b8914318..cbe0d46856a1c1800b9016c72422cdbe90d016aa 100644 --- a/wax-prosemirror-services/src/OenContainersService/OenContainersService.js +++ b/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; diff --git a/wax-prosemirror-services/src/OenContainersService/oenContainers.css b/wax-prosemirror-services/src/OENContainersService/oenContainers.css similarity index 100% rename from wax-prosemirror-services/src/OenContainersService/oenContainers.css rename to wax-prosemirror-services/src/OENContainersService/oenContainers.css