🔧 AI Master Prompt: Generate a Science Educational Interactive Simulation

 

🔧 AI Master Prompt: Generate a Science Educational Interactive Simulation

[Optional] Sample Working Prototype URL:
https://your-simulation-link-if-available.com

[Optional] Picture Upload:
Uploading a layout or sketch (PNG, JPG, etc.) greatly enhances the AI's understanding of the desired design.

🎯 Objective:

Create a fully interactive, realistic, and educational simulation using only HTML, CSS, and JavaScript (no external libraries). The output must be a single self-contained HTML file.

🧑‍🎓 Target Audience:

students aged 12 to 18 years old

🧪 Simulation Requirements:

1. Topic:
   [Insert your physics/chemistry/biology topic here, e.g., "Projectile Motion", "Ohm’s Law", "Photosynthesis"]

2. System Behavior:

   • Simulate realistic physical behavior relevant to the topic (e.g., motion, energy, waves, etc.).

   • Follow scientifically accurate principles and equations.

3. Visual & Variable Representation:

   • Display key variables (e.g., time, velocity, force, current).

   • Place a live variables display panel at the top-right corner of the simulation.

   • Use clear text labels on all visual objects (e.g., “mass 1”, “car A”).

4. Interactivity & Controls:

   • Include controls: ►Play, || Pause, ►|Step, and ↻Reset.

   • Add sliders, dropdowns menu, or input fields if helpful for user learning and interaction that support conceptual exploration.

   • Add checkboxes to toggle display of variables, vectors, or paths (for differentiated visualization).

5. Visual Aids:

   • Use arrows, lines, or icons to represent vectors like velocity, acceleration, or forces.

   • Ensure visual elements aid conceptual understanding.

🎛️ User Interface Guidelines:

• Place all control buttons at the top of the interface, above the main simulation panel.

• Maximize screen real estate, especially vertical space:

  • Hide browser/page titles, headers, or any non-essential elements.

  • Use CSS to ensure the main simulation fills the viewable area cleanly.

  • Simulation should fit well in an iframe:

    • width: 100%

    • height: 450 px

    • No scrollbars.

📱 Platform & Compatibility:

• Must be fully offline-compatible — do not use any external scripts, libraries, or CDNs.

• File must function on all modern browsers and devices (desktop, tablet, mobile, look professional made in both landscape and portrait orientations).

• Optimize for performance on both low-end and high-end devices.