Forum Discussion
The Discount Decoder
A short, interactive course for school-age learners on percentage change, discounts and tax. Did you know a price cut of 20% followed by a rise of 20% leaves you worse off than you started? Traps like that catch adults every day.
Fully accessible — keyboard nav, swipe, ARIA states, reduced-motion opt-out, mute toggle for the narration.
For those interested, here's how it was built.
The short answer: it's a single self-contained HTML file dropped into a Rise code block. The longer answer is that "single HTML file" hides a fair few learning-design decisions I've refined across these builds. Here are the ones I think travel best.
The whole thing is one file
No frameworks, no build step, no CDN. One index.html, two background JPGs, nine short MP3s. Drop the folder into a Rise code block and it works. Vanilla HTML/CSS/JS is boringly reliable!
Each screen is a "scene", and only one is on at a time
Every section is a <section class="scene"> stacked absolutely on top of the others. A single class, .on, controls which one is visible. Navigating fades the old scene out and the new one in, entering from a slightly different starting position depending on whether you're going forward or back.
It's the same pattern as a native iOS or Android app: a stack of screens, one active. Learners find it intuitive because they've been using apps built this way for a decade.
The nav rail is deliberately simple
A row of small pill segments, one per section, with persistent Next and Previous arrows. Learners can jump anywhere by clicking a segment, arrow-key through, or swipe on mobile. The Next arrow pulses the whole time it's active, because I noticed in testing that it wasn't obvious there was a way forward unless you were shown.
The rail counts up: 01 / 10, 02 / 10. That number does more work than you'd expect. It answers "how much of this am I in for?" at a glance, without a progress bar dominating the screen.
One interactive idea per section
Each section gets a single main interactive. The temptation is always to pile more onto a screen; I've learned to resist it. A learner can only attend to one thing at a time, and one interaction done properly beats three done half-heartedly.
Learners drive the pace
Nothing auto-advances. Every reveal, animation and transition waits for a click, tap, key press or swipe.
This matters more for maths than for, say, policy training. Someone reading a data protection policy can skim. Someone learning the multiplier trick needs a moment to actually think, and if the screen has already moved on, you've lost them.
What I'd tell someone starting out
Copy the pattern rather than the code: scenes, a rail, one idea per section, learner-paced reveals, tolerant feedback, accessible controls. It's worked for me on safety courses and product-style content as well as this maths lesson.
And push past click-to-reveal. The interactions that seem to land are the ones where the learner changes a number and watches the result, commits to an answer before seeing the explanation, or makes a mistake and gets told why it was tempting.
Keep it short, too. This lesson is 10 sections, roughly 8 minutes. Nobody was dragged through it.
Happy to answer specific questions in the thread. If enough of you want a follow-up on any particular piece, shout!
Tools used: Canva, Gemini and Rise Canvas