fixed physics force assignment to fields

1 files changed, 78 insertions, 86 deletions

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index 0f5bdf316..9d75944f4 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -102,26 +102,21 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         this.layoutDoc._height = 800;
         this.xMax = this.layoutDoc._width * 0.6;
         this.yMax = this.layoutDoc._height * 0.9;
-        this.dataDoc.componentForces = this.dataDoc.componentForces ?? [];
         this.dataDoc.simulation_gravity = NumCast(this.dataDoc.simulation_gravity, -9.81);
         this.dataDoc.mass1 = NumCast(this.dataDoc.mass1, 1);
         this.dataDoc.simulation_mode = 'Freeform';
         this.dataDoc.simulation_showComponentForces = this.dataDoc.simulation_showComponentForces ?? false;
         this.dataDoc.simulation_speed = NumCast(this.dataDoc.simulation_speed, 2);
         this.dataDoc.simulation_type = StrCast(this.dataDoc.simulation_type, 'Inclined Plane');
-        this.dataDoc.mass1_forcesStart = this.dataDoc.mass1_forcesStart ?? [];
         this.dataDoc.mass1_positionXstart = this.dataDoc.mass1_positionXstart ?? Math.round((this.xMax * 0.5 - 200) * 10) / 10;
         this.dataDoc.mass1_positionYstart = this.dataDoc.mass1_positionYstart ?? this.getDisplayYPos((400 - 0.08 * this.layoutDoc._height) * Math.tan((26 * Math.PI) / 180) + Math.sqrt(26));
-        this.dataDoc.mass1_forcesUpdated = this.dataDoc.mass1_forcesUpdated ?? [];
 
         // Used for review mode
         // this.dataDoc.currentForceSketch = this.dataDoc.currentForceSketch ?? null;
         // this.dataDoc.deleteMode = this.dataDoc.deleteMode ?? false;
         // this.dataDoc.forceSketches = this.dataDoc.forceSketches ?? [];
-        this.dataDoc.answers = new List<number>();
         this.dataDoc.questionPartOne = '';
         this.dataDoc.questionPartTwo = '';
-        this.dataDoc.selectedSolutions = [];
         this.dataDoc.selectedQuestion = this.dataDoc.selectedQuestion ?? questions.inclinePlane[0];
         // this.dataDoc.sketching = this.dataDoc.sketching ?? false;
 
@@ -182,33 +177,33 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.layoutDoc[HeightSym]();
                 this.dataDoc.mass1_positionY = this.getDisplayYPos(this.yMin + 0.08 * this.layoutDoc[HeightSym]());
                 this.dataDoc.mass1_positionX = (this.xMax + this.xMin) / 2 - 0.08 * this.layoutDoc[HeightSym]();
