Handy Templates! – Three Reusable Rise Code Blocks for Everyday Problems
For this Build-a-Thon, I decided to submit a small collection of reusable Rise Code Block templates rather than a single standalone interaction. The idea behind Handy Templates! is simple: When working in Rise, there are a few patterns we reach for again and again, but they are either not available natively or require workarounds that compromise usability, accessibility, or visual consistency (I know you know a few...) This submission brings together three practical, “use-them-tomorrow” templates that are designed to feel native to Rise while extending what is possible with Code Blocks: Floating Text Cards Carousel MCQ with No Right or Wrong Answers + Side Image Likert Scale (Click-to-Reveal Reflection) Each block is fully reusable, configurable, and intentionally designed around real instructional use cases rather than novelty. Detailed descriptions and the codes for each block are included directly in this Rise review link: https://360.articulate.com/review/content/d4be7478-bd5a-49bd-a972-642ddc47c43b/review If any of these solve a problem you have worked around before, feel free to copy, adapt, and make them your own. That was the goal!!!Meet Your Learner Persona
Hello there! 👋 Here's my project: A short, playful interaction that learners could experience at the beginning of a course, but not limited to that. I used both Lovable and ChatGPT as my buddies throughout this learning journey. The interactive code is embedded directly inside the course project. Check out the project here: Meet Your Learner Persona ✨The story behind As a newcomer to vibe coding, the experience was rewarding in the best possible way. I genuinely enjoyed every part of the process and learned a lot, especially about writing effective prompts, navigating code, and making small changes. I found a lot of inspiration by exploring visual and interaction design references on platforms like Dribbble, Figma, and Godly, which helped shape the experience's look and feel. Throughout the project, I experimented with both simple and more complex interactions. In the end, I found myself drawn to the simpler ones, those that quietly support the learning journey without adding unnecessary friction or contributing to cognitive overload. Try taking it to discover your type. 💻Here's also the prompt I used: Create a self-contained, embeddable HTML/CSS/JavaScript interactive learning game designed to be placed inside a Rise course code block. Concept: “Discover Your Learner Persona” – a playful, low-pressure personality-style interaction that helps learners reflect on how they prefer to learn. Experience goals: Fun, fast, and intuitive (2 minutes max) No right or wrong answers Feels like a game, not a test Encourages self-awareness and engagement at the beginning of a course Interaction design: Display one card at a time in the center of the screen Each card contains a short first-person statement describing a learning behavior Two buttons below each card: “This is me” “Not really” When the learner clicks “This is me”, assign 1 hidden point to a specific learner persona When “Not really” is clicked, move on without scoring After all cards are answered, calculate the dominant learner persona and display the result Learner personas (4 total): The Explorer – learns by experimenting, trying things out, discovering through action The Builder – learns best with structure, steps, and logical progression The Observer – prefers watching, reading, and understanding before acting The Connector – learns through discussion, stories, and social interaction Cards (8–10 total): Write short, relatable, first-person statements such as: “I like to jump in and try things out, even if I don’t fully understand yet.” “I feel more confident when learning follows clear steps.” “I prefer seeing examples before I start.” “Talking things through with others helps me learn.” Each card should clearly map to one persona behind the scenes, but never reveal scoring or categories to the learner. Result screen: Display the learner’s persona as a friendly title (e.g. “You are: The Explorer”) Include a short, encouraging description of what this persona means Add 2–3 practical tips on how this learner can approach the course effectively Include reassuring language that most people are a mix and there is no best persona Visual & UX style: Clean, modern, friendly Card-based layout with soft rounded corners Smooth transitions between cards Large, readable text Accessible contrast Neutral, welcoming color palette (colorful, but in light colors) Card layout and behavior: Display the cards as a stacked, slightly fanned card pile, inspired by a physical deck of cards. Cards should overlap each other diagonally, forming a small pile rather than a grid Only the top card is fully readable and interactive at any time The cards underneath should be partially visible, offset slightly in position and rotation Use subtle differences in rotation (e.g. -3°, +2°, -1°) to create a natural, tactile feel Each card should have rounded corners, a soft shadow, and a solid background color Interaction behavior: When a learner answers a card, animate it smoothly off the pile (slide or fade) The next card should move into the top position of the stack The pile should visually shrink as cards are completed Technical constraints: No external libraries or frameworks All HTML, CSS, and JavaScript in a single file Fully responsive (works well on desktop and mobile) Safe for embedding in Rise as a code block or zip packageCheese Party
Hi everyone! I tried creating a full mini-course and made the most of different ways to use the code block. The course itself is more entertainment-oriented: I didn’t focus much on the content and instead concentrated on exploring the capabilities of the blocks. As a result, the only standard blocks used in this mini-course are images, text paragraphs, and navigation buttons. I don’t know how to code at all, so I actively used ChatGPT, which helped me bring my ideas to life. I was really inspired by examples from Stephanie’s List and Shannon’s List. Huge thanks for sharing them! Since I’m not familiar with coding, my first question was: what is actually possible? It had never even crossed my mind to create something like this. These examples were incredibly helpful — I tried recreating some of them and adapting them to my course, and also added a few ideas of my own along the way. I took away a few useful insights and ideas for the future: Learn the basics of writing code. I didn’t have much time to dive deep into the topic, but I figured out how to change colors and font styles on my own (pretty proud of that 😂). I found a lot of inspiration in web design examples available online. Many of them can be adapted to fit your own ideas. I truly enjoyed the process. Being able to bring even the craziest ideas to life is pure childlike joy when things finally work. Thank you all!Wizard Maze Game
I've seen some people have been successful making 8 bit games while vibe coding so I wanted to give it a go! This was a fun one to build and adjust! I really wanted a character to go through a maze and try to collect the books. After 10 books, you answer a question and it continues through 3 levels of maze over 5 questions (if you get them right). Code Build-a-thon: Maze Game Knowledge Check | Review 360 I was inspired by the Hoppy Adventures Coin Capture Hoppy Adventures: Coin Capture | Articulate - Community. Kudos to desterly1kenobi! This build was a roller coaster. First, ChatGPT said I couldn't do it. Fought me. Once I found the Hoppy Adventures, I saw that it CAN be done! So, I started a new chat with ChatGPT and within one prompt, I got a game. I kept adjusting til I got everything I wanted in place. There's some minor tweaks I want to make but, I'm pretty happy with it and it's fun! I'll have to find a project to incorporate it in.Valentine's Express: The Romance Master Class
It's February, the month of love. And I bet you're wondering: how do I express my feelings authentically? How do I say what matters most in a way that truly lands? So I built something for that. This is my entry for the Code Block Build-a-thon! Valentine's Express is an interactive experience where users navigate through personality-based scenarios and craft handwritten notes and love letters. They choose a personality type (The Dreamer, The Artist, The Intellect, The Adventurer, or The Kindred Spirit), then receive personalized feedback as they write. This is my first time building with code blocks in Rise, and I'm blown away by what's possible. The interactivity, the personalization, the ability to create something that feels truly custom, all within a code block. What's Inside 5 unique personality profiles with custom feedback Interactive note and letter writing with real-time scoring localStorage integration for seamless progression across 4 code blocks Automated Romance Expert certificate upon completion Why I'm Sharing This I'm uploading the code so you can try it, remix it, and explore what's possible. Whether you build something romantic, playful, or educational, the interaction patterns here can work for any content. Ready to express your heart? Check it out here and let me know what you think! 💕Accessibility Reality Checker (3 - minute Simulator)
Link to Rise Course (Quick Share) Accessibility Reality Checker Copy /Paste Link: https://share.articulate.com/kdeNT__CFskcknh1QTeIp Project overview I created this project because most accessibility training fails in a predictable way. It explains rules, but it doesn’t change decisions. Teams ship inaccessible experiences because the tradeoffs are invisible in the moment. I worked to build something that puts some of those tradeoffs out into the open. Instead of building a tutorial, I built a short decision simulator: three common, high-impact accessibility choices (contrast, keyboard navigation, and alt text). I framed each choice under the question “Which would you ship?” The simulator allows the review to choose and get immediate consequences, then see an “accessibility” score. I made the simulator small, fast, and opinionated because that is how product decisions and learning content approval happens in the real world. This is not and was not intended to be a comprehensive accessibility course. It’s a pressure test for everyday judgment. Prompts and constraints The Build-a-thon prompt was to explore what the Rise Code Block can really do. My personal guide was: “Can I build something that feels like a real product review decision instead of another accessibility checklist?” My constraint and format drivers were: No long explanations up front No hidden scoring Do not pretend or ignore nuances The review must make a decision and live with the result Tools and implementation Built entirely in Articulate Rise 360’s Code Block Plain HTML, CSS, and JavaScript only Custom UI, state management, scoring logic, step flow, results meter, and share text are all handled in the Code Block Intentionally used: Semantic HTML Keyboard-operable controls Visible focus states High-contrast color choices The experience itself is designed to model the behaviors it’s teaching. The experience had to go beyond just talk about the experiences. What I learned I need to spend a lot more time upskilling on HMTL and JavaScript. Vibe Coding can be fun. Rise’s Code Block is capable of much richer, multi-step interactions than I use it for. Using the Code Block require you to be disciplined about structure, focus management, and state. Small UX decisions (focus order, feedback timing, contrast, visual hierarchy) have a big impact on whether a user experience feels accessible, useable, or sloppy. Accessibility cannot be taught in 5 minutes, but a quick accessibility review can expose bad decisions and highlight options for better user experiences instincts This type of tool/ format is good for awareness, decision calibration, but not for deep technical training. I like to call this a “feature” of the simulator not a bug. I acknowledge simulator has some real limitation for real work use in it’s current state.Space Explorer
I find immense value in using the Code Block to quickly create stand-alone, complex interactions that would be too time-consuming to do manually. As an example, this Code Block, at its simplest, could have been a table. But instead, you get to kinda-sorta travel the solar system and get a sense of exploration and discovery to make learning fun. Plus, the visual gives you a sense of scale - understanding how much relative distance there is between Earth and Mars compared to Mars and Jupiter, etc. It's not perfect. For the life of me, I cannot get the labels for Earth and Jupiter to display on the navigation scale. Were this a real course, I could imagine including images of the real planets, following it up with a quiz, maybe giving the learner specific quests or making the exploration even more fun by including small clickable items to collect in specific (or random) buttons where the learner must try to collect all 10, etc. to encourage self-exploration. https://share.articulate.com/hZGb9Vn1vAWbmRDKRICxl It was very fun to make though. All code written via maybe 10-11 back-and-forth prompts with Claude 4.5 Opus (and maybe 7-8 more trying to get the Earth and Jupiter labels to display - unsuccessfully). I attached the code here in case anyone wanted to use or play around with in Rise themselves. If you do, uncheck Auto Resize and set the Height to the max possible value.Chicken Noodle Soup
Inspiration It feels like yesterday that I remember smelling the sweet scent of vegetables cooking in the kitchen when I asked my mom to teach me how to make chicken noodle soup for the first time. Last week, I happened to get a call from a younger sibling asking if I had that very recipe. The problem is, my mom rarely wrote down a recipe. Being a true chef through and through, she always thought of a recipe as more of guidelines than anything. There are many ways to prepare any dish, but the cooking skills you learn in between each one are what are so valuable. I thought this was a great recipe to teach some of those basics, and I thought it would be a unique challenge to try to think of some fun ways to use the code blocks to teach Entry Link: https://360.articulate.com/review/content/1630401d-4e73-47a1-bb7a-cb6dab63dd75/review Prompting process If you’d like to see the actual prompts I used to generate each of the code blocks throughout the course, please check out the final lesson “About this recipe”, where I have included each prompt that was used to generate the code. This isn’t where my process began. Having some basic knowledge of coding, I first began by writing down descriptions of the skill I was trying to teach, along with listing the various components and mechanics behind the vision for the interaction. I began by using ChatGPT to feed it this information and help it understand each component of the overall training. Occasionally, I would use it to help focus the vision behind a block's design and ensure that I was ideating with the capabilities of custom AI-generated code for the web. Tools Due to limitations with free accounts and the imperfection of AI, I worked with several tools to help get the results I was looking for. (Mostly because I ran out of free tokens constantly) Articulate Rise ChatGPT BoltAI ClaudAI Mom’s chicken noodle recipe Block Design Get ready checklist - Looking up recipes on the web can sometimes feel like a nightmare, and everyone prepares their article differently. I thought it might be nice to not only have a list of ingredients you’ll need, but an easy way to create a list of what you still need to go to the store for. Mirepoix Visualizer - When making the mirepoix, my mom could always tell if she needed more of an ingredient just by looking at what she cut up. While an even dice for an even cooking time is crucial, it also helps visualize the ratio of vegetables you’re preparing. Since the size of most vegetables at your local grocery store can vary from location-to-location or even week-by-week, the amount you prepare can change. This is why for this activity, I wanted to create something that can help visualize the ratio you are preparing (assuming your diced veggies are roughly the same size). Spice Blend Activity - I’ll be honest with you all, I rarely measure out my spices. I was taught to taste as I go since you can always add more spices but can’t take any out! Recently, I was inspired by some cooking videos on TikTok where chefs were talking about how different ingredients interact with each other. I wanted this tool to give learners an idea of how different ratios of spices can lead to different results. I will admit I don’t know enough cooking science to build out all the intricacies of flavor, but I felt like the AI provided a great proof of concept. Chef Consulting Chatbot - Inspired by some chatbot examples I have seen on the ELH forms, I wanted to re-create a teaching moment I experienced when I was younger. Home cooking often requires you to balance what you have time and energy for, with how tasty you want your results to be. Because of this, I often havea few processes for each recipe I make to give myself the ability to swap out techniques. Instead of teaching someone each technique, it's easier to recommend one that will fit their needs —hence, where the inspiration for the chatbot fits great!Australian Sign Language
Here is my submission for Code Block Build a Thon: https://share.articulate.com/WVWze6SsoA46ThiJICpPM Learning Australian Sign Language, the fun way with Articulate Rise. Some challenges I faced were: Attaching image to each letter in the code: I found a URL for each sign on a website and shared it against each alphabet in my prompt. Adding movements: Had a few versions in getting the movements right and fun. I also added a prompt to avoid duplicating a sign if a name has double letters. Example - Anna will only see images A and N to sign.Prompt Engineering Basics
Welcome to my Example! 💡My Idea This e-learning module focuses on the essential skills of Prompt Engineering. To move beyond standard slides, I utilized Articulate Custom Blocks to create a highly interactive learning environment. Explore a variety of custom-built interactions designed to simulate real-world AI communication, proving that e-learning can be as dynamic as the technology it teaches. The Ideas were created with Google AI Studio and then ported to a custom gem I created who had all my design choices I wanted to have in my E-Learnings (like max width. 1080px, clean white look etc.) 🗯️ The LLMs i used I only used Gemini for this all and created the following gems (download below). Interaction Gem: Specifically for all the interaction you can see in my example to have the same look, feel and functionality. Content Gem: For every normal Text, Text + Picture or Audio / Video blocks EU AI Act & Accessibility: I included all the rules these two have and checked my code for any flaws and if so a change in the code. For example all my pictures got a little AI Marker in the corner and I didnt had to include this marker per hand in every picture. 🤖The Course link You can find a review here: Link to the module ⛔Problems that occured Often when i wanted to correct something in my code with the help of AI it changed something elsewhere in the code for whatever reason. It really helped to put "DONT CHANGE ANYTHING ELSE" before entering the code to change, so the AI reads this first before it sees the code. Accessibility is always a Problem when creating fancy interactions, so it was hard to create workarounds so users can explore everything with keyboard only for example. I also added my custom Gems for ChatGPT/Gemini translated from german. Please note these are my specific Gems I used for my design wished inside of rise. You may have different aesthetic vision 🙂
