Forum Discussion
Code Block: Interactive Process
Hi All!
I've been trying to use the Code Block more and I'm finding out that if I can think it, I can build it (with the help of AI)!
This started with a simple idea - can I make a process more interactive instead of a static image?
With that idea, I worked with ChatGPT to vibe-code and much to my surprise, it worked! I was able to not only do a "click to reveal" with the process but, also animate the lines between the graph to help the learner see the connection and what's next.
Below is review link. You can see the example, download the text file and see the code snippet. The only things that would need adjusted for your needs are the "Steps Array" and the colors since the code uses the purple from my project.
6 Replies
KayleneWance I love the “if I can think it, I can build it” mentality! I think this makes a big difference in helping learners see the flow by making it interactive.
Thank you for sharing the code too!
We’ll be featuring this in an upcoming ELH Weekly newsletter. If you want it delivered to your inbox, be sure you’re subscribed. 🎉
PS: Anyone interested in testing out KayleneWance's "if I can think it, I can build it" mentality should join the Code Block Build-a-thon next month!
Kaylene this is great.
Beyond the code snippet I would be interested to know the prompts you used to get to this snippet. How many iterations did it take to get what you wanted?
Thank you for sharing.
Tim
Hi Tim,
Glad you like it! It took me roughly 1.5 - 2 hours to build. Looks like about 10 big prompt ideas that drove the build
- Initial idea (interactive process graph in Rise)
- Image + explanation of snake layout
- Debugging why nothing rendered
- Move content into cards + spacing changes
- Remove deselect behavior + color/font changes
- Remove redundancy + visual cleanup + color-state changes
- Make arrows more obvious
- Add animated arrows
- Debug why only one arrow animated
- Reaction / confirmation
I'll be honest, I didn't have a real clear picture when I started so part was me chatting back and fourth to get to the outcome I wanted. Then when I had the base idea, I just started building on top of it to get that final result.
Thank you Kaylene. I am trying to learn to create better prompts. would you be willing to share the wording in your initial two prompts? I am curious how you described this snake layout in your prompt. I had not seen one before so wouldnt even begin to know how to describe it. This could be a foundation to create any kind of interactive process once we understand how to get it started.
Sure! I will note, I've had my work ChatGPT for about a year, so it does already know that I work in eLearning Design and Development and my main audience is adults. I didn't need to prompt it to know those things about me.
This was the initial prompt: "Could you and I work together to write code for a Rise code block to make a graph more interactive? The idea I have is that we have a process graph - but I want the user to click on each to reveal what happens at that stage/part of the process."
In the very next prompt, I noted the snaking. "...The way it will read is top to bottom. Top is the starting place, bottom is ending place. I also want this process to snake." I also gave it information of the people in order.
After I told it I wanted the process to snake - it reiterated my ask in it's answer. Here's what it gave back after telling it to snake:
"Perfect — we can “snake” this by laying the steps in a 2-column grid and drawing a connecting line that goes:
Row 1: left → right
Row 2: right → left
Row 3: left → right
Row 4: right → left…and clicking each person reveals what they do."
I hope this helps!