-                this.dataDoc.mass1_forcesUpdated = [
+                this.dataDoc.mass1_forcesUpdated = JSON.stringify([
                     {
                         description: 'Gravity',
                         magnitude: Math.abs(this.gravity) * NumCast(this.dataDoc.mass1),
                         directionInDegrees: 270,
                         component: false,
                     },
-                ];
-                this.dataDoc.mass1_forcesStart = [
+                ]);
+                this.dataDoc.mass1_forcesStart = JSON.stringify([
                     {
                         description: 'Gravity',
                         magnitude: Math.abs(this.gravity) * NumCast(this.dataDoc.mass1),
                         directionInDegrees: 270,
                         component: false,
                     },
-                ];
+                ]);
                 this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
             } else if (simulationType == 'Inclined Plane') {
                 this.changeWedgeBasedOnNewAngle(26);
-                this.dataDoc.mass1_forcesStart = [
+                this.dataDoc.mass1_forcesStart = JSON.stringify([
                     {
                         description: 'Gravity',
                         magnitude: Math.abs(this.gravity) * NumCast(this.dataDoc.mass1),
                         directionInDegrees: 270,
                         component: false,
                     },
-                ];
+                ]);
                 this.updateForcesWithFriction(NumCast(this.dataDoc.coefficientOfStaticFriction));
             } else if (simulationType == 'Pendulum') {
                 this.setupPendulum();
@@ -234,8 +229,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 this.setupSpring();
                 // TODO - spring review problems
             } else if (simulationType == 'Inclined Plane') {
-                this.dataDoc.mass1_forcesUpdated = [];
-                this.dataDoc.mass1_forcesStart = [];
+                this.dataDoc.mass1_forcesUpdated = '';
+                this.dataDoc.mass1_forcesStart = '';
             } else if (simulationType == 'Pendulum') {
                 this.setupPendulum();
                 // TODO - pendulum review problems
@@ -268,7 +263,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 this.dataDoc.mass1_positionYstart = this.yMax - 100;
                 this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.layoutDoc[HeightSym]();
                 this.dataDoc.tutorial = tutorials.freeWeight;
-                this.dataDoc.mass1_forcesStart = this.getForceFromJSON(tutorials.freeWeight.steps[0].forces);
+                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.freeWeight.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.freeWeight.steps[0].showMagnitude;
             } else if (this.dataDoc.simulation_type == 'Spring') {
                 this.dataDoc.simulation_showForces = true;
@@ -276,7 +271,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 this.dataDoc.mass1_positionYstart = this.yMin + 200 + 19.62;
                 this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.layoutDoc[HeightSym]();
                 this.dataDoc.tutorial = tutorials.spring;
-                this.dataDoc.mass1_forcesStart = this.getForceFromJSON(tutorials.spring.steps[0].forces);
+                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.spring.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.spring.steps[0].showMagnitude;
             } else if (this.dataDoc.simulation_type == 'Pendulum') {
                 this.dataDoc.simulation_showForces = true;
@@ -289,7 +284,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 this.dataDoc.mass1_positionXstart = xPos;
                 this.dataDoc.mass1_positionYstart = yPos;
                 this.dataDoc.tutorial = tutorials.pendulum;
-                this.dataDoc.mass1_forcesStart = this.getForceFromJSON(tutorials.pendulum.steps[0].forces);
+                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.pendulum.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.pendulum.steps[0].showMagnitude;
                 this.dataDoc.pendulum_angle = 30;
                 this.dataDoc.pendulum_length = 300;
@@ -300,25 +295,25 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 this.dataDoc.wedge_angle = 26;
                 this.changeWedgeBasedOnNewAngle(26);
                 this.dataDoc.tutorial = tutorials.inclinePlane;
-                this.dataDoc.mass1_forcesStart = this.getForceFromJSON(tutorials.inclinePlane.steps[0].forces);
+                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.inclinePlane.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.inclinePlane.steps[0].showMagnitude;
             } else if (this.dataDoc.simulation_type == 'Circular Motion') {
                 this.dataDoc.simulation_showForces = true;
                 this.setupCircular(40);
                 this.dataDoc.tutorial = tutorials.circular;
-                this.dataDoc.mass1_forcesStart = this.getForceFromJSON(tutorials.circular.steps[0].forces);
+                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.circular.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.circular.steps[0].showMagnitude;
             } else if (this.dataDoc.simulation_type == 'Pulley') {
                 this.dataDoc.simulation_showForces = true;
                 this.setupPulley();
                 this.dataDoc.tutorial = tutorials.pulley;
-                this.dataDoc.mass1_forcesStart = this.getForceFromJSON(tutorials.pulley.steps[0].forces);
+                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.pulley.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.pulley.steps[0].showMagnitude;
             } else if (this.dataDoc.simulation_type == 'Suspension') {
                 this.dataDoc.simulation_showForces = true;
                 this.setupSuspension();
                 this.dataDoc.tutorial = tutorials.suspension;
-                this.dataDoc.mass1_forcesStart = this.getForceFromJSON(tutorials.suspension.steps[0].forces);
+                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.suspension.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.suspension.steps[0].showMagnitude;
             }
             this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
@@ -385,13 +380,13 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             component: false,
         };
         if (coefficient != 0) {
-            this.dataDoc.mass1_forcesStart = [gravityForce, normalForce, frictionForce];
-            this.dataDoc.mass1_forcesUpdated = [gravityForce, normalForce, frictionForce];
-            this.dataDoc.componentForces = [frictionForceComponent, normalForceComponent, gravityParallel, gravityPerpendicular];
+            this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce, normalForce, frictionForce]);
+            this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce, normalForce, frictionForce]);
+            this.dataDoc.mass1_componentForces = JSON.stringify([frictionForceComponent, normalForceComponent, gravityParallel, gravityPerpendicular]);
         } else {
-            this.dataDoc.mass1_forcesStart = [gravityForce, normalForce];
-            this.dataDoc.mass1_forcesUpdated = [gravityForce, normalForce];
-            this.dataDoc.componentForces = [normalForceComponent, gravityParallel, gravityPerpendicular];
+            this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce, normalForce]);
+            this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce, normalForce]);
+            this.dataDoc.mass1_componentForces = JSON.stringify([normalForceComponent, gravityParallel, gravityPerpendicular]);
         }
     };
 
@@ -661,8 +656,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             directionInDegrees: 90,
             component: false,
         };
