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

Subtraction_Animator_20250522.zip Subtraction_Animator_20250522Gemini/

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

1. Zip the folder.
2. Upload to Student Learning Space using “Upload ZIP (HTML5 package).”
3. 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]

 

end faq

{accordionfaq faqid=accordion3 faqclass="lightnessfaq defaulticon headerbackground headerborder contentbackground contentborder round5"}