Breadcrumbs

MOE Library

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 led by Eve Tan and 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 Facilitated by Math Master Teacher, Ms Theresa Heng
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 wong_shu_yi@moe.gov.sg.

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

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

Click Create or Edit Module
Click the orange pencil icon on a module card

📝 2. Fill in Module Details

Steps

Enter Module Title
Add Module Notes (curricular considerations, e.g. LOs and key concepts found in subject-specific Teaching and Learning Guides)
Add Keyword Tags (for better searchability)
Click Add Module Tag
Select Subject and Level
Select relevant Learning Outcomes
Collapse the tag section (optional)
Add more Details (pedagogical considerations)
Choose number of Sections (usually aligned with Learning Outcomes)

What to type (Example)

P5 Percentage

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

Click the orange Create button
Review generated Sections and their descriptions
Either:
1. ✅ Select All Generated Content and click Add, or
2. 🔁 Regenerate Module Plan if needed

📚 4. Generate Activities in a Section

Steps

Click the orange pencil icon on a section card
Review pre-filled Section Title and Notes
Add a Section Tag (one Learning Outcome)
Add further pedagogical details
Choose number of Activities (quizzes included)
Optional: Anchor to a Knowledge Base (text up to 30,000 characters)

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

Click Add to attach knowledge base (if any)
Click the orange Create button
Review generated Activities and Descriptions
Either:
1. ✅ Select All and click Add, or
2. 🔁 Regenerate Activities if needed

🧩 6. Generate Components within an Activity

Steps

Click the orange pencil icon on an activity card
Let Authoring Co-Pilot generate text, media, or questions
Customize content as needed

✅ 7. Finalize

Steps

Once all resources and components are ready, click Done to save the module

Additional Resource

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

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:

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.learning.moe.edu.sg/teacher-user-guide/author/html5-content-development/

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

https://www.learning.moe.edu.sg/partners/integration/whitelisted-websites/

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

4. [Class activityhttps://blogger.googleusercontent.com/img/a/AVvXsEisE_lhrMcOIKI2SGKOw_2tTiuqJ_-znPH1DcH9Y2CTx8KliPgul3B1jD1649ESZfSlnpvir5QcRor8v1cLL7n_o9ghfTMjvuaALv5psvEM091Mv8-W4gdILnDHax8ArDQoXrg-4_VqDgx9cg0ueubxPc9l_IpU_k_QAH9Bab0jyYC_X8O1QYKsTY9UTZTC">

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/

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

“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 Here https://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

🧠 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

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 Process https://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.

This content is not available

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

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

Interactive_Multiples_of_9/

🔑 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:

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)
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=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

Screenshot_2025-05-08_at_3.38.40 PM.png

Star

expected MARKS sent to SLS

MOE Library

20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD

