From f5b6c4ae75d9e43ec6de2997a293a6c8fcd2143d Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 13 Nov 2023 11:13:13 +0200
Subject: [PATCH] save student values
---
.../components/ExactAnswerComponent.js | 108 ++++++++++++------
.../NumericalAnswerContainerComponent.js | 6 +-
.../components/PreciseAnswerComponent.js | 76 +++++++++---
.../components/RangeAnswerComponent.js | 108 +++++++++++++-----
4 files changed, 218 insertions(+), 80 deletions(-)
diff --git a/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
index 3e5996337..e845c9e8e 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/ExactAnswerComponent.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
import React, { useRef, useState, useContext } from 'react';
import styled from 'styled-components';
import { DocumentHelpers, WaxContext } from 'wax-prosemirror-core';
@@ -26,15 +27,18 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
-const ExactAnswerComponent = ({ node, readOnly, testMode }) => {
+const ExactAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
const context = useContext(WaxContext);
const [exact, setExact] = useState(node.attrs.answersExact.exactAnswer || '');
const [marginError, setMarginError] = useState(
node.attrs.answersExact.marginError || '',
);
-
+ const [exactStudent, setExactStudent] = useState(
+ node.attrs.answerExact || '',
+ );
const exactRef = useRef(null);
const errorRef = useRef(null);
+ const exactStudentRef = useRef(null);
const onlyNumbers = value => {
return value
@@ -76,38 +80,78 @@ const ExactAnswerComponent = ({ node, readOnly, testMode }) => {
SaveValuesToNode();
};
+ const onChangeExactStudent = () => {
+ setExactStudent(onlyNumbers(exactStudentRef.current.value));
+ const allNodes = getNodes(context.pmViews.main);
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === node.attrs.id) {
+ context.pmViews.main.dispatch(
+ context.pmViews.main.state.tr.setNodeMarkup(
+ singleNode.pos,
+ undefined,
+ {
+ ...singleNode.node.attrs,
+ answerExact: onlyNumbers(exactStudentRef.current.value),
+ },
+ ),
+ );
+ }
+ });
+ };
+
return (
<AnswerContainer>
- <ValueContainer>
- <label htmlFor="exactAnswer">
- <ValueInnerContainer>
- <span>Exact Answer</span>
- <input
- disabled={readOnly}
- name="exactAnswer"
- onChange={onChangeExact}
- ref={exactRef}
- type="text"
- value={exact}
- />
- </ValueInnerContainer>
- </label>
- </ValueContainer>
- <ValueContainer>
- <label htmlFor="errorAnswer">
- <ValueInnerContainer>
- <span>Margin of error (%)</span>
- <input
- disabled={readOnly}
- name="errorAnswer"
- onChange={onChangeError}
- ref={errorRef}
- type="text"
- value={marginError}
- />
- </ValueInnerContainer>
- </label>
- </ValueContainer>
+ {!testMode && !showFeedBack && (
+ <>
+ <ValueContainer>
+ <label htmlFor="exactAnswer">
+ <ValueInnerContainer>
+ <span>Exact Answer</span>
+ <input
+ disabled={readOnly}
+ name="exactAnswer"
+ onChange={onChangeExact}
+ ref={exactRef}
+ type="text"
+ value={exact}
+ />
+ </ValueInnerContainer>
+ </label>
+ </ValueContainer>
+ <ValueContainer>
+ <label htmlFor="errorAnswer">
+ <ValueInnerContainer>
+ <span>Margin of error (%)</span>
+ <input
+ disabled={readOnly}
+ name="errorAnswer"
+ onChange={onChangeError}
+ ref={errorRef}
+ type="text"
+ value={marginError}
+ />
+ </ValueInnerContainer>
+ </label>
+ </ValueContainer>
+ </>
+ )}
+ {testMode && (
+ <ValueContainer>
+ <label htmlFor="exactAnswerStudent">
+ <ValueInnerContainer>
+ <span>Exact Answer</span>
+ <input
+ name="exactAnswerStudent"
+ onChange={onChangeExactStudent}
+ ref={exactStudentRef}
+ type="text"
+ value={exactStudent}
+ />
+ </ValueInnerContainer>
+ </label>
+ </ValueContainer>
+ )}
+ {readOnly && showFeedBack && <span>SUBMIT</span>}
</AnswerContainer>
);
};
diff --git a/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerContainerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerContainerComponent.js
index 6342e65b3..336863d49 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerContainerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerContainerComponent.js
@@ -58,7 +58,8 @@ export default ({ node, view, getPos }) => {
} = context;
const customProps = main.props.customValues;
- const { testMode } = customProps;
+
+ const { testMode, showFeedBack } = customProps;
const isEditable = main.props.editable(editable => {
return editable;
@@ -118,6 +119,7 @@ export default ({ node, view, getPos }) => {
<ExactAnswerComponent
node={node}
readOnly={readOnly}
+ showFeedBack={showFeedBack}
testMode={testMode}
/>
)}
@@ -125,6 +127,7 @@ export default ({ node, view, getPos }) => {
<RangeAnswerComponent
node={node}
readOnly={readOnly}
+ showFeedBack={showFeedBack}
testMode={testMode}
/>
)}
@@ -132,6 +135,7 @@ export default ({ node, view, getPos }) => {
<PreciseAnswerComponent
node={node}
readOnly={readOnly}
+ showFeedBack={showFeedBack}
testMode={testMode}
/>
)}
diff --git a/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
index 58d171c6c..7220ca907 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/PreciseAnswerComponent.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
import React, { useRef, useState, useContext } from 'react';
import styled from 'styled-components';
import { DocumentHelpers, WaxContext } from 'wax-prosemirror-core';
@@ -26,13 +27,18 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
-const PreciseAnswerComponent = ({ node, readOnly, testMode }) => {
+const PreciseAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
const context = useContext(WaxContext);
const [precise, setPrecise] = useState(
node.attrs.answersPrecise.preciseAnswer || '',
);
+ const [preciseStudent, setPreciseStudent] = useState(
+ node.attrs.answerPrecise || '',
+ );
+
const preciseRef = useRef(null);
+ const preciseStudentRef = useRef(null);
const onlyNumbers = value => {
return value
@@ -68,23 +74,61 @@ const PreciseAnswerComponent = ({ node, readOnly, testMode }) => {
SaveValuesToNode();
};
+ const onChangePreciseStudent = () => {
+ setPreciseStudent(onlyNumbers(preciseStudentRef.current.value));
+ const allNodes = getNodes(context.pmViews.main);
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === node.attrs.id) {
+ context.pmViews.main.dispatch(
+ context.pmViews.main.state.tr.setNodeMarkup(
+ singleNode.pos,
+ undefined,
+ {
+ ...singleNode.node.attrs,
+ answerPrecise: onlyNumbers(preciseStudentRef.current.value),
+ },
+ ),
+ );
+ }
+ });
+ };
+
return (
<AnswerContainer>
- <ValueContainer>
- <label htmlFor="preciseAnswer">
- <ValueInnerContainer>
- <span>Precise Answer</span>
- <input
- disabled={readOnly}
- name="preciseAnswer"
- onChange={onChangePrecice}
- ref={preciseRef}
- type="text"
- value={precise}
- />
- </ValueInnerContainer>
- </label>
- </ValueContainer>
+ {!testMode && !showFeedBack && (
+ <ValueContainer>
+ <label htmlFor="preciseAnswer">
+ <ValueInnerContainer>
+ <span>Precise Answer</span>
+ <input
+ disabled={readOnly}
+ name="preciseAnswer"
+ onChange={onChangePrecice}
+ ref={preciseRef}
+ type="text"
+ value={precise}
+ />
+ </ValueInnerContainer>
+ </label>
+ </ValueContainer>
+ )}
+ {testMode && (
+ <ValueContainer>
+ <label htmlFor="exactAnswerStudent">
+ <ValueInnerContainer>
+ <span>Precise Answer</span>
+ <input
+ name="exactAnswerStudent"
+ onChange={onChangePreciseStudent}
+ ref={preciseStudentRef}
+ type="text"
+ value={preciseStudent}
+ />
+ </ValueInnerContainer>
+ </label>
+ </ValueContainer>
+ )}
+ {readOnly && showFeedBack && <span>SUBMIT</span>}
</AnswerContainer>
);
};
diff --git a/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js b/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
index 96ba53032..7d38bb699 100644
--- a/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
+++ b/wax-questions-service/src/NumericalAnswerService/components/RangeAnswerComponent.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
import React, { useRef, useState, useContext } from 'react';
import styled from 'styled-components';
import { DocumentHelpers, WaxContext } from 'wax-prosemirror-core';
@@ -26,7 +27,7 @@ const ValueInnerContainer = styled.div`
flex-direction: column;
`;
-const RangeAnswerComponent = ({ node, readOnly, testMode }) => {
+const RangeAnswerComponent = ({ node, readOnly, testMode, showFeedBack }) => {
const context = useContext(WaxContext);
const [minValue, setMinValue] = useState(
node.attrs.answersRange.minAnswer || '',
@@ -35,8 +36,13 @@ const RangeAnswerComponent = ({ node, readOnly, testMode }) => {
node.attrs.answersRange.maxAnswer || '',
);
+ const [rangeStudentValue, setRangeStudentValue] = useState(
+ node.attrs.answerRange || '',
+ );
+
const minRef = useRef(null);
const maxRef = useRef(null);
+ const rangeStudentRef = useRef(null);
const onlyNumbers = value => {
return value
@@ -78,38 +84,78 @@ const RangeAnswerComponent = ({ node, readOnly, testMode }) => {
SaveValuesToNode();
};
+ const onChangeRangeStudent = () => {
+ setRangeStudentValue(onlyNumbers(rangeStudentRef.current.value));
+ const allNodes = getNodes(context.pmViews.main);
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === node.attrs.id) {
+ context.pmViews.main.dispatch(
+ context.pmViews.main.state.tr.setNodeMarkup(
+ singleNode.pos,
+ undefined,
+ {
+ ...singleNode.node.attrs,
+ answerRange: onlyNumbers(rangeStudentRef.current.value),
+ },
+ ),
+ );
+ }
+ });
+ };
+
return (
<AnswerContainer>
- <ValueContainer>
- <label htmlFor="minAnswer">
- <ValueInnerContainer>
- <span>Min</span>
- <input
- disabled={readOnly}
- name="minAnswer"
- onChange={onChangeMin}
- ref={minRef}
- type="text"
- value={minValue}
- />
- </ValueInnerContainer>
- </label>
- </ValueContainer>
- <ValueContainer>
- <label htmlFor="maxAnswer">
- <ValueInnerContainer>
- <span>Max</span>
- <input
- disabled={readOnly}
- name="maxAnswer"
- onChange={onChangeMax}
- ref={maxRef}
- type="text"
- value={maxValue}
- />
- </ValueInnerContainer>
- </label>
- </ValueContainer>
+ {!testMode && !showFeedBack && (
+ <>
+ <ValueContainer>
+ <label htmlFor="minAnswer">
+ <ValueInnerContainer>
+ <span>Min</span>
+ <input
+ disabled={readOnly}
+ name="minAnswer"
+ onChange={onChangeMin}
+ ref={minRef}
+ type="text"
+ value={minValue}
+ />
+ </ValueInnerContainer>
+ </label>
+ </ValueContainer>
+ <ValueContainer>
+ <label htmlFor="maxAnswer">
+ <ValueInnerContainer>
+ <span>Max</span>
+ <input
+ disabled={readOnly}
+ name="maxAnswer"
+ onChange={onChangeMax}
+ ref={maxRef}
+ type="text"
+ value={maxValue}
+ />
+ </ValueInnerContainer>
+ </label>
+ </ValueContainer>
+ </>
+ )}
+ {testMode && (
+ <ValueContainer>
+ <label htmlFor="exactAnswerStudent">
+ <ValueInnerContainer>
+ <span>Answer</span>
+ <input
+ name="exactAnswerStudent"
+ onChange={onChangeRangeStudent}
+ ref={rangeStudentRef}
+ type="text"
+ value={rangeStudentValue}
+ />
+ </ValueInnerContainer>
+ </label>
+ </ValueContainer>
+ )}
+ {readOnly && showFeedBack && <span>SUBMIT</span>}
</AnswerContainer>
);
};
--
GitLab