-        this.dataDoc.mass1_forcesUpdated = [tensionForce];
-        this.dataDoc.mass1_forcesStart = [tensionForce];
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([tensionForce]);
         this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
     };
 
@@ -703,8 +698,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             component: true,
         };
 
-        this.dataDoc.componentForces = [tensionComponent, gravityParallel, gravityPerpendicular];
-        this.dataDoc.mass1_forcesUpdated = [
+        this.dataDoc.mass1_componentForces = JSON.stringify([tensionComponent, gravityParallel, gravityPerpendicular]);
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([
             {
                 description: 'Gravity',
                 magnitude: NumCast(this.dataDoc.mass1) * Math.abs(this.gravity),
@@ -712,8 +707,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 component: false,
             },
             forceOfTension,
-        ];
-        this.dataDoc.mass1_forcesStart = [
+        ]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([
             {
                 description: 'Gravity',
                 magnitude: NumCast(this.dataDoc.mass1) * Math.abs(this.gravity),
@@ -721,7 +716,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 component: false,
             },
             forceOfTension,
-        ];
+        ]);
         this.dataDoc.pendulum_angleStart = 30;
         this.dataDoc.pendulum_angle = 30;
         this.dataDoc.pendulum_length = 300;
@@ -738,8 +733,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             directionInDegrees: 270,
             component: false,
         };
-        this.dataDoc.mass1_forcesUpdated = [gravityForce];
-        this.dataDoc.mass1_forcesStart = [gravityForce];
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce]);
         this.dataDoc.mass1_positionXstart = this.xMax / 2 - 0.08 * this.layoutDoc[HeightSym]();
         this.dataDoc.mass1_positionYstart = 200;
         this.dataDoc.spring_constant = 0.5;
@@ -775,8 +770,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             directionInDegrees: 270,
             component: false,
         };
-        this.dataDoc.mass1_forcesUpdated = [tensionForce1, tensionForce2, grav];
-        this.dataDoc.mass1_forcesStart = [tensionForce1, tensionForce2, grav];
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, grav]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([tensionForce1, tensionForce2, grav]);
         this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
     };
 
@@ -814,39 +809,21 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             component: false,
         };
 
-        this.dataDoc.mass1_forcesUpdated = [gravityForce1, tensionForce1];
-        this.dataDoc.mass1_forcesStart = [gravityForce1, tensionForce1];
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce1, tensionForce1]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce1, tensionForce1]);
         this.dataDoc.mass2_positionYstart = (this.yMax + this.yMin) / 2;
         this.dataDoc.mass2_positionXstart = (this.xMin + this.xMax) / 2 + 5;
         this.dataDoc.mass2_positionY = this.getDisplayYPos((this.yMax + this.yMin) / 2);
         this.dataDoc.mass2_positionX = (this.xMin + this.xMax) / 2 + 5;
-        this.dataDoc.mass2_forcesUpdated = [gravityForce2, tensionForce2];
-        this.dataDoc.mass2_forcesStart = [gravityForce2, tensionForce2];
+        this.dataDoc.mass2_forcesUpdated = JSON.stringify([gravityForce2, tensionForce2]);
+        this.dataDoc.mass2_forcesStart = JSON.stringify([gravityForce2, tensionForce2]);
 
         this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
     };
 
-    // Helper function used for tutorial and review mode
-    getForceFromJSON = (
-        json: {
-            description: string;
-            magnitude: number;
-            directionInDegrees: number;
-            component: boolean;
-        }[]
-    ): IForce[] => {
-        const forces: IForce[] = [];
-        for (let i = 0; i < json.length; i++) {
-            const force: IForce = {
-                description: json[i].description,
-                magnitude: json[i].magnitude,
-                directionInDegrees: json[i].directionInDegrees,
-                component: json[i].component,
-            };
-            forces.push(force);
-        }
-        return forces;
-    };
+    public static parseJSON(json: string) {
+        return !json ? [] : (JSON.parse(json) as IForce[]);
+    }
 
     // Handle force change in review mode
     updateReviewModeValues = () => {
@@ -868,10 +845,21 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             directionInDegrees: NumCast(this.dataDoc.review_StaticAngle),
             component: false,
         };
-        this.dataDoc.mass1_forcesStart = [forceOfGravityReview, normalForceReview, staticFrictionForceReview];
-        this.dataDoc.mass1_forcesUpdated = [forceOfGravityReview, normalForceReview, staticFrictionForceReview];
+        this.dataDoc.mass1_forcesStart = JSON.stringify([forceOfGravityReview, normalForceReview, staticFrictionForceReview]);
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([forceOfGravityReview, normalForceReview, staticFrictionForceReview]);
     };
 
