Valentine's Express
Valentine's Express is an interactive experience where users navigate personality-based scenarios and craft notes and love letters. They choose a personality type, receive personalized feedback, and earn a Romance Expert certificate. This entry doubles as my submission for both the E-Learning Valentine Challenge AND the Code Block Build-a-thon. It was my first time building with code blocks in Rise, and I'm amazed at what's possible. Ready to express your heart? Check it out here! 💕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! 💕Paint by Num-Birds: Songbird Identification Tool
This interaction pushes learners to get curious and creative while identifying some of the most notoriously difficult bird species to spot - warblers! The paint-by-numbers interface paired learning materials (like snapshots, anatomy diagrams, and their own field notes) introduces learners to the fundamentals of bird identification, and allows them to explore this process of visually ID'ing a bird for themselves. Review Here: https://360.articulate.com/review/content/54d099bd-477a As a team with avid birdwatchers, trying to "onboard" people to the hobby always poses a classic blocker: "How do you tell the birds apart?" Though sound, habitat, and other factors play a role, visuals are the first pillar of identification that beginners start to familiarize themselves with. Using Rise's code block, we wanted to create a tool that went beyond flip cards, checklists, and other default interactions. Leveraging HTML/CSS, we created a workshop space that: Breaks down key features to note for ID'ing through an interactive diagram Offers as much or as little support they may need in the form of the snapshots, diagrams, and facts in the "Files" Provides a challenge to apply what they've learned by identifying the "Field Notes" recordings To build this block, we used a mix of vibe-coding and human code expertise! Once we had refined our idea on our own, Gemini was enlisted to help create the basic UI and functions. The functionality was refined and adjusted many times for user ease and clarity. Finally, we looped human experts back in to polish the code, refine the diagram, and squash any stubborn bugs. It was a whirlwind learning experience! Some takeaways: Having the AI refine snippets of the code ensured overall block integrity. We made the mistake at the start of having Gemini spit out a whole new HTML file to adjust minor pieces; we found it changed things that we hadn't asked it to, and actually got "lazy", condensing body text and dressing down UI elements increasingly with each iteration Knowing when to use AI, and when to call in a human expert was our superpower. Gemini deeply, SERIOUSLY struggled trying to create an SVG of a bird. So, we took the monstrosity it outputted and edited the code ourselves to create an image we were happy with! We also enlisted our senior developer to jump in and fix some serious coding errors that had made the block totally un-playable. Not all AI's are made equal: Canva's AI was very promising for vibe-coding at first, but Gemini ultimately became our tool of choice as it provided the most accurate and useful responses. We chose this activity because as bird lovers, we know that warblers in particular have such subtle differences - a black eye ring on one bird might make it a totally different species from the next! The ability to paint and visually describe these tiny differences seemed like the perfect learning opportunity for this challenge (and get our other coworkers on board with birding)! Let us know what you think! Were you able to paint a perfect match? Created by Aamir Aman, Tal Castillo, and Ryan Young.Code Block Build-a-thon Start Stop Continue Reflection
Hi. I am attaching the Chat GPT prompts that I used to initially obtain the code, then fine tuned. I took a break and adjusted some of the code on my own, and then got a good refinement from Open.ai (accidentally used that one-time freebie). I resubmitted to Chat GPT to adjust one line of font size and font color on the print only page. Here is a Quick Share link from Rise: https://share.articulate.com/DglGs3ALuFfFi4pJp4-3O Here is a Review link from Rise: https://360.articulate.com/review/content/ea549a4e-3330-4011-b53c-d470c96da6ef/review I had created a flip card activity in the past for this activity, then had a document in my LMS that they could type their answers and print out (super clunky!). This version enables learners to type directly into the Start/Stop/Continue cards, select Submit to lock the answer in, Print takes to a print-only page and Clear to clear out their answer so can reuse the activity (I was also seeing the answers when I left preview and went back to edit. This fixed that). I could absolutely tweak this more, but I'm pretty happy with it!!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.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!Change Management Stakeholder Assessment Matrix
Can you correctly identify which stakeholders will make or break your change initiative? This example module includes a Process block that serves as instructions for the Stakeholder Assessment Matrix interaction in the Code Block. The code was built through a back-and-forth conversation with both Microsoft 365 Copilot (GPT 5.2 Think Deeper) and Claude (4.5 Opus). Both generated good interactions, but I liked Claude's better, which is what I used in the code block. I wrote 0 lines of code, simply explained what I wanted, iterated to fix errors or improve the interaction, and copied the code into Rise. Link to Review: https://360.articulate.com/review/content/849c80e5-af80-497e-816f-09451270f567/reviewPrompt 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 🙂Using Time with Intention
I built a small interactive sequence in Rise to explore time awareness and time management, combining several HTML embeds into a single, cohesive experience. The flow is simple but intentional: First, a timer to build awareness of time passing. Then, a 40-hour work week pie chart, where learners reflect on how their time is currently distributed. Finally, a playful 8-bit coffee break, where the cup slowly empties and ends with a small “Break well taken” badge. All interactions are built with lightweight HTML/CSS/JS, with support from ChatGPT. Prompt The first prompt I used was: I want to create a graphic where users can select how they spend their work time. For now, I have these options, but I’d like to adapt them for someone working in a corporate environment, such as an instructional designer or project manager (e.g. meetings, emails, networking, developing workshop materials, workshop facilitation). I’d like to introduce some kind of HTML-based interaction that allows users to select how they spend their time and then visualise it in a pie chart. From there, the interaction evolved iteratively — refining the structure, adjusting fonts and colours, and improving the overall experience. Idea The original idea for the course was inspired by a real Rise course template: Time Management Essentials. I took the introductory concept and the idea behind the “How I Spend My Time” graphic as a starting point. We often rush through many different tasks during the week, and having tools that allow us to pause and analyse how we use our time can help trigger meaningful reflection. 🚀Course link Hope you all like it — happy to hear your thoughts! 😊English School - Code Block Demo
Premise English irregular verbs are like that one "eccentric" relative at the Christimas family dinner: they follow absolutely zero rules, change their entire identity without warning, and seem specifically designed to ruin your day, but after a few awkward encounters, you eventually learn their quirks and stop calling them by the wrong name. That´s why I created this demo using Code Block in Rise, to help students to learn english in a fun and gamified way. Prompt To create it, I used this prompt with Gemini: "Write HTML, CSS, y JavaScript for an excercise like call of duty to use in Rise 360 Code Block. Use blue and green and yellow as main colours. It´s a shooting game. You will have to shoot the irregular verbs that you find. If you hit a irregular verb, you win 5 points, if you hit a regular verb you lose 10 points. It´s an excercise in elearning for english students." I twisted along to way to add the background music, and later on in Rise I altered the code to change colours, fonts, timer, speed of the words appearing, etc. Course Demo You can check the course here: https://360.articulate.com/review/content/39bd6260-4647-4cd7-84c9-731a83677417/review
