refactor answer inputs

2 files changed, 139 insertions, 194 deletions

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index 695b0733d..340004cef 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -145,10 +145,10 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.dataDoc.velocityYDisplay = this.dataDoc.velocityYDisplay ?? 0;
 
     // Used for review mode
-    this.dataDoc.answerInputFields = this.dataDoc.answerInputFields ?? <div></div>;
     // this.dataDoc.currentForceSketch = this.dataDoc.currentForceSketch ?? null;
     // this.dataDoc.deleteMode = this.dataDoc.deleteMode ?? false;
     // this.dataDoc.forceSketches = this.dataDoc.forceSketches ?? [];
+    this.dataDoc.answers = [];
     this.dataDoc.hintDialogueOpen = this.dataDoc.hintDialogueOpen ?? false;
     this.dataDoc.noMovement = this.dataDoc.noMovement ?? false;
     this.dataDoc.questionNumber = this.dataDoc.questionNumber ?? 0;
@@ -285,7 +285,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
       this.dataDoc.showAcceleration = (false);
       this.dataDoc.showVelocity = (false);
       this.dataDoc.showForces= (true);
-      // this.generateNewQuestion();
+      this.generateNewQuestion();
       if (simulationType == "One Weight") {
         // TODO - one weight review problems
       } else if (simulationType == "Spring") {
@@ -767,7 +767,6 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.dataDoc.reviewStaticAngle = (0);
     this.dataDoc.coefficientOfKineticFriction = (0);
     this.dataDoc.simulationPaused = (true);
-    this.dataDoc.answerInputFields = (<div></div>);
   };
 
   // In review mode, reset problem variables and generate a new question
@@ -824,195 +823,10 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.dataDoc.selectedQuestion = (question);
     this.dataDoc.questionPartOne = (q);
     this.dataDoc.questionPartTwo = (question.question);
-    const answers = this.getAnswersToQuestion(question, vars);
-    this.generateInputFieldsForQuestion(false, question, answers);
-    this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+    this.dataDoc.answers = this.getAnswersToQuestion(question, vars);
+    //this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
   };
 
