From Static Image to Interactive Explanator Interactive-Lesson: The Making of an AI-Powered Long Division Tool
Long division can be a daunting challenge for young learners. Its multi-step nature, demand for precision, and abstract structure often make it feel overwhelming—especially when delivered through static worksheets. So how do we transform this complex concept into a fun, hands-on learning experience?
That question sparked the creation of our Interactive Long Division Tool—an engaging, step-by-step resource designed to support Primary 2 students. Today, we're sharing the behind-the-scenes story of how this tool came to life through a unique collaboration between human creativity and artificial intelligence.
The Spark: A Screenshot from the SLS
Every idea starts somewhere. For this one, it began with a screenshot—an image of a long division problem taken from a module on the Singapore Student Learning Space (SLS).
 |
| https://vle.learning.moe.edu.sg/moe-library/lesson/view/4e1d30b9-5561-4d22-8d7c-3f90fb60c864/page/36116136 static picture |
https://vle.learning.moe.edu.sg/moe-library/lesson/view/4e1d30b9-5561-4d22-8d7c-3f90fb60c864/cover
Educator lookang posed a simple but powerful question:
“Can we make this static image come alive?”
The goal was clear—transform a passive picture into an interactive tutorial where students could walk through each stage of the long division process at their own pace.
The First Draft: A Digital Skeleton with Gemini
Armed with the screenshot, we turned to Gemini 2.5 Pro, Google's powerful AI model. The prompt was straightforward:
-
HTML: Build a grid layout to mimic the division setup.
-
CSS: Style the layout to resemble the original screenshot, including the division bracket and formatting.
-
JavaScript: Add logic to calculate and reveal each step of dividing 996 by 6.
Within minutes, Gemini generated a working prototype. The buttons responded, the math was correct, and the grid looked familiar. It was our digital skeleton—technically functional, but not yet intuitive or student-ready.
Iteration and Refinement: Sculpting with Feedback
What followed was a collaborative, human-in-the-loop design process. Tools aren’t built in a flash—they’re shaped through feedback and iteration.
1. Fixing the Reset Logic
First issue?
"The reset button doesn't allow me to change the numbers after I’ve started a problem."
Gemini’s initial logic locked the input fields once a problem began, but didn’t unlock them on reset. Through collaborative debugging, we updated the JavaScript to fully restore input control, distinguishing between start and reset actions.
2. Designing for Primary 2 Learners
Next refinement:
"Can we improve the colors? Make it suitable for a Primary 2 student."
The basic greys and blues worked—but they didn’t delight. With new styling guidance, Gemini refreshed the interface to feature:
-
A light blue background for calmness
-
Warm yellow highlights for active cells (like a highlighter!)
-
Friendly buttons with rounded edges and cheerful colors
3. Adding Accessibility with Text-to-Speech
To enhance accessibility and support diverse learners, we integrated the Web Speech API. A 🔊 “Read Aloud” button was added to automatically voice each instructional prompt, making the experience more inclusive and multi-sensory.
4. Streamlining the Interface
Initially, students could type in text explanations. While helpful, this feature cluttered the layout. Based on user testing, we simplified the interface by hiding the textbox—proving that removing features can sometimes lead to better usability.
 |
| longDivisionGemini./ longDivisionGemini.zip |
 |
| longDivisionGemini./ longDivisionGemini.zip |
 |
| longDivisionGemini./ longDivisionGemini.zip |
 |
| longDivisionGemini./ longDivisionGemini.zip |
 |
| longDivisionGemini./ longDivisionGemini.zip |
 |
| longDivisionGemini./ longDivisionGemini.zip |
 |
| longDivisionGemini./ longDivisionGemini.zip |
|
| longDivisionGemini./ longDivisionGemini.zip |
Final Touches: Going Live
To prepare the tool for public sharing on iwant2study.org, we added:
-
Google Analytics for usage insights
-
Credits to acknowledge the collaborative spirit of the project
-
Code cleanups and bug fixes for a polished release
Conclusion: The Power of Human + AI Collaboration
From a static screenshot to a dynamic, student-friendly simulation, this project shows what’s possible when human insight meets AI generation. Faster iteration, smarter code, and most importantly—a tool that helps young learners conquer long division with confidence.
Credits
-
Concept and Educational Direction: lookang
-
Code & Rapid Prototyping: Gemini 2.5 Pro
🔍 Explore More
Discover other interactive learning tools at iwant2study.org.
Together, let’s reimagine what learning can be.
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]