aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorbrynnchernosky <56202540+brynnchernosky@users.noreply.github.com>2023-05-06 15:39:38 -0400
committerbrynnchernosky <56202540+brynnchernosky@users.noreply.github.com>2023-05-06 15:39:38 -0400
commitc48c72536a22a144bf383dc13d287e4a8233878a (patch)
treebabef23398c15bb52f6825d4191ddaa48e7584e3 /src
parent697c2bd76fc6c6c7cfe78b4a5d4d84f23b884d8c (diff)
review questions appear
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx2475
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>
+ &mu;<sub>s</sub>
+ </Box>
+ }
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop={'coefficientOfStaticFriction'}
+ step={0.1}
+ unit={""}
+ upperBound={1}
+ value={this.dataDoc.coefficientOfStaticFriction}
+ effect={this.updateReviewForcesBasedOnCoefficient}
+ showIcon={this.dataDoc.showIcon}
+ correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("coefficient of static friction")]}
+ />
+ )}
+ {this.dataDoc.selectedQuestion.answerParts.includes("wedge angle") && (
+ <InputField
+ label={<Box>&theta;</Box>}
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop={'wedgeAngle'}
+ step={1}
+ unit={"°"}
+ upperBound={49}
+ value={this.dataDoc.wedgeAngle ?? 26}
+ effect={(val: number) => {
+ this.changeWedgeBasedOnNewAngle(val);
+ this.updateReviewForcesBasedOnAngle(val);
+ }}
+ radianEquivalent={true}
+ showIcon={this.dataDoc.showIcon}
+ correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("wedge angle")]}
+ />
+ )}
+ </div>
+ </div>
+ </div>
+ )}
+ {this.dataDoc.mode == "Tutorial" && (
+ <div className="wordProblemBox">
+ <div className="question">
+ <h2>Problem</h2>
+ <p>{this.dataDoc.selectedTutorial.question}</p>
+ </div>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "spaceBetween",
+ width: "100%",
+ }}
+ >
+ <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>
- &mu;<sub>s</sub>
- </Box>
- }
- lowerBound={0}
- dataDoc={this.dataDoc}
- prop={'coefficientOfStaticFriction'}
- step={0.1}
- unit={""}
- upperBound={1}
- value={this.dataDoc.coefficientOfStaticFriction}
- effect={this.updateReviewForcesBasedOnCoefficient}
- showIcon={false}
- correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("coefficient of static friction")]}
- />
+ {this.dataDoc.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>&theta;</Box>}
- lowerBound={0}
- dataDoc={this.dataDoc}
- prop={'wedgeAngle'}
- step={1}
- unit={"°"}
- upperBound={49}
- value={this.dataDoc.wedgeAngle ?? 26}
- effect={(val: number) => {
- this.changeWedgeBasedOnNewAngle(val);
- this.updateReviewForcesBasedOnAngle(val);
- }}
- radianEquivalent={true}
- showIcon={false}
- correctValue={this.dataDoc.answers[this.dataDoc.selectedQuestion.answerParts.indexOf("wedge angle")]}
- />
+ {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>&theta;</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>
+ &mu;<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>&theta;</Box>}
- lowerBound={0}
- dataDoc={this.dataDoc}
- prop={'wedgeAngle'}
- step={1}
- unit={"°"}
- upperBound={49}
- value={this.dataDoc.wedgeAngle ?? 26}
- effect={(val: number) => {
- this.changeWedgeBasedOnNewAngle(val);
- this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
- }}
- radianEquivalent={true}
- mode={"Freeform"}
- labelWidth={"2em"}
- />
- <InputField
- label={
- <Box>
- &mu;<sub>s</sub>
- </Box>
- }
- lowerBound={0}
- dataDoc={this.dataDoc}
- prop={'coefficientOfStaticFriction'}
- step={0.1}
- unit={""}
- upperBound={1}
- value={this.dataDoc.coefficientOfStaticFriction ?? 0}
- effect={(val: number) => {
- this.updateForcesWithFriction(val);
- if (val < Number(this.dataDoc.coefficientOfKineticFriction)) {
- this.dataDoc.soefficientOfKineticFriction = (val);
+ <InputField
+ label={
+ <Box>
+ &mu;<sub>k</sub>
+ </Box>
}
- this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
- }}
- mode={"Freeform"}
- labelWidth={"2em"}
- />
- <InputField
- label={
- <Box>
- &mu;<sub>k</sub>
- </Box>
- }
- lowerBound={0}
- dataDoc={this.dataDoc}
- prop={'coefficientOfKineticFriction'}
- step={0.1}
- unit={""}
- upperBound={Number(this.dataDoc.coefficientOfStaticFriction)}
- value={this.dataDoc.coefficientOfKineticFriction ?? 0}
- effect={(val: number) => {
- this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
- }}
- mode={"Freeform"}
- labelWidth={"2em"}
- />
- </div>
- )}
- {this.dataDoc.simulationType == "Inclined Plane" && !this.dataDoc.simulationPaused && (
- <Typography>
- &theta;: {Math.round(Number(this.dataDoc.wedgeAngle) * 100) / 100}° ≈{" "}
- {Math.round(((Number(this.dataDoc.wedgeAngle) * Math.PI) / 180) * 100) /
- 100}{" "}
- rad
- <br />
- &mu; <sub>s</sub>: {this.dataDoc.coefficientOfStaticFriction}
- <br />
- &mu; <sub>k</sub>: {this.dataDoc.coefficientOfKineticFriction}
- </Typography>
- )}
- {this.dataDoc.simulationType == "Pendulum" && !this.dataDoc.simulationPaused && (
- <Typography>
- &theta;: {Math.round(this.dataDoc.pendulumAngle * 100) / 100}° ≈{" "}
- {Math.round(((this.dataDoc.pendulumAngle * Math.PI) / 180) * 100) / 100}{" "}
- rad
- </Typography>
- )}
- {this.dataDoc.simulationType == "Pendulum" && this.dataDoc.simulationPaused && (
- <div>
- <InputField
- label={<Box>Angle</Box>}
- lowerBound={0}
- dataDoc={this.dataDoc}
- prop={'pendulumAngle'}
- step={1}
- unit={"°"}
- upperBound={59}
- value={this.dataDoc.pendulumAngle ?? 30}
- effect={(value) => {
- this.dataDoc.startPendulumAngle = (value);
- if (this.dataDoc.simulationType == "Pendulum") {
- const mag =
- this.dataDoc.mass *
- Math.abs(this.dataDoc.gravity) *
- Math.cos((value * Math.PI) / 180);
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop={'coefficientOfKineticFriction'}
+ step={0.1}
+ unit={""}
+ upperBound={Number(this.dataDoc.coefficientOfStaticFriction)}
+ value={this.dataDoc.coefficientOfKineticFriction ?? 0}
+ effect={(val: number) => {
+ this.dataDoc.simulationReset = (!this.dataDoc.simulationReset);
+ }}
+ mode={"Freeform"}
+ labelWidth={"2em"}
+ />
+ </div>
+ )}
+ {this.dataDoc.simulationType == "Inclined Plane" && !this.dataDoc.simulationPaused && (
+ <Typography>
+ &theta;: {Math.round(Number(this.dataDoc.wedgeAngle) * 100) / 100}° ≈{" "}
+ {Math.round(((Number(this.dataDoc.wedgeAngle) * Math.PI) / 180) * 100) /
+ 100}{" "}
+ rad
+ <br />
+ &mu; <sub>s</sub>: {this.dataDoc.coefficientOfStaticFriction}
+ <br />
+ &mu; <sub>k</sub>: {this.dataDoc.coefficientOfKineticFriction}
+ </Typography>
+ )}
+ {this.dataDoc.simulationType == "Pendulum" && !this.dataDoc.simulationPaused && (
+ <Typography>
+ &theta;: {Math.round(this.dataDoc.pendulumAngle * 100) / 100}° ≈{" "}
+ {Math.round(((this.dataDoc.pendulumAngle * Math.PI) / 180) * 100) / 100}{" "}
+ rad
+ </Typography>
+ )}
+ {this.dataDoc.simulationType == "Pendulum" && this.dataDoc.simulationPaused && (
+ <div>
+ <InputField
+ label={<Box>Angle</Box>}
+ lowerBound={0}
+ dataDoc={this.dataDoc}
+ prop={'pendulumAngle'}
+ step={1}
+ unit={"°"}
+ upperBound={59}
+ value={this.dataDoc.pendulumAngle ?? 30}
+ effect={(value) => {
+ this.dataDoc.startPendulumAngle = (value);
+ if (this.dataDoc.simulationType == "Pendulum") {
+ const mag =
+ this.dataDoc.mass *
+ Math.abs(this.dataDoc.gravity) *
+ Math.cos((value * Math.PI) / 180);
- const forceOfTension: IForce = {
- description: "Tension",
- magnitude: mag,
- directionInDegrees: 90 - value,
- component: false,
- };
+ const 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>&frasl;
- <sub>2</sub>at
- <sup>2</sup>
- </li>
- <li>
- Velocity: v<sub>1</sub>=v<sub>0</sub>+at
- </li>
- <li>Acceleration: a = F/m</li>
- </ul>
+ <td style={{ cursor: "default" }}>
+ {this.dataDoc.velocityYDisplay2} m/s
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <Box>Acceleration</Box>
+ </td>
+ <td style={{ cursor: "default" }}>
+ {this.dataDoc.accelerationXDisplay2} m/s<sup>2</sup>
+ </td>
+ <td style={{ cursor: "default" }}>
+ {this.dataDoc.accelerationYDisplay2} m/s<sup>2</sup>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <Box>Momentum</Box>
+ </td>
+ <td>
+ {Math.round(this.dataDoc.velocityXDisplay2 * this.dataDoc.mass * 10) / 10} kg*m/s
+ </td>
+ <td>
+ {Math.round(this.dataDoc.velocityYDisplay2 * this.dataDoc.mass * 10) / 10} kg*m/s
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ )}
</div>
- )}
- {this.dataDoc.simulationType == "Spring" && (
- <div>
- <p>Harmonic Motion Equations: Spring</p>
- <ul>
- <li>
- Spring force: F<sub>s</sub>=kd
- </li>
- <li>
- Spring period: T<sub>s</sub>=2&pi;&#8730;<sup>m</sup>&frasl;
- <sub>k</sub>
- </li>
- <li>Equilibrium displacement for vertical spring: d = mg/k</li>
- <li>
- Elastic potential energy: U<sub>s</sub>=<sup>1</sup>&frasl;
- <sub>2</sub>kd<sup>2</sup>
- </li>
+ {this.dataDoc.simulationType != "Pendulum" && this.dataDoc.simulationType != "Spring" && (
+ <div>
+ <p>Kinematic Equations</p>
<ul>
<li>
- Maximum when system is at maximum displacement, 0 when
- system is at 0 displacement
+ Position: x<sub>1</sub>=x<sub>0</sub>+v<sub>0</sub>t+
+ <sup>1</sup>&frasl;
+ <sub>2</sub>at
+ <sup>2</sup>
+ </li>
+ <li>
+ Velocity: v<sub>1</sub>=v<sub>0</sub>+at
</li>
+ <li>Acceleration: a = F/m</li>
</ul>
- <li>
- Translational kinetic energy: K=<sup>1</sup>&frasl;
- <sub>2</sub>mv<sup>2</sup>
- </li>
+ </div>
+ )}
+ {this.dataDoc.simulationType == "Spring" && (
+ <div>
+ <p>Harmonic Motion Equations: Spring</p>
<ul>
<li>
- Maximum when system is at maximum/minimum velocity (at 0
- displacement), 0 when velocity is 0 (at maximum
- displacement)
+ Spring force: F<sub>s</sub>=kd
</li>
+ <li>
+ Spring period: T<sub>s</sub>=2&pi;&#8730;<sup>m</sup>&frasl;
+ <sub>k</sub>
+ </li>
+ <li>Equilibrium displacement for vertical spring: d = mg/k</li>
+ <li>
+ Elastic potential energy: U<sub>s</sub>=<sup>1</sup>&frasl;
+ <sub>2</sub>kd<sup>2</sup>
+ </li>
+ <ul>
+ <li>
+ Maximum when system is at maximum displacement, 0 when
+ system is at 0 displacement
+ </li>
+ </ul>
+ <li>
+ Translational kinetic energy: K=<sup>1</sup>&frasl;
+ <sub>2</sub>mv<sup>2</sup>
+ </li>
+ <ul>
+ <li>
+ Maximum when system is at maximum/minimum velocity (at 0
+ displacement), 0 when velocity is 0 (at maximum
+ displacement)
+ </li>
+ </ul>
</ul>
- </ul>
- </div>
- )}
- {this.dataDoc.simulationType == "Pendulum" && (
- <div>
- <p>Harmonic Motion Equations: Pendulum</p>
- <ul>
- <li>
- Pendulum period: T<sub>p</sub>=2&pi;&#8730;<sup>l</sup>&frasl;
- <sub>g</sub>
- </li>
- </ul>
- </div>
- )}
+ </div>
+ )}
+ {this.dataDoc.simulationType == "Pendulum" && (
+ <div>
+ <p>Harmonic Motion Equations: Pendulum</p>
+ <ul>
+ <li>
+ Pendulum period: T<sub>p</sub>=2&pi;&#8730;<sup>l</sup>&frasl;
+ <sub>g</sub>
+ </li>
+ </ul>
+ </div>
+ )}
+ </div>
</div>
- </div>
- <div
- style={{
- position: "fixed",
- top: this.yMax - 120 + 20 + "px",
- left: this.xMin + 90 - 80 + "px",
- zIndex: -10000,
- }}
- >
- <svg width={100 + "px"} height={100 + "px"}>
- <defs>
- <marker
- id="miniArrow"
- markerWidth="20"
- markerHeight="20"
- refX="0"
- refY="3"
- orient="auto"
- markerUnits="strokeWidth"
- >
- <path d="M0,0 L0,6 L9,3 z" fill={"#000000"} />
- </marker>
- </defs>
- <line
- x1={20}
- y1={70}
- x2={70}
- y2={70}
- stroke={"#000000"}
- strokeWidth="2"
- markerEnd="url(#miniArrow)"
- />
- <line
- x1={20}
- y1={70}
- x2={20}
- y2={20}
- stroke={"#000000"}
- strokeWidth="2"
- markerEnd="url(#miniArrow)"
- />
- </svg>
- <p
+ <div
style={{
position: "fixed",
- top: this.yMax - 120 + 40 + "px",
+ top: this.yMax - 120 + 20 + "px",
left: this.xMin + 90 - 80 + "px",
+ zIndex: -10000,
}}
>
- {this.dataDoc.simulationType == "Circular Motion" ? "Z" : "Y"}
- </p>
- <p
- style={{
- position: "fixed",
- top: this.yMax - 120 + 80 + "px",
- left: this.xMin + 90 - 40 + "px",
- }}
- >
- X
- </p>
+ <svg width={100 + "px"} height={100 + "px"}>
+ <defs>
+ <marker
+ id="miniArrow"
+ markerWidth="20"
+ markerHeight="20"
+ refX="0"
+ refY="3"
+ orient="auto"
+ markerUnits="strokeWidth"
+ >
+ <path d="M0,0 L0,6 L9,3 z" fill={"#000000"} />
+ </marker>
+ </defs>
+ <line
+ x1={20}
+ y1={70}
+ x2={70}
+ y2={70}
+ stroke={"#000000"}
+ strokeWidth="2"
+ markerEnd="url(#miniArrow)"
+ />
+ <line
+ x1={20}
+ y1={70}
+ x2={20}
+ y2={20}
+ stroke={"#000000"}
+ strokeWidth="2"
+ markerEnd="url(#miniArrow)"
+ />
+ </svg>
+ <p
+ style={{
+ position: "fixed",
+ top: this.yMax - 120 + 40 + "px",
+ left: this.xMin + 90 - 80 + "px",
+ }}
+ >
+ {this.dataDoc.simulationType == "Circular Motion" ? "Z" : "Y"}
+ </p>
+ <p
+ style={{
+ position: "fixed",
+ top: this.yMax - 120 + 80 + "px",
+ left: this.xMin + 90 - 40 + "px",
+ }}
+ >
+ X
+ </p>
+ </div>
</div>
- </div>
+ )
}
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 06:20:35 +0000