6. [SDLhttps://www.trae.ai/">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.
  - Familiarity with the files created
    - index.html (HTML5)
    - style.css (CSS)
    - script.js (JavaScript client-side only)
- 🧠 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.

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

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();

The following line of code in the HTML5 Media Object may have caused this issue:
Why does the HTML5 Media Object appear as a file, instead of being loaded in the frame?
This happens when there is no "index.html" file found directly inside the ZIP file, e.g. it is found inside another folder, or it has been renamed as "index.html.html". Please follow steps 1 and 2 as stated in the User Guide above when uploading a HTML5 Zip file in SLS. You may use this tool: https://sg.iwant2study.org/ospsg/index.php/1253 to automatically correct the ZIP file into a SLS compatible format.
How to create HTML5 ?

Create a fully interactive, realistic-looking simulation of [plant growthhttp://trae.ai/">Trae.ai, open by the folder with a working xAPI such as folder with 03 html5-dynamic-input-score-is-text-field unzipped. Prompt the IDE to add the interactive on top of the existing working xapi files (index.html) and add suitable marks and feedback after each action. For example, t =0, Q1: repeat the question 1 string, answer was [student responsehttps://www.youtube.com/watch?v=QpuGevRQVNo">link for detailed steps.

03_html5-dynamic-input-score-is-text-field.zip

Star

FeedbackMarks/1

Q2:

html5_dynamic_input_score_is_text_field_20250407_152855.zip

Star

FeedbackMarks/99

Q3:

xAPI_plant_simulation_20250417_193700.zip

Star

FeedbackMarks/2

Unstar

Q4:

xAPI_sls_interactive_20250417_163112.zip

Star

FeedbackMarks/10

Unstar

Q5:

JinSheng's interactive

jinsheng_data_20250407_152858.zip

Star

FeedbackMarks/3

Star

Q6:

xAPI_wRiteFormulaPDF_SLS_20250527.zip

Unstar

FeedbackMarks/1

Star

xAPI when working, will capture feedback and score.

MOE Library

20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD

7. Theresa's Performance Tasks for Workshop Particpants

https://drive.google.com/drive/folders/1mn5xiJLJbpuyLU2xt7e4yBOSCUcuHHbd

by Table 1: lee_xuefen_patricia

T01Fraction_Frenzy__Multiplication_Game_20250711__1_.zip

Star

Level: Primary 5 multiplication of fractions

Create an HTML-based math game for [Primary 5https://www.bensound.com/bensound-music/bensound-sunny.mp3"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.

by poh_see_kee

T16_1Game_1__Quiz_on_Speed_20250711.zip

Star

The game assesses students’ basic understanding of solving speed-related problems.

by glennjh

T16_2Game_2__Timestable.zip

Star

Why the file above doesnt render in SLS?

Answer: The filename casing is a critical detail that is overlooked. Many web servers and platforms, including SLS, are case-sensitive and specifically look for `index.html` in all lowercase as the default file to display.

I'll rename `Index.html` to `index.html`.

TimesTableRockets.zip

Star

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.

by paulinehui77

T17_1Math_Challenge_20250711__1_.zip

Star

by teng_hui_khim_elsa

T17_2Times_Tables_Bubble_Shooter_20250711.zip

Star

by lim_bao_cheng

T18Fraction_Escape_Room__The_Magical_Recipe_20250711.zip

Star

by ang_ming_huat

missing .ZIP?

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)

by lau_kai_wen

T19_2Subtraction_Asteroids_Math_Game_20250711.zip

Star

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)

by kala_devi_ramasamy

T20Millionaire_-_P6_High_Ability_Whole_Numbers_20250711__1_.zip

Star

by nuriani_mahat

T21Times_Tables_Pac-Man__P3__20250711.zip

Star

MOE Library

20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD

D. Feedback

In this section, students will provide feedback on the effectiveness of the SLS course. They will reflect on their learning experiences, identify areas for improvement, and suggest enhancements for future iterations of the course. This feedback will be crucial for the continuous improvement of the course structure and content.

MOE Library

20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD

1. Course Content Review Quiz

Total Marks/ 0 (1)

Q1:

Recommended30 sec

The learning objectives of the lesson were clearly stated and easy to understand.

Strongly Disagree

Disagree

Agree

Strongly Agree

Marks/0

Q2:

Recommended30 sec

The lesson content was relevant to giving me the knowledge useful in my work.

Strongly Disagree

Disagree

Agree

Strongly Agree

Marks/0

Q3:

Recommended30 sec

The pedagogy and teaching methods used helped me understand the topic better.

Strongly Disagree

Disagree

Agree

Strongly Agree

Marks/0

Q4:

Recommended30 sec

I had enough opportunities to participate and ask questions during the lesson.

Strongly Disagree

Disagree

Agree

Strongly Agree

Marks/0

Q5:

Recommended30 sec

The teacher(s) explained concepts clearly and effectively.

Strongly Disagree

Disagree

Agree

Strongly Agree

Marks/0

Q6:

Recommended30 sec

The learning materials were helpful in understanding the topic.

Strongly Disagree

Disagree

Agree

Strongly Agree

Marks/0

Q7:

Recommended30 sec

The lesson was well-paced, giving me enough time to understand the material.

Strongly Disagree

Disagree

Agree

Strongly Agree

Marks/0

Q8:

Recommended30 sec

After this lesson, I feel more confident in my understanding of the topic.

Strongly Disagree

Disagree

Agree

Strongly Agree

Marks/0

Q9:

Any further learning needs or areas of interest for future workshop?

Any other comments/feedback?

FeedbackMarks/1

You've reached the end of this quiz

MOE Library

20250711 Digital Brainsparks: Co-Creating Intelligent Math Challenges for High-Ability Learners Workshop by AST-ETD

2. Survey Data

71/119 participants

Question	Disagree	Agree	Strongly Agree
Q1: The learning objectives were clearly stated and easy to understand.	0	39	32
Q2: The lesson content was relevant to my work.	0	26	45
Q3: The pedagogy and teaching methods helped me understand the topic better.	0	38	33
Q4: I had enough opportunities to participate and ask questions.	6	40	25
Q5: The teacher(s) explained concepts clearly and effectively.	0	35	36
Q6: The learning materials were helpful in understanding the topic.	1	29	41
Q7: The lesson was well-paced, giving me time to understand the material.	13	35	23
Q8: I feel more confident in my understanding of the topic after this lesson.	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.

Help us improve

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