diff options
| -rw-r--r-- | src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx | 2475 |
1 files changed, 1241 insertions, 1234 deletions
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,1005 +1139,1087 @@ 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); - }} - > - <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) + <div className="mechanicsSimulationEquationContainer"> + <div className="mechanicsSimulationControls"> + <Stack direction="row" spacing={1}> + {this.dataDoc.simulationPaused && this.dataDoc.mode != "Tutorial" && ( + <IconButton + onClick={() => { + this.dataDoc.simulationPaused = (false); }} - 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" }} - > - <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", + <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" }} > - <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> - <Button + <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 = (false); + this.dataDoc.hintDialogueOpen = (true); + }} + sx={{ + position: "fixed", + left: this.xMax - 50 + "px", + top: this.yMin + 14 + "px", }} > - 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={false} - correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("force of gravity")]} - labelWidth={"7em"} - />) - } - {this.dataDoc.selectedQuestion.answerParts.includes("angle of gravity") && ( - <InputField - label={<p>Gravity angle</p>} - lowerBound={0} - dataDoc={this.dataDoc} - prop={'reviewGravityAngle'} - step={1} - unit={"°"} - upperBound={360} - value={this.dataDoc.reviewGravityAngle} - radianEquivalent={true} - showIcon={false} - correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("angle of gravity")]} - labelWidth={"7em"} - /> - )} - {this.dataDoc.selectedQuestion.answerParts.includes("normal force") && ( + <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> + <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>Normal force magnitude</p>} + label={<p>Static friction magnitude</p>} lowerBound={0} dataDoc={this.dataDoc} - prop={'reviewNormalMagnitude'} + prop={'reviewStaticMagnitude'} step={0.1} unit={"N"} upperBound={50} - value={this.dataDoc.reviewNormalMagnitude} - showIcon={false} - correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("normal force")]} - labelWidth={"7em"} - /> - )} - {this.dataDoc.selectedQuestion.answerParts.includes("angle of normal force") && ( - <InputField - label={<p>Normal force angle</p>} - lowerBound={0} - dataDoc={this.dataDoc} - prop={'reviewNormalAngle'} - step={1} - unit={"°"} - upperBound={360} - value={this.dataDoc.reviewNormalAngle} - radianEquivalent={true} - showIcon={false} - correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("angle of normal force")]} - labelWidth={"7em"} - /> - )} - {this.dataDoc.selectedQuestion.answerParts.includes("force of static friction") && ( - <InputField - label={<p>Static friction magnitude</p>} - lowerBound={0} - dataDoc={this.dataDoc} - prop={'reviewStaticMagnitude'} - step={0.1} - unit={"N"} - upperBound={50} - value={this.dataDoc.reviewStaticMagnitude} - showIcon={false} - correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("force of static friction")]} - labelWidth={"7em"} - /> - )} - {this.dataDoc.selectedQuestion.answerParts.includes("angle of static friction") && ( - <InputField - label={<p>Static friction angle</p>} - lowerBound={0} - dataDoc={this.dataDoc} - prop={'reviewStaticAngle'} - step={1} - unit={"°"} - upperBound={360} - value={this.dataDoc.reviewStaticAngle} - radianEquivalent={true} - showIcon={false} - correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("angle of static friction")]} + 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> + μ<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>θ</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%", + }} + > + <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.selectedQuestion.answerParts.includes("coefficient of static friction") && ( - <InputField - label={ - <Box> - μ<sub>s</sub> - </Box> - } - lowerBound={0} - dataDoc={this.dataDoc} - prop={'coefficientOfStaticFriction'} - step={0.1} - unit={""} - upperBound={1} - value={this.dataDoc.coefficientOfStaticFriction} - effect={this.updateReviewForcesBasedOnCoefficient} - showIcon={false} - correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("coefficient of static friction")]} - /> + {this.dataDoc.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.selectedQuestion.answerParts.includes("wedge angle") && ( - <InputField - label={<Box>θ</Box>} - lowerBound={0} - dataDoc={this.dataDoc} - prop={'wedgeAngle'} - step={1} - unit={"°"} - upperBound={49} - value={this.dataDoc.wedgeAngle ?? 26} - effect={(val: number) => { - this.changeWedgeBasedOnNewAngle(val); - this.updateReviewForcesBasedOnAngle(val); - }} - radianEquivalent={true} - showIcon={false} - correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("wedge angle")]} - /> + {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 == "Tutorial" && ( - <div className="wordProblemBox"> - <div className="question"> - <h2>Problem</h2> - <p>{this.dataDoc.selectedTutorial.question}</p> </div> + )} + {this.dataDoc.mode == "Review" && this.dataDoc.simulationType == "Inclined Plane" && ( <div style={{ display: "flex", - justifyContent: "spaceBetween", - width: "100%", + justifyContent: "space-between", + marginTop: "10px", }} > - <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 - ); + <p + style={{ + color: "blue", + textDecoration: "underline", + cursor: "pointer", }} - disabled={this.dataDoc.stepNumber == 0} + onClick={() => this.dataDoc.mode = ("Tutorial")} > - <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> + {" "} + Go to walkthrough{" "} + </p> + <div style={{ display: "flex", flexDirection: "column" }}> + <Button + onClick={() => { + this.dataDoc.simulationReset= (!this.dataDoc.simulationReset); + this.checkAnswers(); + this.dataDoc.showIcon = true; + }} + variant="outlined" + > + <p>Submit</p> + </Button> + <Button + onClick={() => { + this.generateNewQuestion(); + this.dataDoc.showIcon = false; + }} + variant="outlined" + > + <p>New question</p> + </Button> </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" && ( + )} + {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.elasticCollisions} - onChange={() => - this.dataDoc.elasticCollisions= (!this.dataDoc.elasticCollisions) - } + checked={this.dataDoc.showForces} + onChange={() => this.dataDoc.showForces = (!this.dataDoc.showForces)} /> } - label="Make collisions elastic" + label="Show force vectors" labelPlacement="start" /> - )} - <FormControlLabel - control={ - <Checkbox - checked={this.dataDoc.showForces} - onChange={() => this.dataDoc.showForces = (!this.dataDoc.showForces)} + {(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" /> - } - 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) - } + checked={this.dataDoc.showAcceleration} + onChange={() => this.dataDoc.showAcceleration = (!this.dataDoc.showAcceleration)} /> } - label="Show component force vectors" + label="Show acceleration vector" labelPlacement="start" /> - )} - <FormControlLabel - control={ - <Checkbox - checked={this.dataDoc.showAcceleration} - onChange={() => this.dataDoc.showAcceleration = (!this.dataDoc.showAcceleration)} + <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"} /> - } - label="Show acceleration vector" - labelPlacement="start" - /> - <FormControlLabel - control={ - <Checkbox - checked={this.dataDoc.showVelocity} - onChange={() => this.dataDoc.showVelocity = (!this.dataDoc.showVelocity)} + )} + {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"} /> - } - 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" && ( + )} + {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={<Box>Gravity</Box>} - lowerBound={-30} + label={ + <Typography color="inherit">Spring stiffness</Typography> + } + lowerBound={0.1} dataDoc={this.dataDoc} - prop={'gravity'} - step={0.01} - unit={"m/s2"} - upperBound={0} - value={this.dataDoc.gravity ?? -9.81} + prop={'springConstant'} + step={1} + unit={"N/m"} + upperBound={500} + value={this.dataDoc.springConstant ?? 0.5} effect={(val: number) => { - this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode) + this.dataDoc.simulationReset(!this.dataDoc.simulationReset); }} - labelWidth={"5em"} + radianEquivalent={false} + mode={"Freeform"} + labelWidth={"7em"} /> - )} - {this.dataDoc.simulationPaused && this.dataDoc.simulationType != "Pulley" && ( <InputField - label={<Box>Mass</Box>} - lowerBound={1} + label={<Typography color="inherit">Rest length</Typography>} + lowerBound={10} dataDoc={this.dataDoc} - prop={'mass'} - step={0.1} - unit={"kg"} - upperBound={5} - value={this.dataDoc.mass ?? 1} + prop={'springRestLength'} + step={100} + unit={""} + upperBound={500} + value={this.dataDoc.springRestLength ?? 200} effect={(val: number) => { - this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode) + this.dataDoc.simulationReset = (!this.dataDoc.simulationReset); }} - labelWidth={"5em"} + radianEquivalent={false} + mode={"Freeform"} + labelWidth={"7em"} /> - )} - {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "Pulley" && ( <InputField - label={<Box>Red mass</Box>} - lowerBound={1} + label={ + <Typography color="inherit"> + Starting displacement + </Typography> + } + lowerBound={-(this.dataDoc.springRestLength - 10)} dataDoc={this.dataDoc} - prop={'mass'} - step={0.1} - unit={"kg"} - upperBound={5} - value={this.dataDoc.mass ?? 1} + prop={""} + step={10} + unit={""} + upperBound={this.dataDoc.springRestLength} + value={this.dataDoc.springStartLength - this.dataDoc.springRestLength ?? 0} effect={(val: number) => { - this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode) + this.dataDoc.startPosY = (this.dataDoc.springRestLength + val); + this.dataDoc.springStartLength = (this.dataDoc.springRestLength + val); + this.dataDoc.simulationReset = (!this.dataDoc.simulationReset); }} - labelWidth={"5em"} + radianEquivalent={false} + mode={"Freeform"} + labelWidth={"7em"} /> - )} - {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "Pulley" && ( + </div> + )} + {this.dataDoc.simulationType == "Inclined Plane" && this.dataDoc.simulationPaused && ( + <div> <InputField - label={<Box>Blue mass</Box>} - lowerBound={1} + label={<Box>θ</Box>} + lowerBound={0} dataDoc={this.dataDoc} - prop={'mass2'} - step={0.1} - unit={"kg"} - upperBound={5} - value={this.dataDoc.mass2 ?? 1} + prop={'wedgeAngle'} + step={1} + unit={"°"} + upperBound={49} + value={this.dataDoc.wedgeAngle ?? 26} effect={(val: number) => { - this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode) + this.changeWedgeBasedOnNewAngle(val); + this.dataDoc.simulationReset = (!this.dataDoc.simulationReset); }} - labelWidth={"5em"} + radianEquivalent={true} + mode={"Freeform"} + labelWidth={"2em"} /> - )} - {this.dataDoc.simulationPaused && this.dataDoc.simulationType == "Circular Motion" && ( <InputField - label={<Box>Rod length</Box>} - lowerBound={100} + label={ + <Box> + μ<sub>s</sub> + </Box> + } + lowerBound={0} dataDoc={this.dataDoc} - prop={'circularMotionRadius'} - step={5} - unit={"m"} - upperBound={250} - value={this.dataDoc.circularMotionRadius ?? 100} + prop={'coefficientOfStaticFriction'} + step={0.1} + unit={""} + upperBound={1} + value={this.dataDoc.coefficientOfStaticFriction ?? 0} effect={(val: number) => { - this.setupSimulation(this.dataDoc.simulationType, this.dataDoc.mode) + this.updateForcesWithFriction(val); + if (val < Number(this.dataDoc.coefficientOfKineticFriction)) { + this.dataDoc.soefficientOfKineticFriction = (val); + } + this.dataDoc.simulationReset = (!this.dataDoc.simulationReset); }} - labelWidth={"5em"} + mode={"Freeform"} + labelWidth={"2em"} /> - )} - </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>θ</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> - μ<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); + <InputField + label={ + <Box> + μ<sub>k</sub> + </Box> } - this.dataDoc.simulationReset = (!this.dataDoc.simulationReset); - }} - mode={"Freeform"} - labelWidth={"2em"} - /> - <InputField - label={ - <Box> - μ<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> - θ: {Math.round(Number(this.dataDoc.wedgeAngle) * 100) / 100}° ≈{" "} - {Math.round(((Number(this.dataDoc.wedgeAngle) * Math.PI) / 180) * 100) / - 100}{" "} - rad - <br /> - μ <sub>s</sub>: {this.dataDoc.coefficientOfStaticFriction} - <br /> - μ <sub>k</sub>: {this.dataDoc.coefficientOfKineticFriction} - </Typography> - )} - {this.dataDoc.simulationType == "Pendulum" && !this.dataDoc.simulationPaused && ( - <Typography> - θ: {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); + 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> + θ: {Math.round(Number(this.dataDoc.wedgeAngle) * 100) / 100}° ≈{" "} + {Math.round(((Number(this.dataDoc.wedgeAngle) * Math.PI) / 180) * 100) / + 100}{" "} + rad + <br /> + μ <sub>s</sub>: {this.dataDoc.coefficientOfStaticFriction} + <br /> + μ <sub>k</sub>: {this.dataDoc.coefficientOfKineticFriction} + </Typography> + )} + {this.dataDoc.simulationType == "Pendulum" && !this.dataDoc.simulationPaused && ( + <Typography> + θ: {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 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 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); + 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 + 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", - }} - > - <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>⁄ - <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π√<sup>m</sup>⁄ - <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>⁄ - <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>⁄ + <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>⁄ - <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π√<sup>m</sup>⁄ + <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>⁄ + <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>⁄ + <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π√<sup>l</sup>⁄ - <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π√<sup>l</sup>⁄ + <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 |