diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 19ab37c7bd3d70f8d215612b458ac567b67731be..7f543eb1373cda386ac1ca1fb57c25e67f50021c 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -142,6 +142,30 @@ const Hhmi = () => {
const { readOnly, testMode, submitted, content } = stateProps;
+ const data = {
+ type: 'doc',
+ content: [
+ {
+ type: 'numerical_answer_container',
+ attrs: {
+ id: 'f9c33d03-68ee-4c27-8a03-5072447fac1a',
+ class: 'numerical-answer',
+ feedback: '',
+ answerType: 'exactAnswer',
+ answersExact: [],
+ },
+ content: [
+ {
+ type: 'paragraph',
+ attrs: {
+ class: 'paragraph',
+ },
+ },
+ ],
+ },
+ ],
+ };
+
return (
<>
<ButtonContainer>
@@ -167,7 +191,7 @@ const Hhmi = () => {
ref={editorRef}
customValues={{ showFeedBack: submitted, testMode }}
fileUpload={file => renderImage(file)}
- // value={content}
+ value={data}
targetFormat="JSON"
readonly={readOnly}
layout={HhmiLayout}
diff --git a/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
index a9e8452d8ba20247a730b36798f9eff37e746cdb..c4d552494d68dc25b2ad09241793e517a2dc92dd 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
@@ -26,9 +26,8 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
-const ExactAnswerComponent = ({ getPos, node }) => {
+const ExactAnswerComponent = ({ node }) => {
const context = useContext(WaxContext);
- const { activeView } = context;
const [exact, setExact] = useState('');
const [marginError, setMarginError] = useState('');
diff --git a/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerContainerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerContainerComponent.js
index 8abd8c6b8b55943d1105ece30022c19156ec2d01..a80946804905dbe899283b3b6ff884cba7935819 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerContainerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerContainerComponent.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
import { WaxContext, DocumentHelpers, Icon } from 'wax-prosemirror-core';
import styled from 'styled-components';
import EditorComponent from '../../MultipleChoiceQuestionService/components/EditorComponent';
@@ -55,7 +55,7 @@ export default ({ node, view, getPos }) => {
options,
pmViews: { main },
} = context;
-
+ const [answerType, setAnswerType] = useState(node.attrs.answerType);
const customProps = main.props.customValues;
const { testMode } = customProps;
@@ -80,6 +80,15 @@ export default ({ node, view, getPos }) => {
});
};
+ useEffect(() => {
+ const allNodes = getNodes(context.pmViews.main);
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === node.attrs.id) {
+ setAnswerType(singleNode.node.attrs.answerType);
+ }
+ });
+ }, []);
+
return (
<NumericalAnswerWrapper>
<div>
@@ -104,15 +113,20 @@ export default ({ node, view, getPos }) => {
view={view}
/>
<NumericalAnswerOption>
- {!options[node.attrs.id] && <>No Type Selected</>}
- {options[node.attrs.id]?.numericalAnswer === 'exactAnswer' && (
- <ExactAnswerComponent getPos={getPos} node={node} />
+ {!options[node.attrs.id] && answerType === '' && (
+ <>No Type Selected</>
+ )}
+ {(options[node.attrs.id]?.numericalAnswer === 'exactAnswer' ||
+ answerType === 'exactAnswer') && (
+ <ExactAnswerComponent node={node} />
)}
- {options[node.attrs.id]?.numericalAnswer === 'rangeAnswer' && (
- <RangeAnswerComponent getPos={getPos} node={node} />
+ {(options[node.attrs.id]?.numericalAnswer === 'rangeAnswer' ||
+ answerType === 'rangeAnswer') && (
+ <RangeAnswerComponent node={node} />
)}
- {options[node.attrs.id]?.numericalAnswer === 'preciseAnswer' && (
- <PreciseAnswerComponent getPos={getPos} node={node} />
+ {(options[node.attrs.id]?.numericalAnswer === 'preciseAnswer' ||
+ answerType === 'preciseAnswer') && (
+ <PreciseAnswerComponent node={node} />
)}
</NumericalAnswerOption>
{!testMode && !(readOnly && feedback === '') && (
diff --git a/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerDropDownCompontent.js b/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerDropDownCompontent.js
index a743a3949cf7a12e38bde23b3e83c400c790c29d..623edace57c23b3603dc598914a6b6ff60a01d19 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerDropDownCompontent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerDropDownCompontent.js
@@ -161,11 +161,32 @@ const NumericalAnswerDropDownCompontent = ({ nodeId }) => {
}
};
+ const SaveTypeToNode = option => {
+ const allNodes = getNodes(context.pmViews.main);
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === nodeId) {
+ context.pmViews.main.dispatch(
+ context.pmViews.main.state.tr.setNodeMarkup(
+ singleNode.pos,
+ undefined,
+ {
+ ...singleNode.node.attrs,
+ answerType: option,
+ answersExact: [],
+ answersRange: [],
+ answersPrecise: [],
+ },
+ ),
+ );
+ }
+ });
+ };
+
const onChange = option => {
context.setOption({ [nodeId]: { numericalAnswer: option.value } });
setLabel(option.label);
openCloseMenu();
- activeView.dispatch(activeView.state.tr.setMeta('addToHistory', false));
+ SaveTypeToNode(option.value);
activeView.focus();
};
diff --git a/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
index 506230e5a8a62403ee9b9659d90b2710e729f56a..1e714958909c5a9dd582d5429dc74f910324f8b5 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
@@ -1,6 +1,6 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useContext } from 'react';
import styled from 'styled-components';
-import { DocumentHelpers } from 'wax-prosemirror-core';
+import { DocumentHelpers, WaxContext } from 'wax-prosemirror-core';
const AnswerContainer = styled.div`
display: flex;
@@ -26,7 +26,8 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
-const PreciseAnswerComponent = () => {
+const PreciseAnswerComponent = ({ node }) => {
+ const context = useContext(WaxContext);
const [precise, setPrecise] = useState('');
const preciseRef = useRef(null);
@@ -38,8 +39,31 @@ const PreciseAnswerComponent = () => {
.replace(/^0[^.]/, '0');
};
+ const SaveValuesToNode = () => {
+ const allNodes = getNodes(context.pmViews.main);
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === node.attrs.id) {
+ const obj = {
+ exactAnswer: onlyNumbers(preciseRef.current.value),
+ };
+
+ context.pmViews.main.dispatch(
+ context.pmViews.main.state.tr.setNodeMarkup(
+ singleNode.pos,
+ undefined,
+ {
+ ...singleNode.node.attrs,
+ answersPrecise: obj,
+ },
+ ),
+ );
+ }
+ });
+ };
+
const onChangePrecice = () => {
setPrecise(onlyNumbers(preciseRef.current.value));
+ SaveValuesToNode();
};
return (
diff --git a/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
index c0be1d170700256d4802da681aa4527e6cd51e93..e4ee4770c2dd5b69be575fb9af7e9a0426aa5dc5 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
@@ -1,6 +1,6 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useContext } from 'react';
import styled from 'styled-components';
-import { DocumentHelpers } from 'wax-prosemirror-core';
+import { DocumentHelpers, WaxContext } from 'wax-prosemirror-core';
const AnswerContainer = styled.div`
display: flex;
@@ -26,7 +26,8 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
-const RangeAnswerComponent = () => {
+const RangeAnswerComponent = ({ node }) => {
+ const context = useContext(WaxContext);
const [minValue, setMinValue] = useState('');
const [maxValue, setMaxValue] = useState('');
@@ -40,12 +41,37 @@ const RangeAnswerComponent = () => {
.replace(/^0[^.]/, '0');
};
+ const SaveValuesToNode = () => {
+ const allNodes = getNodes(context.pmViews.main);
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === node.attrs.id) {
+ const obj = {
+ minAnswer: onlyNumbers(minRef.current.value),
+ maxError: onlyNumbers(maxRef.current.value),
+ };
+
+ context.pmViews.main.dispatch(
+ context.pmViews.main.state.tr.setNodeMarkup(
+ singleNode.pos,
+ undefined,
+ {
+ ...singleNode.node.attrs,
+ answersRange: obj,
+ },
+ ),
+ );
+ }
+ });
+ };
+
const onChangeMin = () => {
setMinValue(onlyNumbers(minRef.current.value));
+ SaveValuesToNode();
};
const onChangeMax = () => {
setMaxValue(onlyNumbers(maxRef.current.value));
+ SaveValuesToNode();
};
return (
diff --git a/wax-questions-service/src/NumericalAnswerService/schema/NumericalAnswerContainerNode.js b/wax-questions-service/src/NumericalAnswerService/schema/NumericalAnswerContainerNode.js
index e70db45d3b9e237d0a1a168e9dd306d8a72e63e3..2c15c55c0717fd4dfd05f01366d520067a5ea5cd 100644
--- a/wax-questions-service/src/NumericalAnswerService/schema/NumericalAnswerContainerNode.js
+++ b/wax-questions-service/src/NumericalAnswerService/schema/NumericalAnswerContainerNode.js
@@ -5,6 +5,8 @@ const NumericalAnswerContainerNode = {
feedback: { default: '' },
answerType: { default: '' },
answersExact: { default: [] },
+ answersRange: { default: [] },
+ answersPrecise: { default: [] },
},
group: 'block questions',
atom: true,
@@ -15,6 +17,8 @@ const NumericalAnswerContainerNode = {
getAttrs(dom) {
return {
answersExact: JSON.parse(dom.getAttribute('answersExact')),
+ answersRange: JSON.parse(dom.getAttribute('answersRange')),
+ answersPrecise: JSON.parse(dom.getAttribute('answersPrecise')),
id: dom.getAttribute('id'),
class: dom.getAttribute('class'),
feedback: dom.getAttribute('feedback'),
@@ -27,11 +31,13 @@ const NumericalAnswerContainerNode = {
return [
'div',
{
+ answerType: node.attrs.answerType,
+ answersExact: JSON.stringify(node.attrs.answersExact),
+ answersRange: JSON.stringify(node.attrs.answersRange),
+ answersPrecise: JSON.stringify(node.attrs.answersPrecise),
id: node.attrs.id,
class: node.attrs.class,
- answersExact: JSON.stringify(node.attrs.answersExact),
feedback: node.attrs.feedback,
- answerType: node.attrs.answerType,
},
];
},