2f824e40-e285-42b8-a0c1-fc1fb1b8e921

Overview

Motion Analysis is a plain HTML5 interactive that helps learners connect forces to motion through three synchronized panels: Free Body Diagram (FBD), Analysis, and Position. Built with vanilla JS + SVG (no LMS or plugin dependencies), it’s optimized for classroom use, workshops, and easy embedding into SLS as a Plain Web/HTML5 object.

This version showcases two modes—Horizontal and Vertical—so teachers can model common scenarios (push/pull on a surface; rising/falling under gravity and air resistance) with consistent UI and analysis logic.

01Linear_Motion_Analysis_20251013/

01Linear_Motion_Analysis_20251013.zip

01Linear_Motion_Analysis_20251013/
01Linear_Motion_Analysis_20251013.zip

Facilitator note: This workshop was designed and conducted independently by Jin Sheng, demonstrating how a lightweight HTML5 tool can drive rich inquiry without requiring any installation.

What learners can do (at a glance)

Toggle Horizontal / Vertical motion.
Specify the object and mass (1–10 kg, with validation).
Add up to three forces with type, magnitude, and direction.
See the FBD auto-render with arrows and readable labels (e.g., “F₁ friction, 12 N”).
View analysis that computes F_net and a with working shown.
Step the Position diagram through t = 0…10 s and watch how $s = ut + \tfrac{1}{2}at^2$ plays out.
Reset individual panels or all settings instantly.

Classroom flow (suggested)

Predict
- “If we double the rightward tension, what happens to $F_\text{net}$ and the position dots over time?”
- “If air resistance balances weight, what does the acceleration show?”
Model
- Choose Horizontal for surface interactions (friction, tension, normal).
- Choose Vertical for rising/falling (gravity, air resistance, tension/normal).
Analyze (built-in)
- The Analysis panel lays out:
  - $F_\text{net}$ equation (with sign convention by mode),
  - numeric substitution,
  - final vector result (magnitude + direction),
  - and $a = \dfrac{F_\text{net}}{m}$ with units and direction.
Visualize
- Use Step to advance $t$ and discuss why the spacing of dots changes (constant vs changing velocity).
Reflect
- Link graphs and kinematics:
  $v = u + a t$ , $s = ut + \tfrac{1}{2}at^2$
- Ask: “What would the $v\text{–}t$ and $x\text{–}t$ graphs look like for this setup?”

Feature highlights (mapped to the new build)

1) Dual Mode: Horizontal & Vertical

Horizontal: directions are right/left.
Vertical: directions are down/up (gravity-friendly sign convention).

2) Structured Inputs with Guardrails

Mass input validation (1–10 kg) and force magnitude (0–100 N).
Force types include friction, air resistance, normal, tension, electrostatic, magnetic, gravitational (vertical), and other.
Object name propagates across labels (e.g., “F₁ acting on ball”).

3) Free Body Diagram (SVG)

Central object (red node), with arrowheads and smart label placement.
Separate clustering for left/right (horizontal) and up/down (vertical) to avoid overlap.

4) Worked “Analysis”

Sign-aware composition of forces into
$F_{net} = \pm F_{1} \pm F_{2} \pm F_{3}$
Clear arithmetic line, then
$a = \frac{F_\text{net}}{m}\quad(\text{with units and direction})$
Falls back to “Enter mass and forces to see analysis” when inputs are incomplete.

5) Position Diagram (SVG)

Time-stamped markers for $t=0\ldots10~\text{s}$ with opacity trail (focus on the current step).
Auto-scaled axes with s = 0 reference line (horizontal: vertical tick; vertical: horizontal tick).
Initial conditions dropdowns for realistic starts:
- Horizontal: rest / moving right 20 m/s / moving left 20 m/s
- Vertical: rest / rising 20 m/s / falling 20 m/s

6) Panel Toggles & Resets

Each of FBD, Analysis, Position can be minimized (−/+) for focus.
Reset All Settings per mode restores a clean slate for new trials.

Pedagogical moves you can try

Same $F_\text{net}$ , different $m$ : “How does acceleration change?”
Balanced case: Set forces to cancel → discuss zero acceleration with non-zero velocity when initial speed ≠ 0.
Vertical drag vs weight: Explore when terminal behavior is implied by inputs (e.g., $F_\text{drag}\approx mg$ ).
Friction concept check: Keep a rightward driving force and gradually increase leftward friction—watch a cross through zero.

SLS integration (Plain Web/HTML5)

Upload the folder and select index.html in SLS (Add Media → Web/HTML5).
Or embed via iframe on a blog/site:


<iframe src="index.html" width="800" height="520" style="border:1px solid #ccc;border-radius:6px"></iframe>

Tip: This app is network-friendly (no external heavy libs; SVG rendering). It includes panel toggles for small screens and a responsive single-column layout under 1024px.

Workshop snapshot (by Jin Sheng)

Focus: Building conceptual understanding of forces → acceleration → motion using a transparent, modifiable model.
Format: Hands-on parameter tinkering; quick scenario design; whole-class sense-making.
Outcome: Participants left with a ready-to-teach HTML file and patterns for crafting their own EJS-style interactives.

Credits & links

Developer & Workshop Lead: Jin Sheng
Tech: HTML5, JavaScript (vanilla), SVG; light utility formatting; panel responsiveness
Prototype support: “made by JinSheng, using Claude” (credit line retained; corrected spelling from “Claude”)
Related resources:
Interactive resources (Forces & Turning Effects):
https://sg.iwant2study.org/ospsg/index.php/interactive-resources/physics/01-foundations-of-physics/forces-moments/04-turning-effects-of-forces

Appendix: Why this build works well for teaching

Transparency over black-box: Students see the exact steps from forces to $F_\text{net}$ to $a$ .
Cognitive economy: One UI for two axes (H/V) keeps mental load low while expanding scenarios.
Assessment-ready: The step-wise position trace makes it easy to ask explain-why and predict-next questions.
Future-proof: Plain HTML works across SLS deployment patterns and school networks.

AI HTML5, Open Source Physics (Easy JavaScript Simulation and Tracker) and TagUI (AI-Singapore)

Pages

Monday, October 13, 2025

Motion Analysis (HTML5) — Workshop 1/3 Build by Jin Sheng