Tools:

https://aistudio.google.com/prompts/

https://iwant2study.org/lookangejss/slsZipper/Code_to_ZIP_Converter/

Prompt for Gemini 2.5 Pro

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:

🧪 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.

https://weelookang.blogspot.com/2025/04/ai-master-prompt-generate-science.html

https://www.youtube.com/watch?v=0kxeV9PKJ38

Master Prompt for SLS

You are a web developer specialized in HTML5 content creation. The HTML file must run entirely offline, without external libraries Ensure it fits well within an iframe environment, using 100% width, 450 px height if in iframe, 90 vh if the interactive is open in a new browser tab, expect to occupy the 90vh of the screen height Layout must support intuitive interaction: maintain clean organization of elements, use visual cues (shadows, highlights) for interaction states, use centre tooltip to allow viewing in iframe for text if there is a lot text information to display. If buttons are used, make the button height fit the text and use the width to fill the text instead of next line tp pack the limited iframe height. Optimize for both touch and mouse interactions with appropriate target sizes align to the Singapore curriculum and notations, design grounded on instructional and cognitive psychology, apply theries of cognitive load, Mayer's 12 principles of multimedia learning and information visualisation. no header text to save vertical spaces, use tooltip to mouse over to show header text at the main panel You have to complete one of the following tasks: 1. Create a new HTML5 interactive content based on the user's prompt. Important: Use the provided reference images as inspiration and references. Provide comments in the code on what the code is doing and how it works. You must generate three separate components (HTML, CSS, JavaScript), each properly formatted. You must generate JavaScript for every interactive content to enable to run the simulation or game. Segregate the codes into respective file - index.html, styles.css, script.js IMPORTANT: Use the generate_html5 tool to return your code in a structured format. User request and instructions: {Instructions} {Knowledge Base} check this for the reference of the layout of the interactive

Recipe Title

1 Simple Game

User Prompt

A simple game for the gamified experience for the learning of 

topic: [Simple Fractional Equations ]

level: [Sec 1 Mathematics (G3)]

do not reveal the answers too easily until it is a matter of reading the answers at the gaming stage.

score should be in integer value for the marks per question. 

make the distractors as pausible and realistic incorrect answers to help teachers and students see their own misconceptions more easily.

add a real time data analytics of the chain of actions corrects and wrongs at every question to allow the teacher to see the misconception of the student and make the analytics more data informed, I want to know what was the question, what is the correct answer, what the student choose, marked correct or wrong with clear unicode color coded.

 

Recipe Title

2 Simple Simulation (select image in Knowledge Base)

User Prompt

Create a fully interactive and realistic simulation 

Refer to the knowledge base of the layout picture of the virtual lab, If the image is missing or failed to load, report this with an error log message:

[On the left, show a point/beam light source emitting 2 straight light path line to touch the top and bottom of the object tangent to the edge of the object, and casting a mathematical accurate size of a shadow on the screen. 2 straight light path line needs to continue to hit the screen on the right.

note that the light line path for cube/sphere object is the edge of the cube/sphere for both top and bottom sides

note that the 2 light line paths for the circle need mathematical accuracy to compute the tangent to the sphere/cube one top and one for the bottom tangent  to the sphere. 

In the center, an opaque object (selectable via combo box of cube, sphere) in front casting a shadow on the right screen.

On the right, include a screen for the shadow to be casted

make it possible to drag the light source, object and screen in the drag x only direction, and they cannot overlap each other, while the physics of straight line light is still obeyed at all times. the light rays are straight line emiting from the light source and tangent to the Sphere or Cube]

 

Include interactive controls such as [Play, Pause and Reset] to the top control panel,

 [Play button moves the light source left and right limited by the boundary of the left xmin of view and the object.]
Focus on scientific accuracy and educational value appropriate for primary school students. Use proper scientific terminology while keeping explanations accessible.

 

3 Advanced Game

User Prompt

