✅Benefits of using AI
AI tools can automate processes like giving feedback and scaffolding content, and thus increase teacher efficacy. AI tools can also reduce teachers' cognitive load, allowing them to reflect on and design their lessons more intentionally. |
⚠️Dangers of using AI
AI tools have inherent biases that might be hard to detect. These biases can take the form of stereotypes or generalisations. Using AI tools too frequently or broadly could result in overreliance and cognitive atrophy. |
⚖ Balancing the use of AI in classrooms
It is important for the use of AI to be undergirded by strong e-pedagogy, with considerations of the teacher in/over the loop. Think about how technologies like AI can be leveraged to support pedagogical actions (KAT). |
How are our fellow educators leveraging SLS to realise their lesson design?
As you explore, please keep these questions in mind:
- How might the SLS features used enhance student engagement?
- What opportunities do you see for customised learning?
- How could these modules support your school's teaching and learning goals?
Please go to the Resource tab to access the following modules: https://vle.learning.moe.edu.sg/studentgroup/2fb7723f-9be1-4050-b995-bbf23a0dbc71?tab=resources
Level | Subjects/ Modules | Highlights |
Primary | Math | 7 Escape Room Adventure: Mastering Pie Charts This gamified SLS module transforms learning about pie charts into an engaging escape room experience, where students solve challenges on data presentation using numbers, fractions, percentages and degrees to progress through different “rooms” and unlock new levels. https://vle.learning.moe.edu.sg/class-group/lesson/view/0a4b155d-7bcb-4e6b-bc5b-542ad60fda13/cover Teacher 🧑🏫 https://vle.learning.moe.edu.sg/class-group/attempt/0a4b155d-7bcb-4e6b-bc5b-542ad60fda13/cover Student 🧑🎓 |
Science | 8 P5 Cell Explorer Adventure This SLS module helps students to learn about cells i.e. the different parts and functions of a cell, by using both physical and online learning experiences. Rich multimedia learning materials embedded in the lesson and follow-up AfL questions create a more seamless learning experience. https://vle.learning.moe.edu.sg/class-group/lesson/view/adab9025-c470-48d7-a1b1-19cbf0e3047e/cover 🧑🏫 https://vle.learning.moe.edu.sg/class-group/attempt/adab9025-c470-48d7-a1b1-19cbf0e3047e/cover 🧑🎓 | |
Chinese | 3 六年级：第二课《祖孙情》 This SLS module helps students understand the content of the passage through group discussions in a gamified learning environment, where they can unlock collectibles and earn XP to level up. https://vle.learning.moe.edu.sg/class-group/lesson/view/b64fd055-eff4-43f5-9d45-1ae7950c48e2/cover 🧑🏫 https://vle.learning.moe.edu.sg/class-group/attempt/b64fd055-eff4-43f5-9d45-1ae7950c48e2/cover 🧑🎓 | |
Secondary
| E21CC (Critical Thinking; Adaptive Thinking) | 4 E21CC Quest: Exploring Argona-VI This SLS module on E21CC offers an authentic task for students to demonstrate their reasoning and provides customised feedback auto-generated using ShortAnsFA. Students can earn collectibles by completing the module. https://vle.learning.moe.edu.sg/class-group/lesson/view/34ffad50-6598-4424-9af7-694a40b9bfb7/cover 🧑🏫 https://vle.learning.moe.edu.sg/class-group/attempt/34ffad50-6598-4424-9af7-694a40b9bfb7/cover 🧑🎓 |
Practical-based Lesson | 5 Biology Practical: Food Test This module enhances learning through accessible, bite-sized multi-modal instructions and promotes student reflection via self-assessment. It empowers students to track their progress using scaffolds and visual references. Short videos, checklists, hints, and images are employed to foster self-help and engagement, with timely feedback provided through a feedback assistant. https://vle.learning.moe.edu.sg/class-group/lesson/view/e4f3f4e2-f912-41ea-a031-9caad0a82ad3/cover 🧑🏫 https://vle.learning.moe.edu.sg/class-group/attempt/e4f3f4e2-f912-41ea-a031-9caad0a82ad3/cover 🧑🎓 | |
English (Section A to C) | 6 [AST, CTLE & ETD] Sec 3 EL (G3) Unit 3: Artificial Intelligence This SLS module illustrates how whitelisted tools (e.g. mentimeter) can be integrated into SLS thereby widening the tools that teachers can use, that optional differentiated activities can be designed to support diverse learning needs, and how ShortAnsFA can be used to provide feedback on vocabulary instantaneously. https://vle.learning.moe.edu.sg/class-group/lesson/view/1eebb432-e48b-4cd6-b9d4-01a0dd68c389/cover 🧑🏫 https://vle.learning.moe.edu.sg/class-group/attempt/1eebb432-e48b-4cd6-b9d4-01a0dd68c389/cover 🧑🎓 | |
English | 9 Supporting Critical Thinking in Development of Body paragraphs in English Argumentative Writing This module serves as a plug-and-play lesson that demonstrates how critical thinking can be developed and applied when guiding students in writing body paragraph(s) for English argumentative essays. https://vle.learning.moe.edu.sg/class-group/lesson/view/fc5db127-d7b4-45d5-9bb5-fea9cd70dd97/cover 🧑🏫 https://vle.learning.moe.edu.sg/class-group/attempt/fc5db127-d7b4-45d5-9bb5-fea9cd70dd97/cover 🧑🎓 | |
Math | 10 Algebraic Expression Revision [Sec Math] This module supports students in self-directed learning using the Feedback Assistant - Mathematics (FA-Math), which provides step-by-step feedback on their answers as they revise Algebraic Expressions. https://vle.learning.moe.edu.sg/class-group/lesson/view/96c20e75-c756-4570-997e-b79d9cb85d2a/cover 🧑🏫 https://vle.learning.moe.edu.sg/class-group/attempt/96c20e75-c756-4570-997e-b79d9cb85d2a/cover Student 🧑🎓 | |
History | 11 Life under the Japanese Occupation - Daily Life and Propaganda This module helps students understand life during the Japanese Occupation, with ShortAnsFA providing immediate feedback and the Data Assistant analysing student responses to identify key themes or misconceptions, thereby facilitating deeper student discussions. https://vle.learning.moe.edu.sg/class-group/lesson/view/d339e8a8-00f0-4e82-a6aa-99c909e06225/cover 🧑🏫 https://vle.learning.moe.edu.sg/class-group/attempt/d339e8a8-00f0-4e82-a6aa-99c909e06225/cover Student 🧑🎓 | |
Pre-U | Geography - AST | 1 An SLS module which facilitates inquiry-based learning by getting students to investigate why disappearing deltas matter, supported by ITT and ShortAnsFA. Teachers can further leverage on Data Assistant to analyse student responses to identify key themes and/or misconceptions made. https://vle.learning.moe.edu.sg/class-group/lesson/view/0c7b1654-1b56-409d-9994-59caf4717653/cover 🧑🏫 https://vle.learning.moe.edu.sg/class-group/attempt/0c7b1654-1b56-409d-9994-59caf4717653/cover Student 🧑🎓 |
All levels | E-portfolio | 2 This SLS module is a template for how students of all levels can document their work in any subject or student development areas, archive their learning artifacts and track their progress and achievements within an academic year and beyond. https://vle.learning.moe.edu.sg/class-group/lesson/view/301b66a8-9ee3-4c29-82fd-98a1251c4fa3/cover 🧑🏫 https://vle.learning.moe.edu.sg/class-group/attempt/301b66a8-9ee3-4c29-82fd-98a1251c4fa3/cover Student 🧑🎓 |
See
- Share your takeaway(s) after exploring the CG modules.Food for thought:
- How might the SLS features used enhance student engagement?
- What opportunities do you see for customised learning?
- How could these modules support your school's teaching and learning goals?
Think
- What thoughts come to mind when you examine the modules in the Community Gallery?
Wonder
- What questions do you have about the modules you explored?
Authoring Copilot
🚀 What is ACP?
A teacher-friendly AI tool that helps you create digital lessons quickly and easily
Uses Large Language Models (LLMs) to enhance your lesson authoring process
✨ What Can ACP Do?
💡 From Idea to Activity in Seconds
Instantly generate:
Lesson instructions
Multiple-choice, free response, fill-in-the-blanks, error-editing questions
Class discussion prompts
✅ Pick What You Like
Select components you want
Click "Add"
ACP automatically generates and inserts them
🛠️ Full Editing Control
After adding components, you can edit anything using familiar authoring tools
You stay in charge of final content
🧪 More Smart Features
🧾 Quiz Generation from Exams
Upload an old exam paper
ACP converts it into a full quiz instantly
Even generates suggested answers for free response questions
🔄 Regenerate for Variety
Click "Regenerate" to create differentiated versions of the same question
Great for varying student readiness
📚 Advanced Capabilities
📖 Knowledge Base Integration
Upload long text (e.g., a whole textbook chapter)
ACP can:
Generate a summary activity
Then follow with a quiz
PDF and image support coming soon
🎯 Template & Curriculum Customization
Use SLS-aligned templates or your own
Add:
Tags
Content maps
Prompts
Helps ACP generate exactly what you need on the first try
💬 Final Message
ACP is built by teachers for teachers
It’s your co-pilot, not your replacement
Ready to level up your lessons?
👉 Log in to SLS and try ACP today!
ACP is an AI-enabled feature in SLS that supports lesson planning for all subjects and levels by generating a module and its corresponding sections, activities and components based on a teacher's inputs.
https://www.youtube.com/watch?v=Zlt1akZ1HxA
How does ACP enhance teaching and learning?
Recommends curriculum- and pedagogically-aligned activities Suggests lesson activities and assessment items based on tagged learning outcomes on the content map and pedagogical considerations listed by the teacher. | |
Autogenerates components Creates suitable components and suggested activities, providing teachers with a more accessible way to use SLS authoring features. | |
Anchors to a Knowledge Base Generates more customised lesson activities and assessment items by anchoring on a Knowledge Base that is appended by the teacher. |
Module -Section - Activity
🧱 1. Start a New Module | |
Steps
| |
📝 2. Fill in Module Details | |
Steps
| What to type (Example)
b. In this topic, students will learn to find a percentage part of a whole and solve up to 2-step word problems involving percentage. Module should build on prior knowledge of fractions, decimals, multiplication, expressing a part of a whole as a percentage. Deepen students' understanding through visual diagrams such as 100-square grids and real-life contexts (e.g. discounts, interest rates, GST) h. There should be two sections. For the first section, learning activities should facilitate an acquisition learning experience for students to study and compare information to identify patterns and connections to deepen their understanding of concepts. They should For the second section, learning activties should facilitate an inquiry learning experience for students to work collaboratively in groups. Students should and |
⚙️ 3. Generate Module Plan | |
Steps
| |
📚 4. Generate Activities in a Section | |
Steps
| What to type (Example) d. Generate a series of activities and success criteria based on the learning outcomes and include these details in the section notes. Success crtiera should be specific, manageable, assessable, and written in student-friendly language, e.g., "I can find percentage part of a whole". As the profile of the students are high ability, activties should stretch them and challenge their critical thinking and problem-solving skills. |
⚡ 5. Generate Activities | |
Steps
| |
🧩 6. Generate Components within an Activity | |
Steps
| |
✅ 7. Finalize | |
Steps
| |
Additional Resource
[SDL- Optional]
Quiz
🤖 Automating SLS Quiz Creation with ACP + TagUI (RPA)
🛠️ Tools Used:
Authoring Co-Pilot (ACP) – SLS’s AI-powered lesson builder
TagUI – Robotic Process Automation (RPA) tool for automating browser actions
🧩 Steps to Automate the Process
1️⃣ Launch TagUI Script
Open terminal and type:
tagui filenamePress Enter to start the automation
Script launches browser and logs in (auto-login if credentials preconfigured)
2️⃣ Open Draft Lessons
Navigate to Manage Module
Click on a draft lesson to view its contents
Check if it needs updating
3️⃣ Copy Content from Worksheet
Click Print-Friendly Worksheet
Press
Ctrl+A(select all) andCtrl+C(copy)Return to your open TagUI browser tab
4️⃣ Create a New Quiz
In the last activity section, click New → Quiz
Update:
Quiz title
Instructions for ACP
5️⃣ Customize Quiz Instructions
Specify requirements:
e.g., 5 MCQs (4 options, 1 correct)
2 short answer questions focused on real-life applications
Optional: Add instructions for acceptable answers
6️⃣ Paste Knowledge Base
Once quiz template is ready:
Paste copied content with
Ctrl+Vinto Knowledge BaseClick Add
Wait ~30 seconds for AI to generate quiz
7️⃣ Review and Edit
Ensure:
MCQs meet the format
Free-response questions are clear and thoughtful
Marking scheme is complete and includes:
Explanations
Real-life examples
8️⃣ Fix LaTeX Display Issues
For special characters or math:
Use
$$ delimiters where needed
Manually fix any formatting problems
9️⃣ Finalize and Continue
Click Done to complete quiz
TagUI will auto-click to approve the lesson
Script moves to next draft/unpublished lesson to repeat the process
🔄 Notes:
This process can be done manually if preferred
For automation, check the GitHub script for TagUI setup
Can be extended to use other RPA tools like UiPath or Playwright
💡 Final Thought:
This hybrid use of AI + RPA makes SLS lesson and quiz creation faster, more scalable, and less repetitive—freeing up teachers to focus on designing meaningful learning experiences.
My current recommendation is 5 MCQ and 2 short answer feedback with Short Assistant Assistant turn on manually, it is not possible to ask ACP to turn on.
https://www.youtube.com/watch?v=bZPPBLNthDM
Additional Resources
Next, we will explore how AI can assist us to create a Quiz.
The following videos explain how to design assessments items using SLS using ACP:
Upload Media as virtual lab for active learning pedagogy.
🧩 Uploading Interactive HTML5 Content in SLS
1️⃣ Prepare Your HTML5 Content
Ensure Compatibility:
Use HTML5, CSS, and client-side JavaScript only.
Avoid external libraries, including font libraries, to maintain self-containment.
Ensure all necessary WebGL libraries are included in the root folder if required.
Organize Files:
Place all related files in a single folder.
Ensure the main entry file is named
index.html,it must be this name only, SLS does not allow pointing to other file as launching file.
Create a ZIP Archive:
Select all files within your content folder.
Compress them into a ZIP file while inside the folder, DO NOT zip the folder. You can go to https://sg.iwant2study.org/ospsg/index.php/translations/1253-file-upload-zip-app2 and use it to correct the errors, it will fix the issues with incorrectly zipped file.
2️⃣ Upload the HTML5 ZIP File to SLS
Access the Module Editor:
Log in to SLS.
Navigate to "My Drive" > "Owned by me".
Click "Create New" and select "Module".
Add a New Activity:
Click “Add New” and choose an appropriate activity type.
Insert the HTML5 Content:
In the Component Bar, hover over Text/Media and select "File from Device".
Alternatively, within the Rich Text Editor, click the Add Media icon (paperclip) and choose "Upload File".
Upload the previously created ZIP file by dragging it into the upload area or selecting it via the file manager.
Click "Upload" to initiate the process.
3️⃣ Configure and Finalize
Set Display Options:
After uploading, you can choose to "Allow Download" if you want students to have the option to download the resource.
For MOE library, the usual upload to RMS continues to be required.
Add Metadata:
Provide relevant keywords to enhance searchability.
Click "Agree/Confirm" to finalize the upload.
Verify Integration:
Ensure the interactive content is embedded correctly within the activity.
Preview the lesson to confirm that the resource functions as intended.
Note: The maximum file size for HTML5 content uploads in SLS is 500 MB. Ensure your content adheres to this limit.
https://www.youtube.com/watch?v=utVAtgA2t68
- Simulation Embedding: The SLS allows embedding simulations directly into webpages using an iframe tag. This makes it easy to add interactive elements to online learning platforms.
- SLS Integration: The SLS is aligned with Singapore's national educational initiatives.
- Interactive Content: The SLS supports embedding interactive simulations and tools to make lessons more engaging. Easy JavaScript Simulations (EJSS) can be integrated to add virtual science labs, digital manipulatives, and games.
Embed Whitelisted Websites as Virtual simulations from https://iwant2study.org/lookangejss/02_newtonianmechanics_4massweightdensity/ejss_model_buoyancycase/index.html
Integrated App as Virtual lab with Data analytics plays a significant role in physics education, particularly in understanding experimental results. By analysing data collected from experiments, students can identify patterns, make predictions, and draw conclusions. Tools such as integrated apps can facilitate this process, allowing students to visualise data and enhance their analytical skills. Incorporating data analytics into physics lessons not only aids in comprehension but also prepares students for future scientific endeavours.
In the Singapore Student Learning Space (SLS), the integration of Easy JavaScript Simulation (EJSS) Data Analytics via the Learning Tools Interoperability (LTI) app enhances teaching by providing detailed insights into student interactions with simulations.
Key Features:
Class Setup:
Teachers can assign specific modules to groups of students within SLS as assignment, for this EJS app to work.
In a typical class configuration, students interact with simulations, and their performance data is automatically collected.
Teachers access this data through analytics dashboards to monitor and evaluate student progress.
Data Analytics Dashboard:
Accessible within the assigned lesson, the dashboard presents comprehensive analytics on student interactions.
Features include sortable student names, online session counts, activity completion statuses, and detailed question-by-question performance metrics.
Tooltips provide insights into students' thought processes by displaying their answer attempts, highlighting patterns such as consistent underestimation.
Enhanced Monitoring:
The system offers a heatmap-style overview, similar to existing SLS monitoring tools, enabling teachers to quickly identify areas where students struggle.
By analyzing sequential actions leading to specific outcomes, educators can tailor feedback and interventions effectively.
This integration empowers educators to make data-driven decisions, fostering a more personalized and effective learning environment within SLS.
https://www.youtube.com/watch?v=EA13VYt7cZ8
Using HTML5 as a Pedagogically Sound Tool: A KAT-Aligned Perspective
HTML5 is more than just the standard for creating websites—it is a powerful and flexible platform that enables the development of interactive, engaging, and accessible learning experiences. When applied thoughtfully, HTML5 can serve as a pedagogically sound tool, aligning with the 8 Key Applications of Technology (KAT) that guide the effective use of EdTech in teaching and learning.
1. Assessment for Learning
HTML5 enables the creation of real-time, interactive formative assessments such as drag-and-drop quizzes, matching activities, click-and-reveal explanations, and simulations that track user actions. These can be embedded directly within Student Learning Space (SLS) modules, offering immediate feedback and performance data to both students and teachers. Tools like xAPI can even log student responses for further analytics. This supports responsive teaching and targeted intervention.
2. Conceptual Change
HTML5 visualizations and simulations help make abstract concepts concrete. Whether it's simulating the electric field in physics, the growth of populations in geography, or molecule interaction in chemistry, learners can manipulate variables and observe outcomes directly. These interactive models challenge misconceptions and encourage active construction of knowledge, key for achieving deep conceptual understanding.
3. Differentiation
HTML5 activities can be designed with multiple pathways, providing tiered levels of challenge, optional hints, language support, or media alternatives (e.g., text-to-speech, subtitles, diagrams). Students can engage at their own pace and revisit activities as needed. This flexibility empowers teachers to meet diverse learning needs within the same digital environment.
4. Facilitating Learning Together
HTML5 tools can be embedded in collaborative platforms (e.g., SLS forums, Google Docs with HTML embeds, or H5P) to facilitate co-construction of knowledge. Learners can share, annotate, or co-analyze data, discuss findings from simulations, or even collaboratively design investigations using shared HTML5 spaces. This supports 21st-century competencies like communication, collaboration, and critical thinking.
5. Developing Metacognition
HTML5 interactives can include self-check prompts, reflection pop-ups, or progress indicators that make the learning process visible. Learners can be asked to predict outcomes, reflect on their strategies, or rate their confidence before and after completing tasks. This encourages metacognitive regulation and self-awareness in learning.
6. Increase Motivation (Engagement)
HTML5 allows for visually rich, gamified, and exploratory experiences that can increase student interest and ownership. Features like animations, dynamic scoring, and badges can make learning feel like play. Interactive challenges or sandbox environments give learners agency and autonomy, which are strong intrinsic motivators.
7. Personalization
With HTML5, content can be adaptive or learner-driven, allowing students to choose how they want to explore a topic (e.g., through videos, simulations, or reading), or what order to tackle tasks in. HTML5 tools can store user preferences, enabling tailored learning experiences. Personalization through design increases engagement, relevance, and effectiveness.
8. Scaffolding for Learning
HTML5 supports just-in-time scaffolding through tooltips, progressive disclosure of hints, guided steps, or decision trees. Learners can access additional help only when needed, preventing cognitive overload. Teachers can also embed anchor prompts or reminders to nudge students toward deeper thinking, all of which can be faded gradually as learners gain confidence.
Conclusion
HTML5 stands out as a pedagogically versatile technology that aligns with the full spectrum of KAT applications. By leveraging HTML5's interactive, flexible, and data-capable features, educators can design learning experiences that are engaging, equitable, and effective—supporting both teaching excellence and student empowerment within platforms like SLS.
20240924 Sciences Branch EdTech team sharing https://vle.learning.moe.edu.sg/community-gallery/lesson/view/50c7e7dd-5b34-4ea9-8c2f-e21f115480ba/cover
Recommended Models:
- Google Gemini 2.5 Pro AIStudio https://aistudio.google.com/prompts/new_chat can write 1000+ lines of code, BEST and FREE, more technical.
- Google Gemini 2.5 Pro App https://gemini.google.com/app/ select Canvas, cannot write > 1000+ lines of code, FREE but limited tries, very user friendly, can Canvas Preview, download files.
- DeepSeek- R1: FREE https://chat.deepseek.com/ select R1 for reasoning model, ocassionally will timeout
- Anthropic Claude 3.7: FREE but limited tries https://claude.ai/
- OpenAI GPT-o3: PAID https://chatgpt.com/
- Qwen3-Max FREE https://chat.qwenlm.ai/ looks promising but not great for physics
- https://weelookang.blogspot.com/2025/01/crafting-polished-interactive.html use SLS picture as knowledge base
- https://weelookang.blogspot.com/2025/02/a-theoretical-and-computational.html use example publicly HTML as knowledge base
- https://weelookang.blogspot.com/2025/02/revitalizing-moe-library-interactives.html use old MOE interactive as knowledge base
- https://weelookang.blogspot.com/2025/01/exploring-electric-fields-like-never.html use example on publicly HTML as knowledge base
- https://weelookang.blogspot.com/2025/01/bringing-ejs-java-based-magnetic-bar.html use EJS source code *.xml as knowledge base
- https://weelookang.blogspot.com/2025/01/exploring-magnetic-fields-with-bar.html use example publicly HTML as knowledge base
- https://weelookang.blogspot.com/2025/02/math-battle-add-or-multiply-fun.html use other AI's partial working HTML as knowledge base
Insight gained?
Step 5: Interactive Thinking Tool 2 as Present and Discuss
- Share your simulation with the class in a short presentation.
- Explain:
- How students/teachers can use it.
- Any challenges you faced in creating it.
🎓 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!
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.
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.
Geoboard Area Explorer by ChatGPT, Cline Bot and Claude 3.7
🟡 Geoboard Area Explorer – A Hands-on Digital Tool for Learning Geometry
Link to explore: https://iwant2study.org/lookangejss/math/AI/Geoboard_Area_Explorer_SLS_Offline/
🧠 What is it?
The Geoboard Area Explorer is a free, interactive simulation that brings the classic geoboard into the digital world. Designed by Theresa and Lookang, it empowers students to explore geometric area concepts through virtual hands-on learning — especially useful in the Singapore Student Learning Space (SLS) or during offline access.
✨ Key Features
🟩 Interactive 10x10 Grid – Drag and connect pegs with lines to form shapes.
📐 Auto Area Calculation – The app calculates area instantly when shapes are created.
🧰 Simple Tools – Add, delete, or reset shapes easily.
🎨 Color Options – Use colors to differentiate or compare multiple shapes.
📴 Works Offline – Great for low-connectivity environments and SLS download.
🎓 How It Supports Learning
Reinforces key geometry concepts visually and interactively.
Encourages exploration of how area changes with shape.
Suitable for teacher-led demonstrations or student self-directed activities.
Ideal for formative assessment or hands-on math tasks.
💡 Use Cases in the Classroom
Visualize and calculate areas of rectangles, triangles, and irregular polygons.
Pose challenges like "Make a shape with an area of 6 square units".
Compare shapes with equal areas but different forms.
Encourage inquiry-based learning with prompts like “What happens when you move this peg?”
🔗 Try It Now
👉 Geoboard Area Explorer (SLS Offline Version)
This tool helps students build geometric intuition by "seeing and doing", not just memorizing formulas. It’s a perfect blend of interactivity, clarity, and accessibility for modern classrooms.
🚀 Building the "Fun Function Machine": An AI-Powered Journey into Interactive Learning
Have you ever wanted to turn a simple math function into something dynamic, animated, and fun? That’s exactly what I set out to do—and thanks to the help of AI, this journey was faster, smarter, and a whole lot more exciting. This post unpacks how I built the “Fun Function Machine,” an HTML5 interactive that lets students guess the rule based on inputs and outputs—like a digital twist on the classic function machine puzzle.
🧠 The Spark: From Idea to Interactive
The idea was straightforward:
Create a web-based tool where students input numbers, watch them animate through a “machine,” and observe the output. Based on this, they would deduce the hidden rule. It’s a staple in early algebra and pattern recognition tasks—but my goal was to make it engaging, visual, and responsive enough for the Student Learning Space (SLS).
But here's the twist: I didn’t build it alone. I collaborated with AI models like ChatGPT and Gemini to co-design, debug, style, and optimize every line of code.
🤖 Co-Coding with AI
Instead of starting from scratch, I used AI to scaffold the architecture:
HTML layout for clean structure
CSS for responsive design and playful theming (hello Comic Sans and cheerful buttons!)
JavaScript to animate the number blocks, apply function rules, and manage interactivity
What would’ve taken days of tedious trial-and-error became a rapid, iterative flow. I’d prompt the AI with things like:
“Add more variation in the function rules, like squaring and cubing.”
or
“Make the animation smoother, and give feedback if students guess correctly.”
Within seconds, the code updated. Not always perfect, but good enough to test, tweak, and expand upon.
✨ Key Features (Powered by AI Collaboration)
🎲 Random Rule Generator: Functions like
x + 1,x * 2 + 1,x², andx³appear randomly.🧱 Animated Blocks: Numbers flow through a visually styled machine, giving students a feel of "seeing the math happen."
✍️ Free Text Guessing: Students can type in rules in multiple formats (e.g.,
x*2,2x,double), and the system uses AI-generated pattern matching logic to interpret responses.🧠 Immediate Feedback: Correct guesses increase your score; wrong guesses prompt reflection.
📱 Mobile-Friendly Design: With responsive CSS, it works well on phones and tablets—perfect for SLS.
💡 What AI Actually Helped Me Do
Here’s a breakdown of what AI accelerated:
| Task | Time Saved | Notes |
|---|---|---|
| Layout & Styling | ⏱️ Hours | AI helped choose color schemes, button spacing, and responsiveness. |
| JavaScript Logic | 🧠 Days | From input handling to function matching, it debugged and offered pattern ideas. |
| Copywriting | ✍️ Minutes | Prompts like “rewrite the feedback message to be more encouraging” saved mental energy. |
| Troubleshooting | 🧩 Massive | It found logic bugs and suggested better function structure on-the-fly. |
🔁 From Static to Interactive, in One File
One of my goals was portability—especially for uploading to learning platforms like SLS. That meant:
No external libraries
All-in-one
.htmlfileFast load time
AI helped streamline everything into a single self-contained HTML page, ready for embedding or sharing.
📚 Beyond the Machine
This isn’t just about one interactive. It’s a proof-of-concept for AI as a creative coding partner. Whether you’re building simulations for physics, games for grammar, or tools for chemistry—AI can accelerate your vision.
I now routinely co-build with AI, treating it less like a chatbot and more like an intern who’s surprisingly good at front-end logic and style sheets.
🔗 Try It Yourself
Explore the Fun Function Machine:
👉 [Insert Your Hosted Link Herehttps://sg.iwant2study.org/ospsg/index.php/interactive-resources/mathematics" target="_new" rel="noopener" class="" style="color: rgb(0, 158, 184); font-family: "Helvetica Neue Light", HelveticaNeue-Light, "Helvetica Neue", Helvetica, Arial, sans-serif; outline: none; text-decoration: none; transition: color 0.3s; display: inline;" data-end="4291" data-start="4135">https://sg.iwant2study.org/ospsg/index.php/interactive-resources/mathematics
❤️ Credits
Created with guidance from:
ChatGPT & Gemini (for code scaffolding and logic suggestions)
The vibrant OSP community (for inspiration)
My curiosity (for not settling on boring worksheets 😄)
What’s Next?
I’m looking to add difficulty levels, hints, and maybe even AI-generated feedback per student attempt. The possibilities are wide open—and the code is ready to grow.
🧠 Visualizing Fraction Subtraction with Animated Overlays
Learning how to subtract fractions can be tricky for many students—especially when the denominators are different. That's why we created this interactive tool to bring abstract fraction subtraction to life through colorful animated overlays and intuitive visual aids.
🎯 What Does This Interactive Do?
This interactive allows users to select two fractions and visualize the subtraction process step by step using circle diagrams:
Top Circle (Red): Represents the first fraction (minuend).
Bottom Circle (Green): Represents the second fraction (subtrahend).
An overlay animation gradually transforms both fractions to a common denominator, then shows how the subtrahend is subtracted from the minuend.
The final answer is shown as a simplified fraction, with the remaining portion highlighted in blue.
✍️ How To Use
Choose Two Fractions: Use the dropdowns to select numerators and denominators for each fraction.
Click “Play”: Watch as the interactive animates the subtraction process in four clear stages:
Denominator conversion to a common base
Overlay subtraction of the green portion
Visual removal of the green part from the red
Reveal of the final blue result
Reset Anytime: The “Reset” button lets you try different combinations instantly.
💡 Tip: Make sure the first fraction is larger than the second to avoid negative results.
🔍 Why This Matters in Math Education
Understanding fraction subtraction often involves rote rules without true conceptual understanding. This tool bridges that gap by:
Encouraging visual reasoning
Making equivalent fractions and common denominators intuitive
Providing animated transitions to show the logic behind each step
Offering immediate feedback if an invalid operation is attempted
📚 Try It in the Classroom
Teachers can use this tool to:
Introduce fraction subtraction visually before teaching algorithms
Reinforce concepts with real-time interactivity
Challenge students with custom examples
Differentiate learning with self-paced exploration
✅ Built With
This HTML5 interactive is crafted using native JavaScript, Canvas API, and responsive CSS3. It is lightweight, mobile-friendly, and integrates easily with any learning management system (LMS) or virtual classroom.
🔗 Access the interactive directly here:
👉 Interactive Fraction Subtraction Tool
📩 Created by weelookang@gmail.com
🔧 Powered by Gemini 2.5 Pro https://g.co/gemini/share/cfec265f8b1b
Prompt Used:
create a fully interactive and realistic simulation using only HTML, CSS, and JavaScript, all within a single self-contained HTML file. The simulation should:
Model a system with correct math concept relevant to the chosen topic of fraction subtract another fraction with answers revealed at the end.
Display key variables (e.g., time, speed, distance, etc.) and allow user interaction.
Include interactive controls such as Play, Pause, Step, and Reset.
Provide meaningful visualizations, or any representations that support conceptual understanding.
Use clear labels to help users interpret what they see on screen.
User Interface Guidelines:
All control buttons should be placed at the top of the interface, above the main visualization panel.
Layout must maximize the use of screen space, especially vertical space, by:
Hiding page titles, browser margins, and any non-essential UI.
Ensuring content fills the display area cleanly and intuitively.
Platform and Device Compatibility:
create The HTML file must run entirely offline, without any external libraries, CDNs, or internet access.
It must be compatible with Learning Management Systems (LMS) like Singapore’s Student Learning Space (SLS).
Ensure it fits well within an iframe environment, using 100% width and 90% height, with no scrolling required.
Design must be fully responsive, adapting smoothly across both desktop and mobile devices.
Use only basic CSS (inline-flex), avoiding external stylesheets or frameworks.
Let your students see the math—and make subtracting fractions a visually engaging experience! 🟰📉
Master Prompt by Gemini 2.5 Pro
Master Prompt: Interactive Educational HTML/CSS/JS Tool
Goal: Generate a single, self-contained HTML file (index.html) containing an interactive educational tool on the specified topic. The tool should include HTML structure, CSS styling (using Tailwind CSS via CDN), and vanilla JavaScript logic.
1. Topic & Core Concept:
Topic:
[Specify the educational topic clearly, e.g., Fraction Addition, Projectile Motion, Simple Circuit Building, Balancing Chemical Equations, Photosynthesis Processhttps://unpkg.com/@tailwindcss/browser@4">;</script>Use the "Inter" font family for the body.
Apply Tailwind utility classes extensively for all styling (layout, spacing, colors, typography, borders).
Ensure a clean, modern, and aesthetically pleasing look.
Use rounded corners on elements like buttons, inputs, and containers.
Make the UI responsive using Tailwind's responsive modifiers (e.g.,
md:,lg:). The visualization area should adapt gracefully to different screen sizes.Center the main content/visualization area.
Icons (Optional): Use
lucide-staticicons (loaded via CDN image URLs or font) for UI elements like buttons if appropriate. Verify icon availability.Feedback Display: Clearly display results, error messages (use a styled
div, neveralert()), instructions, and quiz feedback/scores in designated areas.
5. JavaScript Logic:
Structure: Use vanilla JavaScript within
<script>tags at the end of the<body>.Functionality: Implement all logic for:
Handling user input from controls.
Switching between modes (updating UI visibility and state).
Performing necessary calculations or simulation steps based on the topic.
Updating the visualization (drawing on Canvas, manipulating SVG/DOM).
Handling animations (using
requestAnimationFrame).Validating user input and providing clear error messages.
Generating quiz questions and checking answers.
Managing application state (current mode, input values, quiz progress, score).
Code Quality:
Write well-commented code, explaining functions, logic, and variables.
Use meaningful variable and function names.
Separate concerns where possible (e.g., distinct functions for drawing, calculation, UI updates).
Include basic error handling (e.g., prevent division by zero, handle invalid inputs gracefully).
Ensure the visualization resizes or adapts correctly when the browser window is resized.
6. Output:
Produce a single, complete HTML file (
index.html) that includes the HTML structure, Tailwind CSS (via CDN), and all necessary JavaScript logic.The file should be immediately runnable by opening it in a web browser.
No external CSS or JS files.
No placeholders (e.g.,
...or// implementation needed). Provide the full implementation.
Example Usage (for the Fraction Subtraction interactive):
Topic: Fraction Subtraction
Core Concept: Visualizing subtraction of fractions
a/b - c/dby finding a common denominator, showing equivalent fractions, and removing the second fraction's parts from the first. Ensurea/b >= c/d.Target Audience: Middle School Math
Modes: Interactive (select fractions, click Play) AND Quiz (10 random problems, input answer, check, score).
Visualization: Method: HTML Canvas. Representation: Two circles initially showing
a/b(red) andc/d(green). Animation: Convert both to common denominator segments, overlayc/dontoa/b, remove overlay, show result(ad-bc)/bd(blue). Simplify result numerically.UI: Controls: Mode toggle,
selectdropdowns for numerators/denominators (interactive),input[type=number]for quiz answer, Play/Reset/Check/Next/Restart buttons. Layout: Controls top, two Canvas elements side-by-side, feedback text below canvases. Styling: Tailwind CSS.JS Logic: Implement GCD, LCM, fraction simplification, input validation (no negative result, valid fractions), Canvas drawing functions (circles, segments, filling), animation loop (
requestAnimationFrame), state management, quiz logic.
🚀 Why You Should Use Gemini 2.5 Pro in AI Studio
If you've ever tried to build a working prototype with over 1,000 lines of code in an AI-powered development environment, you’ve probably hit a wall—especially with many general-purpose AI models. But there's one powerful exception that stands out: Gemini 2.5 Pro in AI Studio.
After extensive hands-on testing across different platforms, it's clear: Gemini 2.5 Pro in AI Studio offers unmatched performance for large-scale coding projects.
🔧 Gemini 2.5 Pro in AI Studio Handles Large Codebases Smoothly
One of the most impressive capabilities of Gemini 2.5 Pro in AI Studio is that it works seamlessly even with 1500+ lines of code. Whether you're generating, editing, or debugging complex logic, this model doesn't flinch. It stays fast, responsive, and accurate—even when many other tools struggle or crash.
For developers building simulations, multi-file applications, or interactive platforms (like HTML/JS simulations or AI-powered automation tools), this is a game-changer. No more splitting prompts, manual chunking, or dealing with truncation errors.
⚠️ Gemini Pro (Standard App) Has Its Limits
While the standard Gemini Pro is decent for basic scripting or smaller logic tasks, it starts to show major limitations around 1,000 lines of code. Beyond that, you often encounter vague error messages, unresponsive behavior, or broken code completions.
If you're working on serious projects or planning to scale your codebase, the standard version just doesn’t cut it. It’s a useful tool for concept drafts but not for production-level prototypes.
| https://gemini.google.com/u/1/app/c3748a04b4ed502e?_gl=1*1xn0m4h*_gcl_au*NjEzNzQyNjgxLjE3Mzc1MjMyNjg. it didn't complete the code generation with error 11160585753:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received |
🤖 Trae.ai with Claude 3.7 Falls Short for Working Prototypes
Tried using Claude 3.7 via Trae.ai? While Claude 3.7 is known for reasoning and structured thinking, in this context it was unable to produce a correct, working prototype. It often misunderstood code contexts or generated syntactically correct but logically flawed output—especially with complex JavaScript-HTML-CSS simulations.
Great for brainstorming? Sure. But for building? It lags behind Gemini 2.5 Pro in a significant way.
✅ Summary: Why Gemini 2.5 Pro in AI Studio Wins
| Feature | Gemini 2.5 Pro (AI Studio) | Gemini Pro (Standard) | Claude 3.7 (Trae.ai) |
|---|---|---|---|
| Handles 1000+ lines of code | ✅ Yes, up to 1500+ | ❌ fails if 1000+ lines of code | ❌ Quiz Prototype failed |
| Speed & responsiveness | 🚀 Fast | ⚠️ Slows with size | 🐢 Inconsistent |
| Code understanding | ✅ Excellent | ✅ Good | ⚠️ Logic errors |
| Production-ready output | ✅ Yes | ❌ Limited to less than 1000 lines code | ❌ Incomplete |
🧪 Final Thoughts
If you're an educator, developer, or creative coder working on large-scale HTML/JS/CSS simulations, or just want a reliable AI assistant that can handle real-world-sized code, don’t settle for less.
Choose Gemini 2.5 Pro in AI Studio. It’s not just more powerful—it’s more capable, consistent, and production-ready.
🧮 Interactive Multiples of 9 – Learn Math Visually, Musically, and Interactively!
The Interactive Multiples of 9 is a modern learning tool that turns skip-counting into a rhythmic, visual, and hands-on experience. Designed especially for students exploring multiplication patterns, this interactive helps learners discover what it means to multiply by 9 — with a sprinkle of dinosaurs, music, and motion!
🔑 Key Features at a Glance
Live Equation Display: As you click, the equation
n × 9 = ?updates dynamically with color-coded highlights.Emoji Grouping: Groups of 9 fruits (🍎🍌🍇 etc.) appear visually in clusters, helping learners grasp the concept of repeated addition and multiplication.
Audio-Synced Learning: The “Nine Times Magic” song auto-plays with built-in sync points — visuals change in time with the music!
Interactive Controls:
🟦 Next Multiple – Show the next group manually
🔴 Reset – Start over from zero
🎵 Play Song – Let the music guide your learning, hands-free!
Timer Display: Real-time sync with the music timer keeps learners aware of timing and pacing.
Responsive Design: Works beautifully on desktop and mobile — even adjusts layout for small screens.
🧠 Why This Works for Learners
1. Concrete Representation of Multiplication
Instead of abstract numbers, students see multiplication as repeated groups — making math visual and tactile. Each group of 9 becomes a mini-pack of familiar emojis (like 🍓, 🍒, 🍍), reinforcing the idea of 9 items per group.
2. Rhythmic Anchoring through Music
The background music (created using Riffusion + Suno AI tools) is synced to specific timestamps so learners internalize skip-counting through rhythm and melody — a proven method to improve recall.
3. Multisensory Learning
👀 Visual: Real-time equation, color-coded numbers, animated group appearance
👂 Auditory: Catchy multiplication song in the background
👉 Kinesthetic: Manual interaction via buttons helps reinforce memory through engagement
4. Flexible Use in Classrooms or at Home
| Mode | Use Case |
|---|---|
| 🎒 Teacher demo | Project to show groupings and patterns |
| 🧑🎓 Self-practice | Let students click through and explore |
| 🎧 Rhythm training | Use “Play Song” for guided counting |
🛠️ Built with Modern Tech (and AI!)
This interactive was crafted using:
HTML5, CSS3, and JavaScript for fluid animation, layout, and interaction
Responsive CSS for full mobile support
Emoji logic arrays for visual rendering
Audio sync logic using
timeupdateevents and timestampedsyncPointsAnimated transitions via
@keyframes grow-infor engaging entry effects
💡 Created Using:
Gemini Pro 2.5, Trae AI, Cline Code Assist, Flash AI, and Riffusion/Suno-generated music
🔗 Explore More
Made by lookang, this tool is part of a wider collection of math interactives hosted at:
Math Battle: Add or Multiply? – A Fun, Interactive Math Game for Young Learners
Mathematics can sometimes feel intimidating for young students, but learning math doesn’t have to be a chore. Imagine a game where numbers come to life, and students get to decide whether to add or multiply them to win a friendly battle. Math Battle: Add or Multiply? is exactly that—a vibrant, engaging game designed to help kids practice arithmetic in a playful setting. And the best part? It’s been enhanced by GPT03 mini, ensuring a smooth and creative learning experience.
What Is Math Battle: Add or Multiply?
Math Battle is an educational game where two players face off using a sequence of numbers and operators. The rules are simple:
- Player 1 wins if the final result is odd.
- Player 2 wins if the final result is even.
Players take turns selecting either an addition (+) or multiplication (*) operator between the numbers. Once every operator is chosen, the game calculates the result following the proper order of operations—multiplication is done before addition.
How Does the Game Work?
1. Choose Your Difficulty Level
The game offers various difficulty levels that change the range of numbers used. For instance, you can select:
- Level 1 (1-6)
- Level 2 (1-8)
- Level 3 (1-10)
- Or even options using only even or odd numbers
This flexibility lets teachers or parents tailor the challenge to the student’s comfort level.
2. Build Your Expression
Once the difficulty is set, the game board displays a series of numbers with drop-down boxes (combo boxes) in between. Instead of typing in an operator, students choose from a pre-set list of options (+ or *). This approach not only minimizes mistakes but also reinforces the correct use of mathematical symbols.
3. Learn Through Play
As players select operators, the game alternates turns—promoting fair play and keeping everyone engaged. When all operators are in place, clicking the Compute button evaluates the expression. A fun confetti effect appears on screen to celebrate the moment, adding a festive touch to the learning process!
4. Example of a Game Round
Consider a simple round where the difficulty is set to Level 1 (numbers 1–6) and the numbers are 2, 3, 4:
- Player 1 might choose the + operator between 2 and 3.
- Player 2 then picks the * operator between 3 and 4.
The expression becomes 2 + 3 * 4. According to the order of operations, multiplication happens first (3 * 4 = 12), then addition (2 + 12 = 14). Since 14 is even, Player 2 wins!
Why Is This Game Useful for Learning?
Engaging and Interactive
Math Battle transforms traditional arithmetic drills into a game-like environment. The visual appeal, animated effects, and friendly competition make math lessons enjoyable rather than daunting. Young students can practice addition and multiplication in a stress-free setting, encouraging them to explore numbers without fear of mistakes.
Reinforces the Order of Operations
Understanding that multiplication is performed before addition is a fundamental math concept. By building arithmetic expressions and seeing the outcome of the order of operations in real-time, students reinforce this essential skill naturally.
Promotes Critical Thinking and Decision-Making
Each move in Math Battle requires a decision that affects the final outcome. As students decide which operator to use, they practice critical thinking and learn the consequences of their choices—skills that are valuable both in and out of the classroom.
Enhanced by GPT03 Mini
This game isn’t just built on standard web technologies—it’s been enhanced by GPT03 mini. This enhancement means that the game has benefited from innovative ideas and optimizations provided by GPT03 mini’s creative approach to educational tools. The result is a smoother, more engaging experience for young learners, combining technology and pedagogy in a unique way.
In Conclusion
Math Battle: Add or Multiply? is more than just a game—it’s a powerful learning tool that brings arithmetic to life for young students. By making math interactive and fun, it encourages learning through play, fosters critical thinking, and reinforces core math skills such as the order of operations. And with the enhancements provided by GPT03 mini, the game offers an experience that’s as innovative as it is educational.
Whether you’re a teacher, a parent, or a student looking for a new way to enjoy math, Math Battle is sure to make arithmetic exciting and memorable.
Credits: theresa and lookang (GPT-o3mini enhanced)
Create a single HTML file that contains embedded CSS and JavaScript. The file should implement an interactive Chinese word learning game.
The game should display a Chinese word and provide four multiple-choice options for its Pinyin translation.
Key features:
- Multiple Choice: Present four buttons, one with the correct Pinyin translation and three as distractors.
- Similar Distractors: The incorrect Pinyin options should be chosen to be somewhat similar to the correct answer (e.g., similar length, starting characters).
- Text-to-Speech: The displayed Chinese word should be clickable, and clicking it should trigger text-to-speech to pronounce the word in Mandarin Chinese.
- Feedback: After a user clicks an option, provide immediate feedback indicating if the answer was correct or incorrect. If incorrect, show the correct Pinyin.
- Next Word: Include a button to proceed to the next word after an answer has been selected.
- Word Bank: Include a list of common Chinese words and their Pinyin translations within the JavaScript.
The entire code (HTML, CSS, and JavaScript) should be self-contained within the single HTML file."
Create an interactive educational simulation that visualizes different types of volcanic eruptions. The simulation should allow users to select from various eruption types via a dropdown menu and observe how each type differs in terms of lava flow, ash cloud, and overall behavior. The simulation should be scientifically accurate while remaining visually engaging and suitable for geography education at various levels.
Core Requirements
Visual Components
- Base Volcano Structure:
- Cross-sectional view of a volcano showing internal structure
- Clearly defined crater, magma chamber, and conduit
- Realistic coloring and proportions
- Animation Elements:
- Dynamic lava flow with appropriate viscosity representation
- Animated ash and gas clouds with variable sizes
- Ejected lava particles that vary in quantity and trajectory
- All animations should respond to the selected eruption type
- Labeling System:
- Clear labels for all major volcano components
- Title that updates based on selected eruption type
- Legend explaining visual elements
Master Prompt Used:
Create a fun, colorful educational game using only HTML, CSS, and JavaScript, all within a single self-contained HTML file. The game should:
Based on this topic: { Word Bank for 13 year old }
- Focus on basic skills development through simple, enjoyable gameplay
- Use bright colors, simple animations, and positive reinforcement
- Include very simple rules and controls appropriate for young children
- Include clear scoring systems in integer values, do not use greater than 100, 1 to 10 is ideal, challenge progression, and meaningful feedback
- Include a data analytics at the end of the game that shows the activity log: for example question number: selection, marked correct ✅ and incorrect❌ , to help the user reflect on their actions
- Feature intuitive controls and responsive design for smooth gameplay
Master prompt:
Create an interactive educational simulation that visualizes different types of volcanic eruptions. The simulation should allow users to select from various eruption types via a dropdown menu and observe how each type differs in terms of lava flow, ash cloud, and overall behavior. The simulation should be scientifically accurate while remaining visually engaging and suitable for geography education at various levels.
Core Requirements
Visual Components
- Base Volcano Structure:
- Cross-sectional view of a volcano showing internal structure
- Clearly defined crater, magma chamber, and conduit
- Realistic coloring and proportions
- Animation Elements:
- Dynamic lava flow with appropriate viscosity representation
- Animated ash and gas clouds with variable sizes
- Ejected lava particles that vary in quantity and trajectory
- All animations should respond to the selected eruption type
- Labeling System:
- Clear labels for all major volcano components
- Title that updates based on selected eruption type
- Legend explaining visual elements
Interactive Features
- Eruption Type Selector:
- Dropdown menu with at least 4 different eruption types:
- Strombolian (moderate eruptions with lava fountains)
- Plinian (extremely explosive with massive ash columns)
- Hawaiian (fluid lava flows with minimal explosivity)
- Vulcanian (short, violent eruptions with thick lava)
- Dropdown menu with at least 4 different eruption types:
- Animation Controls:
- Play/pause button to control animation
- Visual indication of current animation state
- Information Display:
- Description panel explaining the selected eruption type
- Characteristics display showing:
- Lava intensity (low/moderate/high)
- Ash cloud size (minimal/small/moderate/massive)
- Danger level (low/moderate/high/extreme)
- Magma viscosity (low/medium/high)
Technical Specifications
Eruption Type Parameters
For each eruption type, implement the following variable parameters:
- Strombolian Eruption:
- Moderate lava intensity (8 particles)
- Small ash cloud (70px radius)
- Moderate danger level
- Medium magma viscosity (orange-red color, medium flow rate)
- Plinian Eruption:
- Low lava intensity (4 particles)
- Massive ash cloud (150px radius, extends high)
- Extreme danger level
- High magma viscosity (dark red color, slow flow rate)
- Hawaiian Eruption:
- High lava intensity (12 particles)
- Minimal ash cloud (40px radius)
- Low danger level
- Low magma viscosity (bright orange color, fast flow rate)
- Vulcanian Eruption:
- Moderate lava intensity (8 particles)
- Moderate ash cloud (100px radius)
- High danger level
- High magma viscosity (dark red color, slow flow rate)
Animation Parameters
Adjust these parameters based on eruption type:
- Ash Cloud:
- Size (rx, ry values for ellipses)
- Height above crater
- Opacity and color density
- Lava Flow:
- Width of flow
- Height/extent of ejection
- Color based on viscosity
- Animation speed modified by duration factor
- Lava Particles:
- Number of particles generated
- Trajectory height and spread
- Animation duration and delay
- Magma Chamber and Conduit:
- Color changes based on viscosity
- Animation speed adjustments
- Size adjustments based on eruption intensity
Educational Content Requirements
- Scientific Accuracy:
- All visualizations should accurately represent the physical properties and behaviors of different eruption types
- Descriptions should use correct geological terminology
- Visual scale should reasonably approximate real-world phenomena
- Educational Context:
- Provide clear explanations of how magma properties affect eruption style
- Include information about real-world examples of each eruption type
- Highlight the relationship between viscosity, gas content, and eruption explosivity
- User Experience:
- Interface should be intuitive for students and teachers
- Visual changes between eruption types should be distinct and observable
- Text should be readable and appropriate for educational settings
Implementation Notes
- Responsive Design:
- Simulation should scale appropriately on different screen sizes
- Consider mobile usability for classroom tablet use
- Performance:
- Animations should run smoothly across modern browsers
- Consider fallbacks for browsers with limited SVG animation support
- Accessibility:
- Include appropriate alt text for educational context
- Ensure controls are keyboard accessible
- Consider color contrast for readability. make words black on light background for example
- Future Expansion:
- Design with potential for adding more eruption types
- Consider framework for adding more interactive controls (temperature, pressure, etc.)
- Allow for integration with larger educational modules
Virtual Lab (Interactive Response HTML) as Student performance autoScore ,a simple Score sent back to SLS? https://www.learning.moe.edu.sg/teacher-user-guide/author/html5-content-development/
🎯 SLS Interactive Response Item with HTML5 Score Integration
✅ What’s New
SLS now supports HTML5 content that can send scores directly to the system.
Example: A student interacts with a simulation (e.g. Twark question), and the score (e.g. 2 marks) is automatically recorded in SLS.
🛠️ How to Implement
Refer to Documentation
SLS provides official documentation outlining integration methods using JavaScript.
Shortcut: Use Preconfigured File
Download the provided xapiwrapper.min.js (XAPI library) script file.
Open it in an editor (e.g. VS Code Web).
Copy the relevant code (e.g. Line 6–58).
Integrate into Your EJS Simulation
Open your EJS model.
Go to Simulation Properties > Run Options.
Paste the script into the correct location.
Add the library (e.g. xapiwrapper.min.js) via the plus (+) button and upload.
Configure Score Submission
Use
sendScore(2)or similar inside your simulation logic.For interactive components like buttons or combo boxes, edit the
onclickfunction to trigger score sending.You may use AI tools to generate suitable code snippets (e.g. for condition checks or logic).
Declare Global Variables
For complex logic (e.g. two combo boxes), declare necessary flags like:
Upload to SLS
In Edit Mode, insert an Interactive Response Item.
Upload your HTML5 ZIP file.
Set the maximum allowable score to match your simulation’s logic (e.g. 2 marks).
Preview in Student Mode
Test the simulation.
If correctly configured, students can interact and earn points, which are automatically recorded in SLS.
https://www.youtube.com/watch?v=3x9rehK5kdU
1. Set Up Trae.ai
✅ Prerequisites for Using Trae.ai to Develop for SLS
💻 1. Hardware & OS Requirements
A computer with:
Windows 10/11, macOS, or Linux
Minimum 8 GB RAM (16 GB recommended for smooth AI operations)
Internet connection for model access and plugin updates, SilverGate WiFi doesnt support, may need to hotspot your data plan from your phone and connect the laptop to your hotspot to get unrestricted internet.
🌐 2. Trae.ai Installation
Download Trae.ai from the official site: https://www.trae.ai
Install the app on your local machine
Click on the "Download Trae" button to obtain the installer suitable for your operating system.
Once downloaded, run the installer and follow the on-screen instructions to complete the installation.
Launch Trae.ai:
After installation, open the Trae application by clicking its icon.
Upon first launch, you may be prompted to select a theme (e.g., Dark, Light, DeepBlue) and set your preferred language.
2. Familiarize Yourself with Trae.ai Features
Explore Builder and Chat Modes:
Builder Mode: Automates task breakdown and execution, assisting in project development.
Chat Mode: Provides real-time code analysis, suggestions, and debugging assistance.
Understand AI Capabilities:
Trae integrates AI models like Claude-3.7-Sonnet or DeepSeek V2 or R1 to enhance coding efficiency.
It supports multiple programming languages and offers features like code auto-completion and real-time assistance.
3. Develop Interactive Content for SLS
Create a New Project:
In Trae, start a new project tailored for your interactive content.
Organize your project files, including HTML, CSS, JavaScript, and any multimedia assets.
🧠 Programming Knowledge
Familiarity with the files created
index.html (HTML5)
style.css (CSS)
script.js (JavaScript client-side only)
Design Interactive Elements:
Utilize Trae's AI assistance to code interactive components such as simulations, quizzes, or games.
Ensure that these elements align with SLS's content standards and educational objectives.
Implement xAPI for SLS Integration:
To enable communication between your interactive content and SLS, integrate xAPI (Experience API) statements.
This allows for tracking student interactions and performance within SLS.
Refer to the Integrating xAPI with EJS Simulations guide for detailed instructions.
4. Test and Validate Your Content
Local Testing:
Run your interactive content locally within Trae to identify and fix any issues.
Use Trae's debugging tools to ensure functionality and performance.
5. Deploy to SLS
Prepare for Deployment:
Once testing is successful, package your interactive content according to SLS's requirements.
Ensure all files are correctly formatted and that metadata aligns with SLS standards.
Upload to SLS:
Access your SLS account and navigate to the content management section.
Upload your packaged interactive content and configure any necessary settings.
Final Verification:
Conduct a final review within SLS to confirm that the content displays correctly and that all interactive features are operational.
By following these steps, you can effectively utilize Trae.ai to develop and integrate interactive content into the Singapore Student Learning Space, enhancing the educational experience for students.
Exploring Trae.ai
- What features of Trae.ai do you find most beneficial for your learning, and why?
by Table 1: lee_xuefen_patricia
Level: Primary 5 multiplication of fractions
Create an HTML-based math game for [Primary 5] students to practice [multiplication of proper fractions with denominators of 12 and below].
Game Mechanics:
Similar to [Candy Crush]
Have Levels of difficulty to select. 5 rounds per game within each level.
Give instant feedback when students answer correctly or incorrectly with a different sound.
Game Components:
Provide A Reset button that restarts the game
Allow player to match the correct answer to a selected question. The numbers on the candy is a product of the given proper fractions, the candies will explode if matched correctly. If it is not the correct answer, the candies will not explode. The player will then chooses another rocket to fire. The game ends when the player clears the board before the time runs out. If unsuccessful, the game board explodes. The timer is for three minutes.
Customization Options:
Suggest and implement ways to adjust the difficulty level (e.g., number range, operation type). Modify the visual design (colors, fonts, layout)
Add Timer
Optional sound effects
Basic animations for correct/wrong answers Testing and Debugging Help Can you help me: Test if the code works in a browser Identify and fix common errors
Add error handling to prevent issues (like empty inputs, invalid operations, etc.) Documentation Please provide: Step-by-step instructions for how to implement the game
A guide on how to modify basic parameters (e.g., change number range, question types, visual themes)
├── index.html
└── local_assets/
├── all.min.css
├── inter.css
└── tailwind.min.css
Table 2 by teo_woon_teng and lee_kheng_tat_edmond
Create an HTML-based math game for [Primary 5] students to practice conversion between fractions and decimals.
Game Mechanics:
Similar to [super mario]
4 levels of conversion of fractions and decimals, vice versa. 4 rounds per game within each level.
Give instant feedback when students answer correctly or incorrectly with a different sound.
First level: Fractions to decimals
Second level: Decimals to Fractions
Third Level: Mixed version of Fractions to decimals and Decimals to Fractions
Game Components:
Provide A Reset button that restarts the game
Show a decimal or fraction at the top of the screen. Allow player to hit the brick that contains the equivalent decimal or fraction. The brick will explode if the answer is correct. If it is not answer, the brick will remain unchanged. There must be at least 4 different bricks for the player to select the answer. There can be at most 2 possible answers within the set of 4 bricks.
Customization Options:
Suggest and implement ways to adjust the difficulty level (e.g., denominator must be factors of 10, 100 or 1000).
Add Timer
Optional sound effects
Basic animations for correct/wrong answers Testing and Debugging Help Can you help me: Test if the code works in a browser Identify and fix common errors
Add error handling to prevent issues (like empty inputs, invalid operations, etc.) Documentation Please provide: Step-by-step instructions for how to implement the game
A guide on how to modify basic parameters (e.g., change number range, question types, visual themes)
by fong_xiu_zhen and chandraselven_bavani
Create an HTML-based math game for Primary 5 students to practice percentage conversions.
Game Mechanics:
Similar to Whack A Mole
Have 3 Levels of conversions.
Level 1 - From decimals to percentage
Level 2 - fractions to percentage,
Level 3 - Percentage to decimals/fractions
5 rounds per game within each level.
Give instant feedback when students answer correctly or incorrectly with a different sound.
Game Components:
Provide A Reset button that restarts the game
Allow the player to hit the mole that contains the correct conversion or non-conversions of a given question. The number of the mole is a conversion of the given level, the mole will go YIPEEE if whacked correctly. If it is wrong, the mole will cry and turn red, then the player chooses another mole to whack.
Customization Options:
Suggest and implement ways to adjust the difficulty level (e.g., number range, operation type). Modify the visual design (colors, fonts, layout)
Add Timer
Optional sound effects
Basic animations for correct/wrong answers Testing and Debugging Help Can you help me: Test if the code works in a browser Identify and fix common errors
Add error handling to prevent issues (like empty inputs, invalid operations, etc.)
Documentation Please provide: Step-by-step instructions for how to implement the game
A guide on how to modify basic parameters (e.g., change number range, question types, visual themes)
by toh_puay_xuan_jolie
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.
Create an escape room format game that gets students to find the percentage part of a whole. It is for higher progressing students. Please challenge them with increasing difficulty. Put an asterisk on challenging questions that require reasoning and additional thinking steps.
Please exclude percentage increase and decrease questions.
Also please pause after each question is solved so that students can see the code and only move on to the next question when they click a button with "Go!"
Centre the "Go!" button and include a keypad for entering the code at the end. Also, show a door unlocking and opening at the end of the whole escape room when the code unlocks.
by dennis_tan_hock_siong and
Question Generator for forming numbers
The Prompt Template
"Create a simple 'Re-arranging Number Game' HTML5 web application. Use HTML5, Css, Javascript only with no external libraries. This application must be compatible with and can be embedded in SLS (Singapore Education).
Game Details:
The player is to select in a dropdown box the level which they would like to play at:
Level 1 has 4 digits
Level 2 has 5 digits
Level 3 has 7 digits
Generate random digits based on the level selected.
Generate a question from the following list of questions:
Form the greatest number
Form the smallest number
Form the greatest even number
Form the greatest odd number
Form the smallest even number
Form the smallest odd number.
Generate prompts for the students to determine which digits to select to guess the number
Game play:
Player will drag and drop the digits into the set number of digits that answers the question generated.
Visuals & Sound:
The game should have a light blue background.
If the player made a wrong guess, change background colour to red for 1 second and play a buzzer sound.
Display a celebratory animation (like fireworks) and a "Congratulations!" message when the number is correctly guessed. Change the background colour to green.
The player may make a maximum of 8 wrong guesses. After 8 wrong guesses, change the background to a dark red colour and show a "You lose!" message in giant font.
by tay_wei_seng
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.
Game should be on topic of percentage.
Game should be escape room style.
Escape room game should be based on the following components of percentage:
Introduce the percentage symbol.
Reinforce the understanding of the concept of percentage.
Express a fraction or a decimal as a percentage and vice versa.
Express a percentage as a fraction in its simplest form.
Convert fractions and decimals to percentages, and vice versa.
Express a whole number out of another whole number as a percentage.
Solve problems involving percentage part of a whole
Access prior knowledge of interpreting pie charts involving whole numbers and fractions
Interpret data presented in pie charts involving percentages.
Solve word problems involving discount / GST / annual interest
Game requirements:
Make the activities more interactive, such as matching pieces, puzzles and other interesting things that a escape room might have. Also, make some of the activities timed to increase the difficulty.
Questions should be refreshed every time the game is restarted.
Put the restart button at a place where it is not blocking the text.
Please make it escape room style involving a ministage every 3 stages which requires clues gotten from the 3 stages before.
If they answer correctly, they can proceed.
If they answer wrongly, please provide hints.
Visual and Sound:
To display celebratory animation when each stage is passed
Decorate each stage to match the question.
by leow_min_ru_eunice
Create an HTML-based math game for [Primary 4] students to practice [times tables].
Game Mechanics:
Similar to memory game.
6 pairs of cards. In each pair of cards, one side contains the multiplication equation and other side contains the product of the numbers.
Student can select which multiplication table to work on (from 2 timestable to 10 timestable).
Cards will automatically flip back when cards are matched incorrectly. Correct matches will remain face up.
The game has a time limit of 3 minutes. Every wrong match will deduct 10 seconds from the time limit. Each correct match will earn player 1 point.
Game Components:
Provide A Reset button that restarts the game.
Keep score at the top right corner.
Customization Options:
Create colourful background.
Add Countdown Timer for 3 mins
Optional sound effects
by Constance_Toh_Kai_Ting
Topic : Conversion – Measurement (P3 Length, Mass, Volume)
"Create a simple HTML5 web application for a ‘Conversion Game on the topic of Measurement on the topics length, mass and volume for P3 pupils.’
Game Goal: The game should allow a user to convert a given number with a unit of measurement to a corresponding bigger or smaller unit of measurement. Numbers used in the game should be purely whole numbers.
Visuals & Styling:
• The overall background color of the game should be [neutral and pleasant to the eye].
• The cards or sections that display the questions and numbers should have a background color of [light shades similar to white].
• The individual number boxes within the lists should have a background color of [light pastel blue].
• The 'Play Again' button should be [choose a color, e.g., "blue"].
• The text in the game should use a clear font like ["Arial, size 14"].
Output Request:
• Provide the complete HTML, CSS, and JavaScript code in a single file, ready to be saved as index.html.
• Ensure the code is clean and structured so it's easy for someone who is not a programmer to use by simply saving and opening the file."
by gunita_kaur_shahi
Game of Jeopardy
Level: Primary 3
Topic: Equivalent fractions, Simplifying fractions and Comparing Fractions)
Create a simple 'Game of Jeopardy' HTML5 web application. The game should have 4 columns with a total of 20 questions. There are 5 levels per column, 100, 200, 300, 400 and 500, for students to choose the points to be awarded. The level of difficulty of the questions are based on the number of points, 100 being the easiest and 500 being the most challenging. All the fractions denominators of the given fraction must be within 12.
1) Equivalent fractions
- Given one fraction and the denominator or numerator of the equivalent fraction, find the missing numerator or denominator.
2) Simplifying fractions
- Given the fraction, express it in its simplest form
3) Comparing fractions
- Compare 2 given fractions (100 - fractions have the same denominator, 200 - fractions have the same numerator, 300 - Fractions can be changed to the same denominator, 400 - both fractions have even denominators; one fraction is smaller than half and the other is greater than half, 500 - comparing fractions using one-half as a reference.
For comparing half as a reference, the questions are difficult for all. Let's redefine it.
- 100 Points: Both denominators are the same:
Example 1: 1/4 and 3/4,
Example 2: 2/7 and 5/7
- 200 points: Both numerators are the same Example 1: 2/3 and 2/5
Example 2: 3/7 and 3/10
- 300 points: One numerator is a multiple of the other
Example 1: 4/5 and 3/10
Example 2: 3/4 and 7/12
- 400 points: Both denominators are even, one is smaller than one-half and the other is greater than one-half
Example 1: 3/8 and 11/12
Example 2: 7/10 and 1/5
- 500 points: Use half as a reference. One greater than one-half and the other smaller than one-half
Example 1: 2/5 and 4/7
Example 2: 3/7 and 5/8
Example 3: 11/12 and 1/3
Example
4) Challenge (a mix of questions from any of the components; equivalent fractions, simplifying fractions, comparing fractions)
- The questions in the ‘challenge’ column should be different from the other question tiles but test the same skills at random.
Game play:
- Choose the number of Players (upto 4 players)
- Enable Game of Jeopardy music that can be turned on or off
- Once the box is clicked and answered, when it returns to the home page, the box darkens to show that it cannot be selected again. If the question is not attempted ie: answer not submitted, do not darken the box.
- Include a blank for a player to input the answer. Award the point if correct. If not, give another a player an option to steal. If stolen and answered correctly, the points are awarded.
- Show which player's turn it is. Players have to take turns to answer. Award the points automatically when the answer is correct. No need for the + and - buttons.
- Correct answer is shown after 2 attempts (player and the next player). The next player’s turn is then completed and it moves on to the next player.
- At the end of the game, announce the winner and congratulate them.
by tan_kah_cheng_isabel
Game Details:
The game should have the following phrases:
[Phrase 1, e.g., "Time And Tide Wait For No Man"]
[Phrase 2, e.g., "The Hungry Fox Jumps Over The Fence"]
[Phrase 3, e.g., "Better Late Than Never"]
[Add more phrases here, each on a new line]
Gameplay Rules:
When a player guesses a letter, [choose ONE: reveal ALL instances of that letter in the phrase / reveal ONLY the first instance of that letter in the phrase].
The player can also guess the entire phrase at once.
Visuals & Sound:
The game should have a pleasing background color like [choose a color, e.g., "light pink"].
Include a "Music On/Off" button.
Use background music from [provide a royalty-free music URL, e.g., "https://www.bensound.com/bensound-music/bensound-sunny.mp3"].
Display a celebratory animation (like fireworks) and a "Well done!" message when the phrase is correctly guessed.
The display for the hidden phrase should clearly show blanks for unguessed letters and spaces between words.
Topic: Ordering Fractions, decimals and whole numbers.
Game:
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. Ordering game between 2 persons involving fractions, decimals, mixed numbers and whole numbers with different levels, 3 cards, 4 cards and 5 cards Can you add a data analytics for the students chain of activities if it is correct, marked as correct and wrong answer as wrong. I want to see the thought process to identify their misconceptions.
Create a comprehensive HTML5 web application for a "Fix the Equation" educational math game with the following specifications and customization options:
Core Game Mechanics
Game Type: Educational math puzzle where players solve equations by finding missing numbers
Missing Element: Replace one number in each equation with a visual placeholder (square/box)
Input Method: Text input field for players to enter their answer
Validation: Real-time answer checking with immediate feedback
Customization Parameters
Game Settings
Number of Rounds: [DEFAULT: 5] - Make this easily adjustable
Difficulty Levels: [DEFAULT: Primary 5 appropriate] - Progressive difficulty within age-appropriate bounds
Time Limit: [DEFAULT: 90 seconds]
Educational Level: [DEFAULT: Primary 5 / Grade 5] - Target age group 10-11 years old
Equation Types & Operators
Basic Operators: [DEFAULT: +, -, ×, ÷] - Allow selection of which operators to include
Equation Complexity:
Simple: 2 numbers + 1 operator (e.g., □ + 5 = 12)
Medium: 3 numbers + 2 operators (e.g., 3 + □ × 4 = 27)
Complex: 4+ numbers + 3+ operators with brackets (e.g., (□ + 5) × 2 - 3 = 17)
Bracket Usage: [DEFAULT: Sometimes] - Never/Sometimes/Always include brackets
Missing Position: [DEFAULT: Random] - Where the missing number appears (beginning/middle/end/random)
Primary 5 Mathematics Parameters (Age-Appropriate Constraints)
Number Range: [DEFAULT: 1-12] - Positive integers only, suitable for Primary 5 level
Result Range: [DEFAULT: 1-200] - All equation results must be positive integers
No Negative Numbers: [REQUIRED] - Ensure all numbers and results are positive
Division Rules: [REQUIRED] - Only allow division that results in whole numbers (no remainders)
Subtraction Rules: [REQUIRED] - Ensure larger number minus smaller number (no negative results)
Multiplication Limits: [DEFAULT: Tables up to 12×12] - Stay within familiar multiplication tables
Fraction Handling: [DEFAULT: None] - Avoid fractions unless specifically teaching them
Decimal Handling: [DEFAULT: None] - Stick to whole numbers for Primary 5 level
Order of Operations: [DEFAULT: BODMAS/PEMDAS] - Follow standard mathematical order
Educational Alignment: [DEFAULT: Primary 5 syllabus] - Match curriculum standards for 10-11 year olds
Visual Design & Theming
Color Scheme: [DEFAULT: Modern gradient] - Primary and secondary colors
Theme Options: [EXAMPLES: Space, Ocean, Forest, Neon, Classic] - Visual themes
Missing Number Indicator: [DEFAULT: Red pulsing square] - Shape, color, animation style
Background: [DEFAULT: Gradient] - Solid color, gradient, pattern, or image
Font Style: [DEFAULT: Modern sans-serif] - Typography choices
Animation Style: [DEFAULT: Smooth transitions] - Animation preferences
Feedback & Rewards
Correct Answer Feedback:
[DEFAULT: "Congratulations!"] - Custom success message
[DEFAULT: Fireworks] - Celebration animation (fireworks/confetti/sparkles/custom)
[DEFAULT: Green] - Success color scheme
Wrong Answer Feedback:
[DEFAULT: "Wrong answer, try again!"] - Custom error message
[DEFAULT: Show correct answer] - Whether to reveal the solution
[DEFAULT: Red] - Error color scheme
Sound Effects: [DEFAULT: None] - Success/error/background music options
Progress Indicators: [DEFAULT: Round counter + score] - Progress tracking style
Advanced Features
Scoring System: [DEFAULT: Simple count] - Points per question, bonus for streaks, time bonuses
Hints System: [DEFAULT: None] - Optional hint button with customizable help
Retry Options: [DEFAULT: Move to next] - Allow retry of wrong answers vs. continue
Final Results: [DEFAULT: Score + encouragement] - End game summary and performance analysis
Accessibility: [DEFAULT: Basic] - Keyboard navigation, screen reader support, color contrast
Responsive Design: [DEFAULT: Yes] - Mobile-friendly layout
Technical Specifications
Framework: Pure HTML5/CSS3/JavaScript (no external dependencies)
Local Storage: [DEFAULT: None] - Save progress, high scores, preferences
Export Options: [DEFAULT: None] - PDF results, sharing capabilities
Browser Compatibility: Modern browsers (Chrome, Firefox, Safari, Edge)
Implementation Requirements
HTML Structure
Semantic HTML5 elements
Proper accessibility attributes
Responsive meta tags
Clean, organized markup
CSS Styling
Modern CSS3 features (flexbox, grid, animations)
Responsive design principles
Smooth transitions and animations
Customizable CSS variables for easy theming
JavaScript Functionality
Object-oriented or modular code structure
Equation generation algorithms that ensure valid solutions
Proper order of operations handling
Error handling and input validation
Performance optimization for smooth animations
Equation Generation Logic
Mathematical accuracy - All answers must be positive whole numbers
Primary 5 constraints - No negative numbers, no division by zero, no remainders
Age-appropriate difficulty - Suitable for 10-11 year old students
Division validation - Only include division where dividend is evenly divisible by divisor
Subtraction validation - Ensure minuend is always larger than subtrahend
Multiplication bounds - Keep within reasonable limits (typically up to 12×12 tables)
Balanced difficulty progression - Start easier and gradually increase complexity
Curriculum alignment - Match Primary 5 mathematical concepts and skills
Avoid decimal answers - All results should be whole numbers
Smart randomization - Prevent repetitive patterns while maintaining educational value
User Experience Features
Onboarding: [DEFAULT: Simple instructions] - Tutorial or instruction modal
Navigation: [DEFAULT: Linear progression] - Skip questions, go back, restart options
Settings Panel: [DEFAULT: Basic] - In-game settings adjustment
Performance Tracking: [DEFAULT: Current session] - Statistics and progress tracking
Output Format
Please provide:
Complete HTML file with embedded CSS and JavaScript
Configuration object at the top of the JavaScript for easy customization
Comments explaining key functions and customization points
Setup instructions for implementing custom themes and settings
Example customization showing how to modify key parameters
Additional Notes
Prioritize clean, readable code that's easy to modify
Include fallbacks for older browsers where possible
Ensure the game works offline once loaded
Make the visual design modern and engaging
Focus on educational value and positive learning experience
Level: P4
Topic: Decimals
Create an HTML-based math game for [Primary 4] students to practice [4 operations of decimals].
Game Mechanics:
Similar to [racing game]
Have Levels of 4 operations of decimals to select. 3 rounds per game within each level.
Give instant feedback when students answer correctly or incorrectly with a different sound.
Game Components:
Provide A Reset button that restarts the game
Allow player with the correct answer to move the car forward. If it is not answer, the car will not move.
Customization Options:
Suggest and implement ways to adjust the difficulty level (e.g., number range, operation type). Modify the visual design (colors, fonts, layout)
Add Timer
Optional sound effects
Basic animations for correct/wrong answers Testing and Debugging Help Can you help me: Test if the code works in a browser Identify and fix common errors
Add error handling to prevent issues (like empty inputs, invalid operations, etc.) Documentation Please provide: Step-by-step instructions for how to implement the game
A guide on how to modify basic parameters (e.g., change number range, question types, visual themes)
by wong_wenyi_selene
Fraction (Ordering and Comparing)
Level: Primary 3 onward
Prompt
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.
Has 2 levels
To include 3 questions per level. One pupil has correctly answered 3 questions, move onto the next level.
Have the fraction written as an equation
Show the end score at the end of the activity
Level 1 to be comparing and ordering of 2 related. With denominators less than 12.
Level 2 to be comparing and ordering of 3 related fractions with denominators less than 12.
Show corresponding fraction bars arranged in a stacking order.
Fractions bars shown should be of the same denominator
Show hints
Suggest ways for user to get it correct if they get it wrong
When user gets it wrong, include a button for user to try again.
Always asks user if he/she wants to go to next question.
Add data analytics for the students chain of activities if it is correct, mark as correct and wrong as wrong. I want to see the thought process to identify their misconception. Include student analytics.
The Prompt Template
"Create a simple 'inequality theorem' HTML5 web application.
Game Details:
The game should have the following phrases:
show 3 different length of a stick
Have 5 set of questions
[Add more phrases here, each on a new line]
Gameplay Rules:
A player decide whether it can form a triangle.
No help or explanation should be given to player
Only if the player answer the question wrongly, display "this combination does not form a triangle or this combination forms a triangle and show a visual representation to the player"
Visuals & Sound:
The game should have a pleasing background color like [choose a color, e.g., "light blue"].
Include a "Music On/Off" button.
Use background music from [provide a royalty-free music URL, e.g., "https://www.youtube.com/watch?v=sVE0IyjJ3aQ&list=RDsVE0IyjJ3aQ&start_radio=1"].
Display a celebratory animation (like fireworks) and a "Congratulations!" message when the phrase is correctly guessed.
The game assesses students’ basic understanding of solving speed-related problems.
by glennjh
Why the file above doesnt render in SLS?
Original Prompt (Given in handout)
Create an HTML-based math game for [Primary 4] students to practice [times tables]. Game Mechanics: Similar to [asteroids] Have Levels of times tables to select. 5 rounds per game within each level. Give instant feedback when students answer correctly or incorrectly with a different sound. Game Components: Provide A Reset button that restarts the game Allow player to shoot at rocket that contains the correct product or non-products of a given question. The number of the rocket is a product of the given times tables, the rockets will explode if fired correctly. If it is not answer, the rocket will continue moving but turn red, then the player chooses another rocket to fire. Customization Options: Suggest and implement ways to adjust the difficulty level (e.g., number range, operation type). Modify the visual design (colors, fonts, layout) Add Timer Optional sound effects Basic animations for correct/wrong answers Testing and Debugging Help Can you help me: Test if the code works in a browser Identify and fix common errors Add error handling to prevent issues (like empty inputs, invalid operations, etc.) Documentation Please provide: Step-by-step instructions for how to implement the game A guide on how to modify basic parameters (e.g., change number range, question types, visual themes)
Add on
To allow the use of mouse to move the spaceship and to include a 10 random questions level where questions from timetables 2 to 12 are randomly generated. There should be a level difficulty from easy to hard
Game will allow DI for P4 students to practice their times table. Students can select which times table they would like to practice. If they are confident enough, they can do the quiz which has a combination of all the times table.
Further addon can be relating the score to time taken to shoot the number.
Create an HTML-based math game for [Primary 3] students to practice [ADDITION AND SUBTRACTION OF FRACTIONS].
Game Mechanics:
Similar to [asteroids]
10 rounds per game.
Give instant feedback when students answer correctly or incorrectly with a different sound.
Game Components:
Provide A Reset button that restarts the game
Allow player to shoot at rocket that contains the correct product or non-products of a given question. The number of the rocket is the POSSIBLE answers, the rockets will explode if fired correctly. If it is not answer, the rocket will continue moving but turn red, then the player chooses another rocket to fire.
Customization Options:
Suggest and implement ways to adjust the difficulty level (e.g., number range, operation type). Modify the visual design (colors, fonts, layout)
Add Timer only 10 seconds
Optional sound effects
Basic animations for correct/wrong answers Testing and Debugging Help Can you help me: Test if the code works in a browser Identify and fix common errors
Add error handling to prevent issues (like empty inputs, invalid operations, etc.) Documentation Please provide: Step-by-step instructions for how to implement the game
A guide on how to modify basic parameters (e.g., change number range, question types, visual themes)
Create an HTML-based math game for [Primary 1] students to practice [Subtraction within 20].
Game Mechanics:
Similar to [asteroids]
5 rounds per game within each level.
Give instant feedback when students answer correctly or incorrectly with a different sound.
Game Components:
Provide A Reset button that restarts the game
Allow player to shoot at star that contains the correct answer or wrong answer of a given question. The number of the star is the answer of the given question, the rockets will explode if fired correctly. If it is not answer, the star will continue moving but turn red, then the player chooses another star to fire.
Customization Options:
Suggest and implement ways to adjust the difficulty level (e.g., number range, operation type). Modify the visual design (colors, fonts, layout)
Use white background with black fonts.
Add Timer
Optional sound effects
Basic animations for correct/wrong answers Testing and Debugging Help Can you help me: Test if the code works in a browser Identify and fix common errors
Add error handling to prevent issues (like empty inputs, invalid operations, etc.) Documentation Please provide: Step-by-step instructions for how to implement the game
A guide on how to modify basic parameters (e.g., change number range, question types, visual themes)
You've reached the end of this quiz
| Question | Strongly Disagree | Disagree | Agree | Strongly Agree |
|---|---|---|---|---|
| Q1: The learning objectives were clearly stated and easy to understand. | 0 | 0 | 39 | 32 |
| Q2: The lesson content was relevant to my work. | 0 | 0 | 26 | 45 |
| Q3: The pedagogy and teaching methods helped me understand the topic better. | 0 | 0 | 38 | 33 |
| Q4: I had enough opportunities to participate and ask questions. | 0 | 6 | 40 | 25 |
| Q5: The teacher(s) explained concepts clearly and effectively. | 0 | 0 | 35 | 36 |
| Q6: The learning materials were helpful in understanding the topic. | 0 | 1 | 29 | 41 |
| Q7: The lesson was well-paced, giving me time to understand the material. | 0 | 13 | 35 | 23 |
| Q8: I feel more confident in my understanding of the topic after this lesson. | 0 | 2 | 45 | 24 |
🧠 In-Depth Q9 Feedback Summary
🔑 Key Positive Themes
| Theme | Description | Sample Phrases |
|---|---|---|
| ✅ Appreciation & Usefulness | Many participants found the workshop “useful,” “interesting,” and “enriching.” | “Thank you for sharing”, “Very interesting workshop!”, “This was a good workshop.” |
| 💻 Hands-on Learning | Participants strongly appreciated the interactive, experiential approach. | “Very hands-on session”, “Appreciate the hands-on session”, “I hope to have more hands-on interactive games workshops.” |
| 🛠️ Practical AI Tool Application | The exposure to tools like ChatGPT, Claude, Gemini, and SLS gamification was valued. | “Useful for my lessons”, “Easy to create activities”, “Good exposure to AI” |
| 👥 Collaboration & Sharing | Participants liked the sharing format and requested access to materials and shared folders. | “Keep the Google Drive available”, “Please keep the sharing folder open”, “Upload the lesson to the Community Gallery.” |
⚠️ Areas for Improvement & Suggestions
| Concern | Description | Suggestions Made |
|---|---|---|
| 🐢 Pacing Too Fast | Many mentioned that the session felt rushed, especially after a full day of work. | “Session a bit too short”, “Too much to absorb in 3 hrs”, “Can be slower in pace.” |
| 🧩 Technical Challenges | Several faced difficulties when copying templates or getting outputs that didn't match demos. | “I had to keep trying”, “The generated ones are different from what yours look like.” |
| 🙋 More Support Needed | Requests for smaller groups or on-the-spot help were common. | “Have someone at the table to explain”, “Maybe do it in smaller FGD format.” |
| ⏳ More Time & Follow-ups | Multiple requests for follow-up sessions or Part 2 with deeper exploration. | “Have Part 2 of this session”, “More workshops to focus on prompt engineering.” |
| 📚 Central Resource Bank | Participants want organized repositories of created content. | “Resource bank for game prompts”, “Games sorted by levels and topics.” |
💡 Forward-looking Ideas from Participants
Sharing back in schools and PLTs
Customizing HTML5 for subject-specific use
More examples and step-by-step videos
Support for HAL students through adapted games
Integration of success criteria and assessments into AI workflows
📌 Summary Insight:
The session was highly appreciated, with recurring praise for its relevance, hands-on nature, and applicability. Most participants want more time, deeper support, and continued access to the tools and resources introduced.
No comments:
Post a Comment