diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 9a168efb00c3dc010d5e172cc6e1f0ba151be43e..1db12ab4362fe08c088bd9fa1817cb2e7008dc60 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -28,15 +28,19 @@ const SubmitButton = styled.button`
top: 16px;
`;
-const t = `<p class="paragraph"></p><div id="1624fa06-2075-488a-9912-9794a3763aca" class="multiple-drop-down-container" feedback="">
- <p class="paragraph">Lorem ipsum dolor sit amet,<span id="fa9ff44d-19a6-4f47-99d9-d77d3dc02fbf" class="multiple-drop-down-option" options="[{"label":"option 1","value":"6c4aa0f3-43b1-40a7-a066-bc73449523df"},{"label":"option 2","value":"29365b0c-c00d-40c1-8a5e-118dbdf47e50"},{"label":"option 3","value":"743a425e-6340-4a72-a07c-d2e78154fcc8"}]" correct="29365b0c-c00d-40c1-8a5e-118dbdf47e50"></span>consectetur adipiscing elit. Nulla cursus ultricies enim, id condimentum dui facilisis a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed euismod posuere orci. Praesent consectetur augue ut lorem suscipit, nec molestie libero pellentesque. </p>
- <p class="paragraph">Nullam porttitor ligula neque. In aliquam<span id="f8380222-11fa-46e7-91a9-0bf67ff3d1d7" class="multiple-drop-down-option" options="[{"label":"option 4","value":"4e2c45fe-0aad-4c59-9a92-ed44f01a82e2"},{"label":"option 5","value":"15e27b91-682a-4e10-a5d0-149192fd2e4c"},{"label":"option 6","value":"886c921d-2e75-41ea-a1a6-2d49e7921a57"},{"label":"option 7","value":"d14c2409-f66a-47d1-8f63-72686d24df37"}]" correct="4e2c45fe-0aad-4c59-9a92-ed44f01a82e2"></span> ex neque, sit amet sagittis nulla volutpat sed. Nulla blandit facilisis ante, vel tempus ante porta quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer nulla tellus, dictum at laoreet eu, hendrerit at quam. Sed consectetur, neque vel ornare malesuada, eros sem commodo purus, <span id="c13f5243-03c0-433c-8e44-440d536d9150" class="multiple-drop-down-option" options="[{"label":"option 9","value":"3b9cd3b4-9e70-45de-975d-31407c48812c"},{"label":"option 10","value":"3baf86a8-a3fa-4e64-bfe8-f01ce4320489"},{"label":"option 11","value":"f1c6023c-5cde-445a-b9fb-cc23f06c8132"}]" correct="f1c6023c-5cde-445a-b9fb-cc23f06c8132"></span> sagittis volutpat elit leo in diam. Aliquam mattis, est non placerat euismod, nisl nisl vestibulum mauris, non interdum dui urna et tellus.</p>
+const initialContent = `<p class="paragraph"></p>
+<div id="1624fa06-2075-488a-9912-9794a3763aca" class="multiple-drop-down-container" feedback="">
+ <p class="paragraph">Lorem ipsum dolor sit amet,<span id="fa9ff44d-19a6-4f47-99d9-d77d3dc02fbf" class="multiple-drop-down-option" options="[{"label":"option 1","value":"6c4aa0f3-43b1-40a7-a066-bc73449523df"},{"label":"option 2","value":"29365b0c-c00d-40c1-8a5e-118dbdf47e50"},{"label":"option 3","value":"743a425e-6340-4a72-a07c-d2e78154fcc8"}]" correct="6c4aa0f3-43b1-40a7-a066-bc73449523df" answer="29365b0c-c00d-40c1-8a5e-118dbdf47e50"></span>consectetur adipiscing elit. Nulla cursus ultricies enim, id condimentum dui facilisis a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed euismod posuere orci. Praesent consectetur augue ut lorem suscipit, nec molestie libero pellentesque.</p>
+ <p class="paragraph">Nullam porttitor ligula neque. In aliquam<span id="f8380222-11fa-46e7-91a9-0bf67ff3d1d7" class="multiple-drop-down-option" options="[{"label":"option 4","value":"4e2c45fe-0aad-4c59-9a92-ed44f01a82e2"},{"label":"option 5","value":"15e27b91-682a-4e10-a5d0-149192fd2e4c"},{"label":"option 6","value":"886c921d-2e75-41ea-a1a6-2d49e7921a57"},{"label":"option 7","value":"d14c2409-f66a-47d1-8f63-72686d24df37"}]" correct="4e2c45fe-0aad-4c59-9a92-ed44f01a82e2" answer="4e2c45fe-0aad-4c59-9a92-ed44f01a82e2"></span> ex neque, sit amet sagittis nulla volutpat sed. Nulla blandit facilisis ante, vel tempus ante porta quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer nulla tellus, dictum at laoreet eu, hendrerit at quam. Sed consectetur, neque vel ornare malesuada, eros sem commodo purus, <span id="c13f5243-03c0-433c-8e44-440d536d9150" class="multiple-drop-down-option" options="[{"label":"option 9","value":"3b9cd3b4-9e70-45de-975d-31407c48812c"},{"label":"option 10","value":"3baf86a8-a3fa-4e64-bfe8-f01ce4320489"},{"label":"option 11","value":"f1c6023c-5cde-445a-b9fb-cc23f06c8132"}]" correct="f1c6023c-5cde-445a-b9fb-cc23f06c8132" answer="f1c6023c-5cde-445a-b9fb-cc23f06c8132"></span> sagittis volutpat elit leo in diam. Aliquam mattis, est non placerat euismod, nisl nisl vestibulum mauris, non interdum dui urna et tellus.</p>
</div>
<p class="paragraph"></p>
<div id="2257aaf4-20cf-44ff-bd45-0e0a4561b764" class="matching-container" options="[{"label":"option 1","value":"941cebeb-58bd-44c5-bf42-c78d20c23b7a"},{"label":"option 2","value":"ab2e7cfc-c700-4ba2-9ac3-3040974f67bf"}]" feedback="">
+ <p class="paragraph"></p>
+ <p class="paragraph"></p>
+ <p class="paragraph"></p>
<p class="paragraph">
<div id="2bf9d3ca-166d-4354-9ebf-5d0fc6e75d8d" class="matching-option" isfirst="true" answer="{}">some text</div>
- <div id="902ce1df-14b0-4c1f-9d44-066bb85262b1" class="matching-option" isfirst="false" answer="{}">some more text </div>
+ <div id="902ce1df-14b0-4c1f-9d44-066bb85262b1" class="matching-option" isfirst="false" answer="{}">some more text</div>
</p>
<p class="paragraph"></p>
</div>
@@ -47,7 +51,7 @@ const t = `<p class="paragraph"></p><div id="1624fa06-2075-488a-9912-9794a3763ac
<div class="multiple-choice-option" id="debb868e-bbfe-4ba2-bf93-c963153ff791" correct="false" answer="false" feedback="feedback 1">
<p class="paragraph">answer 1</p>
</div>
- <div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" answer="true" feedback="feedback 2">
+ <div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" answer="false" feedback="feedback 2">
<p class="paragraph">answer 2</p>
</div>
</div>
@@ -58,12 +62,15 @@ const t = `<p class="paragraph"></p><div id="1624fa06-2075-488a-9912-9794a3763ac
const Hhmi = () => {
const [submited, isSubmited] = useState(false);
const [readOnly, isReadOnly] = useState(false);
+ const [content, setContent] = useState(initialContent);
const readOnlyQuestions = () => {
+ setContent(editorRef.current.getContent());
isReadOnly(true);
};
const submitQuestions = () => {
+ setContent(editorRef.current.getContent());
isSubmited(true);
isReadOnly(true);
};
@@ -80,10 +87,10 @@ const Hhmi = () => {
ref={editorRef}
customValues={{ showFeedBack: submited }}
fileUpload={file => renderImage(file)}
- value=""
+ value={content}
readonly={readOnly}
layout={HhmiLayout}
- // onChange={source => console.log(source)}
+ onChange={source => console.log(source)}
/>
</>
);
diff --git a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
index aa7a3c9f6318613d22309d28405353ae35fbebb0..d3b3ee1507b8ccdbdb2e92653f7ed6dc56214744 100644
--- a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
@@ -53,7 +53,6 @@ const DropComponent = ({ getPos, node, view }) => {
setSelectedOption(option);
const allNodes = getNodes(main);
- console.log(allNodes);
allNodes.forEach(singleNode => {
if (singleNode.node.attrs.id === node.attrs.id) {
main.dispatch(
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
index 882ee75902eff476137829f38267b37ab6ae0833..226da23006ec222fde04c34cb0fcd48a10bb5a62 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js
@@ -28,13 +28,19 @@ const StyledIconAction = styled(Icon)`
${props => props.isActive && activeStylesSvg}
`;
-const CorrectAnswer = styled.span`
- color: green;
+const AnswerContainer = styled.div`
+ display: inline-block;
+ border-bottom: ${props =>
+ props.isCorrect ? '1px solid green;' : '1px solid red'};
+ border-top: ${props =>
+ props.isCorrect ? '1px solid green;' : '1px solid red'};
+ border-radius: 192px;
+ padding: 2px 4px 2px 4px;
`;
-const Answer = styled.span`
- color: green;
-`;
+const CorrectAnswer = styled.span``;
+
+const Answer = styled.span``;
export default ({ node, view, getPos }) => {
const context = useContext(WaxContext);
@@ -45,43 +51,47 @@ export default ({ node, view, getPos }) => {
} = context;
const [isActive, setIsActive] = useState(false);
- const [correctAnswer, setCorrectAnswer] = useState(
- node.attrs.options.find(option => option.value === node.attrs.correct),
- );
+
const customProps = main.props.customValues;
const posFrom = pmViews[activeViewId].state.selection.from;
const isEditable = main.props.editable(editable => {
return editable;
});
+
const readOnly = !isEditable;
- console.log(correctAnswer, node);
useEffect(() => {
setIsActive(false);
if (getPos() === posFrom) {
setIsActive(true);
}
- }, [posFrom, correctAnswer]);
+ }, [posFrom]);
- if (!readOnly)
- return correctAnswer ? (
- <span> {correctAnswer.label}</span>
- ) : (
+ if (!readOnly) {
+ return (
<StyledIconActionContainer isActive={isActive}>
<StyledIconAction isActive={isActive} name="mulitpleDropDown" />
</StyledIconActionContainer>
);
+ }
if (!(readOnly && customProps && !customProps.showFeedBack)) {
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 (
- <>
- {correctAnswer && <CorrectAnswer>{correctAnswer.label}</CorrectAnswer>}
- {answer && <Answer>{answer.label}</Answer>}
- </>
+ <AnswerContainer isCorrect={isCorrect}>
+ Correct:
+ {correct && <CorrectAnswer> {correct.label} | </CorrectAnswer>}
+ Answer: {answer && <Answer> {answer.label}</Answer>}
+ </AnswerContainer>
);
}
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js b/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js
index 48044eb403549088455890dad3a2d605bff7d887..169846680e849c6802c354d53ddf82dc26c50a9b 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/ReadOnlyDropDown.js
@@ -59,7 +59,7 @@ const DropComponent = ({ getPos, node, options }) => {
if (singleNode.node.attrs.id === node.attrs.id) {
tr.setNodeMarkup(singleNode.pos, undefined, {
...singleNode.node.attrs,
- correct: option.value,
+ answer: option.value,
});
}
});
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownContainerNode.js b/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownContainerNode.js
index 013ff9279711a141fd8de246415d801c97b0cb22..2382e92142fdeccd595ba2e82078f9f50f3095d4 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownContainerNode.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownContainerNode.js
@@ -9,7 +9,8 @@ const multipleDropDownContainerNode = {
selectable: false,
draggable: false,
defining: true,
- content: 'paragraph* bulletlist* orderedlist*',
+ // content: 'paragraph* bulletlist* orderedlist*',
+ content: 'block*',
parseDOM: [
{
tag: 'div.multiple-drop-down-container',