Example
What Happens Next?
For this challenge, I wanted to explore a "scenario-first" approach to microlearning using Rise 360. By leading with a real-world situation, I aimed to immediately engage the learner in problem-solving. I utilized the Code Block to frame key decision points and information, providing a clean, modern look that complements the branching logic.
25 Replies
A great example of how to use Rise, with clear, modern graphics and engaging interactivity SMcNicol
Thank you!
This is awesome SMcNicol! We’ll be featuring this in an upcoming ELH Weekly newsletter. If you want it delivered to your inbox, be sure you’re subscribed. 🎉
And if you’re up for it, adding a few more details about how you made this or the prompts you used would be super helpful for people checking out your project.
Thank you so much! I’m incredibly honored to be featured in the ELH Weekly—I’ll definitely make sure I’m subscribed to catch it!
Since I didn't see a way to edit my original post, I wanted to share a bit more about the 'why' and 'how' behind this project for anyone interested.
My main goal was to create a scenario-first replacement for traditional learning objectives. I wanted to set the context, stakes, and relevance immediately—which is usually much more effective for new hires or call-center roles.
The Prompt & Strategy: To build the interaction, I used a prompt designed to turn static information into a high-stakes, interactive chat. I asked the AI to:
- Set a specific time and mood (3:47 PM on a Friday).
- Present a complex problem (non-formulary medication for a child).
- Define clear 'expectations' for the learner, such as explaining pharmacy jargon in plain language and weighing next-step options in real time.
The Core Challenge: The learner steps into the role of a Member Service Rep. Instead of just reading a list of what they will learn, they are immediately asked: 'So... what do I do now?'
I found that by focusing on the impact of the choice rather than just the 'correct' answer, the engagement level really shifted.
Thanks again for the support, and I’m happy to dive deeper into the mechanics if anyone has questions!"
this is so inspiring ! thanks!
Do you mind sharing a bit more of how to prompt?
We are goíng to try something similar for sales conversation training. like how to have a difficult conversation with X type of customer on Y topic.
Katie-Jordan looks like many of us could benefit from some "work out loud" vibe coding sessions to get a sense of what we can do. Any chance Articulate could offer some, maybe leverage community members who are willing?
I hear you! Especially timely with so many interesting submissions from the Code Block Build-a-thon, too. (If anyone hasn't checked those out, I encourage you to spend some time exploring there)
Maybe some of those people are willing to share more about their work. Thanks for the feedback, CydWalker_mwh
This is an excellent example of what could be a simple "refresher" training SMcNicol! Thank you so much for sharing. Would you be willing to share a few more details about how you utilized the Code Block to create the running back and forth between the member and the coordinator? 😊
Love your example! It just inspired me to try another new approach in our courses to immediately engage our learners! Nice job :-)
What a great example! I really like the idea of this as an opening or a refresher like IDbyMichelle mentioned in the comments. I am going to prompt to code something similar for our company using our 4 Customer Service Tenets. Thanks for giving me something be be curious about and explore!
This is brilliant! I had no idea you could do something like this in Rise. I love how you made it like it was a call in real time. If possible, would you be able to explain a bit more about the mechanics of the code block? I'd love to have a go at creating something similar but not sure how I'd go about it. Thanks so much!
Thank you Caroline! Below is my process for creating my code.
My Code Vibe Workflow in Rise 360
Why I Use Claude for Coding
I prefer Claude because of its Artifacts feature. It provides a side-by-side preview window, allowing me to see the finished code and interact with the design in real-time. This visual feedback loop makes it much faster to catch bugs and polish the UI than traditional coding.
Detailed Prompting
I start by building a highly detailed prompt. The more specific I am about the functionality, layout, and purpose, the better the initial result. I explicitly ask Claude to "create a single, self-contained index.html file" so all logic and styling are in one place.
Preview & Refine
Using the side-by-side window, I review the design and ask for adjustments (e.g., "center the text" or "tweak the brand colors"). This allows me to see the "finished" product before it ever goes into Rise.
Implement in Rise 360
- Copy the final code from Claude.
- In Rise, select the </> Code block from the block library.
- Click Add Code and paste. The interaction renders immediately and is ready for learners.
Hope this helps!
Yes, that really helps! Thanks so much for the explanation!🙏🏼
I just have to say how incredibly impressed I am by the creativity and intentionality behind this work.
What stands out most is how thoughtfully you shifted from traditional learning objectives to a scenario-first experience. Setting the time, mood, and emotional stakes right away (3:47 PM on a Friday is so real) immediately grounds the learner in context. That kind of design moves learning from theoretical to lived experience.
I also feel that inviting learners to wrestle with “So… what do I do now?” mirrors the real pressure of the role and builds confidence in decision-making in a way bullet points never could.
This is such a strong example of purposeful, learner-centered design!
Thank you! 😍
This is a great design. I'm curious how the 'Your Performance' result at the end is calculated? Selecting the 'optimal' response each time generated a 90% result, does that mean 100% is not possible?
Great catch! You're right—the scoring was artificially capped. The first step has optimal responses worth only 10 points total (3+2+2+3), while later steps are worth 12 points each. That's why perfection maxes out at 90%.
I've fixed it so 100% is now achievable by selecting all optimal responses. Each of the 5 steps now awards 12 points per skill area when optimal, giving you a perfect 60-point total.
Try running through with all optimal choices again—you should see that perfect 100% now!
Just...
WOW!
👏🏾👏🏾👏🏾👏🏾👏🏾
The fluidity of the immersive experience is wonderful. I felt like I was there with the agent, trying to help Maria.
Thank you Thomas!
Thank you for sharing! Inspiring example and appreciate learning about your vibe coding process!
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.