+    componentForces1 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass1_componentForces));
+    setComponentForces1 = (forces: IForce[]) => (this.dataDoc.mass1_componentForces = JSON.stringify(forces));
+    componentForces2 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass2_componentForces));
+    setComponentForces2 = (forces: IForce[]) => (this.dataDoc.mass2_componentForces = JSON.stringify(forces));
+    startForces1 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass1_forcesStart));
+    startForces2 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass2_forcesStart));
+    forcesUpdated1 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass1_forcesUpdated));
+    setForcesUpdated1 = (forces: IForce[]) => (this.dataDoc.mass1_forcesUpdated = JSON.stringify(forces));
+    forcesUpdated2 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass2_forcesUpdated));
+    setForcesUpdated2 = (forces: IForce[]) => (this.dataDoc.mass2_forcesUpdated = JSON.stringify(forces));
+
     render() {
         return (
             <div className="physicsSimApp">
@@ -900,7 +888,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                     adjustPendulumLength={NumCast(this.dataDoc.pendulum_length_adjust)}
                                     gravity={this.gravity}
                                     circularMotionRadius={this.circularMotionRadius}
-                                    componentForces={this.dataDoc.componentForces}
+                                    componentForces={this.componentForces1}
+                                    setComponentForces={this.setComponentForces1}
                                     showComponentForces={BoolCast(this.dataDoc.simulation_showComponentForces)}
                                     color={'red'}
                                     coefficientOfKineticFriction={NumCast(this.dataDoc.coefficientOfKineticFriction)}
@@ -925,15 +914,16 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                     springConstant={NumCast(this.dataDoc.spring_constant)}
                                     springStartLength={NumCast(this.dataDoc.spring_lengthStart)}
                                     springRestLength={NumCast(this.dataDoc.spring_lengthRest)}
-                                    startForces={this.dataDoc.mass1_forcesStart}
+                                    startForces={this.startForces1}
                                     startPosX={NumCast(this.dataDoc.mass1_positionXstart)}
                                     startPosY={NumCast(this.dataDoc.mass1_positionYstart)}
                                     startVelX={NumCast(this.dataDoc.mass1_velocityXstart)}
                                     startVelY={NumCast(this.dataDoc.mass1_velocityYstart)}
                                     timestepSize={0.05}
-                                    updateXmass={NumCast(this.dataDoc.mass1_xChange)}
-                                    updateYmass={NumCast(this.dataDoc.mass1_yChange)}
-                                    forcesUpdated={this.dataDoc.mass1_forcesUpdated}
+                                    updateXDisplay={NumCast(this.dataDoc.mass1_xChange)}
+                                    updateYDisplay={NumCast(this.dataDoc.mass1_yChange)}
+                                    forcesUpdated={this.forcesUpdated1}
+                                    setForcesUpdated={this.setForcesUpdated1}
                                     wedgeHeight={NumCast(this.dataDoc.wedge_height)}
                                     wedgeWidth={NumCast(this.dataDoc.wedge_width)}
                                     xMax={this.xMax}
@@ -950,7 +940,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                         adjustPendulumLength={NumCast(this.dataDoc.pendulum_length_adjust)}
                                         circularMotionRadius={this.circularMotionRadius}
                                         gravity={this.gravity}
-                                        componentForces={this.dataDoc.componentForces}
+                                        componentForces={this.componentForces2}
+                                        setComponentForces={this.setComponentForces2}
                                         showComponentForces={BoolCast(this.dataDoc.simulation_showComponentForces)}
                                         color={'blue'}
                                         coefficientOfKineticFriction={NumCast(this.dataDoc.coefficientOfKineticFriction)}
@@ -975,15 +966,16 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                         springConstant={NumCast(this.dataDoc.spring_constant)}
                                         springStartLength={NumCast(this.dataDoc.spring_lengthStart)}
                                         springRestLength={NumCast(this.dataDoc.spring_lengthRest)}
-                                        startForces={this.dataDoc.mass2_forcesStart}
+                                        startForces={this.startForces2}
                                         startPosX={NumCast(this.dataDoc.mass2_positionXstart)}
                                         startPosY={NumCast(this.dataDoc.mass2_positionYstart)}
-                                        startVelX={NumCast(this.dataDoc.mass1_velocityXstart)}
-                                        startVelY={NumCast(this.dataDoc.mass1_velocityYstart)}
+                                        startVelX={NumCast(this.dataDoc.mass2_velocityXstart)}
+                                        startVelY={NumCast(this.dataDoc.mass2_velocityYstart)}
                                         timestepSize={0.05}
-                                        updateXmass={NumCast(this.dataDoc.mass2_xChange)}
-                                        updateYmass={NumCast(this.dataDoc.mass2_yChange)}
-                                        forcesUpdated={this.dataDoc.mass2_forcesUpdated}
+                                        updateXDisplay={NumCast(this.dataDoc.mass2_xChange)}
+                                        updateYDisplay={NumCast(this.dataDoc.mass2_yChange)}
+                                        forcesUpdated={this.forcesUpdated2}
+                                        setForcesUpdated={this.setForcesUpdated2}
                                         wedgeHeight={NumCast(this.dataDoc.wedge_height)}
                                         wedgeWidth={NumCast(this.dataDoc.wedge_width)}
                                         xMax={this.xMax}
@@ -1270,8 +1262,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                             step = Math.max(step, 0);
                                             step = Math.min(step, this.dataDoc.tutorial.steps.length - 1);
                                             this.dataDoc.tutorial_stepNumber = step;
-                                            this.dataDoc.mass1_forcesStart = this.getForceFromJSON(this.dataDoc.tutorial.steps[step].forces);
-                                            this.dataDoc.mass1_forcesUpdated = this.getForceFromJSON(this.dataDoc.tutorial.steps[step].forces);
+                                            this.dataDoc.mass1_forcesStart = this.dataDoc.tutorial.steps[step].forces;
+                                            this.dataDoc.mass1_forcesUpdated = this.dataDoc.tutorial.steps[step].forces;
                                             this.dataDoc.simulation_showForceMagnitudes = this.dataDoc.tutorial.steps[step].show_Magnitude;
                                         }}
                                         disabled={this.dataDoc.tutorial_stepNumber == 0}>
