AI HTML5, Open Source Physics (Easy JavaScript Simulation and Tracker) and TagUI (AI-Singapore): 🚀 How I Instantly Created a Full HTML5 Physics Simulation with Claude 3.7 on MOE’s AI Generator 🎓

🚀 How I Instantly Created a Full HTML5 Physics Simulation with Claude 3.7 on MOE’s AI Generator 🎓

“Wait… did you just build an interactive free-fall simulation… from just a picture?”
Yes. Yes, I did. And you can too.

🧠 The Power of a Picture-Driven Prompt

Forget lengthy coding. Forget weeks of debugging. All I did was:

📸 Upload a screenshot of my desired simulation (from an older EJSS model https://sg.iwant2study.org/ospsg/index.php/interactive-resources/physics/01-foundations-of-physics/motion-forces/01-kinematics/37-freefall01 ).
✍️ Copy-paste a prompt clearly outlining my goals (see prompt below).
[Optional] Sample Working Prototype URL:
https://iwant2study.org/lookangejss/02_newtonianmechanics_2kinematics/ejss_model_freefall01/
[Recommended] Picture Upload in Knowledge Base and Select it for Generation:
Uploading a layout or sketch (PNG, JPG, etc.) greatly enhances the AI's understanding of the desired design.
🎯 Objective:
Create a fully interactive, pedagogically sound, and engaging simulation using only HTML, CSS, and JavaScript (no external libraries). The output must be a single self-contained HTML file suitable for embedding within the Singapore Student Learning Space (SLS).
🧑‍🎓 Target Audience:
Students aged {14 to 18} years old.
Subject and Level:
Singapore MOE syllabus level (e.g., Secondary 3 Physics to ensure appropriate complexity and curriculum alignment.
🧪 Simulation Core Requirements:
1. Topic:
free fall of a ball
2. Concepts to Demonstrate:
{ INSERT KEY CONCEPT 1 HERE }
3. Interactive Variables (User Controlled, e.g., via Sliders/Inputs):
{ INSERT VARIABLE 1 NAME & RANGE/OPTIONS HERE, e.g., "Initial Velocity (0-50 m/s)" }
{ INSERT VARIABLE 2 NAME & RANGE/OPTIONS HERE, e.g., "Mass (1-10 kg)" }
4. Key Variables to Display (Always Visible):
{ INSERT DISPLAY VARIABLE 1 HERE, e.g., "Time Elapsed" }
{ INSERT DISPLAY VARIABLE 2 HERE, e.g., "Current Height" }
{ INSERT DISPLAY VARIABLE 3 HERE, e.g., "Voltage" }
{ ... add more key variables as needed ... } (Consider placing this live display in the top-right corner or another logical, non-intrusive location).
5. Motion or Animation to Display:
{ INSERT DESCRIPTION OF MOTION/ANIMATION HERE, e.g., "Parabolic trajectory of a projectile", "Electrons flowing through a circuit", "Gas molecules moving and colliding" }
6. Output/Results Visualization:
{ INSERT DESIRED OUTPUT FORMAT HERE, e.g., "Real-time graph of Height vs. Time", "Bar chart showing energy distribution", "Table of resistance values", "Dynamic display of concentration changes" }
⚙️ Simulation Behavior & Features:
Scientific Accuracy: Model the system based on scientifically accurate principles and equations appropriate for the target level. Balance realism with pedagogical clarity.
Interactivity & Controls:
Include standard controls: ► Play, || Pause, ►| Step (advance one time-step), and ↻ Reset for Science Virtual Laboratory Setup.
Implement the user-controlled variables specified in section 3 (e.g., sliders, inputs).
[Optional] Add checkboxes to toggle the display of relevant visual aids (vectors, paths, labels) for differentiated visualization.
[Optional] Consider elements for guided exploration (hints, prompts).
Visual Aids & Representation:
Use clear text labels on significant visual objects and controls.
Employ meaningful visualizations (arrows for vectors, color-coding, icons) to represent concepts effectively (e.g., velocity, forces, energy flow). Ensure these directly aid understanding.
[Optional] Assessment & Feedback: Incorporate simple formative assessment or feedback mechanisms where appropriate.
♿ Accessibility:
Ensure basic web accessibility (WCAG AA): sufficient color contrast, black text for example, keyboard navigability for controls, ARIA attributes if needed, associated labels for controls.
🎛️ User Interface Guidelines:
Place primary control buttons logically (e.g., grouped at the top or bottom), clearly separated from the simulation area.
Maximize screen real estate for the simulation:
No self-generated page titles/headers.
Use CSS effectively for clean layout.
Fit well within an iframe: width: 100%, height: 90% (approx.), strictly no internal scrollbars.
Ensure a clear visual hierarchy and intuitive layout.
🗣️ Language & Terminology:
Use clear, concise English.
Employ scientific terminology consistent with the Singapore MOE syllabus for the target level.
📱 Platform & Compatibility:
Fully offline-compatible: Single HTML file with embedded CSS and JavaScript. No external scripts, libraries, fonts, or CDN links.
Functional on modern browsers (Chrome, Firefox, Safari, Edge) and devices (desktop, tablet, mobile).
Layout adapts reasonably to landscape and portrait orientations, maintaining usability.
🧠 Select Claude 3.7 Sonnet from the dropdown.
✅ Click Generate.

Result? A fully offline, single-HTML-file interactive simulation—perfect for the Singapore Student Learning Space (SLS). No external libraries. No broken features. It just worked.

🔥 Why This Works: Image + Structured Prompt = Magic

Claude 3.7 doesn’t just “understand” words—it sees your layout and intuitively mirrors the design.

Uploading a PNG of the original simulation massively improves graphic accuracy.
It auto-generates everything: controls, layout, vectors, animation, and even live graphs.
Simulation behavior adheres to real physics: constant acceleration, height tracking, time vs. velocity charts, and more.

🧪 Sample Simulation Scenario

Based on this working prototype:
https://iwant2study.org/lookangejss/02_newtonianmechanics_2kinematics/ejss_model_freefall01/

Topic: Free fall of a ball
Concepts Demonstrated:

Gravitational acceleration (g)
Constant acceleration motion
Real-time vector visualization (e.g., mg, velocity)
Time to impact from given height

Interactive Sliders:

Initial Height (0–100 m)
Gravity (1–20 m/s²)
Optional air resistance toggle (with k value)

Always-Visible Metrics:

⏱ Time Elapsed
📏 Current Height
📉 Velocity
⚡ Acceleration

Graph Output: Height vs. Time (real-time graph drawn automatically)

🎛️ User Interface Done Right

What stood out to me was how Claude generated a layout that:

Kept all controls in one horizontal bar at the top.
Made space for a full-width animation canvas.
Included a clearly separated graph panel below.
Placed a neat live display of simulation data at the top-right.

All this without touching a single line of CSS.

🏆 Why It’s SLS-Ready

✅ Fully offline (single .html file)
✅ Works in an iframe (no scrollbars!)
✅ Compatible with Chrome, Edge, Safari
✅ Pedagogically aligned with Sec 3 Physics MOE syllabus
✅ Black text for clarity and WCAG accessibility

🧠 Want to Try?

Here’s the exact Claude-compatible prompt I used:

csharp
🎯 Objective:
Create a fully interactive, pedagogically sound, and engaging simulation using only HTML, CSS, and JavaScript (no external libraries)...

🧑‍🎓 Target Audience:
Students aged {14 to 18} years old...

[Add all variables, outputs, motion descriptions...]

Upload a PNG layout. Paste in the above prompt. Click Generate. You’ll have a clean, browser-compatible physics lab within seconds.

💡 Pro Tip: Refinement View = Power Up

After generation, jump to the Refinement tab:

✅ Add new variables on the fly
✅ Tweak styles (e.g., make all text black for better visibility)
✅ Create new visual objects (e.g., force arrows, graphs)
✅ Instant preview of each change

🚀 The Future of Simulation Authoring is Here

If you’re an educator, student, or edtech creator in Singapore—or anywhere—you now have AI superpowers at your fingertips. Claude 3.7 + the MOE HTML5 Generator (ask Joe for password) = the end of template-tinkering frustration.

So go ahead, drag and drop your vision, and let AI bring your physics simulation to life.

🧪 Made something amazing? Tag me or share on [SLS Community Gallery]!

#AIinEducation #SLSready #PhysicsSimulations #Claude3_7 #HTML5Simulation #MOEtools