🎓 Creating a Simple Subtraction Interactive for SLS with Gemini Pro
In today’s classrooms, engaging students with interactive visuals can make abstract math more tangible. This post walks through how we created a simple subtraction interactive using an image, Gemini 2.5 Pro, and SLS-compatible HTML5 packaging.
https://vle.learning.moe.edu.sg/community-gallery/lesson/view/a2f94d26-bd91-4c9e-ab13-f89cadc37164/cover
https://vle.learning.moe.edu.sg/community-gallery/lesson/view/a2f94d26-bd91-4c9e-ab13-f89cadc37164/cover taken from module by JE |
🧮 What It Does
This interactive shows a picture (e.g., apples or objects) and animates the subtraction of 2 items from 5. Students click a button to trigger the removal, and the final expression “5 - 2 = 3” appears—perfect for Primary 1/2 subtraction concepts.
🔧 How It Was Built
Files inside the ZIP:
index.html
: Contains layout structure and buttons.script.js
: Controls the subtraction animation (removing visual elements).styles.css
: Styles layout, buttons, and image positioning.Generated Image.jpeg
: A hand-drawn or AI-generated visual placed in the background.
Created with Gemini 2.5 Pro Prompt:
“Create a simple HTML5 subtraction animation: 5 objects are shown, 2 are removed when clicked, and display '5 - 2 = 3'. Use external JS and CSS. Include a background image.”
Gemini generated the core files, which we then customized by:
- Replacing placeholder visuals with a relevant JPEG.
- Adjusting positions/styles for a child-friendly layout.
📥 Deployment to SLS
- Zip the folder.
- Upload to Student Learning Space using “Upload ZIP (HTML5 package).”
- Embed in a lesson segment to scaffold student interaction.
✨ Why It Works
- Visual & kinesthetic: See and click for subtraction.
- Fast creation: Gemini generates code instantly.
- SLS-ready: Fully compatible and offline-supported.
🧪 Try It Yourself
Download the ZIP and drop it into your SLS module today. Or try a new prompt with Gemini to explore other math operations like addition or multiplication!
About
[SIMU_DESC]
Sample Learning Goals
[text]
For Teachers
[SIMU_TEACHER]
Software Requirements
[SIMU_SWREQ]
Translation
[text]
Research
[text]
Video
[text]
Credits
[SIMU_CREDITS]
Version:
[text]
Other Resources
[text]