SLS Prompt Library
Generate optimized prompts for Claude to create SLS Educational Interactives
https://iwant2study.org/lookangejss/promptLibrary/ai-prompt-library.html
Join the SLS PD community and share your knowledge!
Post your #HTML5 prompts and resources here:
Post to SLS PD Forum https://vle.learning.moe.edu.sg/class-group/view/fb19f5f8-198c-4f8d-b1fd-1910dc16d40a?tab=forum&typeUuid=7293c431-fd01-4cac-8709-806f8908efeb&actionType=TOPIC
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 to pack the limited iframe height. Optimize for both mobile-first touch support and desktop mouse interactions with appropriate target sizes align to the Singapore curriculum and notations, design grounded on instructional and cognitive psychology, apply theories 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 should generate all code ina single HTML, properly formatted. You must generate JavaScript for every interactive content to enable to run the simulation or game.
This is a Prompt Library for Educational Simulations will help you quickly generate new simulations using SLS Claude.
Below is Version 1.0: Prompt Library for Educational Simulations — covering multiple domains (Physics, Chemistry, Biology, Mathematics, Geography, and 21CC skills).
Each prompt includes a template structure and a sample for direct use.
🎓 Prompt Library: Educational Simulation Generation
🔧 Chinese Template
Create an interactive HTML5 simulation about Chinese Text to Speech with Hanyu Pinyin.
TARGET AUDIENCE: Primary 3-4
INTERACTIVE REQUIREMENTS: - Educational content suitable for Primary 3-4 students - User interaction via sliders, buttons, checkboxes, or other appropriate controls - Include visualizations (2D graphics) - Display real-time changes in graphs, values, or visual feedback - Self-contained in one HTML file with embedded CSS and JavaScript - Add clear labels, legends, and explanations for all elements
LEARNING OUTCOMES: - Students should be able to explore and understand Chinese Text to Speech with Hanyu Pinyin - Interactive elements should reveal key concepts through manipulation - Visual feedback should reinforce learning objectives - Design should encourage experimentation and discovery
INTERACTION FEATURES TO INCLUDE: - Input controls (sliders/buttons) with clear labels and units - Real-time visual updates based on user input - Graphs or diagrams that respond to changes - Brief explanatory text or tooltips for context - Reset functionality to return to default state
VISUAL DESIGN REQUIREMENTS: - Use appropriate color schemes for educational content - Ensure sufficient contrast for readability - Include visual hierarchy to guide attention - Use animations judiciously to demonstrate concepts - Maintain consistency in design elements
 |
| Chinese_Text_to_Speech_with_Hanyu_Pinyin_20251031/ Chinese_Text_to_Speech_with_Hanyu_Pinyin_20251031.zip |
🔧 Math Template
USER TASK SPECIFICATION: Create an interactive HTML5 auto-detect about Express Fractions as Single Fraction.
TARGET AUDIENCE: Primary 3-4 - Mathematics INTERACTIVE REQUIREMENTS: - Educational content suitable for Primary 3-4 students - User interaction via sliders, buttons, checkboxes, or other appropriate controls - Include visualizations (2D graphics) - Display real-time changes in graphs, values, or visual feedback - Self-contained in one HTML file with embedded CSS and JavaScript - Add clear labels, legends, and explanations for all elements -
**MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets) -
**TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)
SPECIFIC REQUIREMENTS: None specified
LEARNING OUTCOMES: - Students should be able to explore and understand Express Fractions as Single Fraction - Interactive elements should reveal key concepts through manipulation - Visual feedback should reinforce learning objectives - Design should encourage experimentation and discovery
INTERACTION FEATURES TO INCLUDE: - Input controls (sliders/buttons) with clear labels and units - Real-time visual updates based on user input - Graphs or diagrams that respond to changes - Brief explanatory text or tooltips for context - Reset functionality to return to default state - **Real-time analytics panel tracking student actions for learning assessment** Create a complete, functional HTML5 interactive that meets all requirements above. |
| Express_Fractions_as_Single_Fraction_20251103/ Express_Fractions_as_Single_Fraction_20251103.zip |
🔧 Physics Law of Reflection Smooth Mirror and Rough Mirror Template
USER TASK SPECIFICATION: Create an interactive HTML5 auto-detect about Law of Reflection Simulation.
TARGET AUDIENCE: Secondary 1-2 - Physics
INTERACTIVE REQUIREMENTS: - Educational content suitable for Secondary 1-2 students - User interaction via sliders, buttons, checkboxes, or other appropriate controls - Include visualizations (2D graphics) - Display real-time changes in graphs, values, or visual feedback - Self-contained in one HTML file with embedded CSS and JavaScript - Add clear labels, legends, and explanations for all elements - **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets) - **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)
SPECIFIC REQUIREMENTS: None specified
LEARNING OUTCOMES: - Students should be able to explore and understand Law of Reflection Simulation - Interactive elements should reveal key concepts through manipulation - Visual feedback should reinforce learning objectives - Design should encourage experimentation and discovery
INTERACTION FEATURES TO INCLUDE: - Input controls (sliders/buttons) with clear labels and units - Real-time visual updates based on user input - Graphs or diagrams that respond to changes - Brief explanatory text or tooltips for context - Reset functionality to return to default state - **Real-time analytics panel tracking student actions for learning assessment** Create a complete, functional HTML5 interactive that meets all requirements above.
 |
