Skip to content
Snippets Groups Projects
Commit d495b8cc authored by chris's avatar chris
Browse files

readonly mode

parent b9fec103
No related branches found
No related tags found
1 merge request!513Student numerical
Hide whitespace changes
Inline Side-by-side
Showing
with 87 additions and 62 deletions
editors/demo/src/HHMI/HHMI.js
+ 50
− 50
View file @ d495b8cc
......@@ -68,31 +68,55 @@ const SubmitButton = styled.button`
`}
`;
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="[{&quot;label&quot;:&quot;option 1&quot;,&quot;value&quot;:&quot;6c4aa0f3-43b1-40a7-a066-bc73449523df&quot;},{&quot;label&quot;:&quot;option 2&quot;,&quot;value&quot;:&quot;29365b0c-c00d-40c1-8a5e-118dbdf47e50&quot;},{&quot;label&quot;:&quot;option 3&quot;,&quot;value&quot;:&quot;743a425e-6340-4a72-a07c-d2e78154fcc8&quot;}]" 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="[{&quot;label&quot;:&quot;option 4&quot;,&quot;value&quot;:&quot;4e2c45fe-0aad-4c59-9a92-ed44f01a82e2&quot;},{&quot;label&quot;:&quot;option 5&quot;,&quot;value&quot;:&quot;15e27b91-682a-4e10-a5d0-149192fd2e4c&quot;},{&quot;label&quot;:&quot;option 6&quot;,&quot;value&quot;:&quot;886c921d-2e75-41ea-a1a6-2d49e7921a57&quot;},{&quot;label&quot;:&quot;option 7&quot;,&quot;value&quot;:&quot;d14c2409-f66a-47d1-8f63-72686d24df37&quot;}]" 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="[{&quot;label&quot;:&quot;option 9&quot;,&quot;value&quot;:&quot;3b9cd3b4-9e70-45de-975d-31407c48812c&quot;},{&quot;label&quot;:&quot;option 10&quot;,&quot;value&quot;:&quot;3baf86a8-a3fa-4e64-bfe8-f01ce4320489&quot;},{&quot;label&quot;:&quot;option 11&quot;,&quot;value&quot;:&quot;f1c6023c-5cde-445a-b9fb-cc23f06c8132&quot;}]" 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="[{&quot;label&quot;:&quot;option 1&quot;,&quot;value&quot;:&quot;941cebeb-58bd-44c5-bf42-c78d20c23b7a&quot;},{&quot;label&quot;:&quot;option 2&quot;,&quot;value&quot;:&quot;ab2e7cfc-c700-4ba2-9ac3-3040974f67bf&quot;}]" feedback="">
<p class="paragraph">
<div id="2bf9d3ca-166d-4354-9ebf-5d0fc6e75d8d" class="matching-option" isfirst="true" answer="">some text</div>
</p>
</div>
<div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc323" class="multiple-choice">
<div class="multiple-choice-question" id="38de8538-647a-489d-8474-f92d0d256c32">
<p class="paragraph">question</p>
</div>
<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="false" feedback="feedback 2">
<p class="paragraph">answer 2</p>
</div>
</div>
<div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback="some feedback">
<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 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="[{&quot;label&quot;:&quot;option 1&quot;,&quot;value&quot;:&quot;6c4aa0f3-43b1-40a7-a066-bc73449523df&quot;},{&quot;label&quot;:&quot;option 2&quot;,&quot;value&quot;:&quot;29365b0c-c00d-40c1-8a5e-118dbdf47e50&quot;},{&quot;label&quot;:&quot;option 3&quot;,&quot;value&quot;:&quot;743a425e-6340-4a72-a07c-d2e78154fcc8&quot;}]" 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="[{&quot;label&quot;:&quot;option 4&quot;,&quot;value&quot;:&quot;4e2c45fe-0aad-4c59-9a92-ed44f01a82e2&quot;},{&quot;label&quot;:&quot;option 5&quot;,&quot;value&quot;:&quot;15e27b91-682a-4e10-a5d0-149192fd2e4c&quot;},{&quot;label&quot;:&quot;option 6&quot;,&quot;value&quot;:&quot;886c921d-2e75-41ea-a1a6-2d49e7921a57&quot;},{&quot;label&quot;:&quot;option 7&quot;,&quot;value&quot;:&quot;d14c2409-f66a-47d1-8f63-72686d24df37&quot;}]" 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="[{&quot;label&quot;:&quot;option 9&quot;,&quot;value&quot;:&quot;3b9cd3b4-9e70-45de-975d-31407c48812c&quot;},{&quot;label&quot;:&quot;option 10&quot;,&quot;value&quot;:&quot;3baf86a8-a3fa-4e64-bfe8-f01ce4320489&quot;},{&quot;label&quot;:&quot;option 11&quot;,&quot;value&quot;:&quot;f1c6023c-5cde-445a-b9fb-cc23f06c8132&quot;}]" 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="[{&quot;label&quot;:&quot;option 1&quot;,&quot;value&quot;:&quot;941cebeb-58bd-44c5-bf42-c78d20c23b7a&quot;},{&quot;label&quot;:&quot;option 2&quot;,&quot;value&quot;:&quot;ab2e7cfc-c700-4ba2-9ac3-3040974f67bf&quot;}]" feedback="">
// <p class="paragraph">
// <div id="2bf9d3ca-166d-4354-9ebf-5d0fc6e75d8d" class="matching-option" isfirst="true" answer="">some text</div>
// </p>
// </div>
// <div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc323" class="multiple-choice">
// <div class="multiple-choice-question" id="38de8538-647a-489d-8474-f92d0d256c32">
// <p class="paragraph">question</p>
// </div>
// <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="false" feedback="feedback 2">
// <p class="paragraph">answer 2</p>
// </div>
// </div>
// <div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback="some feedback">
// <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 initialContent = {
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',
},
},
],
},
],
};
const Hhmi = () => {
const [stateProps, setStateProps] = useState({
......@@ -142,30 +166,6 @@ 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>
......@@ -191,7 +191,7 @@ const Hhmi = () => {
ref={editorRef}
customValues={{ showFeedBack: submitted, testMode }}
fileUpload={file => renderImage(file)}
value={data}
value={content}
targetFormat="JSON"
readonly={readOnly}
layout={HhmiLayout}
......
wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
+ 7
− 3
View file @ d495b8cc
......@@ -26,10 +26,12 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
const ExactAnswerComponent = ({ node }) => {
const ExactAnswerComponent = ({ node, readOnly, testMode }) => {
const context = useContext(WaxContext);
const [exact, setExact] = useState('');
const [marginError, setMarginError] = useState('');
const [exact, setExact] = useState(node.attrs.answersExact.exactAnswer || '');
const [marginError, setMarginError] = useState(
node.attrs.answersExact.marginError || '',
);
const exactRef = useRef(null);
const errorRef = useRef(null);
......@@ -81,6 +83,7 @@ const ExactAnswerComponent = ({ node }) => {
<ValueInnerContainer>
<span>Exact Answer</span>
<input
disabled={readOnly}
name="exactAnswer"
onChange={onChangeExact}
ref={exactRef}
......@@ -95,6 +98,7 @@ const ExactAnswerComponent = ({ node }) => {
<ValueInnerContainer>
<span>Margin of error (%)</span>
<input
disabled={readOnly}
name="errorAnswer"
onChange={onChangeError}
ref={errorRef}
......
wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerContainerComponent.js
+ 15
− 3
View file @ d495b8cc
......@@ -115,13 +115,25 @@ export default ({ node, view, getPos }) => {
<>No Type Selected</>
)}
{options[node.attrs.id]?.numericalAnswer === 'exactAnswer' && (
<ExactAnswerComponent node={node} />
<ExactAnswerComponent
node={node}
readOnly={readOnly}
testMode={testMode}
/>
)}
{options[node.attrs.id]?.numericalAnswer === 'rangeAnswer' && (
<RangeAnswerComponent node={node} />
<RangeAnswerComponent
node={node}
readOnly={readOnly}
testMode={testMode}
/>
)}
{options[node.attrs.id]?.numericalAnswer === 'preciseAnswer' && (
<PreciseAnswerComponent node={node} />
<PreciseAnswerComponent
node={node}
readOnly={readOnly}
testMode={testMode}
/>
)}
</NumericalAnswerOption>
{!testMode && !(readOnly && feedback === '') && (
......
wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
+ 6
− 3
View file @ d495b8cc
......@@ -26,9 +26,11 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
const PreciseAnswerComponent = ({ node }) => {
const PreciseAnswerComponent = ({ node, readOnly, testMode }) => {
const context = useContext(WaxContext);
const [precise, setPrecise] = useState('');
const [precise, setPrecise] = useState(
node.attrs.answersPrecise.preciseAnswer || '',
);
const preciseRef = useRef(null);
......@@ -44,7 +46,7 @@ const PreciseAnswerComponent = ({ node }) => {
allNodes.forEach(singleNode => {
if (singleNode.node.attrs.id === node.attrs.id) {
const obj = {
exactAnswer: onlyNumbers(preciseRef.current.value),
preciseAnswer: onlyNumbers(preciseRef.current.value),
};
context.pmViews.main.dispatch(
......@@ -73,6 +75,7 @@ const PreciseAnswerComponent = ({ node }) => {
<ValueInnerContainer>
<span>Precise Answer</span>
<input
disabled={readOnly}
name="preciseAnswer"
onChange={onChangePrecice}
ref={preciseRef}
......
wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
+ 9
− 3
View file @ d495b8cc
......@@ -26,10 +26,14 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
const RangeAnswerComponent = ({ node }) => {
const RangeAnswerComponent = ({ node, readOnly, testMode }) => {
const context = useContext(WaxContext);
const [minValue, setMinValue] = useState('');
const [maxValue, setMaxValue] = useState('');
const [minValue, setMinValue] = useState(
node.attrs.answersRange.minAnswer || '',
);
const [maxValue, setMaxValue] = useState(
node.attrs.answersRange.maxAnswer || '',
);
const minRef = useRef(null);
const maxRef = useRef(null);
......@@ -81,6 +85,7 @@ const RangeAnswerComponent = ({ node }) => {
<ValueInnerContainer>
<span>Min</span>
<input
disabled={readOnly}
name="minAnswer"
onChange={onChangeMin}
ref={minRef}
......@@ -95,6 +100,7 @@ const RangeAnswerComponent = ({ node }) => {
<ValueInnerContainer>
<span>Max</span>
<input
disabled={readOnly}
name="maxAnswer"
onChange={onChangeMax}
ref={maxRef}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment