From c48c72536a22a144bf383dc13d287e4a8233878a Mon Sep 17 00:00:00 2001
From: brynnchernosky <56202540+brynnchernosky@users.noreply.github.com>
Date: Sat, 6 May 2023 15:39:38 -0400
Subject: review questions appear

---
 .../nodes/PhysicsBox/PhysicsSimulationBox.tsx      | 2493 ++++++++++----------
 1 file changed, 1250 insertions(+), 1243 deletions(-)

(limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx')

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index 340004cef..7bb5d0e98 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -120,7 +120,7 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     this.dataDoc.elasticCollisions = this.dataDoc.elasticCollisions ?? false;
     this.dataDoc.gravity = this.dataDoc.gravity ?? -9.81;
     this.dataDoc.mass = this.dataDoc.mass ?? 1;
-    this.dataDoc.mode = this.dataDoc.mode ?? "Freeform";
+    this.dataDoc.mode = "Freeform";
     this.dataDoc.positionXDisplay = this.dataDoc.positionXDisplay ?? 0;
     this.dataDoc.positionYDisplay = this.dataDoc.positionYDisplay ?? 0;
     this.dataDoc.showAcceleration = this.dataDoc.showAcceleration ?? false;
@@ -149,18 +149,19 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
     // 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;
-    this.dataDoc.questionPartOne = this.dataDoc.questionPartOne ?? "";
-    this.dataDoc.questionPartTwo = this.dataDoc.questionPartTwo ?? "";
-    this.dataDoc.reviewGravityAngle = this.dataDoc.reviewGravityAngle ?? 0;
-    this.dataDoc.reviewGravityMagnitude = this.dataDoc.reviewGravityMagnitude ?? 0;
-    this.dataDoc.reviewNormalAngle = this.dataDoc.reviewNormalAngle ?? 0;
-    this.dataDoc.reviewNormalMagnitude = this.dataDoc.reviewNormalMagnitude ?? 0;
-    this.dataDoc.reviewStaticAngle = this.dataDoc.reviewStaticAngle ?? 0;
-    this.dataDoc.reviewStaticMagnitude = this.dataDoc.reviewStaticMagnitude ?? 0;
-    this.dataDoc.selectedSolutions = this.dataDoc.selectedSolutions ?? [];
+    this.dataDoc.showIcon = false;
+    this.dataDoc.hintDialogueOpen = false;
+    this.dataDoc.noMovement = false;
+    this.dataDoc.questionNumber = 0;
+    this.dataDoc.questionPartOne = "";
+    this.dataDoc.questionPartTwo = "";
+    this.dataDoc.reviewGravityAngle = 0;
+    this.dataDoc.reviewGravityMagnitude = 0;
+    this.dataDoc.reviewNormalAngle = 0;
+    this.dataDoc.reviewNormalMagnitude = 0;
+    this.dataDoc.reviewStaticAngle = 0;
+    this.dataDoc.reviewStaticMagnitude = 0;
+    this.dataDoc.selectedSolutions = [];
     this.dataDoc.selectedQuestion = this.dataDoc.selectedQuestion ?? questions.inclinePlane[0];
     // this.dataDoc.sketching = this.dataDoc.sketching ?? false;
 
@@ -1067,94 +1068,45 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
   }
 
   render () { 
-    return <div className="physicsSimApp">
-    <div className="mechanicsSimulationContainer">
-      <div
-        className="mechanicsSimulationContentContainer"
-      >
-        <div className="mechanicsSimulationButtonsAndElements">
-          <div className="mechanicsSimulationButtons">
-            {!this.dataDoc.simulationPaused && (
-              <div
-                style={{
-                  position: "fixed",
-                  left: 0.10*this.layoutDoc._width + "px",
-                  top: 0.95*this.layoutDoc._height + "px",
-                  width: 0.50*this.layoutDoc._width + "px",
-                }}
-              >
-                <LinearProgress />
-              </div>
-            )}
-          </div>
-          <div className="mechanicsSimulationElements">
-            <Weight
-              dataDoc={this.dataDoc}
-              layoutDoc={this.layoutDoc}
-              wallPositions={this.wallPositions}
-              adjustPendulumAngle={this.dataDoc.adjustPendulumAngle}
-              gravity={this.dataDoc.gravity}
-              circularMotionRadius={this.dataDoc.circularMotionRadius}
-              componentForces={this.dataDoc.componentForces}
-              showComponentForces={this.dataDoc.showComponentForces}
-              color={"red"}
-              coefficientOfKineticFriction={Number(
-                this.dataDoc.coefficientOfKineticFriction
+    return (
+    <div className="physicsSimApp">
+      <div className="mechanicsSimulationContainer">
+        <div
+          className="mechanicsSimulationContentContainer"
+        >
+          <div className="mechanicsSimulationButtonsAndElements">
+            <div className="mechanicsSimulationButtons">
+              {!this.dataDoc.simulationPaused && (
+                <div
+                  style={{
+                    position: "fixed",
+                    left: 0.10*this.layoutDoc._width + "px",
+                    top: 0.95*this.layoutDoc._height + "px",
+                    width: 0.50*this.layoutDoc._width + "px",
+                  }}
+                >
+                  <LinearProgress />
+                </div>
               )}
-              displayXVelocity={this.dataDoc.velocityXDisplay}
-              displayYVelocity={this.dataDoc.velocityYDisplay}
-              elasticCollisions={this.dataDoc.elasticCollisions}
-              mass={this.dataDoc.mass}
-              mode={this.dataDoc.mode}
-              noMovement={this.dataDoc.noMovement}
-              paused={this.dataDoc.simulationPaused}
-              pendulumAngle={this.dataDoc.pendulumAngle}
-              pendulumLength={this.dataDoc.pendulumLength}
-              radius={(0.08*this.layoutDoc._height)}
-              reset={this.dataDoc.simulationReset}
-              simulationSpeed={this.dataDoc.simulationSpeed}
-              startPendulumAngle={this.dataDoc.startPendulumAngle}
-              showAcceleration={this.dataDoc.showAcceleration}
-              showForceMagnitudes={this.dataDoc.showForceMagnitudes}
-              showForces={this.dataDoc.showForces}
-              showVelocity={this.dataDoc.showVelocity}
-              simulationType={this.dataDoc.simulationType}
-              springConstant={this.dataDoc.springConstant}
-              springStartLength={this.dataDoc.springStartLength}
-              springRestLength={this.dataDoc.springRestLength}
-              startForces={this.dataDoc.startForces}
-              startPosX={this.dataDoc.startPosX}
-              startPosY={this.dataDoc.startPosY ?? 0}
-              startVelX={this.dataDoc.startVelX}
-              startVelY={this.dataDoc.startVelY}
-              timestepSize={0.05}
-              updateDisplay={this.dataDoc.displayChange}
-              updatedForces={this.dataDoc.updatedForces}
-              wedgeHeight={this.dataDoc.wedgeHeight}
-              wedgeWidth={this.dataDoc.wedgeWidth}
-              xMax={this.xMax}
-              xMin={this.xMin}
-              yMax={this.yMax}
-              yMin={this.yMin}
-            />
-            {this.dataDoc.simulationType == "Pulley" && (
+            </div>
+            <div className="mechanicsSimulationElements">
               <Weight
                 dataDoc={this.dataDoc}
                 layoutDoc={this.layoutDoc}
                 wallPositions={this.wallPositions}
                 adjustPendulumAngle={this.dataDoc.adjustPendulumAngle}
-                circularMotionRadius={this.dataDoc.circularMotionRadius}
                 gravity={this.dataDoc.gravity}
+                circularMotionRadius={this.dataDoc.circularMotionRadius}
                 componentForces={this.dataDoc.componentForces}
                 showComponentForces={this.dataDoc.showComponentForces}
-                color={"blue"}
+                color={"red"}
                 coefficientOfKineticFriction={Number(
                   this.dataDoc.coefficientOfKineticFriction
                 )}
-                displayXVelocity={this.dataDoc.velocityXDisplay2}
-                displayYVelocity={this.dataDoc.velocityYDisplay2}
+                displayXVelocity={this.dataDoc.velocityXDisplay}
+                displayYVelocity={this.dataDoc.velocityYDisplay}
                 elasticCollisions={this.dataDoc.elasticCollisions}
-                mass={this.dataDoc.mass2}
+                mass={this.dataDoc.mass}
                 mode={this.dataDoc.mode}
                 noMovement={this.dataDoc.noMovement}
                 paused={this.dataDoc.simulationPaused}
@@ -1172,14 +1124,14 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 springConstant={this.dataDoc.springConstant}
                 springStartLength={this.dataDoc.springStartLength}
                 springRestLength={this.dataDoc.springRestLength}
-                startForces={this.dataDoc.startForces2}
-                startPosX={this.dataDoc.startPosX2}
-                startPosY={this.dataDoc.startPosY2}
+                startForces={this.dataDoc.startForces}
+                startPosX={this.dataDoc.startPosX}
+                startPosY={this.dataDoc.startPosY ?? 0}
                 startVelX={this.dataDoc.startVelX}
                 startVelY={this.dataDoc.startVelY}
                 timestepSize={0.05}
-                updateDisplay={this.dataDoc.displayChange2}
-                updatedForces={this.dataDoc.updatedForces2}
+                updateDisplay={this.dataDoc.displayChange}
+                updatedForces={this.dataDoc.updatedForces}
                 wedgeHeight={this.dataDoc.wedgeHeight}
                 wedgeWidth={this.dataDoc.wedgeWidth}
                 xMax={this.xMax}
@@ -1187,246 +1139,759 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                 yMax={this.yMax}
                 yMin={this.yMin}
               />
-            )}
-          </div>
-          <div>
-            {(this.dataDoc.simulationType == "One Weight" ||
-              this.dataDoc.simulationType == "Inclined Plane") && this.wallPositions &&
-              this.wallPositions.map((element, index) => {
-                return (
-                  <Wall
-                    key={index}
-                    length={element.length}
-                    xPos={element.xPos}
-                    yPos={element.yPos}
-                    angleInDegrees={element.angleInDegrees}
-                  />
-                );
-              })}
+              {this.dataDoc.simulationType == "Pulley" && (
+                <Weight
+                  dataDoc={this.dataDoc}
+                  layoutDoc={this.layoutDoc}
+                  wallPositions={this.wallPositions}
+                  adjustPendulumAngle={this.dataDoc.adjustPendulumAngle}
+                  circularMotionRadius={this.dataDoc.circularMotionRadius}
+                  gravity={this.dataDoc.gravity}
+                  componentForces={this.dataDoc.componentForces}
+                  showComponentForces={this.dataDoc.showComponentForces}
+                  color={"blue"}
+                  coefficientOfKineticFriction={Number(
+                    this.dataDoc.coefficientOfKineticFriction
+                  )}
+                  displayXVelocity={this.dataDoc.velocityXDisplay2}
+                  displayYVelocity={this.dataDoc.velocityYDisplay2}
+                  elasticCollisions={this.dataDoc.elasticCollisions}
+                  mass={this.dataDoc.mass2}
+                  mode={this.dataDoc.mode}
+                  noMovement={this.dataDoc.noMovement}
+                  paused={this.dataDoc.simulationPaused}
+                  pendulumAngle={this.dataDoc.pendulumAngle}
+                  pendulumLength={this.dataDoc.pendulumLength}
+                  radius={(0.08*this.layoutDoc._height)}
+                  reset={this.dataDoc.simulationReset}
+                  simulationSpeed={this.dataDoc.simulationSpeed}
+                  startPendulumAngle={this.dataDoc.startPendulumAngle}
+                  showAcceleration={this.dataDoc.showAcceleration}
+                  showForceMagnitudes={this.dataDoc.showForceMagnitudes}
+                  showForces={this.dataDoc.showForces}
+                  showVelocity={this.dataDoc.showVelocity}
+                  simulationType={this.dataDoc.simulationType}
+                  springConstant={this.dataDoc.springConstant}
+                  springStartLength={this.dataDoc.springStartLength}
+                  springRestLength={this.dataDoc.springRestLength}
+                  startForces={this.dataDoc.startForces2}
+                  startPosX={this.dataDoc.startPosX2}
+                  startPosY={this.dataDoc.startPosY2}
+                  startVelX={this.dataDoc.startVelX}
+                  startVelY={this.dataDoc.startVelY}
+                  timestepSize={0.05}
+                  updateDisplay={this.dataDoc.displayChange2}
+                  updatedForces={this.dataDoc.updatedForces2}
+                  wedgeHeight={this.dataDoc.wedgeHeight}
+                  wedgeWidth={this.dataDoc.wedgeWidth}
+                  xMax={this.xMax}
+                  xMin={this.xMin}
+                  yMax={this.yMax}
+                  yMin={this.yMin}
+                />
+              )}
+            </div>
+            <div>
+              {(this.dataDoc.simulationType == "One Weight" ||
+                this.dataDoc.simulationType == "Inclined Plane") && this.wallPositions &&
+                this.wallPositions.map((element, index) => {
+                  return (
+                    <Wall
+                      key={index}
+                      length={element.length}
+                      xPos={element.xPos}
+                      yPos={element.yPos}
+                      angleInDegrees={element.angleInDegrees}
+                    />
+                  );
+                })}
+            </div>
           </div>
         </div>
-      </div>
-      <div className="mechanicsSimulationEquationContainer">
-        <div className="mechanicsSimulationControls">
-          <Stack direction="row" spacing={1}>
-            {this.dataDoc.simulationPaused && this.dataDoc.mode != "Tutorial" && (
-              <IconButton
-                onClick={() => {
-                  this.dataDoc.simulationPaused = (false);
+        <div className="mechanicsSimulationEquationContainer">
+          <div className="mechanicsSimulationControls">
+            <Stack direction="row" spacing={1}>
+              {this.dataDoc.simulationPaused && this.dataDoc.mode != "Tutorial" && (
+                <IconButton
+                  onClick={() => {
+                    this.dataDoc.simulationPaused = (false);
+                  }}
+                >
+                  <PlayArrowIcon />
+                </IconButton>
+              )}
+              {!this.dataDoc.simulationPaused && this.dataDoc.mode != "Tutorial" && (
+                <IconButton
+                  onClick={() => {
+                    this.dataDoc.simulationPaused = (true);
+                  }}
+                >
+                  <PauseIcon />
+                </IconButton>
+              )}
+              {this.dataDoc.simulationPaused && this.dataDoc.mode != "Tutorial" && (
+                <IconButton
+                  onClick={() => {
+                    this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+                  }}
+                >
+                  <ReplayIcon />
+                </IconButton>
+              )}
+            </Stack>
+            <div className="dropdownMenu">
+                  <select
+                    value={this.dataDoc.simulationType}
+                    onChange={(event) => {
+                      this.dataDoc.simulationType = (event.target.value);
+                      this.setupSimulation(event.target.value, this.dataDoc.mode)
+                    }}
+                    style={{ height: "2em", width: "100%", fontSize: "16px" }}
+                  >
+                    <option value="One Weight">Projectile</option>
+                    <option value="Inclined Plane">Inclined Plane</option>
+                    <option value="Pendulum">Pendulum</option>
+                    <option value="Spring">Spring</option>
+                    <option value="Circular Motion">Circular Motion</option>
+                    <option value="Pulley">Pulley</option>
+                    <option value="Suspension">Suspension</option>
+                  </select>
+                </div>
+            <div className="dropdownMenu">
+              <select
+                value={this.dataDoc.mode}
+                onChange={(event) => {
+                  this.dataDoc.mode = (event.target.value);
+                  this.setupSimulation(this.dataDoc.simulationType, event.target.value)
                 }}
+                style={{ height: "2em", width: "100%", fontSize: "16px" }}
               >
-                <PlayArrowIcon />
-              </IconButton>
-            )}
-            {!this.dataDoc.simulationPaused && this.dataDoc.mode != "Tutorial" && (
-              <IconButton
-                onClick={() => {
-                  this.dataDoc.simulationPaused = (true);
-                }}
+                <option value="Tutorial">Tutorial Mode</option>
+                <option value="Freeform">Freeform Mode</option>
+                <option value="Review">Review Mode</option>
+              </select>
+            </div>
+          </div>
+          {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" && (
+            <div>
+              {!this.dataDoc.hintDialogueOpen && (
+                <IconButton
+                  onClick={() => {
+                    this.dataDoc.hintDialogueOpen = (true);
+                  }}
+                  sx={{
+                    position: "fixed",
+                    left: this.xMax - 50 + "px",
+                    top: this.yMin + 14 + "px",
+                  }}
+                >
+                  <QuestionMarkIcon />
+                </IconButton>
+              )}
+              <Dialog
+                maxWidth={"sm"}
+                fullWidth={true}
+                open={this.dataDoc.hintDialogueOpen}
+                onClose={() => this.dataDoc.hintDialogueOpen = (false)}
               >
-                <PauseIcon />
-              </IconButton>
-            )}
-            {this.dataDoc.simulationPaused && this.dataDoc.mode != "Tutorial" && (
-              <IconButton
-                onClick={() => {
-                  this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+                <DialogTitle>Hints</DialogTitle>
+                <DialogContent>
+                  {this.dataDoc.selectedQuestion.hints && (this.dataDoc.selectedQuestion.hints.map((hint, index) => {
+                    return (
+                      <div key={index}>
+                        <DialogContentText>
+                          <details>
+                            <summary>
+                              <b>
+                                Hint {index + 1}: {hint.description}
+                              </b>
+                            </summary>
+                            {hint.content}
+                          </details>
+                        </DialogContentText>
+                      </div>
+                    );
+                  }))}
+                </DialogContent>
+                <DialogActions>
+                  <Button
+                    onClick={() => {
+                      this.dataDoc.hintDialogueOpen = (false);
+                    }}
+                  >
+                    Close
+                  </Button>
+                </DialogActions>
+              </Dialog>
+              <div className="wordProblemBox">
+                <div className="question">
+                  <p>{this.dataDoc.questionPartOne}</p>
+                  <p>{this.dataDoc.questionPartTwo}</p>
+                </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={this.dataDoc.showIcon}
+                      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={this.dataDoc.showIcon}
+                      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={this.dataDoc.showIcon}
+                      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={this.dataDoc.showIcon}
+                      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={this.dataDoc.showIcon}
+                    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={this.dataDoc.showIcon}
+                      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={this.dataDoc.showIcon}
+                      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={this.dataDoc.showIcon}
+                      correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("wedge angle")]}
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+          {this.dataDoc.mode == "Tutorial" && (
+            <div className="wordProblemBox">
+              <div className="question">
+                <h2>Problem</h2>
+                <p>{this.dataDoc.selectedTutorial.question}</p>
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "spaceBetween",
+                  width: "100%",
                 }}
               >
-                <ReplayIcon />
-              </IconButton>
-            )}
-          </Stack>
-          <div className="dropdownMenu">
-                <select
-                  value={this.dataDoc.simulationType}
-                  onChange={(event) => {
-                    this.dataDoc.simulationType = (event.target.value);
-                    this.setupSimulation(event.target.value, this.dataDoc.mode)
+                <IconButton
+                  onClick={() => {
+                    let step = this.dataDoc.stepNumber - 1;
+                    step = Math.max(step, 0);
+                    step = Math.min(step, this.dataDoc.selectedTutorial.steps.length - 1);
+                    this.dataDoc.stepNumber = (step);
+                    this.dataDoc.startForces = (
+                      this.getForceFromJSON(this.dataDoc.selectedTutorial.steps[step].forces)
+                    );
+                    this.dataDoc.updatedForces = (
+                      this.getForceFromJSON(this.dataDoc.selectedTutorial.steps[step].forces)
+                    );
+                    this.dataDoc.showForceMagnitudes = (
+                      this.dataDoc.selectedTutorial.steps[step].showMagnitude
+                    );
+                  }}
+                  disabled={this.dataDoc.stepNumber == 0}
+                >
+                  <ArrowLeftIcon />
+                </IconButton>
+                <div>
+                  <h3>
+                    Step {this.dataDoc.stepNumber + 1}:{" "}
+                    {this.dataDoc.selectedTutorial.steps[this.dataDoc.stepNumber].description}
+                  </h3>
+                  <p>{this.dataDoc.selectedTutorial.steps[this.dataDoc.stepNumber].content}</p>
+                </div>
+                <IconButton
+                  onClick={() => {
+                    let step = this.dataDoc.stepNumber + 1;
+                    step = Math.max(step, 0);
+                    step = Math.min(step, this.dataDoc.selectedTutorial.steps.length - 1);
+                    this.dataDoc.stepNumber = (step);
+                    this.dataDoc.startForces = (
+                      this.getForceFromJSON(this.dataDoc.selectedTutorial.steps[step].forces)
+                    );
+                    this.dataDoc.updatedForces = (
+                      this.getForceFromJSON(this.dataDoc.selectedTutorial.steps[step].forces)
+                    );
+                    this.dataDoc.showForceMagnitudes = (
+                      this.dataDoc.selectedTutorial.steps[step].showMagnitude
+                    );
                   }}
-                  style={{ height: "2em", width: "100%", fontSize: "16px" }}
+                  disabled={this.dataDoc.stepNumber == this.dataDoc.selectedTutorial.steps.length - 1}
                 >
-                  <option value="One Weight">Projectile</option>
-                  <option value="Inclined Plane">Inclined Plane</option>
-                  <option value="Pendulum">Pendulum</option>
-                  <option value="Spring">Spring</option>
-                  <option value="Circular Motion">Circular Motion</option>
-                  <option value="Pulley">Pulley</option>
-                  <option value="Suspension">Suspension</option>
-                </select>
+                  <ArrowRightIcon />
+                </IconButton>
+              </div>
+              <div>
+                {(this.dataDoc.simulationType == "One Weight" ||
+                  this.dataDoc.simulationType == "Inclined Plane" ||
+                  this.dataDoc.simulationType == "Pendulum") && <p>Resources</p>}
+                {this.dataDoc.simulationType == "One Weight" && (
+                  <ul>
+                    <li>
+                      <a
+                        href="https://www.khanacademy.org/science/physics/one-dimensional-motion"
+                        target="_blank"
+                        rel="noreferrer"
+                        style={{
+                          color: "blue",
+                          textDecoration: "underline",
+                        }}
+                      >
+                        Khan Academy - One Dimensional Motion
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://www.khanacademy.org/science/physics/two-dimensional-motion"
+                        target="_blank"
+                        rel="noreferrer"
+                        style={{
+                          color: "blue",
+                          textDecoration: "underline",
+                        }}
+                      >
+                        Khan Academy - Two Dimensional Motion
+                      </a>
+                    </li>
+                  </ul>
+                )}
+                {this.dataDoc.simulationType == "Inclined Plane" && (
+                  <ul>
+                    <li>
+                      <a
+                        href="https://www.khanacademy.org/science/physics/forces-newtons-laws#normal-contact-force"
+                        target="_blank"
+                        rel="noreferrer"
+                        style={{
+                          color: "blue",
+                          textDecoration: "underline",
+                        }}
+                      >
+                        Khan Academy - Normal Force
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://www.khanacademy.org/science/physics/forces-newtons-laws#inclined-planes-friction"
+                        target="_blank"
+                        rel="noreferrer"
+                        style={{
+                          color: "blue",
+                          textDecoration: "underline",
+                        }}
+                      >
+                        Khan Academy - Inclined Planes
+                      </a>
+                    </li>
+                  </ul>
+                )}
+                {this.dataDoc.simulationType == "Pendulum" && (
+                  <ul>
+                    <li>
+                      <a
+                        href="https://www.khanacademy.org/science/physics/forces-newtons-laws#tension-tutorial"
+                        target="_blank"
+                        rel="noreferrer"
+                        style={{
+                          color: "blue",
+                          textDecoration: "underline",
+                        }}
+                      >
+                        Khan Academy - Tension
+                      </a>
+                    </li>
+                  </ul>
+                )}
               </div>
-          <div className="dropdownMenu">
-            <select
-              value={this.dataDoc.mode}
-              onChange={(event) => {
-                this.dataDoc.mode = (event.target.value);
-                this.setupSimulation(this.dataDoc.simulationType, event.target.value)
+            </div>
+          )}
+          {this.dataDoc.mode == "Review" && this.dataDoc.simulationType == "Inclined Plane" && (
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                marginTop: "10px",
               }}
-              style={{ height: "2em", width: "100%", fontSize: "16px" }}
             >
-              <option value="Tutorial">Tutorial Mode</option>
-              <option value="Freeform">Freeform Mode</option>
-              <option value="Review">Review Mode</option>
-            </select>
-          </div>
-        </div>
-        {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" && (
-          <div>
-            {!this.dataDoc.hintDialogueOpen && (
-              <IconButton
-                onClick={() => {
-                  this.dataDoc.hintDialogueOpen = (true);
-                }}
-                sx={{
-                  position: "fixed",
-                  left: this.xMax - 50 + "px",
-                  top: this.yMin + 14 + "px",
+              <p
+                style={{
+                  color: "blue",
+                  textDecoration: "underline",
+                  cursor: "pointer",
                 }}
+                onClick={() => this.dataDoc.mode = ("Tutorial")}
               >
-                <QuestionMarkIcon />
-              </IconButton>
-            )}
-            <Dialog
-              maxWidth={"sm"}
-              fullWidth={true}
-              open={this.dataDoc.hintDialogueOpen}
-              onClose={() => this.dataDoc.hintDialogueOpen = (false)}
-            >
-              <DialogTitle>Hints</DialogTitle>
-              <DialogContent>
-                {this.dataDoc.selectedQuestion.hints && (this.dataDoc.selectedQuestion.hints.map((hint, index) => {
-                  return (
-                    <div key={index}>
-                      <DialogContentText>
-                        <details>
-                          <summary>
-                            <b>
-                              Hint {index + 1}: {hint.description}
-                            </b>
-                          </summary>
-                          {hint.content}
-                        </details>
-                      </DialogContentText>
-                    </div>
-                  );
-                }))}
-              </DialogContent>
-              <DialogActions>
+                {" "}
+                Go to walkthrough{" "}
+              </p>
+              <div style={{ display: "flex", flexDirection: "column" }}>
                 <Button
                   onClick={() => {
-                    this.dataDoc.hintDialogueOpen = (false);
+                    this.dataDoc.simulationReset= (!this.dataDoc.simulationReset);
+                    this.checkAnswers();
+                    this.dataDoc.showIcon = true;
                   }}
+                  variant="outlined"
                 >
-                  Close
+                  <p>Submit</p>
+                </Button>
+                <Button
+                  onClick={() => {
+                    this.generateNewQuestion();
+                    this.dataDoc.showIcon = false;
+                  }}
+                  variant="outlined"
+                >
+                  <p>New question</p>
                 </Button>
-              </DialogActions>
-            </Dialog>
-            <div className="wordProblemBox">
-              <div className="question">
-                <p>{this.dataDoc.questionPartOne}</p>
-                <p>{this.dataDoc.questionPartTwo}</p>
               </div>
-              <div className="answers">
-                {this.dataDoc.selectedQuestion.answerParts.includes("force of gravity") &&
-                  (<InputField
-                    label={<p>Gravity magnitude</p>}
-                    lowerBound={0}
+            </div>
+          )}
+          {this.dataDoc.mode == "Freeform" && (
+            <div className="vars">
+              <FormControl component="fieldset">
+                <FormGroup>
+                  {this.dataDoc.simulationType == "One Weight" && (
+                    <FormControlLabel
+                      control={
+                        <Checkbox
+                          checked={this.dataDoc.elasticCollisions}
+                          onChange={() =>
+                            this.dataDoc.elasticCollisions= (!this.dataDoc.elasticCollisions)
+                          }
+                        />
+                      }
+                      label="Make collisions elastic"
+                      labelPlacement="start"
+                    />
+                  )}
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        checked={this.dataDoc.showForces}
+                        onChange={() => this.dataDoc.showForces = (!this.dataDoc.showForces)}
+                      />
+                    }
+                    label="Show force vectors"
+                    labelPlacement="start"
+                  />
+                  {(this.dataDoc.simulationType == "Inclined Plane" ||
+                    this.dataDoc.simulationType == "Pendulum") && (
+                    <FormControlLabel
+                      control={
+                        <Checkbox
+                          checked={this.dataDoc.showForces}
+                          onChange={() =>
+                            this.dataDoc.showComponentForces = (!this.dataDoc.showComponentForces)
+                          }
+                        />
+                      }
+                      label="Show component force vectors"
+                      labelPlacement="start"
+                    />
+                  )}
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        checked={this.dataDoc.showAcceleration}
+                        onChange={() => this.dataDoc.showAcceleration = (!this.dataDoc.showAcceleration)}
+                      />
+                    }
+                    label="Show acceleration vector"
+                    labelPlacement="start"
+                  />
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        checked={this.dataDoc.showVelocity}
+                        onChange={() => this.dataDoc.showVelocity = (!this.dataDoc.showVelocity)}
+                      />
+                    }
+                    label="Show velocity vector"
+                    labelPlacement="start"
+                  />
+                  <InputField
+                    label={<Box>Speed</Box>}
+                    lowerBound={1}
                     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") && (
+                    prop={'simulationSpeed'}
+                    step={1}
+                    unit={"x"}
+                    upperBound={10}
+                    value={this.dataDoc.simulationSpeed ?? 2}
+                    labelWidth={"5em"}
+                  />
+                  {this.dataDoc.simulationPaused && this.dataDoc.simulationType != "Circular Motion" && (
+                    <InputField
+                      label={<Box>Gravity</Box>}
+                      lowerBound={-30}
+                      dataDoc={this.dataDoc}
+                      prop={'gravity'}
+                      step={0.01}
+                      unit={"m/s2"}
+                      upperBound={0}
+                      value={this.dataDoc.gravity ?? -9.81}
+                      effect={(val: number) => {
+                        this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode)
+                      }}
+                      labelWidth={"5em"}
+                    />
+                  )}
+                  {this.dataDoc.simulationPaused && this.dataDoc.simulationType != "Pulley" && (
+                    <InputField
+                      label={<Box>Mass</Box>}
+                      lowerBound={1}
+                      dataDoc={this.dataDoc}
+                      prop={'mass'}
+                      step={0.1}
+                      unit={"kg"}
+                      upperBound={5}
+                      value={this.dataDoc.mass ?? 1}
+                      effect={(val: number) => {
+                        this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode)
+                      }}
+                      labelWidth={"5em"}
+                    />
+                  )}
+                  {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "Pulley" && (
+                    <InputField
+                      label={<Box>Red mass</Box>}
+                      lowerBound={1}
+                      dataDoc={this.dataDoc}
+                      prop={'mass'}
+                      step={0.1}
+                      unit={"kg"}
+                      upperBound={5}
+                      value={this.dataDoc.mass ?? 1}
+                      effect={(val: number) => {
+                        this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode)
+                      }}
+                      labelWidth={"5em"}
+                    />
+                  )}
+                  {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "Pulley" && (
+                    <InputField
+                      label={<Box>Blue mass</Box>}
+                      lowerBound={1}
+                      dataDoc={this.dataDoc}
+                      prop={'mass2'}
+                      step={0.1}
+                      unit={"kg"}
+                      upperBound={5}
+                      value={this.dataDoc.mass2 ?? 1}
+                      effect={(val: number) => {
+                        this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode)
+                      }}
+                      labelWidth={"5em"}
+                    />
+                  )}
+                  {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "Circular Motion" && (
+                    <InputField
+                      label={<Box>Rod length</Box>}
+                      lowerBound={100}
+                      dataDoc={this.dataDoc}
+                      prop={'circularMotionRadius'}
+                      step={5}
+                      unit={"m"}
+                      upperBound={250}
+                      value={this.dataDoc.circularMotionRadius ?? 100}
+                      effect={(val: number) => {
+                        this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode)
+                      }}
+                      labelWidth={"5em"}
+                    />
+                  )}
+                </FormGroup>
+              </FormControl>
+              {this.dataDoc.simulationType == "Spring" && this.dataDoc.simulationPaused && (
+                <div>
                   <InputField
-                    label={<p>Gravity angle</p>}
-                    lowerBound={0}
+                    label={
+                      <Typography color="inherit">Spring stiffness</Typography>
+                    }
+                    lowerBound={0.1}
                     dataDoc={this.dataDoc}
-                    prop={'reviewGravityAngle'}
+                    prop={'springConstant'}
                     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")]}
+                    unit={"N/m"}
+                    upperBound={500}
+                    value={this.dataDoc.springConstant ?? 0.5}
+                    effect={(val: number) => {
+                      this.dataDoc.simulationReset(!this.dataDoc.simulationReset);
+                    }}
+                    radianEquivalent={false}
+                    mode={"Freeform"}
                     labelWidth={"7em"}
                   />
-                )}
-                {this.dataDoc.selectedQuestion.answerParts.includes("normal force") && (
                   <InputField
-                    label={<p>Normal force magnitude</p>}
-                    lowerBound={0}
+                    label={<Typography color="inherit">Rest length</Typography>}
+                    lowerBound={10}
                     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")]}
+                    prop={'springRestLength'}
+                    step={100}
+                    unit={""}
+                    upperBound={500}
+                    value={this.dataDoc.springRestLength ?? 200}
+                    effect={(val: number) => {
+                      this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+                    }}
+                    radianEquivalent={false}
+                    mode={"Freeform"}
                     labelWidth={"7em"}
                   />
-                )}
-                {this.dataDoc.selectedQuestion.answerParts.includes("angle of normal force") && (
                   <InputField
-                    label={<p>Normal force angle</p>}
-                    lowerBound={0}
+                    label={
+                      <Typography color="inherit">
+                        Starting displacement
+                      </Typography>
+                    }
+                    lowerBound={-(this.dataDoc.springRestLength - 10)}
                     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")]}
+                    prop={""}
+                    step={10}
+                    unit={""}
+                    upperBound={this.dataDoc.springRestLength}
+                    value={this.dataDoc.springStartLength - this.dataDoc.springRestLength ?? 0}
+                    effect={(val: number) => {
+                      this.dataDoc.startPosY = (this.dataDoc.springRestLength + val);
+                      this.dataDoc.springStartLength = (this.dataDoc.springRestLength + val);
+                      this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+                    }}
+                    radianEquivalent={false}
+                    mode={"Freeform"}
                     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") && (
+                </div>
+              )}
+              {this.dataDoc.simulationType == "Inclined Plane" && this.dataDoc.simulationPaused && (
+                <div>
                   <InputField
-                    label={<p>Static friction angle</p>}
+                    label={<Box>&theta;</Box>}
                     lowerBound={0}
                     dataDoc={this.dataDoc}
-                    prop={'reviewStaticAngle'}
+                    prop={'wedgeAngle'}
                     step={1}
                     unit={"°"}
-                    upperBound={360}
-                    value={this.dataDoc.reviewStaticAngle}
+                    upperBound={49}
+                    value={this.dataDoc.wedgeAngle ?? 26}
+                    effect={(val: number) => {
+                      this.changeWedgeBasedOnNewAngle(val);
+                      this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+                    }}
                     radianEquivalent={true}
-                    showIcon={false}
-                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("angle of static friction")]}
-                    labelWidth={"7em"}
+                    mode={"Freeform"}
+                    labelWidth={"2em"}
                   />
-                )}
-                {this.dataDoc.selectedQuestion.answerParts.includes("coefficient of static friction") && (
                   <InputField
                     label={
                       <Box>
@@ -1439,753 +1904,322 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                     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")]}
+                    value={this.dataDoc.coefficientOfStaticFriction ?? 0}
+                    effect={(val: number) => {
+                      this.updateForcesWithFriction(val);
+                      if (val < Number(this.dataDoc.coefficientOfKineticFriction)) {
+                        this.dataDoc.soefficientOfKineticFriction = (val);
+                      }
+                      this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+                    }}
+                    mode={"Freeform"}
+                    labelWidth={"2em"}
                   />
-                )}
-                {this.dataDoc.selectedQuestion.answerParts.includes("wedge angle") && (
                   <InputField
-                    label={<Box>&theta;</Box>}
+                    label={
+                      <Box>
+                        &mu;<sub>k</sub>
+                      </Box>
+                    }
                     lowerBound={0}
                     dataDoc={this.dataDoc}
-                    prop={'wedgeAngle'}
+                    prop={'coefficientOfKineticFriction'}
+                    step={0.1}
+                    unit={""}
+                    upperBound={Number(this.dataDoc.coefficientOfStaticFriction)}
+                    value={this.dataDoc.coefficientOfKineticFriction ?? 0}
+                    effect={(val: number) => {
+                      this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+                    }}
+                    mode={"Freeform"}
+                    labelWidth={"2em"}
+                  />
+                </div>
+              )}
+              {this.dataDoc.simulationType == "Inclined Plane" && !this.dataDoc.simulationPaused && (
+                <Typography>
+                  &theta;: {Math.round(Number(this.dataDoc.wedgeAngle) * 100) / 100}° ≈{" "}
+                  {Math.round(((Number(this.dataDoc.wedgeAngle) * Math.PI) / 180) * 100) /
+                    100}{" "}
+                  rad
+                  <br />
+                  &mu; <sub>s</sub>: {this.dataDoc.coefficientOfStaticFriction}
+                  <br />
+                  &mu; <sub>k</sub>: {this.dataDoc.coefficientOfKineticFriction}
+                </Typography>
+              )}
+              {this.dataDoc.simulationType == "Pendulum" && !this.dataDoc.simulationPaused && (
+                <Typography>
+                  &theta;: {Math.round(this.dataDoc.pendulumAngle * 100) / 100}° ≈{" "}
+                  {Math.round(((this.dataDoc.pendulumAngle * Math.PI) / 180) * 100) / 100}{" "}
+                  rad
+                </Typography>
+              )}
+              {this.dataDoc.simulationType == "Pendulum" && this.dataDoc.simulationPaused && (
+                <div>
+                  <InputField
+                    label={<Box>Angle</Box>}
+                    lowerBound={0}
+                    dataDoc={this.dataDoc}
+                    prop={'pendulumAngle'}
                     step={1}
                     unit={"°"}
-                    upperBound={49}
-                    value={this.dataDoc.wedgeAngle ?? 26}
-                    effect={(val: number) => {
-                      this.changeWedgeBasedOnNewAngle(val);
-                      this.updateReviewForcesBasedOnAngle(val);
+                    upperBound={59}
+                    value={this.dataDoc.pendulumAngle ?? 30}
+                    effect={(value) => {
+                      this.dataDoc.startPendulumAngle = (value);
+                      if (this.dataDoc.simulationType == "Pendulum") {
+                        const mag =
+                        this.dataDoc.mass *
+                          Math.abs(this.dataDoc.gravity) *
+                          Math.cos((value * Math.PI) / 180);
+
+                        const forceOfTension: IForce = {
+                          description: "Tension",
+                          magnitude: mag,
+                          directionInDegrees: 90 - value,
+                          component: false,
+                        };
+
+                        const tensionComponent: IForce = {
+                          description: "Tension",
+                          magnitude: mag,
+                          directionInDegrees: 90 - value,
+                          component: true,
+                        };
+                        const gravityParallel: IForce = {
+                          description: "Gravity Parallel Component",
+                          magnitude:
+                            Math.abs(this.dataDoc.gravity) *
+                            Math.cos((value * Math.PI) / 180),
+                          directionInDegrees: 270 - value,
+                          component: true,
+                        };
+                        const gravityPerpendicular: IForce = {
+                          description: "Gravity Perpendicular Component",
+                          magnitude:
+                            Math.abs(this.dataDoc.gravity) *
+                            Math.sin((value * Math.PI) / 180),
+                          directionInDegrees: -value,
+                          component: true,
+                        };
+
+                        const length = this.dataDoc.pendulumLength;
+                        const x =
+                          length * Math.cos(((90 - value) * Math.PI) / 180);
+                        const y =
+                          length * Math.sin(((90 - value) * Math.PI) / 180);
+                        const xPos = this.xMax / 2 - x - this.dataDoc.radius;
+                        const yPos = y - this.dataDoc.radius - 5;
+                        this.dataDoc.startPosX = (xPos);
+                        this.dataDoc.startPosY= (yPos);
+
+                        this.dataDoc.startForces = ([
+                          {
+                            description: "Gravity",
+                            magnitude: Math.abs(this.dataDoc.gravity) * this.dataDoc.mass,
+                            directionInDegrees: 270,
+                            component: false,
+                          },
+                          forceOfTension,
+                        ]);
+                        this.dataDoc.updatedForces = ([
+                          {
+                            description: "Gravity",
+                            magnitude: Math.abs(this.dataDoc.gravity) * this.dataDoc.mass,
+                            directionInDegrees: 270,
+                            component: false,
+                          },
+                          forceOfTension,
+                        ]);
+                        this.dataDoc.componentForces = ([
+                          tensionComponent,
+                          gravityParallel,
+                          gravityPerpendicular,
+                        ]);
+                        this.dataDoc.adjustPendulumAngle = ({
+                          angle: value,
+                          length: this.dataDoc.pendulumLength,
+                        });
+                        this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+                      }
                     }}
                     radianEquivalent={true}
-                    showIcon={false}
-                    correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("wedge angle")]}
+                    mode={"Freeform"}
+                    labelWidth={"5em"}
                   />
-                )}
-              </div>
-           </div>
-        )}
-        {this.dataDoc.mode == "Tutorial" && (
-          <div className="wordProblemBox">
-            <div className="question">
-              <h2>Problem</h2>
-              <p>{this.dataDoc.selectedTutorial.question}</p>
-            </div>
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "spaceBetween",
-                width: "100%",
-              }}
-            >
-              <IconButton
-                onClick={() => {
-                  let step = this.dataDoc.stepNumber - 1;
-                  step = Math.max(step, 0);
-                  step = Math.min(step, this.dataDoc.selectedTutorial.steps.length - 1);
-                  this.dataDoc.stepNumber = (step);
-                  this.dataDoc.startForces = (
-                    this.getForceFromJSON(this.dataDoc.selectedTutorial.steps[step].forces)
-                  );
-                  this.dataDoc.updatedForces = (
-                    this.getForceFromJSON(this.dataDoc.selectedTutorial.steps[step].forces)
-                  );
-                  this.dataDoc.showForceMagnitudes = (
-                    this.dataDoc.selectedTutorial.steps[step].showMagnitude
-                  );
-                }}
-                disabled={this.dataDoc.stepNumber == 0}
-              >
-                <ArrowLeftIcon />
-              </IconButton>
-              <div>
-                <h3>
-                  Step {this.dataDoc.stepNumber + 1}:{" "}
-                  {this.dataDoc.selectedTutorial.steps[this.dataDoc.stepNumber].description}
-                </h3>
-                <p>{this.dataDoc.selectedTutorial.steps[this.dataDoc.stepNumber].content}</p>
-              </div>
-              <IconButton
-                onClick={() => {
-                  let step = this.dataDoc.stepNumber + 1;
-                  step = Math.max(step, 0);
-                  step = Math.min(step, this.dataDoc.selectedTutorial.steps.length - 1);
-                  this.dataDoc.stepNumber = (step);
-                  this.dataDoc.startForces = (
-                    this.getForceFromJSON(this.dataDoc.selectedTutorial.steps[step].forces)
-                  );
-                  this.dataDoc.updatedForces = (
-                    this.getForceFromJSON(this.dataDoc.selectedTutorial.steps[step].forces)
-                  );
-                  this.dataDoc.showForceMagnitudes = (
-                    this.dataDoc.selectedTutorial.steps[step].showMagnitude
-                  );
-                }}
-                disabled={this.dataDoc.stepNumber == this.dataDoc.selectedTutorial.steps.length - 1}
-              >
-                <ArrowRightIcon />
-              </IconButton>
-            </div>
-            <div>
-              {(this.dataDoc.simulationType == "One Weight" ||
-                this.dataDoc.simulationType == "Inclined Plane" ||
-                this.dataDoc.simulationType == "Pendulum") && <p>Resources</p>}
-              {this.dataDoc.simulationType == "One Weight" && (
-                <ul>
-                  <li>
-                    <a
-                      href="https://www.khanacademy.org/science/physics/one-dimensional-motion"
-                      target="_blank"
-                      rel="noreferrer"
-                      style={{
-                        color: "blue",
-                        textDecoration: "underline",
-                      }}
-                    >
-                      Khan Academy - One Dimensional Motion
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      href="https://www.khanacademy.org/science/physics/two-dimensional-motion"
-                      target="_blank"
-                      rel="noreferrer"
-                      style={{
-                        color: "blue",
-                        textDecoration: "underline",
-                      }}
-                    >
-                      Khan Academy - Two Dimensional Motion
-                    </a>
-                  </li>
-                </ul>
-              )}
-              {this.dataDoc.simulationType == "Inclined Plane" && (
-                <ul>
-                  <li>
-                    <a
-                      href="https://www.khanacademy.org/science/physics/forces-newtons-laws#normal-contact-force"
-                      target="_blank"
-                      rel="noreferrer"
-                      style={{
-                        color: "blue",
-                        textDecoration: "underline",
-                      }}
-                    >
-                      Khan Academy - Normal Force
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      href="https://www.khanacademy.org/science/physics/forces-newtons-laws#inclined-planes-friction"
-                      target="_blank"
-                      rel="noreferrer"
-                      style={{
-                        color: "blue",
-                        textDecoration: "underline",
-                      }}
-                    >
-                      Khan Academy - Inclined Planes
-                    </a>
-                  </li>
-                </ul>
-              )}
-              {this.dataDoc.simulationType == "Pendulum" && (
-                <ul>
-                  <li>
-                    <a
-                      href="https://www.khanacademy.org/science/physics/forces-newtons-laws#tension-tutorial"
-                      target="_blank"
-                      rel="noreferrer"
-                      style={{
-                        color: "blue",
-                        textDecoration: "underline",
-                      }}
-                    >
-                      Khan Academy - Tension
-                    </a>
-                  </li>
-                </ul>
-              )}
-            </div>
-          </div>
-        )}
-        {this.dataDoc.mode == "Review" && this.dataDoc.simulationType == "Inclined Plane" && (
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              marginTop: "10px",
-            }}
-          >
-            <p
-              style={{
-                color: "blue",
-                textDecoration: "underline",
-                cursor: "pointer",
-              }}
-              onClick={() => this.dataDoc.mode = ("Tutorial")}
-            >
-              {" "}
-              Go to walkthrough{" "}
-            </p>
-            <div style={{ display: "flex", flexDirection: "column" }}>
-              <Button
-                onClick={() => {
-                  this.dataDoc.simulationReset= (!this.dataDoc.simulationReset);
-                  this.checkAnswers();
-                  this.generateInputFieldsForQuestion(true);
-                }}
-                variant="outlined"
-              >
-                <p>Submit</p>
-              </Button>
-              <Button
-                onClick={() => this.generateNewQuestion()}
-                variant="outlined"
-              >
-                <p>New question</p>
-              </Button>
-            </div>
-          </div>
-        )}
-        {this.dataDoc.mode == "Freeform" && (
-          <div className="vars">
-            <FormControl component="fieldset">
-              <FormGroup>
-                {this.dataDoc.simulationType == "One Weight" && (
-                  <FormControlLabel
-                    control={
-                      <Checkbox
-                        checked={this.dataDoc.elasticCollisions}
-                        onChange={() =>
-                          this.dataDoc.elasticCollisions= (!this.dataDoc.elasticCollisions)
-                        }
-                      />
-                    }
-                    label="Make collisions elastic"
-                    labelPlacement="start"
-                  />
-                )}
-                <FormControlLabel
-                  control={
-                    <Checkbox
-                      checked={this.dataDoc.showForces}
-                      onChange={() => this.dataDoc.showForces = (!this.dataDoc.showForces)}
-                    />
-                  }
-                  label="Show force vectors"
-                  labelPlacement="start"
-                />
-                {(this.dataDoc.simulationType == "Inclined Plane" ||
-                  this.dataDoc.simulationType == "Pendulum") && (
-                  <FormControlLabel
-                    control={
-                      <Checkbox
-                        checked={this.dataDoc.showForces}
-                        onChange={() =>
-                          this.dataDoc.showComponentForces = (!this.dataDoc.showComponentForces)
-                        }
-                      />
-                    }
-                    label="Show component force vectors"
-                    labelPlacement="start"
-                  />
-                )}
-                <FormControlLabel
-                  control={
-                    <Checkbox
-                      checked={this.dataDoc.showAcceleration}
-                      onChange={() => this.dataDoc.showAcceleration = (!this.dataDoc.showAcceleration)}
-                    />
-                  }
-                  label="Show acceleration vector"
-                  labelPlacement="start"
-                />
-                <FormControlLabel
-                  control={
-                    <Checkbox
-                      checked={this.dataDoc.showVelocity}
-                      onChange={() => this.dataDoc.showVelocity = (!this.dataDoc.showVelocity)}
-                    />
-                  }
-                  label="Show velocity vector"
-                  labelPlacement="start"
-                />
-                <InputField
-                  label={<Box>Speed</Box>}
-                  lowerBound={1}
-                  dataDoc={this.dataDoc}
-                  prop={'simulationSpeed'}
-                  step={1}
-                  unit={"x"}
-                  upperBound={10}
-                  value={this.dataDoc.simulationSpeed ?? 2}
-                  labelWidth={"5em"}
-                />
-                {this.dataDoc.simulationPaused && this.dataDoc.simulationType != "Circular Motion" && (
-                  <InputField
-                    label={<Box>Gravity</Box>}
-                    lowerBound={-30}
-                    dataDoc={this.dataDoc}
-                    prop={'gravity'}
-                    step={0.01}
-                    unit={"m/s2"}
-                    upperBound={0}
-                    value={this.dataDoc.gravity ?? -9.81}
-                    effect={(val: number) => {
-                      this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode)
-                    }}
-                    labelWidth={"5em"}
-                  />
-                )}
-                {this.dataDoc.simulationPaused && this.dataDoc.simulationType != "Pulley" && (
-                  <InputField
-                    label={<Box>Mass</Box>}
-                    lowerBound={1}
-                    dataDoc={this.dataDoc}
-                    prop={'mass'}
-                    step={0.1}
-                    unit={"kg"}
-                    upperBound={5}
-                    value={this.dataDoc.mass ?? 1}
-                    effect={(val: number) => {
-                      this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode)
-                    }}
-                    labelWidth={"5em"}
-                  />
-                )}
-                {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "Pulley" && (
-                  <InputField
-                    label={<Box>Red mass</Box>}
-                    lowerBound={1}
-                    dataDoc={this.dataDoc}
-                    prop={'mass'}
-                    step={0.1}
-                    unit={"kg"}
-                    upperBound={5}
-                    value={this.dataDoc.mass ?? 1}
-                    effect={(val: number) => {
-                      this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode)
-                    }}
-                    labelWidth={"5em"}
-                  />
-                )}
-                {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "Pulley" && (
-                  <InputField
-                    label={<Box>Blue mass</Box>}
-                    lowerBound={1}
-                    dataDoc={this.dataDoc}
-                    prop={'mass2'}
-                    step={0.1}
-                    unit={"kg"}
-                    upperBound={5}
-                    value={this.dataDoc.mass2 ?? 1}
-                    effect={(val: number) => {
-                      this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode)
-                    }}
-                    labelWidth={"5em"}
-                  />
-                )}
-                {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "Circular Motion" && (
                   <InputField
                     label={<Box>Rod length</Box>}
-                    lowerBound={100}
+                    lowerBound={0}
                     dataDoc={this.dataDoc}
-                    prop={'circularMotionRadius'}
-                    step={5}
+                    prop={'pendulumLength'}
+                    step={1}
                     unit={"m"}
-                    upperBound={250}
-                    value={this.dataDoc.circularMotionRadius ?? 100}
-                    effect={(val: number) => {
-                      this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode)
+                    upperBound={400}
+                    value={Math.round(this.dataDoc.pendulumLength)}
+                    effect={(value) => {
+                      if (this.dataDoc.simulationType == "Pendulum") {
+                        this.dataDoc.adjustPendulumAngle = ({
+                          angle: this.dataDoc.pendulumAngle,
+                          length: value,
+                        });
+                        this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+                      }
                     }}
+                    radianEquivalent={false}
+                    mode={"Freeform"}
                     labelWidth={"5em"}
                   />
-                )}
-              </FormGroup>
-            </FormControl>
-            {this.dataDoc.simulationType == "Spring" && this.dataDoc.simulationPaused && (
-              <div>
-                <InputField
-                  label={
-                    <Typography color="inherit">Spring stiffness</Typography>
-                  }
-                  lowerBound={0.1}
-                  dataDoc={this.dataDoc}
-                  prop={'springConstant'}
-                  step={1}
-                  unit={"N/m"}
-                  upperBound={500}
-                  value={this.dataDoc.springConstant ?? 0.5}
-                  effect={(val: number) => {
-                    this.dataDoc.simulationReset(!this.dataDoc.simulationReset);
-                  }}
-                  radianEquivalent={false}
-                  mode={"Freeform"}
-                  labelWidth={"7em"}
-                />
-                <InputField
-                  label={<Typography color="inherit">Rest length</Typography>}
-                  lowerBound={10}
-                  dataDoc={this.dataDoc}
-                  prop={'springRestLength'}
-                  step={100}
-                  unit={""}
-                  upperBound={500}
-                  value={this.dataDoc.springRestLength ?? 200}
-                  effect={(val: number) => {
-                    this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
-                  }}
-                  radianEquivalent={false}
-                  mode={"Freeform"}
-                  labelWidth={"7em"}
-                />
-                <InputField
-                  label={
-                    <Typography color="inherit">
-                      Starting displacement
-                    </Typography>
-                  }
-                  lowerBound={-(this.dataDoc.springRestLength - 10)}
-                  dataDoc={this.dataDoc}
-                  prop={""}
-                  step={10}
-                  unit={""}
-                  upperBound={this.dataDoc.springRestLength}
-                  value={this.dataDoc.springStartLength - this.dataDoc.springRestLength ?? 0}
-                  effect={(val: number) => {
-                    this.dataDoc.startPosY = (this.dataDoc.springRestLength + val);
-                    this.dataDoc.springStartLength = (this.dataDoc.springRestLength + val);
-                    this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
-                  }}
-                  radianEquivalent={false}
-                  mode={"Freeform"}
-                  labelWidth={"7em"}
-                />
-              </div>
-            )}
-            {this.dataDoc.simulationType == "Inclined Plane" && this.dataDoc.simulationPaused && (
-              <div>
-                <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.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
-                  }}
-                  radianEquivalent={true}
-                  mode={"Freeform"}
-                  labelWidth={"2em"}
-                />
-                <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 ?? 0}
-                  effect={(val: number) => {
-                    this.updateForcesWithFriction(val);
-                    if (val < Number(this.dataDoc.coefficientOfKineticFriction)) {
-                      this.dataDoc.soefficientOfKineticFriction = (val);
-                    }
-                    this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
-                  }}
-                  mode={"Freeform"}
-                  labelWidth={"2em"}
-                />
-                <InputField
-                  label={
-                    <Box>
-                      &mu;<sub>k</sub>
-                    </Box>
-                  }
-                  lowerBound={0}
-                  dataDoc={this.dataDoc}
-                  prop={'coefficientOfKineticFriction'}
-                  step={0.1}
-                  unit={""}
-                  upperBound={Number(this.dataDoc.coefficientOfStaticFriction)}
-                  value={this.dataDoc.coefficientOfKineticFriction ?? 0}
-                  effect={(val: number) => {
-                    this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
-                  }}
-                  mode={"Freeform"}
-                  labelWidth={"2em"}
-                />
-              </div>
-            )}
-            {this.dataDoc.simulationType == "Inclined Plane" && !this.dataDoc.simulationPaused && (
-              <Typography>
-                &theta;: {Math.round(Number(this.dataDoc.wedgeAngle) * 100) / 100}° ≈{" "}
-                {Math.round(((Number(this.dataDoc.wedgeAngle) * Math.PI) / 180) * 100) /
-                  100}{" "}
-                rad
-                <br />
-                &mu; <sub>s</sub>: {this.dataDoc.coefficientOfStaticFriction}
-                <br />
-                &mu; <sub>k</sub>: {this.dataDoc.coefficientOfKineticFriction}
-              </Typography>
-            )}
-            {this.dataDoc.simulationType == "Pendulum" && !this.dataDoc.simulationPaused && (
-              <Typography>
-                &theta;: {Math.round(this.dataDoc.pendulumAngle * 100) / 100}° ≈{" "}
-                {Math.round(((this.dataDoc.pendulumAngle * Math.PI) / 180) * 100) / 100}{" "}
-                rad
-              </Typography>
-            )}
-            {this.dataDoc.simulationType == "Pendulum" && this.dataDoc.simulationPaused && (
-              <div>
-                <InputField
-                  label={<Box>Angle</Box>}
-                  lowerBound={0}
-                  dataDoc={this.dataDoc}
-                  prop={'pendulumAngle'}
-                  step={1}
-                  unit={"°"}
-                  upperBound={59}
-                  value={this.dataDoc.pendulumAngle ?? 30}
-                  effect={(value) => {
-                    this.dataDoc.startPendulumAngle = (value);
-                    if (this.dataDoc.simulationType == "Pendulum") {
-                      const mag =
-                      this.dataDoc.mass *
-                        Math.abs(this.dataDoc.gravity) *
-                        Math.cos((value * Math.PI) / 180);
-
-                      const forceOfTension: IForce = {
-                        description: "Tension",
-                        magnitude: mag,
-                        directionInDegrees: 90 - value,
-                        component: false,
-                      };
-
-                      const tensionComponent: IForce = {
-                        description: "Tension",
-                        magnitude: mag,
-                        directionInDegrees: 90 - value,
-                        component: true,
-                      };
-                      const gravityParallel: IForce = {
-                        description: "Gravity Parallel Component",
-                        magnitude:
-                          Math.abs(this.dataDoc.gravity) *
-                          Math.cos((value * Math.PI) / 180),
-                        directionInDegrees: 270 - value,
-                        component: true,
-                      };
-                      const gravityPerpendicular: IForce = {
-                        description: "Gravity Perpendicular Component",
-                        magnitude:
-                          Math.abs(this.dataDoc.gravity) *
-                          Math.sin((value * Math.PI) / 180),
-                        directionInDegrees: -value,
-                        component: true,
-                      };
-
-                      const length = this.dataDoc.pendulumLength;
-                      const x =
-                        length * Math.cos(((90 - value) * Math.PI) / 180);
-                      const y =
-                        length * Math.sin(((90 - value) * Math.PI) / 180);
-                      const xPos = this.xMax / 2 - x - this.dataDoc.radius;
-                      const yPos = y - this.dataDoc.radius - 5;
-                      this.dataDoc.startPosX = (xPos);
-                      this.dataDoc.startPosY= (yPos);
-
-                      this.dataDoc.startForces = ([
-                        {
-                          description: "Gravity",
-                          magnitude: Math.abs(this.dataDoc.gravity) * this.dataDoc.mass,
-                          directionInDegrees: 270,
-                          component: false,
-                        },
-                        forceOfTension,
-                      ]);
-                      this.dataDoc.updatedForces = ([
-                        {
-                          description: "Gravity",
-                          magnitude: Math.abs(this.dataDoc.gravity) * this.dataDoc.mass,
-                          directionInDegrees: 270,
-                          component: false,
-                        },
-                        forceOfTension,
-                      ]);
-                      this.dataDoc.componentForces = ([
-                        tensionComponent,
-                        gravityParallel,
-                        gravityPerpendicular,
-                      ]);
-                      this.dataDoc.adjustPendulumAngle = ({
-                        angle: value,
-                        length: this.dataDoc.pendulumLength,
-                      });
-                      this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
-                    }
-                  }}
-                  radianEquivalent={true}
-                  mode={"Freeform"}
-                  labelWidth={"5em"}
-                />
-                <InputField
-                  label={<Box>Rod length</Box>}
-                  lowerBound={0}
-                  dataDoc={this.dataDoc}
-                  prop={'pendulumLength'}
-                  step={1}
-                  unit={"m"}
-                  upperBound={400}
-                  value={Math.round(this.dataDoc.pendulumLength)}
-                  effect={(value) => {
-                    if (this.dataDoc.simulationType == "Pendulum") {
-                      this.dataDoc.adjustPendulumAngle = ({
-                        angle: this.dataDoc.pendulumAngle,
-                        length: value,
-                      });
-                      this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
-                    }
-                  }}
-                  radianEquivalent={false}
-                  mode={"Freeform"}
-                  labelWidth={"5em"}
-                />
-              </div>
-            )}
-          </div>
-        )}
-        <div className="mechanicsSimulationEquation">
-          {this.dataDoc.mode == "Freeform" && (
-            <table>
-              <tbody>
-                <tr>
-                  <td>{this.dataDoc.simulationType == "Pulley" ? "Red Weight" : ""}</td>
-                  <td>X</td>
-                  <td>Y</td>
-                </tr>
-                <tr>
-                  <td
-                    style={{ cursor: "help" }}
-                    // onClick={() => {
-                    //   window.open(
-                    //     "https://www.khanacademy.org/science/physics/two-dimensional-motion"
-                    //   );
-                    // }}
-                  >
-                    <Box>Position</Box>
-                  </td>
-                  {(!this.dataDoc.simulationPaused ||
-                    this.dataDoc.simulationType == "Inclined Plane" ||
-                    this.dataDoc.simulationType == "Suspension" ||
-                    this.dataDoc.simulationType == "Circular Motion" ||
-                    this.dataDoc.simulationType == "Pulley") && (
-                    <td style={{ cursor: "default" }}>
-                      {this.dataDoc.positionXDisplay} m
+                </div>
+              )}
+            </div>
+          )}
+          <div className="mechanicsSimulationEquation">
+            {this.dataDoc.mode == "Freeform" && (
+              <table>
+                <tbody>
+                  <tr>
+                    <td>{this.dataDoc.simulationType == "Pulley" ? "Red Weight" : ""}</td>
+                    <td>X</td>
+                    <td>Y</td>
+                  </tr>
+                  <tr>
+                    <td
+                      style={{ cursor: "help" }}
+                      // onClick={() => {
+                      //   window.open(
+                      //     "https://www.khanacademy.org/science/physics/two-dimensional-motion"
+                      //   );
+                      // }}
+                    >
+                      <Box>Position</Box>
                     </td>
-                  )}{" "}
-                  {this.dataDoc.simulationPaused &&
-                    this.dataDoc.simulationType != "Inclined Plane" &&
-                    this.dataDoc.simulationType != "Suspension" &&
-                    this.dataDoc.simulationType != "Circular Motion" &&
-                    this.dataDoc.simulationType != "Pulley" && (
-                      <td
-                        style={{
-                          cursor: "default",
-                        }}
-                      >
-                        <InputField
-                          lowerBound={0}
-                          dataDoc={this.dataDoc}
-                          prop={'positionXDisplay'}
-                          step={1}
-                          unit={"m"}
-                          upperBound={this.xMax - 110}
-                          value={this.dataDoc.positionXDisplay}
-                          effect={(value) => {
-                            this.dataDoc.displayChange = ({
-                              xDisplay: value,
-                              yDisplay: this.dataDoc.positionYDisplay,
-                            });
+                    {(!this.dataDoc.simulationPaused ||
+                      this.dataDoc.simulationType == "Inclined Plane" ||
+                      this.dataDoc.simulationType == "Suspension" ||
+                      this.dataDoc.simulationType == "Circular Motion" ||
+                      this.dataDoc.simulationType == "Pulley") && (
+                      <td style={{ cursor: "default" }}>
+                        {this.dataDoc.positionXDisplay} m
+                      </td>
+                    )}{" "}
+                    {this.dataDoc.simulationPaused &&
+                      this.dataDoc.simulationType != "Inclined Plane" &&
+                      this.dataDoc.simulationType != "Suspension" &&
+                      this.dataDoc.simulationType != "Circular Motion" &&
+                      this.dataDoc.simulationType != "Pulley" && (
+                        <td
+                          style={{
+                            cursor: "default",
                           }}
-                          small={true}
-                          mode={"Freeform"}
-                        />
+                        >
+                          <InputField
+                            lowerBound={0}
+                            dataDoc={this.dataDoc}
+                            prop={'positionXDisplay'}
+                            step={1}
+                            unit={"m"}
+                            upperBound={this.xMax - 110}
+                            value={this.dataDoc.positionXDisplay}
+                            effect={(value) => {
+                              this.dataDoc.displayChange = ({
+                                xDisplay: value,
+                                yDisplay: this.dataDoc.positionYDisplay,
+                              });
+                            }}
+                            small={true}
+                            mode={"Freeform"}
+                          />
+                        </td>
+                      )}{" "}
+                    {(!this.dataDoc.simulationPaused ||
+                      this.dataDoc.simulationType == "Inclined Plane" ||
+                      this.dataDoc.simulationType == "Suspension" ||
+                      this.dataDoc.simulationType == "Circular Motion" ||
+                      this.dataDoc.simulationType == "Pulley") && (
+                      <td style={{ cursor: "default" }}>
+                        {this.dataDoc.positionYDisplay} m
                       </td>
                     )}{" "}
-                  {(!this.dataDoc.simulationPaused ||
-                    this.dataDoc.simulationType == "Inclined Plane" ||
-                    this.dataDoc.simulationType == "Suspension" ||
-                    this.dataDoc.simulationType == "Circular Motion" ||
-                    this.dataDoc.simulationType == "Pulley") && (
-                    <td style={{ cursor: "default" }}>
-                      {this.dataDoc.positionYDisplay} m
+                    {this.dataDoc.simulationPaused &&
+                      this.dataDoc.simulationType != "Inclined Plane" &&
+                      this.dataDoc.simulationType != "Suspension" &&
+                      this.dataDoc.simulationType != "Circular Motion" &&
+                      this.dataDoc.simulationType != "Pulley" && (
+                        <td
+                          style={{
+                            cursor: "default",
+                          }}
+                        >
+                          <InputField
+                            lowerBound={0}
+                            dataDoc={this.dataDoc}
+                            prop={'positionYDisplay'}
+                            step={1}
+                            unit={"m"}
+                            upperBound={this.yMax - 110}
+                            value={this.dataDoc.positionYDisplay}
+                            effect={(value) => {
+                              this.dataDoc.displayChange = ({
+                                xDisplay: this.dataDoc.positionXDisplay,
+                                yDisplay: value,
+                              });
+                            }}
+                            small={true}
+                            mode={"Freeform"}
+                          />
+                        </td>
+                      )}{" "}
+                  </tr>
+                  <tr>
+                    <td
+                      style={{ cursor: "help" }}
+                      // onClick={() => {
+                      //   window.open(
+                      //     "https://www.khanacademy.org/science/physics/two-dimensional-motion"
+                      //   );
+                      // }}
+                    >
+                      <Box>Velocity</Box>
                     </td>
-                  )}{" "}
-                  {this.dataDoc.simulationPaused &&
-                    this.dataDoc.simulationType != "Inclined Plane" &&
-                    this.dataDoc.simulationType != "Suspension" &&
-                    this.dataDoc.simulationType != "Circular Motion" &&
-                    this.dataDoc.simulationType != "Pulley" && (
-                      <td
-                        style={{
-                          cursor: "default",
-                        }}
-                      >
-                        <InputField
-                          lowerBound={0}
-                          dataDoc={this.dataDoc}
-                          prop={'positionYDisplay'}
-                          step={1}
-                          unit={"m"}
-                          upperBound={this.yMax - 110}
-                          value={this.dataDoc.positionYDisplay}
-                          effect={(value) => {
-                            this.dataDoc.displayChange = ({
-                              xDisplay: this.dataDoc.positionXDisplay,
-                              yDisplay: value,
-                            });
+                    {(!this.dataDoc.simulationPaused ||
+                      (this.dataDoc.simulationType != "One Weight" &&
+                      this.dataDoc.simulationType != "Circular Motion")) && (
+                      <td style={{ cursor: "default" }}>
+                        {this.dataDoc.velocityXDisplay} m/s
+                      </td>
+                    )}{" "}
+                    {this.dataDoc.simulationPaused &&
+                      (this.dataDoc.simulationType == "One Weight" ||
+                      this.dataDoc.simulationType == "Circular Motion") && (
+                        <td
+                          style={{
+                            cursor: "default",
                           }}
-                          small={true}
-                          mode={"Freeform"}
-                        />
+                        >
+                          <InputField
+                            lowerBound={-50}
+                            dataDoc={this.dataDoc}
+                            prop={'velocityXDisplay'}
+                            step={1}
+                            unit={"m/s"}
+                            upperBound={50}
+                            value={this.dataDoc.velocityXDisplay}
+                            effect={(value) => {
+                              this.dataDoc.startVelX = (value);
+                              this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+                            }}
+                            small={true}
+                            mode={"Freeform"}
+                          />
+                        </td>
+                      )}{" "}
+                    {(!this.dataDoc.simulationPaused || this.dataDoc.simulationType != "One Weight") && (
+                      <td style={{ cursor: "default" }}>
+                        {this.dataDoc.velocityYDisplay} m/s
                       </td>
                     )}{" "}
-                </tr>
-                <tr>
-                  <td
-                    style={{ cursor: "help" }}
-                    // onClick={() => {
-                    //   window.open(
-                    //     "https://www.khanacademy.org/science/physics/two-dimensional-motion"
-                    //   );
-                    // }}
-                  >
-                    <Box>Velocity</Box>
-                  </td>
-                  {(!this.dataDoc.simulationPaused ||
-                    (this.dataDoc.simulationType != "One Weight" &&
-                    this.dataDoc.simulationType != "Circular Motion")) && (
-                    <td style={{ cursor: "default" }}>
-                      {this.dataDoc.velocityXDisplay} m/s
-                    </td>
-                  )}{" "}
-                  {this.dataDoc.simulationPaused &&
-                    (this.dataDoc.simulationType == "One Weight" ||
-                    this.dataDoc.simulationType == "Circular Motion") && (
+                    {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "One Weight" && (
                       <td
                         style={{
                           cursor: "default",
@@ -2194,263 +2228,236 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi
                         <InputField
                           lowerBound={-50}
                           dataDoc={this.dataDoc}
-                          prop={'velocityXDisplay'}
+                          prop={'velocityYDisplay'}
                           step={1}
                           unit={"m/s"}
                           upperBound={50}
-                          value={this.dataDoc.velocityXDisplay}
+                          value={this.dataDoc.velocityYDisplay}
                           effect={(value) => {
-                            this.dataDoc.startVelX = (value);
-                            this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+                            this.dataDoc.startVelY = (-value);
+                            this.dataDoc.displayChange = ({
+                              xDisplay: this.dataDoc.positionXDisplay,
+                              yDisplay: this.dataDoc.positionYDisplay,
+                            });
                           }}
                           small={true}
                           mode={"Freeform"}
                         />
                       </td>
                     )}{" "}
-                  {(!this.dataDoc.simulationPaused || this.dataDoc.simulationType != "One Weight") && (
-                    <td style={{ cursor: "default" }}>
-                      {this.dataDoc.velocityYDisplay} m/s
-                    </td>
-                  )}{" "}
-                  {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "One Weight" && (
+                  </tr>
+                  <tr>
                     <td
-                      style={{
-                        cursor: "default",
-                      }}
+                      style={{ cursor: "help" }}
+                      // onClick={() => {
+                      //   window.open(
+                      //     "https://www.khanacademy.org/science/physics/two-dimensional-motion"
+                      //   );
+                      // }}
                     >
-                      <InputField
-                        lowerBound={-50}
-                        dataDoc={this.dataDoc}
-                        prop={'velocityYDisplay'}
-                        step={1}
-                        unit={"m/s"}
-                        upperBound={50}
-                        value={this.dataDoc.velocityYDisplay}
-                        effect={(value) => {
-                          this.dataDoc.startVelY = (-value);
-                          this.dataDoc.displayChange = ({
-                            xDisplay: this.dataDoc.positionXDisplay,
-                            yDisplay: this.dataDoc.positionYDisplay,
-                          });
-                        }}
-                        small={true}
-                        mode={"Freeform"}
-                      />
+                      <Box>Acceleration</Box>
+                    </td>
+                    <td style={{ cursor: "default" }}>
+                      {this.dataDoc.accelerationXDisplay} m/s<sup>2</sup>
+                    </td>
+                    <td style={{ cursor: "default" }}>
+                      {this.dataDoc.accelerationYDisplay} m/s<sup>2</sup>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <Box>Momentum</Box>
+                    </td>
+                    <td>
+                      {Math.round(this.dataDoc.velocityXDisplay * this.dataDoc.mass * 10) / 10} kg*m/s
+                    </td>
+                    <td>
+                      {Math.round(this.dataDoc.velocityYDisplay * this.dataDoc.mass * 10) / 10} kg*m/s
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            )}
+            {this.dataDoc.mode == "Freeform" && this.dataDoc.simulationType == "Pulley" && (
+              <table>
+                <tbody>
+                  <tr>
+                    <td>Blue Weight</td>
+                    <td>X</td>
+                    <td>Y</td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <Box>Position</Box>
+                    </td>
+                    <td style={{ cursor: "default" }}>{this.dataDoc.positionXDisplay2} m</td>
+                    <td style={{ cursor: "default" }}>{this.dataDoc.positionYDisplay2} m</td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <Box>Velocity</Box>
+                    </td>
+                    <td style={{ cursor: "default" }}>
+                      {this.dataDoc.velocityXDisplay2} m/s
                     </td>
-                  )}{" "}
-                </tr>
-                <tr>
-                  <td
-                    style={{ cursor: "help" }}
-                    // onClick={() => {
-                    //   window.open(
-                    //     "https://www.khanacademy.org/science/physics/two-dimensional-motion"
-                    //   );
-                    // }}
-                  >
-                    <Box>Acceleration</Box>
-                  </td>
-                  <td style={{ cursor: "default" }}>
-                    {this.dataDoc.accelerationXDisplay} m/s<sup>2</sup>
-                  </td>
-                  <td style={{ cursor: "default" }}>
-                    {this.dataDoc.accelerationYDisplay} m/s<sup>2</sup>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <Box>Momentum</Box>
-                  </td>
-                  <td>
-                    {Math.round(this.dataDoc.velocityXDisplay * this.dataDoc.mass * 10) / 10} kg*m/s
-                  </td>
-                  <td>
-                    {Math.round(this.dataDoc.velocityYDisplay * this.dataDoc.mass * 10) / 10} kg*m/s
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          )}
-          {this.dataDoc.mode == "Freeform" && this.dataDoc.simulationType == "Pulley" && (
-            <table>
-              <tbody>
-                <tr>
-                  <td>Blue Weight</td>
-                  <td>X</td>
-                  <td>Y</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Box>Position</Box>
-                  </td>
-                  <td style={{ cursor: "default" }}>{this.dataDoc.positionXDisplay2} m</td>
-                  <td style={{ cursor: "default" }}>{this.dataDoc.positionYDisplay2} m</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Box>Velocity</Box>
-                  </td>
-                  <td style={{ cursor: "default" }}>
-                    {this.dataDoc.velocityXDisplay2} m/s
-                  </td>
 
-                  <td style={{ cursor: "default" }}>
-                    {this.dataDoc.velocityYDisplay2} m/s
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <Box>Acceleration</Box>
-                  </td>
-                  <td style={{ cursor: "default" }}>
-                    {this.dataDoc.accelerationXDisplay2} m/s<sup>2</sup>
-                  </td>
-                  <td style={{ cursor: "default" }}>
-                    {this.dataDoc.accelerationYDisplay2} m/s<sup>2</sup>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <Box>Momentum</Box>
-                  </td>
-                  <td>
-                    {Math.round(this.dataDoc.velocityXDisplay2 * this.dataDoc.mass * 10) / 10} kg*m/s
-                  </td>
-                  <td>
-                    {Math.round(this.dataDoc.velocityYDisplay2 * this.dataDoc.mass * 10) / 10} kg*m/s
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          )}
-        </div>
-        {this.dataDoc.simulationType != "Pendulum" && this.dataDoc.simulationType != "Spring" && (
-          <div>
-            <p>Kinematic Equations</p>
-            <ul>
-              <li>
-                Position: x<sub>1</sub>=x<sub>0</sub>+v<sub>0</sub>t+
-                <sup>1</sup>&frasl;
-                <sub>2</sub>at
-                <sup>2</sup>
-              </li>
-              <li>
-                Velocity: v<sub>1</sub>=v<sub>0</sub>+at
-              </li>
-              <li>Acceleration: a = F/m</li>
-            </ul>
+                    <td style={{ cursor: "default" }}>
+                      {this.dataDoc.velocityYDisplay2} m/s
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <Box>Acceleration</Box>
+                    </td>
+                    <td style={{ cursor: "default" }}>
+                      {this.dataDoc.accelerationXDisplay2} m/s<sup>2</sup>
+                    </td>
+                    <td style={{ cursor: "default" }}>
+                      {this.dataDoc.accelerationYDisplay2} m/s<sup>2</sup>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <Box>Momentum</Box>
+                    </td>
+                    <td>
+                      {Math.round(this.dataDoc.velocityXDisplay2 * this.dataDoc.mass * 10) / 10} kg*m/s
+                    </td>
+                    <td>
+                      {Math.round(this.dataDoc.velocityYDisplay2 * this.dataDoc.mass * 10) / 10} kg*m/s
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            )}
           </div>
-        )}
-        {this.dataDoc.simulationType == "Spring" && (
-          <div>
-            <p>Harmonic Motion Equations: Spring</p>
-            <ul>
-              <li>
-                Spring force: F<sub>s</sub>=kd
-              </li>
-              <li>
-                Spring period: T<sub>s</sub>=2&pi;&#8730;<sup>m</sup>&frasl;
-                <sub>k</sub>
-              </li>
-              <li>Equilibrium displacement for vertical spring: d = mg/k</li>
-              <li>
-                Elastic potential energy: U<sub>s</sub>=<sup>1</sup>&frasl;
-                <sub>2</sub>kd<sup>2</sup>
-              </li>
+          {this.dataDoc.simulationType != "Pendulum" && this.dataDoc.simulationType != "Spring" && (
+            <div>
+              <p>Kinematic Equations</p>
               <ul>
                 <li>
-                  Maximum when system is at maximum displacement, 0 when
-                  system is at 0 displacement
+                  Position: x<sub>1</sub>=x<sub>0</sub>+v<sub>0</sub>t+
+                  <sup>1</sup>&frasl;
+                  <sub>2</sub>at
+                  <sup>2</sup>
+                </li>
+                <li>
+                  Velocity: v<sub>1</sub>=v<sub>0</sub>+at
                 </li>
+                <li>Acceleration: a = F/m</li>
               </ul>
-              <li>
-                Translational kinetic energy: K=<sup>1</sup>&frasl;
-                <sub>2</sub>mv<sup>2</sup>
-              </li>
+            </div>
+          )}
+          {this.dataDoc.simulationType == "Spring" && (
+            <div>
+              <p>Harmonic Motion Equations: Spring</p>
               <ul>
                 <li>
-                  Maximum when system is at maximum/minimum velocity (at 0
-                  displacement), 0 when velocity is 0 (at maximum
-                  displacement)
+                  Spring force: F<sub>s</sub>=kd
+                </li>
+                <li>
+                  Spring period: T<sub>s</sub>=2&pi;&#8730;<sup>m</sup>&frasl;
+                  <sub>k</sub>
                 </li>
+                <li>Equilibrium displacement for vertical spring: d = mg/k</li>
+                <li>
+                  Elastic potential energy: U<sub>s</sub>=<sup>1</sup>&frasl;
+                  <sub>2</sub>kd<sup>2</sup>
+                </li>
+                <ul>
+                  <li>
+                    Maximum when system is at maximum displacement, 0 when
+                    system is at 0 displacement
+                  </li>
+                </ul>
+                <li>
+                  Translational kinetic energy: K=<sup>1</sup>&frasl;
+                  <sub>2</sub>mv<sup>2</sup>
+                </li>
+                <ul>
+                  <li>
+                    Maximum when system is at maximum/minimum velocity (at 0
+                    displacement), 0 when velocity is 0 (at maximum
+                    displacement)
+                  </li>
+                </ul>
               </ul>
-            </ul>
-          </div>
-        )}
-        {this.dataDoc.simulationType == "Pendulum" && (
-          <div>
-            <p>Harmonic Motion Equations: Pendulum</p>
-            <ul>
-              <li>
-                Pendulum period: T<sub>p</sub>=2&pi;&#8730;<sup>l</sup>&frasl;
-                <sub>g</sub>
-              </li>
-            </ul>
-          </div>
-        )}
+            </div>
+          )}
+          {this.dataDoc.simulationType == "Pendulum" && (
+            <div>
+              <p>Harmonic Motion Equations: Pendulum</p>
+              <ul>
+                <li>
+                  Pendulum period: T<sub>p</sub>=2&pi;&#8730;<sup>l</sup>&frasl;
+                  <sub>g</sub>
+                </li>
+              </ul>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
-    <div
-      style={{
-        position: "fixed",
-        top: this.yMax - 120 + 20 + "px",
-        left: this.xMin + 90 - 80 + "px",
-        zIndex: -10000,
-      }}
-    >
-      <svg width={100 + "px"} height={100 + "px"}>
-        <defs>
-          <marker
-            id="miniArrow"
-            markerWidth="20"
-            markerHeight="20"
-            refX="0"
-            refY="3"
-            orient="auto"
-            markerUnits="strokeWidth"
-          >
-            <path d="M0,0 L0,6 L9,3 z" fill={"#000000"} />
-          </marker>
-        </defs>
-        <line
-          x1={20}
-          y1={70}
-          x2={70}
-          y2={70}
-          stroke={"#000000"}
-          strokeWidth="2"
-          markerEnd="url(#miniArrow)"
-        />
-        <line
-          x1={20}
-          y1={70}
-          x2={20}
-          y2={20}
-          stroke={"#000000"}
-          strokeWidth="2"
-          markerEnd="url(#miniArrow)"
-        />
-      </svg>
-      <p
+      <div
         style={{
           position: "fixed",
-          top: this.yMax - 120 + 40 + "px",
+          top: this.yMax - 120 + 20 + "px",
           left: this.xMin + 90 - 80 + "px",
+          zIndex: -10000,
         }}
       >
-        {this.dataDoc.simulationType == "Circular Motion" ? "Z" : "Y"}
-      </p>
-      <p
-        style={{
-          position: "fixed",
-          top: this.yMax - 120 + 80 + "px",
-          left: this.xMin + 90 - 40 + "px",
-        }}
-      >
-        X
-      </p>
+        <svg width={100 + "px"} height={100 + "px"}>
+          <defs>
+            <marker
+              id="miniArrow"
+              markerWidth="20"
+              markerHeight="20"
+              refX="0"
+              refY="3"
+              orient="auto"
+              markerUnits="strokeWidth"
+            >
+              <path d="M0,0 L0,6 L9,3 z" fill={"#000000"} />
+            </marker>
+          </defs>
+          <line
+            x1={20}
+            y1={70}
+            x2={70}
+            y2={70}
+            stroke={"#000000"}
+            strokeWidth="2"
+            markerEnd="url(#miniArrow)"
+          />
+          <line
+            x1={20}
+            y1={70}
+            x2={20}
+            y2={20}
+            stroke={"#000000"}
+            strokeWidth="2"
+            markerEnd="url(#miniArrow)"
+          />
+        </svg>
+        <p
+          style={{
+            position: "fixed",
+            top: this.yMax - 120 + 40 + "px",
+            left: this.xMin + 90 - 80 + "px",
+          }}
+        >
+          {this.dataDoc.simulationType == "Circular Motion" ? "Z" : "Y"}
+        </p>
+        <p
+          style={{
+            position: "fixed",
+            top: this.yMax - 120 + 80 + "px",
+            left: this.xMin + 90 - 40 + "px",
+          }}
+        >
+          X
+        </p>
+      </div>
     </div>
-  </div>
+    )
   }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2