| Law_of_Reflection_Simulation_20251103 simple/ Law_of_Reflection_Simulation_20251103 simple.zip |
🔧Physics Law of Reflection Smooth Mirror, Curved and Rough Mirror Template (has some errors, that SLS AI could not fix)
USER TASK SPECIFICATION: Create an interactive HTML5 auto-detect about Law of Reflection Simulation.
TARGET AUDIENCE: Secondary 1-2 - Physics
INTERACTIVE REQUIREMENTS: - Educational content suitable for Secondary 1-2 students - User interaction via sliders, buttons, checkboxes, or other appropriate controls - Include visualizations (2D graphics) - Display real-time changes in graphs, values, or visual feedback - Self-contained in one HTML file with embedded CSS and JavaScript - Add clear labels, legends, and explanations for all elements - **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets) - **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)
SPECIFIC REQUIREMENTS: None specified
LEARNING OUTCOMES: - Students should be able to explore and understand Law of Reflection Simulation - Interactive elements should reveal key concepts through manipulation - Visual feedback should reinforce learning objectives - Design should encourage experimentation and discovery
INTERACTION FEATURES TO INCLUDE: - Input controls (sliders/buttons) with clear labels and units - Real-time visual updates based on user input - Graphs or diagrams that respond to changes - Brief explanatory text or tooltips for context - Reset functionality to return to default state - **Real-time analytics panel tracking student actions for learning assessment** Create a complete, functional HTML5 interactive that meets all requirements above. |
🔧 Universal Template
USER TASK SPECIFICATION: Create an interactive HTML5 auto-detect about Life Cycle Drag & Drop Quiz.
TARGET AUDIENCE: Primary 5-6 - Science (General)
INTERACTIVE REQUIREMENTS: - Educational content suitable for Primary 5-6 students - User interaction via sliders, buttons, checkboxes, or other appropriate controls - Include visualizations (2D graphics) - Display real-time changes in graphs, values, or visual feedback - Self-contained in one HTML file with embedded CSS and JavaScript - Add clear labels, legends, and explanations for all elements - **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets) - **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)
SPECIFIC REQUIREMENTS: None specified
LEARNING OUTCOMES: - Students should be able to explore and understand Life Cycle Drag & Drop Quiz - Interactive elements should reveal key concepts through manipulation - Visual feedback should reinforce learning objectives - Design should encourage experimentation and discovery
INTERACTION FEATURES TO INCLUDE: - Input controls (sliders/buttons) with clear labels and units - Real-time visual updates based on user input - Graphs or diagrams that respond to changes - Brief explanatory text or tooltips for context - Reset functionality to return to default state - **Real-time analytics panel tracking student actions for learning assessment** Create a complete, functional HTML5 interactive that meets all requirements above.
🔧 Universal Template
Create an interactive HTML5 simulation (with embedded JavaScript and CSS) about [TOPIC].
The simulation should:
- Be educational, suitable for [AGE/GRADE LEVEL].
- Allow user interaction via sliders, buttons, or checkboxes.
- Include simple visuals (2D or 3D if appropriate).
- Display real-time changes in graphs or values.
- Be self-contained in one HTML file with HTML, CSS, and JavaScript combined.
Add brief labels, legends, and explanations for clarity.
🔧 Universal Template
Create an interactive HTML5 simulation (with embedded JavaScript and CSS) about [TOPIC].
The simulation should:
- Be educational, suitable for [AGE/GRADE LEVEL].
- Allow user interaction via sliders, buttons, or checkboxes.
- Include simple visuals (2D or 3D if appropriate).
- Display real-time changes in graphs or values.
- Be self-contained in one HTML file with HTML, CSS, and JavaScript combined.
Add brief labels, legends, and explanations for clarity.
🔧 Universal Template
Create an interactive HTML5 simulation (with embedded JavaScript and CSS) about [TOPIC].
The simulation should:
- Be educational, suitable for [AGE/GRADE LEVEL].
- Allow user interaction via sliders, buttons, or checkboxes.
- Include simple visuals (2D or 3D if appropriate).
- Display real-time changes in graphs or values.
- Be self-contained in one HTML file with HTML, CSS, and JavaScript combined.
Add brief labels, legends, and explanations for clarity.
🔧 Universal Template
Create an interactive HTML5 simulation (with embedded JavaScript and CSS) about [TOPIC].
The simulation should:
- Be educational, suitable for [AGE/GRADE LEVEL].
- Allow user interaction via sliders, buttons, or checkboxes.
- Include simple visuals (2D or 3D if appropriate).
- Display real-time changes in graphs or values.
- Be self-contained in one HTML file with HTML, CSS, and JavaScript combined.
Add brief labels, legends, and explanations for clarity.
🔧 Universal Template
Create an interactive HTML5 simulation (with embedded JavaScript and CSS) about [TOPIC].
The simulation should:
- Be educational, suitable for [AGE/GRADE LEVEL].
- Allow user interaction via sliders, buttons, or checkboxes.
- Include simple visuals (2D or 3D if appropriate).
- Display real-time changes in graphs or values.
- Be self-contained in one HTML file with HTML, CSS, and JavaScript combined.
Add brief labels, legends, and explanations for clarity.
🔧 Universal Template
Create an interactive HTML5 simulation (with embedded JavaScript and CSS) about [TOPIC].
The simulation should:
- Be educational, suitable for [AGE/GRADE LEVEL].
- Allow user interaction via sliders, buttons, or checkboxes.
- Include simple visuals (2D or 3D if appropriate).
- Display real-time changes in graphs or values.
- Be self-contained in one HTML file with HTML, CSS, and JavaScript combined.
Add brief labels, legends, and explanations for clarity.
🔧 Universal Template
Create an interactive HTML5 simulation (with embedded JavaScript and CSS) about [TOPIC].
The simulation should:
- Be educational, suitable for [AGE/GRADE LEVEL].
- Allow user interaction via sliders, buttons, or checkboxes.
- Include simple visuals (2D or 3D if appropriate).
- Display real-time changes in graphs or values.
- Be self-contained in one HTML file with HTML, CSS, and JavaScript combined.
Add brief labels, legends, and explanations for clarity.
🔧 Universal Template
Create an interactive HTML5 simulation (with embedded JavaScript and CSS) about [TOPIC].
The simulation should:
- Be educational, suitable for [AGE/GRADE LEVEL].
- Allow user interaction via sliders, buttons, or checkboxes.
- Include simple visuals (2D or 3D if appropriate).
- Display real-time changes in graphs or values.
- Be self-contained in one HTML file with HTML, CSS, and JavaScript combined.
Add brief labels, legends, and explanations for clarity.
⚛️ Physics
1. Projectile Motion
Create a simulation showing projectile motion.
Include sliders for launch angle (0°–90°) and initial velocity (0–50 m/s).
Plot the trajectory in real-time and show range, max height, and flight time.
Display velocity components and allow toggling air resistance.
2. Energy in a Pendulum
Create a simulation showing a pendulum swinging.
Display kinetic, potential, and total energy as bar graphs.
Allow user to vary pendulum length and initial angle.
Animate smooth swinging and real-time energy updates.
3. Ohm’s Law Exploration
Create an interactive Ohm’s Law simulation.
Include sliders for resistance (R) and voltage (V).
Display current (I = V/R) and animate electrons moving faster or slower depending on I.
Show a live graph of V vs I.
4. Collisions of Carts
Simulate 1D elastic and inelastic collisions between two carts on a track.
Include sliders for mass and velocity.
Show momentum and kinetic energy before and after.
Visualize with moving carts and vector arrows.
🧪 Chemistry
5. States of Matter
Create an interactive particle model showing solid, liquid, and gas states.
Add temperature slider to control particle speed and spacing.
Display phase transitions with labels (melting, boiling).
6. Reaction Rate Factors
Simulate reaction rate affected by temperature, concentration, and catalyst presence.
Represent molecules as moving circles that collide.
Show reaction count over time.
Include checkboxes for "Increase Temperature" and "Add Catalyst".
7. pH Indicator
Create a pH scale simulation with color changes.
Allow user to slide pH value (0–14) and show corresponding color and acidity/basicity label.
Optionally display [H+] and [OH−] concentration on a logarithmic scale.
🧬 Biology
8. Diffusion Through a Membrane
Create an animation showing diffusion across a semi-permeable membrane.
Include concentration sliders for both sides.
Show random particle motion and gradual equalization.
Display concentration vs time graph.
9. Photosynthesis & Respiration
Simulate photosynthesis and respiration balance in a plant.
Include sliders for light intensity, CO2, and temperature.
Show O2 and CO2 exchange rates dynamically.
Display a bar chart comparing photosynthesis and respiration rates.
10. Human Circulatory System Flow
Create a simple simulation showing blood flow through the heart, lungs, and body.
Include buttons for "Normal," "Exercise," and "Rest" modes.
Show flow speed and oxygenation color changes.
📏 Mathematics
11. Linear Graphs Explorer
Create an interactive coordinate plane.
Allow user to change slope (m) and intercept (c) using sliders.
Plot the line y = mx + c in real time.
Show how changes in m and c affect the line visually.
12. Quadratic Functions
Create an interactive graph for y = ax² + bx + c.
Include sliders for a, b, and c.
Highlight vertex, roots, and axis of symmetry dynamically.
Allow toggling grid and parabola tracing.
13. Pythagoras’ Theorem Visual
Create an interactive right triangle with sliders for sides a and b.
Show square areas on each side and dynamically compute c.
Include the equation a² + b² = c² and label all sides clearly.
🌍 Geography & Environmental Science
14. Carbon Footprint Calculator
Create an interactive simulation to estimate carbon footprint.
Include sliders for transport (km), diet (meat meals/week), and electricity (kWh).
Show total CO₂ output as a bar or pie chart.
Display a comparison to global average.
15. Water Cycle Simulation
Create an animation of the water cycle: evaporation, condensation, precipitation, collection.
Add checkboxes for toggling labels and cycle speed.
Show arrows indicating flow direction.
16. Population Growth
Simulate population growth using exponential and logistic models.
Include sliders for growth rate and carrying capacity.
Plot population vs time graph in real time.
🧠 21CC Skills / AI Literacy
17. Pattern Recognition Game
Create a simulation that shows a sequence of numbers or shapes.
Ask the user to predict the next one.
Provide feedback and track score.
18. Decision-Making Simulator
Create a simple scenario-based game (e.g., energy choice: coal, solar, nuclear).
Each decision affects 3 indicators: cost, environment, and reliability.
Show feedback after each choice using bar meters.
19. AI Classification Explorer
Simulate an AI model sorting shapes (circles, squares, triangles).
Allow the user to train it with examples and test accuracy.
Visualize decision boundaries and misclassified samples.
📚 Bonus: EJS/WebEJS-Specific Prompt
Generate an EJS (Easy JavaScript Simulations) model for [TOPIC].
Include model variables, drawing panels, sliders, and graphs.
Use standard EJS naming conventions:
- _view for GUI
- _model for physics
- _simulation for evolution.
Ensure all components are in one HTML file for easy upload to webEJS.