context: [life cycle of a Grasshopper, Beetle, Mosquitoes,cockroach,Chicken https://vle.learning.moe.edu.sg/moe-library/module/view/32910ded-d07d-4f73-8402-c39e92083c66/section/53566468/activity/5640754" target="_blank" rel="noopener" style="background-repeat: no-repeat; box-sizing: inherit; padding: 0px; margin: 0px; background-color: transparent; text-decoration: none; border: 0px; font: inherit; vertical-align: baseline; color: rgb(43, 99, 217);">https://vle.learning.moe.edu.sg/moe-library/module/view/32910ded-d07d-4f73-8402-c39e92083c66/section/53566468/activity/5640754 

 

Recipe Title

4 Advanced Simulation

User Prompt

Interactive Simulation: [The Law of Reflection]
Educational Objective:
To provide students with a hands-on virtual lab to explore [the relationship between the angle of incidence and the angle of reflection, allowing them to experimentally verify the Law of Reflection.]
Core Scientific Principle:
[This simulation demonstrates the Law of Reflection, which states that when a ray of light reflects off a surface, the angle of incidence is equal to the angle of reflection (i = r).]
Simulation Interface & Visuals
The main screen presents a clear, labelled diagram featuring:
[A flat, horizontal mirror representing the reflective surface.
A Normal line, shown as a dashed line perpendicular (at 90°) to the mirror at the point of incidence.
An Incident Ray of light striking the mirror.
A Reflected Ray of light leaving the mirror.
The following key variables are clearly labelled on the diagram and update in real-time:
Angle of Incidence (i): The angle between the incident ray and the normal.
Angle of Reflection (r): The angle between the reflected ray and the normal.
Both angles are continuously displayed to one decimal place.]
Animation:
[As the user adjusts the angle of incidence, the incident and reflected rays move dynamically, providing immediate visual feedback. The angle of reflection will change precisely in response to changes in the angle of incidence, visually demonstrating the Law of Reflection.]
Interactive Controls
Students can fully control the experiment using these simple controls:
Angle of Incidence Slider:
This is the primary interactive element, allowing the user to set the angle of incidence (i).
[Range: 0.0° to 90.0°]
Precision: Adjustable in 0.1° increments.
"Record" Button:
When pressed, this captures the current values for the angle of incidence (i) and the angle of reflection (r) and adds them as a new row to the data table.
"Plot Graph" Button:
Once data has been recorded, pressing this button generates a graph of the results side-by-side with the data table.
"Reset" Button:
Clears all data from the table and the graph, and resets the angle of incidence to a default value (e.g., 45.0°), allowing the experiment to be run again from the start.
Data Collection & Analysis
The simulation provides tools for formal data collection and analysis, mimicking a real scientific experiment.
1. Data Table:
A table is displayed to log experimental data.
The table has two columns:
Angle of Incidence, i (°)
Angle of Reflection, r (°)
Up to seven pairs of data can be recorded. All values are logged to one decimal place.
2. Graphical Analysis:
Pressing the "Plot Graph" button displays a graph of the recorded data.
X-axis (Horizontal): Angle of Incidence, i (°)
Y-axis (Vertical): Angle of Reflection, r (°)
Expected Result: Students will observe that the plotted points form a perfect straight line passing through the origin with a slope of 1. This provides powerful visual confirmation that the angle of incidence is directly proportional to the angle of reflection, verifying the relationship i = r.

Control panel can be at the top of the plotting panel to save space and additional text should be reveal as tooltips again to save space.

 

Recipe Title

5 Data Visualisation

User Prompt

Objective:
Create a fully interactive, clear, and insightful data visualization. The visualization should reveal patterns, trends, and relationships within the dataset in an intuitive, accessible manner.

Target Audience:
Students aged [12 to 18] years old.

Data & Content:

1. Topic / Dataset:
   [Singapore Population Trends 1980-2020", "Energy Consumption by Sector", "Correlation between Rainfall and Crop Yield" ]
   (Specify if the data itself needs to be generated/simulated or if it will be provided/embedded).

2. Data Types Displayed:

[Numerical (Population Count)] 
 [Categorical (Sector Name)] 
[Temporal (Year)]

3. Key Relationships/Patterns to Highlight:

[Growth trend over time] 
[Comparison between categories]
[Correlation between Variable A and Variable B]

Visualization & Interaction:

4. Chart Types Used:

["Line Chart", "Bar Chart", "Scatter Plot", "Map", "Pie Chart" ]
5. User Filtering / Sorting Options:

[Filter by Year Range (Slider)] 
[Sort categories alphabetically/by value] 
[Select specific categories to display (Checkboxes)]

6. Interaction Methods:

 [Hover/Touch on data points for tooltips with detailed info] 
[Click on legend items to toggle visibility]
[Zooming/Panning on complex charts (e.g., maps, scatter plots)]
[Brushing/Linking between multiple charts]

 

Recipe Title

6 Mind Map

User Prompt

6 Mind Map

Create a mind map on the topic of [Speed and Velocity].
Structure the mind map with a central idea, main branches (key themes or categories), and sub-branches (supporting details, examples, or related concepts), draw connection lines to the connected bubble concepts.

make use of the width to space out the bubbles and allow users to drag to reposition the bubbles
Use clear and concise phrasing, and group related ideas logically.
Ensure the structure is suitable for [Primary School Students]

 

Recipe Title

7 Image to Interactive (select image in Knowledge Base)

User Prompt

If the knowledge‑base image is available, design a clear, interactive math manipulative that visually illustrates a key concept from the image. Make the explanation steps incremental before moving on to help students undertsand. Must sure the visual display do not overlap and cause issue viewing it clearly. 

If the image is missing or failed to load, report this with an error log message:

Recipe Title

8 Explanation

User Prompt

create a interactive with explaining steps for the math problem :

 

Express http://www.w3.org/1998/Math/MathML"><mrow><mo> </mo><mfrac><mi>x</mi><mn>2</mn></mfrac><mo>+</mo><mfrac><mi>x</mi><mn>6</mn></mfrac></mrow></math>" role="math" />  as a single fraction in simplest form. 

 

## based on actual MOE library https://vle.learning.moe.edu.sg/moe-library/module/view/c6af5cf3-d08b-4c11-a17b-561d681b0a4f/section/57242366/activity/36418047?pageNo=1 

 

9 Chinese text to speech by smaller groups of characters, hanyupinyi, translate to english etc

User Prompt

[小人物的心声
“一人一首新谣”专题系列报道
 
1      1986年7月，电视剧《芝麻绿豆》开始播出，总共播出了510集，播放时间长达三年。剧情讲述的虽然是发生在邻里之间微不足道的日常小事，却牵动了电视机前许多观众的心。随着《芝麻绿豆》的播出，剧中的主题曲《小人物的心声》也走进了新加坡的千家万户。三十多年后的今天，这首新谣歌曲仍然能够激励人心。
 
2      《小人物的心声》不仅歌词浅白、朗朗上口，而且意义深刻。年轻一代或许根本没听说过《芝麻绿豆》这部电视剧，但对剧中的主题曲一点儿也不陌生。在国庆庆典上，联合学校合唱团的年轻学子们常常带领观众唱响这首歌。
 
3      李显龙总理在2014年的国庆群众大会上也提到：“新谣歌曲中，我最喜欢的是《小人物的心声》，也最熟悉。在国庆庆典上很高兴有机会和大家一起唱，因为它很有意思，小人物也有小人物的贡献。”
 
4     “也许我一个人，不能成就一番大事业，但我尽力贡献一份微薄的力量……”《小人物的心声》唱出了新加坡人的感受。半个世纪以来，一代代新加坡人勤奋努力，每个小人物都积极打拼。如果没有他们的奉献和付出，就没有今天繁荣的新加坡。

5       无论从事什么职业，无论地位高低，只要敬业乐业，平凡的小人物也能发出耀眼的光芒，创造出非凡的成就。]
 

make into a pedagogically superior app can

text to speech by smaller groups of characters,

place the han yu ping yi below the Chinese characters for stronger associated learning, 

translate to english etc.

follow the knowledge base for the layout and placement of the tools, buttons, etc

if knowledge base is missing, report it as an error that LLM cannot reference it

 

 

ACP Interactive Iteration

Feature Details

System Prompt

This system prompt will instruct how the Large Language Model should behave. You may use the variables listed in the table below.

You are a web developer specialized in HTML5 content creation. You have to complete one of the following tasks: 1. Modify existing HTML, CSS, and JavaScript code that the user has provided, based on the user's instructions. ITERATIVE MODE INSTRUCTIONS: You are modifying existing HTML, CSS, and JavaScript code that the user has provided. Maintain the same overall structure while making the improvements requested in the user's instructions. Focus on addressing the specific requests while preserving the existing functionality and the overall structure of the code. You must return the original or improved JavaScript to enable the interactive content to run the simulation or game. Return the complete improved code with all three components properly wrapped. Provide comments in the code to explain the changes you have made Your response should only contain the modified code, with no other text or comments. IMPORTANT: Use the generate_html5 tool to return your code in a structured format. Here is the existing HTML code: {Existing_html} Here is the existing CSS code: {Existing_css} Here is the existing JavaScript code: {Existing_javascript} Please modify the code according to my instructions while maintaining the overall structure and functionality. User request and instructions: {Instructions}

 

https://vle.dev.sls.moe.edu.sg/my-drive/module/edit/ddf6330c-6d56-4b30-985d-2ac3f800ed0c/section/100008122940892/activity/100008122941819?quizPage=7

https://vle.dev.sls.moe.edu.sg/app/edit/819c1ef1-3ea3-11ef-9718-06bf635a9915

You are a web developer specialized in HTML5 content creation. The HTML file must run entirely offline, without external libraries Ensure it fits well within an iframe environment, using 100% width, 450 px height if in iframe, 90 vh if the interactive is open in a new browser tab, expect to occupy the 90vh of the screen height Layout must support intuitive interaction: maintain clean organization of elements, use visual cues (shadows, highlights) for interaction states, use centre tooltip to allow viewing in iframe for text if there is a lot text information to display. If buttons are used, make the button height fit the text and use the width to fill the text instead of next line tp pack the limited iframe height. Optimize for both touch and mouse interactions with appropriate target sizes align to the Singapore curriculum and notations. no header text to save vertical spaces, use tooltip to mouse over to show header text at the main panel You have to complete one of the following tasks: 1. Create a new HTML5 interactive content based on the user's prompt. Important: Use the provided reference images as inspiration and references. Provide comments in the code on what the code is doing and how it works. You must generate three separate components (HTML, CSS, JavaScript), each properly formatted. You must generate JavaScript for every interactive content to enable to run the simulation or game. Segregate the codes into respective file - index.html, styles.css, script.js IMPORTANT: Use the generate_html5 tool to return your code in a structured format. User request and instructions: {Instructions} {Knowledge Base} check this for the reference of the layout of the interactive.

version 20250730 https://vle.dev.sls.moe.edu.sg/app/view/819c1ef1-3ea3-11ef-9718-06bf635a9915

1 Simple Game

2 Simple Simulation

2 Secondary Science

3 Advanced Game

5 Data Visualisation

version 20250727

1 Primary Science