MOE Library
20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD
20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD
Workshop Details:
Date: Friday, 11 July 2025
Time: 2:30 pm – 5:30 pm
Venue: Academy of Singapore Teachers
|
Time |
Session |
|
2:30 pm – 2:40 pm |
Welcome Address by Tan Lay Chin |
|
2:40 pm – 3:40 pm |
SLS AIEd Features and HTML5 AI Generators Introduction Mr Lawrence Wee, Lead Specialist, Technologies for Learning Branch, Educational Technology Division |
|
3:40 pm – 3:55 pm |
Tea Break |
|
3.55 pm – 4:55 pm |
Interactive Design Sprint: Build & Test HAL Tasks |
|
4:55 pm – 5:30 pm |
Showcase & Reflections |
You may register via this link or the QR code provided below.
Registration closes on 4 July 2025 or when maximum capacity is reached.
Should you require any clarification, please contact Ms Wong Shu Yi at This email address is being protected from spambots. You need JavaScript enabled to view it..
Thank you and we look forward to your participation.
MOE Library
20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD
A. Pedagogical use of AI
MOE Library
20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD
1. Pedagogical use of AI
✅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.
Star Think about how technologies like AI can be leveraged to support pedagogical actions (KAT).
Star |
MOE Library
20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD
B. Introduction to AI-enabled Feature: ACP
[Optionalhttps://www.learning.moe.edu.sg/teachers/teaching-and-learning-on-sls/aied-features/">https://www.learning.moe.edu.sg/teachers/teaching-and-learning-on-sls/aied-features/
MOE Library
20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD
1. [SDLhttps://vle.learning.moe.edu.sg/studentgroup/2fb7723f-9be1-4050-b995-bbf23a0dbc71?tab=resources">https://vle.learning.moe.edu.sg/studentgroup/2fb7723f-9be1-4050-b995-bbf23a0dbc71?tab=resources
Star
|
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 & ETDhttps://vle.learning.moe.edu.sg/class-group/lesson/view/1eebb432-e48b-4cd6-b9d4-01a0dd68c389/cover">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 Mathhttps://vle.learning.moe.edu.sg/class-group/lesson/view/96c20e75-c756-4570-997e-b79d9cb85d2a/cover">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 🧑🎓 |
Discover more pedagagically-sound modules here! (require icon login)
ITT1
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?
MOE Library
20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD
2. Exploring ACP's role in lesson creation
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
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. |
For more information, you may refer to the user guide here.
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 transfer and apply knowledge and skills acquired to new contexts and recognise similiaries and differences in different contexts and situations. For the second section, learning activties should facilitate an inquiry learning experience for students to work collaboratively in groups. Students should explain his/ her reasoning and decision and interact with others to share information and ideas. |
⚙️ 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
https://www.youtube.com/watch?v=iuKPgFWBOfM
https://www.youtube.com/watch?v=iuKPgFWBOfM
Q1:
InstructionsUpload a file with your answer. You can attach up to 10 files.
[15 minhttp://www.w3.org/1998/Math/MathML"><mrow><mo> </mo></mrow> </math>" /> $$ 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
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:
- Using AI tools to copy Physics Papers onto SLS using Physics 8867 Paper 1
- Human-centred AI: Collaborating with ACP and DeepSeek AI for Smarter Quiz Creation
- Mastering ACP in SLS: Best Practices and Hacks for Optimal Results
Original
https://vle.learning.moe.edu.sg/moe-library/lesson/view/a4bb8778-6e75-475d-8844-88c94ca20c05/page/69446558
My backup
https://vle.learning.moe.edu.sg/moe-library/admin/lesson/view/e209bf3f-f3ea-48d6-8a8d-eadb1f056299/cover
MOE Library
20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD
C. HTML5 Generators
🎓 Using HTML5 as a Pedagogical Tool in SLS
💡 Why HTML5?
HTML5 is more than just the language of the web—it's a powerful pedagogical tool that empowers educators to create interactive, engaging, and personalised learning experiences within Singapore's Student Learning Space (SLS). Unlike static documents or videos, HTML5 allows teachers to build dynamic simulations, games, and formative assessment tools that respond to student input in real time.
🧠 Pedagogical Benefits of HTML5 in SLS
| Pedagogical Strategy | HTML5 Example |
|---|---|
| Constructivist Learning | Simulation where students manipulate variables (e.g., number of turns) and observe outcomes. |
| Self-Directed Learning | Interactive simple game quiz with Chinese sounds, animations of complex movement with embedded hints, feedback, based on student choices. |
| Formative Assessment | Auto-graded quizzes with immediate feedback and scoring (e.g., drag-and-drop, matching). |
| Inquiry-Based Learning | Virtual labs that allow hypothesis testing and data collection |
| Differentiated Instruction | Responsive design with different levels of learning that works across devices and allows toggling between difficulty levels or languages. |
MOE Library
20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD
1. [SDLhttps://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
https://www.youtube.com/watch?v=utVAtgA2t68
MOE Library
20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD
2. [SDLhttps://iwant2study.org/lookangejss/02_newtonianmechanics_4massweightdensity/ejss_model_buoyancycase/index.html">https://iwant2study.org/lookangejss/02_newtonianmechanics_4massweightdensity/ejss_model_buoyancycase/index.html
https://www.youtube.com/watch?v=Fhvc1xfsS98
MOE Library
20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD
3. [SDLhttps://www.youtube.com/watch?v=EA13VYt7cZ8">https://www.youtube.com/watch?v=EA13VYt7cZ8
https://www.youtube.com/watch?v=EA13VYt7cZ8
- Try SLS integrated EJS App https://www.learning.moe.edu.sg/partners/integration/integrated-apps/ and https://www.learning.moe.edu.sg/teacher-user-guide/discover/embed-integrated-apps/
MOE Library
20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD
This content is not available
8 KAT
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. Helper Zipper https://iwant2study.org/lookangejss/slsZipper/Code_to_ZIP_Converter/
- 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
Helper Zipper
https://iwant2study.org/lookangejss/slsZipper/Code_to_ZIP_Converter/
https://iwant2study.org/lookangejss/slsZipper/Code_to_ZIP_Converter/
More Examples
- 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
________________________________________________________________________________________________
Example of a Prompt
https://your-simulation-link-if-available.com
[Optionalhttps://aistudio.google.com/prompts/new_chat">https://aistudio.google.com/prompts/new_chat can write 1000+ lines of code, BEST and FREE, more technical.
Helper Zipper https://iwant2study.org/lookangejss/slsZipper/Code_to_ZIP_Converter/
- 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
Step 2: Define Your Simulation
- Identify a physics concept you want to simulate. (E.g., Electric Fields, Magnetic Fields, Motion, Optics, etc.)
- Frame a prompt that clearly describes what your simulation should do.
- Use the example prompts below to guide your request.
Example Prompt:
[Optionalhttps://your-simulation-link-if-available.com/">https://your-simulation-link-if-available.com
[Recommendedhttps://blogger.googleusercontent.com/img/a/AVvXsEhl9uynxazY7iqCEb8FJ57D7qMeB6AHoVsefa9qH8EFBP26yJnThumhM2mUqCxjD3oPN3BgbPA8TfG1ov27Vlzq9JbxJ8S5egOsqrVuXMi2TpBdNTcA2OSq--BrcUdSD_Hm8XEEa0tmwfyNaFLC7mS7stqP15GQ0MWVfjajs1E1ypTi82xD6OVrUXhvKBwj">
This content is not available
https://vle.learning.moe.edu.sg/community-gallery/lesson/view/a2f94d26-bd91-4c9e-ab13-f89cadc37164/cover
|
This content is not available |
| 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!
longDivisionGemini.zip
Star
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).
|
This content is not available |
| 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.
|
This content is not available |
| longDivisionGemini./ longDivisionGemini.zip |
|
This content is not available |
| longDivisionGemini./ longDivisionGemini.zip |
|
This content is not available |
| longDivisionGemini./ longDivisionGemini.zip |
|
This content is not available |
| longDivisionGemini./ longDivisionGemini.zip |
|
This content is not available |
| longDivisionGemini./ longDivisionGemini.zip |
|
This content is not available |
| longDivisionGemini./ longDivisionGemini.zip |
|
This content is not available |
| longDivisionGemini./ longDivisionGemini.zip |
|
This content is not available |
| longDivisionGemini./ longDivisionGemini.zip |
Final Touches: Going Live
To prepare the tool for public sharing on iwant2study.org, we added:
- Google Analytics for usage insights
- Credits to acknowledge the collaborative spirit of the project
- Code cleanups and bug fixes for a polished release
Conclusion: The Power of Human + AI Collaboration
From a static screenshot to a dynamic, student-friendly simulation, this project shows what’s possible when human insight meets AI generation. Faster iteration, smarter code, and most importantly—a tool that helps young learners conquer long division with confidence.
Credits
- Concept and Educational Direction: lookang
- Code & Rapid Prototyping: Gemini 2.5 Pro
🔍 Explore More
Discover other interactive learning tools at iwant2study.org.
Together, let’s reimagine what learning can be.
Geoboard_Area_Explorer_SLS_Offline.zip
Star
Geoboard Area Explorer by ChatGPT, Cline Bot and Claude 3.7
This content is not available
🟡 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.
function_html5_content_20250505_015604.zip
Star
🚀 Building the "Fun Function Machine": An AI-Powered Journey into Interactive Learning
|
This content is not available |
| function_html5_content_20250505_015604.zip functions/ https://moeptt.vercel.app/#menuD GPTo3 |
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², and x³ 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 .html file
- Fast 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.
subtractFractionGemini25Pro.zip
Star
|
This content is not available |
|
This content is not available |
🧠 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 This email address is being protected from spambots. You need JavaScript enabled to view it.
🔧 Powered by Gemini 2.5 Pro https://g.co/gemini/share/cfec265f8b1b
|
This content is not available |
Prompt Used:
|
This content is not available |
| screenshot of working interactive to give greater clarity |
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.
https://iwant2study.org/lookangejss/math/ejss_model_addfractions3divideby4subtract1over8v1/index.html
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-static icons (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, never alert()), 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/d by finding a common denominator, showing equivalent fractions, and removing the second fraction's parts from the first. Ensure a/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) and c/d (green). Animation: Convert both to common denominator segments, overlay c/d onto a/b, remove overlay, show result (ad-bc)/bd (blue). Simplify result numerically.
- UI: Controls: Mode toggle, select dropdowns for numerators/denominators (interactive), input[type=numberhttps://blogger.googleusercontent.com/img/a/AVvXsEgq22IpbL1_ujzyMgOBLUo9q4hiJbqqOjfYLniWrbr3rrJikWZuerO0owVrzR6xxR_Ki38GC9ysBxk1qVWBXBDe75p8YNrmTb8WWxyZ-rlfhAIyV1ZTVA8VkfYAanS9F-KTl6Ujl9TDZzQEcZw0ACLji00w07w3EKxBSj3oEukrRD2boxIBVfJ0RMuWlc7c">
This content is not available
https://aistudio.google.com/u/1/prompts/16XI96b7_bxiX1bpCIcNxK6SU_e8P6tQV
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.
This content is not available
https://aistudio.google.com/u/1/prompts/16XI96b7_bxiX1bpCIcNxK6SU_e8P6tQV ⚠️ 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.
This content is not available
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.
This content is not available
This content is not available
This content is not available
This content is not available
Interactive_Multiples_of_9.zip
Star
🧮 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!
This content is not available
Interactive_Multiples_of_9.zip
🔑 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 timeupdate events and timestamped syncPoints
- Animated transitions via @keyframes grow-in for 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:
🔗 iWant2Study Math Multiplication Interactives
MathBattleAddorMultiply.zip
Star
Math Battle: Add or Multiply? – A Fun, Interactive Math Game for Young Learners
This content is not available
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)
Respect_for_Creative_Expressions___Academic_Integrity_20250616.zip
Star
chinese_word_learner_20250507_155535.zip
Star
Master Prompt to generate this:
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."
Unstar
volcano-simulation-Claude37.zip
Star
volcano_Gemini25pro.zip
Star
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
html5_content_20250422_040149GPTo3.zip
Unstar
https://vle.learning.moe.edu.sg/community-gallery/admin/lesson/view/1029ee97-6713-4cbc-9cbf-a9f877be5fec/page/89936476?pageNo=1 available here in CG as well.
to add it use this trick on SLS + and latest.
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 }
This content is not available
one image used - 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
volcano_html5_content_20250430_082241.zip
Unstar
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
MOE Library
20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD
5. [SDLhttps://www.learning.moe.edu.sg/teacher-user-guide/author/html5-content-development/">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 onclick function 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:
- javascriptvar diluteSelected = false;
- var concentratedSelected = false;
- 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
https://www.youtube.com/watch?v=3x9rehK5kdU
https://www.youtube.com/watch?v=9uyfgD5N0QA
https://www.youtube.com/watch?v=9uyfgD5N0QA
Example
https://weelookang.blogspot.com/2025/02/revitalizing-moe-library-interactives.html use AI to add xAPI code
Q1:
JinSheng's interactive.
angle.zip
Star
FeedbackMarks/9
Q2:
solar_panel_interactive_final_log_20250409_130706.zip
Star
FeedbackMarks/1
Star
expected MARKS sent to SLS
MOE Library
20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD
- 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.
- Familiarity with the files created
- index.html (HTML5)
- style.css (CSS)
- script.js (JavaScript client-side only)
- Familiarity with the files created
- 🧠 Programming Knowledge
- 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.
D1
Exploring Trae.ai
What features of Trae.ai do you find most beneficial for your learning, and why?
https://www.youtube.com/watch?v=QpuGevRQVNo
https://www.youtube.com/watch?v=QpuGevRQVNo
Q1:
Supported Scenarios for Creating Interactive Response
Important (March 2025 Update):
Teachers can set Interactive Response Questions (IRQs) to automatically return
- Final score-marks and teacher feedback (recommended after March 2025)
- Star
- Individual rubrics criteria score and feedback (recommended after 2026 when rubrics can be copied across components in SLS)
To enable this, upload a corresponding HTML5 file to the Free-Response Question - Interactive Response Assistant by uploading corresponding xAPI compliance HTML5 file to the Free-Response Question and setting up the rubrics to be used.
You may download the HTML5 ZIP files based on the scenarios to create FRQ with Interactive Response.
| Scenario | Use Case | Sample Code | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Send score, feedback and criteria score and feedback | Involves rubrics and “Show and use rubric marks“ is not selected |
[03 html5-dynamic-input-score-is-text-fieldhttps://iwant2study.org/lookangejss/slshtml5score/sls_interactive_VSC_Cline_GeminiPro25.zip">sls_interactive_VSC_Cline_GeminiPro25.ziphttps://window.opener.top.close/">//window.opener.top.close();
|
Facebook post https://www.facebook.com/share/p/15dL8v4Q6i/
On 11 July 2025, a dynamic and forward-thinking 120 teachers from schools came together for a highly energising and inspiring workshop titled "Digital BrainSparks", jointly organised by Theresa Heng AST (Academy of Singapore Teachers) and Eve Tan and Loo Kang Lawrence Wee ETD (Educational Technology Division). The central aim of the session was to empower educators with the latest SLS AI Authoring Copilot ACP tools and EdTech platforms to co-create high-ceiling, intelligent Math challenges tailored specifically for high-ability learners.
Workshop Details & Resources and SLS MOE library https://vle.learning.moe.edu.sg/moe-library/module/view/2b78f611-89a8-45ae-8866-33dd7e8b4627
We had a ball of a time showing ACP and HTML5 generators using Gemini 2.5 Pro and https://iwant2study.org/lookangejss/slsZipper/Code_to_ZIP_Converter/ It was a vibrant hands-on design sprint, where teachers were immersed in collaborative group work and guided exploration of what constitutes a truly rich and rigorous Math interactive task. They explored how intelligent interactivity, adaptive pathways, and thoughtfully designed digital interfaces could unlock deep mathematical thinking and engagement.
The heart of the workshop revolved around one key question: What makes a Math challenge intelligent? Educators reflected deeply on the roles of abstraction, pattern recognition, multiple representations, and cognitive challenge, and then translated their insights into digital prototypes. These prototypes weren’t static worksheets—they were living, breathing interactive tasks that could be deployed, tested, and refined in real classrooms after 30 minutes of development work by the AI, with human as the pilot.
The discussions were rich, the energy was palpable, and the sense of purpose was unmistakable. Educators shared their HTML5 (21 groups so a minimum of 21 interactive were generated and examined ways to optimize student thinking through guided inquiry and exploratory learning) —all with the support of SLS and the cutting-edge digital tools in the world.
One especially inspiring outcome? Mr Lim Kim Park, his post https://www.facebook.com/share/p/1EX7UKpu7M/
, a teacher work attachment participant, took the ideas sparked during the session and transformed them into a fully functioning digital English interactive within days after the workshop. His newly published activity is a compelling example of how empowered educators can rapidly prototype and implement powerful digital learning experiences that challenge and inspire learners.
This workshop is part of a growing movement that recognises the vital role that educators play in nurturing their students' potential. It highlights how, with the right tools, space, and support, teachers can become powerful co-designers of future-ready learning environments. 📈https://vle.learning.moe.edu.sg/moe-library/module/view/2b78f611-89a8-45ae-8866-33dd7e8b4627/section/93535312/activity/93535324?pageNo=1 to start exploring the 21 and more interactive made by fellow participants.
Facebook post https://www.facebook.com/share/p/15dL8v4Q6i/
Let’s continue to fuel the spark—supporting teachers to dream, design, and deliver bold new learning experiences in SLS that inspire every learner to reach their full potential. Because when educators lead the way, the possibilities are endless.
#DigitalBrainSparks #HighAbilityLearners #MathEducation #DeepLearning #EdTechInAction #CoCreateWithTeachers #AIinEducation #iwant2study #MOESingapore #AST #ETD #SLSInnovates #JoyOfLearning #TeacherLedInnovation #CreativePedagogy #FutureReadyLearners #DesignForLearning #EmpoweredEducators