ACP HTML5 Interactives Prompt Library (for Singapore MOE SLS ACP)

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)
• 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.

What this app does

The page acts like a practical prompt-and-code handbook:

1. Shows a list of classroom-relevant HTML5 interactive features.
2. Explains each feature in plain, teacher-friendly language.
3. Lets users copy prompts directly into ACP.
4. Lets users reveal and copy JS code only when needed.
5. Includes feature navigation (jump menu + back-to-top) for long-page usability.

Why this is useful for SLS ACP

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

Included feature categories

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

Compatibility notes

• Most examples are intended for modern browsers (Chrome, Edge, Firefox).
• Some features depend on device/browser capabilities and permissions.
• Screen recording and WebM workflows are intended for laptops/Chromebooks, not iPad.
• Text-to-speech language availability depends on OS-installed voices/language packs.

Project structure

• index.html - Main content and feature sections
• style.css - Visual design, layout, typography, sticky navigation, buttons
• script.js - Interaction logic (copy prompt/code, reveal JS, feature jump, back-to-top)
• ACP.png - Banner logo image placeholder

How to use this page

1. Open index.html in a browser.
2. Use the Jump to Feature dropdown to go to the desired feature.
3. Copy a prompt and paste it into ACP.
4. Modify the prompt to fit your lesson context.
5. Reveal and copy the JS snippet if you need implementation guidance.

Scope and intent

This resource is a practical support guide for educators.
It is not an official MOE/SLS product document and is not exhaustive.

Credits

Created by Mathew Lim for the SLS Community.

Last updated

Feb 2026