This project is a teacher-facing reference page that supports the new ACP SLS HTML5 Interactive Generator workflow in Singapore's MOE Student Learning Space (SLS).
It provides curated, copy-ready:
- Prompt examples for Authoring Copilot (ACP)
- Minimal sample interactives embedded in sandboxed iframes
- Reference JavaScript snippets (hidden by default, reveal on demand)
- Classroom use ideas for each interactive feature
The goal is to help teachers quickly generate usable SLS HTML5 interactives without starting from scratch.
The page acts like a practical prompt-and-code handbook:
- Shows a list of classroom-relevant HTML5 interactive features.
- Explains each feature in plain, teacher-friendly language.
- Lets users copy prompts directly into ACP.
- Lets users try a minimal working sample interactive for each prompt.
- Lets users reveal and copy JS code only when needed.
- Includes feature navigation (jump menu + back-to-top) for long-page usability.
- Reduces trial-and-error prompt writing time.
- Gives teachers a starting baseline they can modify.
- Encourages safe reuse of browser-native features (no heavy external dependencies).
- Supports fast prototyping for SLS lesson activities and student tasks.
The current page includes examples such as:
- Speech Recognition
- Download TXT/CSV/JSON files
- Canvas Drawing Board
- ContentEditable worksheet input
- Download PDF button (PDF screenshot of the app)
- Camera Access
- Screen Recording (WebM)
- Download Screen Recording (WebM)
- Charts, progressive reveal, random question assignment, text-to-speech
- Most examples are intended for modern browsers (Chrome, Edge, Firefox).
- Some features depend on device/browser capabilities and permissions.
- Speech recognition, camera, and screen recording samples need HTTPS or localhost/127.0.0.1 because they request microphone/camera/screen permissions. Browser permission support inside iframes can still vary by browser.
- Screen recording and WebM workflows are intended for laptops/Chromebooks, not iPad.
- Text-to-speech uses the browser's Web Speech API only. Voice quality and language availability depend on OS-installed voices/language packs.
index.html- Main content and feature sectionsstyle.css- Visual design, layout, typography, sticky navigation, buttonsscript.js- Interaction logic (copy prompt/code, reveal JS, feature jump, back-to-top)- Embedded iframe samples are generated from
script.jsand loaded only when a user clicks Sample Interactive ACP.png- Banner logo image placeholder
- Open
index.htmlin a browser. - Use the Jump to Feature dropdown to go to the desired feature.
- Copy a prompt and paste it into ACP.
- Modify the prompt to fit your lesson context.
- Click Sample Interactive to try the feature in a small iframe preview.
- Reveal and copy the JS snippet if you need implementation guidance.
This resource is a practical support guide for educators.
It is not an official MOE/SLS product document and is not exhaustive.
Created by Mathew Lim for the SLS Community.
June 2026