How I Build Scorable xAPI Interactives for SLS Using AI — A Step-by-Step Workflow
Published: March 8, 2026 | Singapore
Creating rich, scored interactives for Singapore's Student Learning Space (SLS) traditionally required significant programming expertise and time. Today, with the help of AI-assisted tools developed by the Singapore educator community, teachers can generate fully functioning HTML5 interactives that report scores through xAPI in just a few hours — even with minimal coding experience.
This article documents a practical workflow that teachers can follow to go from prompt → interactive → scorable SLS activity. The process is illustrated using a real classroom example: a Primary 5 Triangle Area interactive.
The Workflow at a Glance
The entire pipeline consists of five stages:
| Stage | Tool | Purpose |
|---|---|---|
| 1 | SLS ACP Interactive Generator | Generate the base HTML5 interactive using AI |
| 2 | SLS Prompt Generator | Design and refine effective prompts |
| 3 | AIzipper | Package the code into an SLS-compatible ZIP |
| 4 | xAPI Integrator Agent | Inject xAPI scoring and analytics |
| 5 | SLS Platform | Upload, embed, and verify the activity |
This workflow enables teachers to move from idea → classroom-ready interactive in a structured and repeatable way.
Stage 1: Generating the Interactive with SLS ACP and AI
The process begins inside the SLS ACP (AI Content Partner) Interactive Generator, where teachers describe the learning activity they want.
| https://vle.learning.moe.edu.sg/my-drive/module/edit/3c9eb133-3948-4a14-9635-2d73fbabbf79/section/101671807/activity/101777129?quizPage=4 |
The AI model (typically Gemini or Claude) then generates a self-contained HTML5 interactive.
However, writing a good prompt from scratch can be difficult. To support this, teachers can use the SLS Prompt Generator library:
| https://iwant2study.org/lookangejss/promptLibrary/ai-prompt-library.html |
https://iwant2study.org/lookangejss/promptLibrary/ai-prompt-library.html
The tool helps teachers construct structured prompts by filling in key parameters:
• Topic / Subject Matter
Example: Triangle Area
• Grade Level
Example: Primary 5–6
• Subject Area
Example: Mathematics
• Interactive Type
Simulation, Educational Game, or Interactive Exploration
• RAT Framework Alignment
| RAT Level | Purpose |
|---|---|
| Replace | Digital version of existing quiz or worksheet |
| Amplify | Enhances learning through simulations or visualisations |
| Transform | Enables new learning experiences impossible before |
• Specific Requirements
Examples include:
-
Include Exploration Mode and Quiz Mode
-
Display base, height, and area units
-
Allow students to manipulate triangle dimensions
-
Provide instant feedback
The prompt generator also contains a library of ready-made examples across subjects — including trigonometry tools, Chinese text-to-speech interactives, projectile simulations, and life-cycle quizzes. Teachers can adapt these examples instead of starting from scratch.
Once the prompt is generated, it is copied into the SLS ACP Interactive Generator, which produces the first version of the interactive.
Stage 2: Iterative Refinement — “Keep Asking Until It's Right”
The first AI-generated output is rarely perfect.
For the P5 Triangle Area interactive, the initial version might:
-
lack the intended Exploration / Quiz structure
-
use incorrect labels or units
-
have incomplete instructions
-
require UI improvements
The solution is iterative prompting.
Teachers continue refining the interactive by asking the AI to:
-
adjust the interface
-
add missing features
-
correct mathematical logic
-
improve clarity for students
This process may involve 5–20 iterations.
The key principle is simple:
Do not settle for the first result — keep refining until the interactive genuinely supports learning.
The final version of the Triangle Area interactive contains:
• Exploration Mode
Students manipulate triangle dimensions to observe how area changes.
• Quiz Mode
Students answer questions about triangle area using the interactive.
• Learning analytics indicators, including:
-
Interactions
-
Elapsed Time
-
Unique Explorations
-
Diversity of actions
-
Sequence Changes
These metrics later feed into SLS learning analytics dashboards.
Stage 3: Packaging the Code with AIzipper
Once the interactive works as intended, it must be packaged into a format that SLS can load.
Simply copying HTML code will not work because:
-
External CDN scripts cannot load inside SLS
-
SLS requires a specific ZIP structure
-
The interactive must run offline
The AIzipper – Code to ZIP Converter solves this.
| https://iwant2study.org/lookangejss/slsZipper/Code_to_ZIP_Converter/ |
https://iwant2study.org/lookangejss/slsZipper/Code_to_ZIP_Converter/
The tool performs three key tasks:
1️⃣ Merges HTML, CSS, and JavaScript into a single structure
2️⃣ Downloads any external dependencies automatically
3️⃣ Generates an SLS-compatible ZIP package
The resulting ZIP contains a root index.html file and runs completely offline inside SLS.
Stage 4: Injecting xAPI Scoring with the xAPI Integrator Agent
An interactive becomes truly useful in SLS when it can report student performance and interaction data.
This is done through xAPI (Experience API).
The xAPI-Scorable Interactive Integrator Agent adds this functionality automatically.
| https://iwant2study.org/lookangejss/appXapiIntegratorAgent/ |
https://iwant2study.org/lookangejss/appXapiIntegratorAgent/
Steps:
1️⃣ Upload the ZIP from Stage 3
2️⃣ Choose an integration mode
| Mode | Purpose |
|---|---|
| Timeline Mode | Logs interactions such as clicks, input changes, and navigation |
| Minimal Mode | Adds xAPI libraries for custom implementations |
3️⃣ Optional: add AI instructions for advanced tracking
Examples:
-
Weight later answers more heavily
-
Track time spent on sections
-
Log exploration patterns
The tool injects the required xAPI scripts and produces a new ZIP ready for SLS deployment.
Stage 5: Uploading to SLS and Verifying
The final ZIP is uploaded into SLS as an Interactive Response Question.
Teachers then:
-
Upload the ZIP file
-
Add question pages
-
Configure quiz scoring
-
Preview the interactive
During testing, teachers check:
-
Does the interactive load correctly?
-
Can students manipulate the triangle in Exploration Mode?
-
Do Quiz Mode questions work?
-
Is xAPI data being logged?
If any issue appears, teachers return to the AI workflow and refine the interactive.
Why This Workflow Matters
This workflow significantly lowers the barrier for creating high-quality digital interactives.
What previously required weeks of development can now be done by teachers in a single afternoon.
Benefits include:
• Teacher-created digital interactives
• Built-in learning analytics via xAPI
• Integration with SLS quizzes and gradebook
• Rapid prototyping and refinement with AI
Most importantly, teachers gain the ability to design interactive learning experiences tailored to their own students, rather than relying solely on pre-built resources.
https://iwant2study.org/lookangejss/math/AI/ice/Interactive_20260305042707.zip- Interactive_20260306040042.zip
- Interactive_20260306100055.zip
- P1_Money_AdaptiveInteractive_v3.zip
- P5_Area_of_Triangle_-_Multi-Type_Exploration_20260306.zip
- P5_FDP_Converter_Lab_v1.zip
- P5_FDP_Converter_Lab_v1/
- P5_Triangle_Area_Interactive_20260306.zip
- P5_Triangle_Master_Pro_v2.zip
- P5_Triangle_Master_Pro_v2/
- Percentage-Fraction-Decimal_Converter_Lab_20260305.zip
- scorable_newTab_P5_Triangle_Master_Pro_v3_Refined/
- scorable_newTab_P5_Triangle_Master_Pro_v3_Refined_Claude_lookang.zip
- scorable_newTab_quiz_P5_Area_of_Triangle_-_Multi-Type_Exploration_20260306.zip
- scorable_newTab_quiz_P5_Triangle_Area_Interactive_20260306.zip
- scorable_newTab_timeline_P1_Money_AdaptiveInteractive_v2.zip
- scorable_newTab_timeline_P5_Area_of_Triangle_-_Multi-Type_Exploration_20260306.zip
- scorable_newTab_timeline_P5_FDP_Converter_Lab_v1.zip
- scorable_newTab_timeline_P5_FDP_Converter_Lab_v1/
- scorable_newTab_timeline_P5_Triangle_Area_Interactive_20260306 (5).zip
- scorable_newTab_timeline_Percentage-Fraction-Decimal_Converter_Lab_20260305.zip
- scorable_newTab_timeline_Percentage-Fraction-Decimal_Converter_Lab_20260305/
- scorable_newTab_timeline_Percentage-Fraction-Decimal_Converter_Lab_20260305_Claude46v3.zip
- scorable_newTab_timeline_scorable_newTab_timeline_P5_Triangle_Area_Interactive_20260306__4_.zip