Example
Need to Know? Sorting Doug's 200 Slides 📄😱
We've all met Doug. Doug is a lovely SME who knows everything, and he just rolled 200 slides into your cubicle for a 15 minute course. "Good news! I trimmed it down!" 🙃
For this week's challenge, I turned that moment into a sorting activity. Learners drag each of Doug's slides into one of three zones: Need to Know (teach it), Nice to Know (link it), or Never to Know (cut it, kindly).
Then they hit Submit, and Doug weighs in. Try sending his paintball offsite photo to the cut zone and see what happens. 🎯
Why a slider?
Drag and drop isn't fully keyboard accessible yet, and this interaction only needs to move one way: left to right. So the slide card rides on a slider. Learners can grab the card or the slider button with a mouse, or tab to it and use the arrow keys. Screen readers hear which zone the slide is in, not a random number. Same feel as drag and drop, and everyone gets to play. 🙌
What I learned:
- Get one axis right before anything else. If the movement only goes one way, a slider gives you drag and drop feel with accessibility built in.
- Feedback with personality sticks. Doug reacts differently depending on where you drop each slide. It's funny, but it also shows why something belongs in a zone.
- Show the payoff. The end screen compares Doug's 3 hr 40 min version with your trimmed course. That's the real lesson for any LED. ⏱️
Shout out to Claude, my co-creator for the build. Doug and our caffeinated LED were brought to life with Articulate's AI image generation. ☕🤖
Have you ever had a Doug? What's the wildest slide you've had to cut? 😂
5 Replies
Really clever way to make the activity accessible without losing the fun part. I like how the slider works with keyboard controls too. The feedback from Doug adds a nice touch for learners. Cutting 200 slides down to what actually matters is a challenge many of us know. Great work on this one!
hi SMcNicol
Loved your work. did you create the Interaction in rise or Storyline? also how did you create the animated bg?
Thank you! I created this in Rise 360 using code block. See below for more details.
The animated background is part of the same Code Block. It’s a layer that sits behind the activity, with 26 question marks and emojis (🤔 😱 ☕ 📄 😅) drifting up the screen. Each one gets a random size, speed, starting spot, and a little sway and spin, so it never looks like a repeating pattern. 🎈
The fun part? It was part of my prompt: “Can you make the background moving? Add floating question marks and funny emojis?” That was it. Claude handled the code, and I tweaked from there. 🤖✨
Hello SMcNicol . May I call you S? 😀
This time, I’m learning… not enough, despite your description
(I NEVER work on Rise because I NEVER get any requests, so I’m a little behind.)
If I understand correctly, this very successful activity is a 100% JS creation by Claude (and YOU as well, of course—I’m not going to repeat the same clarification I made 15 days ago). Because there’s no slider tool in Rise (I’ve looked but can’t find one), right? So this is an activity that simulates a slider, not a slider used in a way different from its native behavior (this isn’t a criticism). That’s probably what Rise is missing.
And in the case of JS code, I’m curious to know: how long did it take to build it? How many iterations of the proposed code were needed to finalize it? What keywords were used in the prompt(s) to ensure it would work in Rise?
Depending on your answers, I’ll probably have more questions 😅. Thanks.
Thierry
Hi Thierry! S works for me 😄And great questions, you read it exactly right.
Is it a real slider?
This lives in a Rise Code Block and is built entirely with HTML, CSS and JavaScript. I'd push back on "simulates" a little, though. Under the hood it’s built like a real slider: screen readers announce it as a slider, it reports which zone the slide is in, and it works with arrow keys. So it isn’t just something that looks like one. The fun part is the same trick Aman used: the slide card rides along with the slider, so it feels like drag and drop.
How long did it take?
About two hours from idea to final version.
How many iterations?
Two major versions, plus a handful of small tweaks:
First draft:
I gave it my prompt which in hindsight wasn't as detailed as it could have been (I am learning). It produced a vertical slider on a dark background. It worked, but it wasn't quite the vibe I was looking for. 😖
Second draft:
I mocked up the exact layout along with the changes I wanted and handed it to Claude. This was a game changer (yes I will be doing this going forward, saved me a ton of time). 🎯
What keywords did I use? Honestly, none! 😄 I talked to Claude in plain language. What made the difference was what I showed it: the challenge description, my general idea and a mockup of the layout I wanted.
The Rise-specific stuff lives in my saved preferences in Claude, so I don’t have to repeat it every build. Here are just a few:
- Use my company’s brand colors and fonts. Everything looks like it belongs in our courses from the first draft.
- Keep all text at 14 pt or larger. Code Blocks can shrink on smaller screens, and tiny text is hard to read.
- Watch out for copy buttons. In Rise, they’ve jumped around the screen and not actually copied anything for me, so I flag that up front.
- Make it accessible. Keyboard friendly, screen reader labels, and good color contrast. That’s how this slider ended up working with arrow keys. ♿
- Add player controls to videos, including closed captions. Learners can play, pause, and turn on CC, so every video works for everyone. 🎬
Images like Doug’s face are embedded right in the file, so it’s one tidy zip to upload. 📦
Want to try it yourself? 🚀 Check out Vibe Coding in Rise 360. It walks through how to vibe code from start to finish, from the first prompt to dropping a working Code Block into your course. It’s a great place to start if you’ve never built in Rise before.
Hope this helps. Fire away with more questions anytime!
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.