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 packagePaint 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.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.A Growing List of Cool Code Block Examples
➡️ View the examples and grab the code Hi everyone! 👋 You'll find (42 so far) examples of what you can do with the Rise Code Block. These are my tests that I've built to be responsive and accessible. I've provided the code for each so you can easily copy, paste, and insert them in your Rise courses. There is a suggestion box if you'd like to upvote an idea or enter your own. If you have any comments, just drop them here in review. You can reach me directly at [email protected]. Latest Updates: A new Latest Updates section that lists existing snippets that have been updated to add new features based on user feedback. I've also moved the Update Log to the top so you can easily determine the latest version/date and details. NEW - Two-Person Scenario helps you build a two-person scenario where the learn can take on the role of one of the characters, or as an observer. You can include your own characters, optional backgrounds and audio narration. There is a UI for this one to help you set up the details without editing the code directly. NEW - Sentiment Check that mimics Rise's new survey block but can remember an earlier response. For example, at the beginning of a course, you check user confidence and, at the end, you recheck it. Your Input Buy Me a Coffee Suggestion Box Interactions Click & Reveal Checklist Display Cards Drag and Drop Flip Cards Glossary You Can Print Hover Definitions & Popup Info Labeled Graphic Matching Activity Memory Match Scratch Card Reveal Scrolling Ticker Sentence Builder Sentiment Check Sorting Interaction with Feedback Spin the Wheel Timeline Vertical & Horizontal Tabs Effects & Media Animated Checklist Confetti Dividers Multi-track audio Player Graphics Blended Image Slider Image Compare Slider Knowledge Checks / Quizzes Card Order Question Flashcard Self-Assessment Row Order Question Swipe Card Quiz Yes/No Swipe Cards User Input Capture & Recall Reflections You Can Print Course Completion Certificate ElevenLabs Chatbot Learner Name with Persistence Notebook You Can Print Pulse Check (no right/wrong answer question) Utilities Compound Interest Calculator Form Wrapper Timer E-Learning Challenges & Fun Stuff #535 Snow Globe #540 Valentine Oracle Fire Triangle Simulator Rise Code Block "Build-a-Thon" Submission Getting Help Introduction Prompts, Workflow and QA Building a Code Snippet The Prompts Editing HTML Working in Other LanguagesUp-Updated "Reveal" codes
I’ve been experimenting with the original HTML code blocks included in Articulate 360’s built-in examples and wanted to share how far you can extend that base structure using GenAI to iterate and refine interactions. Starting with the default image-reveal index provided by Articulate, I used GenAI to progressively develop three new versions. I supplied my own images, created meaningful alternative text for screen readers, and introduced additional UX and accessibility improvements. Every version is fully tailorable if you want to adapt the formatting, colours, spacing or behaviour. The three examples are: Enhanced Image Reveal Grid Uses the original Articulate structure. Adds a hover zoom, a click-to-zoom state, and high-contrast purple letter tiles for accessibility. Fanned “Deck of Cards” Flip Interaction A dynamic fanned layout, more like a real card hand. Cards lift and reveal their letter on hover, flip on click, and reset if clicked again. Includes chevron navigation for easier cycling. Plain Flip Grid with Navigation A clean, accessible flip-card grid with navigation chevrons. Mirrors the deck behaviour but with a simplified layout. NOW WITH MORE EXAMPLES of what reveal styles can imagine! If you have suggestions, improvements or alternative approaches, I’d really love the feedback. And if you’d like to use or remix any part of this, feel free — I’d love to see what you create with it. Review360New Code Block Game
It's been a long time since I shared my work, but I'm really pumped up about the potential of the new Code Block in Rise. I started with a basic idea and then started vibe coding. It's amazing what can be achieved in a short space of time, and have been resisting the temptation to just have fun, and instead focussed on keeping my work learning focussed. A couple of learnings: The power of the code block will be really unlocked if Articulate can... Allow us to upload zip folders with images in them. Everything says you can, but I have yet to have a single successful upload. Provide code/facility to allow a code that can report course completion based on the code i.e. when a game is completed completion can be sent - even better if scores can be included. When course continuation can be linked to code block completion it enables true gamification. Not being able to include images is a limitation, but not a blocker - you will notice I have included some very rudimentary graphics by encoding the images as base64, however it seems Rise has a limitation of not being able to read base64 strings longer than 500 characters at present. As I suspect will be the case for many others, I, work for a company with very stringent security policies, so we aren't allowed file storage solutions. If there can be a basic image storage allowance for zip code blocks, that changes the game! Would love your feedback you wonderful humans. Review Link
People Manager Simulation
This is a vibe-coded people manager simulation game. The learner steps into the role of a new call centre manager, taking over a struggling team. Each decision impacts key measures such as performance, morale, complaints, retention, and stress, and if the wrong calls stack up, you risk being “fired”. The full game runs inside Rise, with avatars, tooltips, game-over conditions, and a narrative end-summary. To keep it simple, I hosted the images directly in Rise (using a hidden lesson to grab the image URLs). I’ve also written a short how-to guide just below the game, so anyone who wants to repurpose the code and build their own simulation can follow along. 👉 Play the demo here This was a great way to test the Code Block for more advanced interactions, and to explore how lightweight simulations can boost engagement in corporate learning.Interactive Video Using Code Block
Why use a boring video player when you can roll out the red carpet? A quick how-to on wrapping your leadership videos in a cinematic branded experience — no coding experience required “Picture this: your learners open a Rise 360 course and instead of a bare MP4 sitting in a block, they’re greeted with a pulsing, glowing, cinematic launch screen that practically whispers ‘this is important.’ That’s the energy we’re going for.” The problem with plain video We’ve all done it. You drop a leadership video into a Rise 360 lesson and… it looks exactly like a video block. No branding. No context. Just a lonely play button floating there, hoping someone clicks it. Your executive recorded a heartfelt 3-minute message. It deserves better than a default video block. I didn’t write a single line of code (and that’s the point) Here’s the part that might surprise you: I’m not a developer. The entire HTML wrapper was built using ChatGPT. I described what I wanted — a branded launch screen, animated background, a polished play button, smooth state handling — and ChatGPT generated the code. I tweaked the colors and logo, and that was it. If you’ve ever thought “I’d love to do something like this but I don’t know how to code” — this is your sign. You don’t need to. You just need to know what you want and be able to describe it clearly. AI does the heavy lifting. What I asked ChatGPT for “Create a single HTML file that plays a video with a branded top bar showing my logo, an animated dark background with particles, a cinematic launch screen, and smooth play/pause/ended states.” The more specific you are, the better the result. Mention your brand colors, what text you want in the header, and how you want it to behave. Enter: the video wrapper A video wrapper is just a single HTML file that lives alongside your MP4. It loads the video, surrounds it with branded polish, and gives your learners a moment of “oh wow, this looks professional” before the message even starts. Here’s what mine includes — all living in one tidy index.html file: Branded top bar — Your logo and course title, front and center. Animated background — Subtle particles and light sweeps. Pure CSS — no libraries. Cinematic launch screen — A styled overlay before the video plays — sets the tone. Replay state — Handles play, pause, and ended states gracefully. How to set it up (it’s easier than you think) Describe what you want to ChatGPT Tell it your brand colors, what you want in the header, and how the video should behave. Ask for a single self-contained HTML file that references the video and logo by filename. Be specific — the more detail you give, the better the result. Assemble your project folder Put your three files together in one folder: index.html, your logo (SVG works great), and your MP4. They all need to live together — the HTML references the other two by filename, so they can’t be separated. Add a Code Block in Rise 360 and upload as a project In your Rise 360 lesson, add a Code block. Here’s the key: don’t use the paste option — use Upload Project instead. This lets you upload the entire folder so your HTML, logo, and video all get bundled together with their references intact. Pasting the HTML alone won’t work because Rise has no way of knowing about the video and logo sitting on your computer. Publish and enjoy the reactions Watch your stakeholders ask “wait, how did you do that?” and act like it was no big deal. The tech behind the magic The whole thing is plain HTML, CSS, and a tiny bit of vanilla JavaScript — no frameworks, no dependencies, nothing to install. The animated background is pure CSS keyframe animations. The state machine (paused → playing → ended) is about 60 lines of JS. The entire file is self-contained and loads instantly. And again — ChatGPT wrote all of it. My job was to describe the vision, paste in my logo filename and brand colors, and iterate a couple of times until it looked right. Pro tip The wrapper also handles the awkward “video file not found” state gracefully — it shows a friendly message instead of a broken player. Ask ChatGPT to include this and it’ll handle it automatically. Your learners will never see an ugly error. Give it a try Your learners deserve a first impression that matches the quality of the content. A video wrapper costs you maybe 10 minutes of prompting and delivers a noticeably more premium experience. Once you build one, you’ll use it on every leadership video forever. Life’s too short for boring video players. 🎥 Interactive Video Using Code Block
