Choice Flow (Rise code block)

I’ve wanted true flexibility in Rise for ages, so when the new Code Block (Beta) landed I was thrilled to try it. Within a morning I ported a custom Choice Flow interaction using plain HTML/CSS/JS—and it ran smoothly on desktop and mobile while still feeling “native” to Rise.

After sharing the demo on LinkedIn, I immediately got questions about customizing the look and text. That feedback sent me back to the editor to ship a themable, content-editable version. Now you can:

• Change branding in minutes with a simple config.js (colors, backgrounds, progress bar, fonts—no CSS edits).
• Edit —questions, answer choices, and feedback—via config.content.sample.js (no digging through the core code).
• Zip once, reuse anywhere in Rise’s Code Block. It’s lightweight, responsive, and easy for teams to maintain.

What I love about the Code Block: it runs real web code inside Rise, so you get total control over layout and behavior without losing Rise’s polish. As your needs grow, you can extend the interaction (accessibility tweaks, analytics/xAPI hooks, or small libraries) without rebuilding from scratch.

Grab the download, make a few edits, zip, upload—and you’ve got a branded Choice Flow ready to go.

Quick start

1. Unzip the download.
2. Open config.js to set your brand colors and font.
3. Open config.content.sample.js to customize the text 
4. Re-zip the folder and upload to Rise 360 → Code Block (Beta).
5. Publish or share a Rise preview link.

Want to Try It Yourself?

You can preview the interaction here to see it in action.
If you'd like to explore how it was built, I’ve also made the full project available as a free download. Feel free to dive in, tweak it, and make it your own!

 

About me:

Paul Alders

LinkedIn Profile

The eLearning Brewery