-  // Generate answerInputFields for new review question
-  generateInputFieldsForQuestion = (
-    showIcon: boolean = false,
-    question: QuestionTemplate = this.dataDoc.selectedQuestion,
-    answers: number[] = this.dataDoc.selectedSolutions
-  ) => {
-    let answerInput = [];
-    const d = new Date();
-    for (let i = 0; i < question.answerParts.length; i++) {
-      if (question.answerParts[i] == "force of gravity") {
-        this.dataDoc.reviewGravityMagnitude = (0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={<p>Gravity magnitude</p>}
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'reviewGravityMagnitude'}
-              step={0.1}
-              unit={"N"}
-              upperBound={50}
-              value={this.dataDoc.reviewGravityMagnitude}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-              labelWidth={"7em"}
-            />
-          </div>
-        );
-      } else if (question.answerParts[i] == "angle of gravity") {
-        this.dataDoc.reviewGravityAngle = (0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={<p>Gravity angle</p>}
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'reviewGravityAngle'}
-              step={1}
-              unit={"°"}
-              upperBound={360}
-              value={this.dataDoc.reviewGravityAngle}
-              radianEquivalent={true}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-              labelWidth={"7em"}
-            />
-          </div>
-        );
-      } else if (question.answerParts[i] == "normal force") {
-        this.dataDoc.reviewNormalMagnitude = (0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={<p>Normal force magnitude</p>}
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'reviewNormalMagnitude'}
-              step={0.1}
-              unit={"N"}
-              upperBound={50}
-              value={this.dataDoc.reviewNormalMagnitude}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-              labelWidth={"7em"}
-            />
-          </div>
-        );
-      } else if (question.answerParts[i] == "angle of normal force") {
-        this.dataDoc.reviewNormalAngle = (0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={<p>Normal force angle</p>}
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'reviewNormalAngle'}
-              step={1}
-              unit={"°"}
-              upperBound={360}
-              value={this.dataDoc.reviewNormalAngle}
-              radianEquivalent={true}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-              labelWidth={"7em"}
-            />
-          </div>
-        );
-      } else if (question.answerParts[i] == "force of static friction") {
-        this.dataDoc.reviewStaticMagnitude = (0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={<p>Static friction magnitude</p>}
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'reviewStaticMagnitude'}
-              step={0.1}
-              unit={"N"}
-              upperBound={50}
-              value={this.dataDoc.reviewStaticMagnitude}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-              labelWidth={"7em"}
-            />
-          </div>
-        );
-      } else if (question.answerParts[i] == "angle of static friction") {
-        this.dataDoc.reviewStaticAngle = (0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={<p>Static friction angle</p>}
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'reviewStaticAngle'}
-              step={1}
-              unit={"°"}
-              upperBound={360}
-              value={this.dataDoc.reviewStaticAngle}
-              radianEquivalent={true}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-              labelWidth={"7em"}
-            />
-          </div>
-        );
-      } else if (question.answerParts[i] == "coefficient of static friction") {
-        this.updateReviewForcesBasedOnCoefficient(0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={
-                <Box>
-                  &mu;<sub>s</sub>
-                </Box>
-              }
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'coefficientOfStaticFriction'}
-              step={0.1}
-              unit={""}
-              upperBound={1}
-              value={this.dataDoc.coefficientOfStaticFriction}
-              effect={this.updateReviewForcesBasedOnCoefficient}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-            />
-          </div>
-        );
-      } else if (question.answerParts[i] == "wedge angle") {
-        this.updateReviewForcesBasedOnAngle(0);
-        answerInput.push(
-          <div key={i + d.getTime()}>
-            <InputField
-              label={<Box>&theta;</Box>}
-              lowerBound={0}
-              dataDoc={this.dataDoc}
-              prop={'wedgeAngle'}
-              step={1}
-              unit={"°"}
-              upperBound={49}
-              value={this.dataDoc.wedgeAngle ?? 26}
-              effect={(val: number) => {
-                this.changeWedgeBasedOnNewAngle(val);
-                this.updateReviewForcesBasedOnAngle(val);
-              }}
-              radianEquivalent={true}
-              showIcon={showIcon}
-              correctValue={answers[i]}
-            />
-          </div>
-        );
-      }
-    }
-
-    this.dataDoc.answerInputFields = (
-      <div
-        style={{ display: "flex", flexDirection: "column", alignItems: "left" }}
-      >
-        {answerInput}
-      </div>
-    );
-  };
-  
   // Default setup for uniform circular motion simulation
   setupCircular = (value: number) => {
     this.dataDoc.showComponentForces = (false);
@@ -1459,6 +1273,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
         {this.dataDoc.mode == "Review" && this.dataDoc.simulationType != "Inclined Plane" && (
           <div className="wordProblemBox">
             <p>{this.dataDoc.simulationType} review problems in progress!</p>
+            <hr/>
           </div>
         )}
         {this.dataDoc.mode == "Review" && this.dataDoc.simulationType == "Inclined Plane" && (
@@ -1517,9 +1332,140 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 <p>{this.dataDoc.questionPartOne}</p>
                 <p>{this.dataDoc.questionPartTwo}</p>
               </div>
-              <div className="answer">{this.dataDoc.answerInputFields}</div>
-            </div>
-          </div>
+              <div className="answers">
+                {this.dataDoc.selectedQuestion.answerParts.includes("force of gravity") &&
+                  (<InputField
+                    label={<p>Gravity magnitude</p>}
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'reviewGravityMagnitude'}
+                    step={0.1}
+                    unit={"N"}
+                    upperBound={50}
+                    value={this.dataDoc.reviewGravityMagnitude}
+                    showIcon={false}
+                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("force of gravity")]}
+                    labelWidth={"7em"}
+                  />)
+                }
+                {this.dataDoc.selectedQuestion.answerParts.includes("angle of gravity") && (
+                  <InputField
+                    label={<p>Gravity angle</p>}
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'reviewGravityAngle'}
+                    step={1}
+                    unit={"°"}
+                    upperBound={360}
+                    value={this.dataDoc.reviewGravityAngle}
+                    radianEquivalent={true}
+                    showIcon={false}
+                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("angle of gravity")]}
+                    labelWidth={"7em"}
+                  />
+                )}
+                {this.dataDoc.selectedQuestion.answerParts.includes("normal force") && (
+                  <InputField
+                    label={<p>Normal force magnitude</p>}
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'reviewNormalMagnitude'}
+                    step={0.1}
+                    unit={"N"}
+                    upperBound={50}
+                    value={this.dataDoc.reviewNormalMagnitude}
+                    showIcon={false}
+                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("normal force")]}
+                    labelWidth={"7em"}
+                  />
+                )}
+                {this.dataDoc.selectedQuestion.answerParts.includes("angle of normal force") && (
+                  <InputField
+                    label={<p>Normal force angle</p>}
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'reviewNormalAngle'}
+                    step={1}
+                    unit={"°"}
+                    upperBound={360}
+                    value={this.dataDoc.reviewNormalAngle}
+                    radianEquivalent={true}
+                    showIcon={false}
+                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("angle of normal force")]}
+                    labelWidth={"7em"}
+                  />
+                )}
+                {this.dataDoc.selectedQuestion.answerParts.includes("force of static friction") && (
+                <InputField
+                  label={<p>Static friction magnitude</p>}
+                  lowerBound={0}
+                  dataDoc={this.dataDoc}
+                  prop={'reviewStaticMagnitude'}
+                  step={0.1}
+                  unit={"N"}
+                  upperBound={50}
+                  value={this.dataDoc.reviewStaticMagnitude}
+                  showIcon={false}
+                  correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("force of static friction")]}
+                  labelWidth={"7em"}
+                />
+                )}
+                {this.dataDoc.selectedQuestion.answerParts.includes("angle of static friction") && (
+                  <InputField
+                    label={<p>Static friction angle</p>}
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'reviewStaticAngle'}
+                    step={1}
+                    unit={"°"}
+                    upperBound={360}
+                    value={this.dataDoc.reviewStaticAngle}
+                    radianEquivalent={true}
+                    showIcon={false}
+                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("angle of static friction")]}
+                    labelWidth={"7em"}
+                  />
+                )}
+                {this.dataDoc.selectedQuestion.answerParts.includes("coefficient of static friction") && (
+                  <InputField
+                    label={
+                      <Box>
+                        &mu;<sub>s</sub>
+                      </Box>
+                    }
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'coefficientOfStaticFriction'}
+                    step={0.1}
+                    unit={""}
+                    upperBound={1}
+                    value={this.dataDoc.coefficientOfStaticFriction}
+                    effect={this.updateReviewForcesBasedOnCoefficient}
+                    showIcon={false}
+                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("coefficient of static friction")]}
+                  />
+                )}
+                {this.dataDoc.selectedQuestion.answerParts.includes("wedge angle") && (
+                  <InputField
+                    label={<Box>&theta;</Box>}
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'wedgeAngle'}
+                    step={1}
+                    unit={"°"}
+                    upperBound={49}
+                    value={this.dataDoc.wedgeAngle ?? 26}
+                    effect={(val: number) => {
+                      this.changeWedgeBasedOnNewAngle(val);
+                      this.updateReviewForcesBasedOnAngle(val);
+                    }}
+                    radianEquivalent={true}
+                    showIcon={false}
+                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("wedge angle")]}
+                  />
+                )}
+              </div>
+           </div>
         )}
         {this.dataDoc.mode == "Tutorial" && (
           <div className="wordProblemBox">
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
index 353b386a6..5e5a60edd 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -50,7 +50,6 @@ export default class InputField extends React.Component<IInputProps, IState> {
     if (prevProps.value != this.props.value && !isNaN(this.props.value)) {
       if (this.props.mode == "Freeform") {
         if (Math.abs(this.state.tempValue - Number(this.props.value)) > 1) {
-          console.log('update temp value', Number(this.props.value))
           this.setState({tempValue: Number(this.props.value)})
         }
       }