@@ -1289,11 +1281,11 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                             step = Math.max(step, 0);
                                             step = Math.min(step, this.dataDoc.tutorial.steps.length - 1);
                                             this.dataDoc.tutorial_stepNumber = step;
-                                            this.dataDoc.mass1_forcesStart = this.getForceFromJSON(this.dataDoc.tutorial.steps[step].forces);
-                                            this.dataDoc.mass1_forcesUpdated = this.getForceFromJSON(this.dataDoc.tutorial.steps[step].forces);
+                                            this.dataDoc.mass1_forcesStart = this.dataDoc.tutorial.steps[step].forces;
+                                            this.dataDoc.mass1_forcesUpdated = this.dataDoc.tutorial.steps[step].forces;
                                             this.dataDoc.simulation_showForceMagnitudes = this.dataDoc.tutorial.steps[step].show_Magnitude;
                                         }}
-                                        disabled={this.dataDoc.tutorial_stepNumber == this.dataDoc.tutorial.steps.length - 1}>
+                                        disabled={this.dataDoc.tutorial_stepNumber === this.dataDoc.tutorial.steps.length - 1}>
                                         <ArrowRightIcon />
                                     </IconButton>
                                 </div>
@@ -1709,7 +1701,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                                     this.dataDoc.mass1_positionXstart = xPos;
                                                     this.dataDoc.mass1_positionYstart = yPos;
 
-                                                    this.dataDoc.mass1_forcesStart = [
+                                                    this.dataDoc.mass1_forcesStart = JSON.stringify([
                                                         {
                                                             description: 'Gravity',
                                                             magnitude: Math.abs(this.gravity) * NumCast(this.dataDoc.mass1),
@@ -1717,8 +1709,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                                             component: false,
                                                         },
                                                         forceOfTension,
-                                                    ];
-                                                    this.dataDoc.mass1_forcesUpdated = [
+                                                    ]);
+                                                    this.dataDoc.mass1_forcesUpdated = JSON.stringify([
                                                         {
                                                             description: 'Gravity',
                                                             magnitude: Math.abs(this.gravity) * NumCast(this.dataDoc.mass1),
@@ -1726,8 +1718,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                                             component: false,
                                                         },
                                                         forceOfTension,
-                                                    ];
-                                                    this.dataDoc.componentForces = [tensionComponent, gravityParallel, gravityPerpendicular];
+                                                    ]);
+                                                    this.dataDoc.mass1_componentForces = JSON.stringify([tensionComponent, gravityParallel, gravityPerpendicular]);
                                                     this.dataDoc.pendulum_angle_adjust = value;
                                                     this.dataDoc.pendulum_length_adjust = this.dataDoc.pendulum_length;
                                                     this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;