Example
What Happens Next?
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!🙏🏼
This is so brilliant and exciting! Did the coding do everything - the branching and scoring as well as the layout, design? Or did you use some of the standard blocks as well? I've been wanting to do something like this for ages but I have zero coding knowledge/skill/experience. I was so excited when Rise introduced vibe coding but I'm really struggling to know what it can be used for and what you still have to use the standard blocks for. Thanks so much.
The short answer is: Yes, the AI can handle everything. When you use a prompt-based approach, you aren't just styling a page; you are defining the "brain" of the lesson.
The Logic (Branching & Scoring)
You don't need to know how to write an if/then statement. You simply tell the AI:
"If the learner chooses Option A, take them to the 'Advanced' scene. If they choose Option B, show a hint and let them try again. Keep track of their score and show a summary at the end."
The Aesthetics (Layout & Design)
Instead of dragging and dropping standard blocks, you describe the "vibe." You can ask for a "sleek, dark-mode terminal interface" or a "bright, clean medical dashboard." The code generates the layout, buttons, and animations to match that vision.
Does that help?
Yes, immensely, thanks so much.
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.