NDAHI LABS STEM Interactive Simulations Catalog (100 Simulations)

🚀 How to Create a STEM Simulation with AI (Google Gemini Canvas)

A step-by-step guide for vibe coders to build, refine, and ship scientifically accurate, visually realistic HTML5 simulations using Google Gemini Canvas.

Open AI Tool (Google Gemini)

Navigate to gemini.google.com (Google Gemini Advanced preferred).

Enable Canvas Mode

Type your prompt and click the Canvas icon or ask Gemini: "Open in Canvas mode as a standalone HTML document."

Paste Details & Prompt Rules

Click View Simulation Details on any card below, copy its details, and combine with the mandatory prompt rules.

Iterate & Refine Prompting

Keep prompting! Ask Gemini to adjust calculations, tweak SVG graphics, fix scientific formulas, and streamline controls until it feels completely right.

🎨 Pro Tip for Photorealistic Visuals: The Image-to-SVG Workflow

To make your simulation visually realistic, first find a real-world photo or diagram of the lab apparatus, 3D solid, or biological organ you want to simulate. Upload the image to Gemini and ask: "Create a clean, precise, responsive standalone SVG vector element representing this image." Once Gemini generates the SVG, embed it inside your simulation prompt. This guarantees photorealistic and geometrically accurate visual representations!

📋 Mandatory Simulation Prompt Requirements

Dynamic Practice & Exercise Zone (NO Hardcoded Values): Each simulation MUST feature an interactive Exercise & Practice area. Questions, variables, and target values MUST be dynamically randomized on the fly (via a "New Exercise / Nouveau Problème" button) so students get a different, unique practice problem every time! Includes instant answer validation and hints.
Strict Scientific & Physical Accuracy: Must strictly respect all scientific principles, mathematical formulas, and physical laws (e.g. energy conservation, Ohm's law, Mendelian genetics, stoichiometry). Must accurately represent real-world phenomena.
Realistic Visual Elements & Accurate SVGs: Visual representations of lab apparatus, molecules, vectors, and apparatus must be clean, realistic, and geometrically precise using SVG/Canvas graphics.
Minimalist UI (Avoid Excess Controls): Keep the interface sleek and uncluttered. Avoid redundant buttons or excessive sliders; focus only on essential interactive parameters.
Self-Contained & Offline: Must be a single .html file with inline CSS (<style>) and JS (<script>). Works 100% offline without external CDN dependencies.
Mobile Responsive: Responsive touch-friendly layout supporting desktop, tablet, and mobile screens.
Footer Requirement: Must include a footer reading NDAHI COMPANY LIMITED hyperlinked to https://ndahi.net (opening in a new tab).
Bilingual (English & French): Must include a toggle button ([EN | FR]) to dynamically switch all UI text, labels, and explanations between English and French.
Toggleable About / Info Section: Must include an info modal/drawer explaining: Simulation Overview, Learning Outcomes, and How to Use.

✅ Vibe Coder Quality Checklist

Dynamic practice & exercise zone (randomized parameters, NO hardcoded values) 100% Scientifically accurate formulas & real-world behavior Realistic visual elements & precise SVG/Canvas rendering Clean, minimalist UI (no excess buttons or clutter) 100% Self-contained HTML5 file (works offline) Mobile responsive and touch friendly Footer contains "NDAHI COMPANY LIMITED" linking to https://ndahi.net Bilingual toggle button (English / Français) Toggleable "About / Info" section with learning outcomes & usage

💡 Ready-to-Use Example Prompt (Projectile Motion - PHYS-04)

Create a complete, self-contained HTML5 interactive simulation of Projectile Motion (PHYS-04) for Google Gemini Canvas.

REQUIREMENTS:
1. Dynamic Practice Area: Include an interactive "Practice Mode" tab with NO hardcoded questions. Add a "New Problem" button that dynamically generates a randomized target distance or obstacle height (e.g. "Hit the target placed at X = 45m and Y = 12m"). Validate student launch parameters dynamically with instant feedback.
2. Scientific Accuracy: Rigorously implement Newtonian physics equations (x = v0*cos(θ)*t, y = v0*sin(θ)*t - 0.5*g*t^2, trajectory arc, velocity vectors Vx & Vy, and air drag force). All real-world physical behavior must be exact.
3. Realistic Visuals: Render clean, realistic SVG/Canvas graphics for the cannon, projectile ball, ground terrain, velocity arrows, and arc trajectory trace. Use image-to-SVG reference for apparatus realism.
4. Minimalist UI: Keep controls clean and focused. Use only 3 essential sliders: Initial Velocity (v0), Launch Angle (θ), and Gravity (g), plus a "Fire Cannon" and "Reset" button. Avoid excess buttons or clutter.
5. Single File & Offline: Single standalone HTML file with inline CSS and JavaScript that works 100% offline.
6. Mobile Responsive: Responsive touch-friendly layout for phone, tablet, and desktop screens.
7. Bilingual Support: Add an [EN | FR] toggle button at the top to switch all UI text between English and French.
8. Toggleable About Section: Add an "Info / About" button opening a drawer with: Simulation Overview, Learning Outcomes, and How to Use.
9. Footer Requirement: Include a footer reading "NDAHI COMPANY LIMITED" hyperlinked to https://ndahi.net opening in a new tab.
10. Output ONLY the raw executable HTML code.

Interactive STEM Simulation Details

🚀 How to Create a STEM Simulation with AI (Google Gemini Canvas)

🎨 Pro Tip for Photorealistic Visuals: The Image-to-SVG Workflow

📋 Mandatory Simulation Prompt Requirements

✅ Vibe Coder Quality Checklist