"Wait, SVGs are just code?"
Hi everyone, I have to admit something embarrassing. I was today years old (well, 44 years old to be exact) when I properly realised that SVG files are just code. I always thought of them as "images" you have to save, host, and link to. But no, they're just text! š¤¦āāļø That realisation sent me down a rabbit hole, and the result is this: a Visual Narrative Selection Tool that is completely self-contained. No external image files, no hosting headaches, just one single HTML file doing everything. š What it is: Itās a scenario-based training interaction where learners have to pick the right chart type (e.g., "Is a Pie Chart okay for time-series data?"). If they get it wrong, the feedback doesn't just say "Incorrect"āit actually shows them why using a custom SVG graph generated right there in the browser. āØ Why I'm sharing it: This is a pure "Zero-Asset" experiment. Because the icons and graphs are all SVG code written directly into the HTML: It's impossible to break: You can't "lose" the image files because they live inside the code. It's lightweight: The whole thing is tiny. It's accessible: Fully navigable via keyboard (Tab/Enter). AI-enabled: with a strong enough visual cue, no other files are required I've shared the source code below. Itās fully commented (with my contact info hidden in a professional comment block at the top) Feel free to download, break it, and tell me what you think. And please tell me I'm not the only one who didn't realise SVGs were this powerful? RISE READY HERECreating a Mini Game in Rise 360: The Case of the Vanishing Keynote
Creating a Mini Game Mystery in Rise 360: Clues, Flip Cards, and a Surprisingly Suspicious Tech Host I wanted to create a quick, interactive team activity that felt more like a game than a traditional eLearning interaction. The goal was simple: build a 10-minute virtual mystery experience for a small group of learners using Rise 360. The result was The Case of the Vanishing Keynote, a mini detective challenge where learners review suspects, examine evidence, take notes, and make a final accusation. The premise is delightfully dramatic: minutes before a big virtual celebration, the keynote presentation disappears from the shared folder. Four people had access. Everyone has a motive. One person knows a little too much. Naturally, chaos ensues. The Activity The game is designed for about 20 participants and takes roughly 10 minutes to complete. Learners move through the experience in a short, guided flow: Welcome to the mystery Meet the suspects Examine the evidence Discuss the clues Make an accusation Document a final guess in the Detective Notebook The suspects include Jordan the Project Lead, Mia the Designer, Sam the Tech Host, and Riley the Presenter. Each character has a motive, an alibi, and one suspicious detail. Because every good mystery deserves a little flair, each suspect appears on a flip card with a funny 3D-style character image on the front and their case details on the back. The vibe is somewhere between ācorporate team-building activityā and āPixar accidentally wandered into a project kickoff meeting.ā Why Rise 360? Rise 360 was a great fit because the activity needed to feel polished, easy to access, and lightweight. I wanted learners to be able to jump in quickly without needing a complicated setup. To make the experience more game-like, I used a custom HTML embed instead of relying only on standard Rise blocks. This allowed for: Flip cards A guided screen-by-screen flow Continue buttons A progress bar A note-taking area A final guess section A participant version with no answer reveal A facilitator version with the full solution Basically, Rise handled the clean learning shell, and the custom code handled the mystery mischief. The Road Bumps Of course, no good mystery is complete without a few unexpected plot twists. Ours just happened to involve HTML, iframe sizing, and one overly eager answer reveal. Road Bump #1: The Case of the Disappearing Card Text At one point, the discussion screen looked great in theory, but some of the text was nearly impossible to read because it was showing as white text on a light background. Very mysterious. Very unhelpful. The fix was to simplify the styling, force stronger contrast, and make sure key text areas were using readable dark text. Lesson learned: dramatic visuals are fun, but learners should not need night-vision goggles to read the instructions. Road Bump #2: The Answer Revealed Itself Too Soon Originally, the final screen revealed the culprit immediately. This was technically functional, but educationally rude. The whole point of a mystery is the suspense. So we adjusted the flow so learners first make their accusation, then land on a final review screen, and only the facilitator version reveals the correct answer. The participant version now lets learners document their guess without spoiling the solution. The facilitator can control the big reveal, which is much better for a live group activity. Road Bump #3: Sam Kept Showing Up Everywhere In one version, no matter which suspect the learner selected, Sam the Tech Host appeared in the final review. This was funny for about five seconds because Sam is, in fact, the suspicious one. But if a learner guessed Riley, they should see Riley. If they guessed Mia, they should see Mia. Sam cannot be allowed to photobomb every accusation. The fix was to make the final review image dynamic so it matches the learnerās selected suspect. Road Bump #4: Rise 360 and the āFolder in a Folderā Situation When packaging the activity, the first ZIP file had an extra folder level. Rise did not love that. The fix was simple but important: the index.html file needed to sit at the root of the ZIP package, with the images folder beside it. Once the structure was cleaned up, the activity was much easier to host and embed. Road Bump #5: The Notebook That Would Not Forget We added a Detective Notebook so learners could take notes and record their final guess. Great idea. Then we discovered that restarting the activity did not fully clear the final guess. The notes cleared. The activity restarted. But the guess was still hanging around like a suspect who refuses to leave the interrogation room. The fix was to reset the notebook fields, selected suspect, saved local data, and displayed guess state all at once. The Detective Notebook One of my favorite additions was the note-taking tool. Learners can jot down evidence, track their thinking, and record their final accusation. This made the activity feel less like a simple quiz and more like an actual investigation. It also helped support discussion because learners had something concrete to reference when explaining their choice. The notebook also gives participants a way to download or copy their notes, which is a nice touch if the activity is used as part of a larger workshop or team-building event. Two Versions: Facilitator and Participant We ended up creating two versions of the same game: Facilitator Version This version includes the full answer reveal and explanation. It is useful for the person leading the session or for reviewing the activity after the group has made their guesses. Participant Version This version does not reveal the answer. Learners can review suspects, examine clues, take notes, and submit their final guess, but the solution stays hidden. This keeps the facilitator in control of the reveal. That split made the experience much more flexible for a live session. What Iād Do Next If I continue building this out, Iād love to add: A countdown timer Team scoring More branching clues A printable detective worksheet Alternate mystery scenarios A āred herringā clue or two, because apparently I enjoy making people suspicious of fictional coworkers Final Thoughts This was a fun reminder that eLearning interactions do not always need to be long or complicated to be engaging. Sometimes a small, focused activity with a clear goal, a little humor, and a few interactive elements can create a memorable learner experience. Also, never underestimate the power of a suspicious tech host with backup-folder access. Case closed. The Case of the Vanishing Keynote FG The Case of the Vanishing Keynote PGOpen-Source: Confidence Self-Check Dashboard (Dual HTML & Storyline Exporter)
Hi Everyone, It is great to be posting back here after a while! A lot of the custom widgets and micro-apps we see shared across the community are fantastic out of the box, but they often share a common flaw: they are completely hardcoded. If you want to change a question, tweak a score boundary, or alter a feedback message, you have to dig into line after line of tightly coupled JavaScript or manually update dozens of variables inside your authoring tool. Following some great discussions here on the hubāand specifically responding to a note from community member SamanthaGonz271ā who mentioned wanting the ability to freely edit and tailor these frameworks, I wanted to take a completely different architectural approach. I have built a modernised, fully state-driven Confidence Self-Check Baseline Tracker (v9.7). Instead of standard text blocks, this framework relies on a modern glassmorphism UI overlay and features a dynamic digital grid canvas. You can preview the interactive widget running live on Review 360 here: š https://360.articulate.com/review/content/d58cf155-636e-4f43-82c9-1832035cd504/review š What makes this version different? I have engineered a built-in "Designer Mode" directly into the interface. This transforms the widget into an automated production pipeline for your VLE: Dynamic Content Modification: Add or remove questions, upload custom image URLs, configure unique item weights, and adjust percentage performance bands without writing a single line of code. Tabbed Dual-Exporter: Once customised, the engine generates clean production code instantly via a split panel. You can copy the code out as a Standalone web deployment file (HTML) or grab the Storyline JS Trigger payload. š ļø Upgraded Learning Features: Pre / Mid / Post Checkpoint Tracking: Learners can capture a baseline at the start of a module, log a mid-point check-in, and execute a final checkout. Visual Distance Travelled Map: The system references localStorage to compute exactly how far the learner has travelled between checkpoints, plotting their growth on an animated spectrum bar and a historic progress node map. Sandbox-Safe PDF Printing: To circumvent strict iframe browser restrictions that block pop-up windows inside modern learning management systems, I have engineered a clean window-write utility that smoothly bypasses pop-up blockers to print or save progress certificates safely. Dead-End Validation Errors: Learners can no longer accidentally submit partial sheets. The engine targets missing inputs and highlights exactly which questions need attention. š¦ How to use it in your own builds: I have attached both the master Source HTML Engine and the Articulate Storyline template file to this post. To customise it, simply run the HTML file locally, click into "Designer Mode" in the top-right corner, modify your curriculum parameters, and copy the clean output code right out of the generator panels. If you are placing it into Storyline, simply copy the code from the Storyline JS Trigger tab and paste it directly into an "Execute JavaScript" trigger on slide start. Special credit to JoeDey for the original inspirational "Perpetual Notepad" concept that got the ball rolling on this community script style. Let me know how you use it in your programs or if you have any feature ideas to push it further! Cheers, Daniel Boyland Forged Frameworks360 Images in Rise
Hey everyone! I've been experimenting with embedding 360Ā° panoramic images directly into Rise using the Code Block and Pannellum, a free, open-source WebGL viewer, and honestly it turned out way cool. The build is a single HTML file you paste into a Rise Code Block. What you get out of the box: Auto-panning on load with a play/pause toggle Multi-scene navigation (forward/back buttons that loop) Fullscreen without any image distortion Clean minimal controls that stay out of the way All you need is a song in your heart, and some hosted equirectangular images. I hosted the images in another Rise lesson for simplicity. I'm attaching the index files for both versions. Give it a go. Happy to answer questions or nerd out about it in the comments. š Test it out here!Reflection Questions and Interactive Web Pages in Rise
It's funny - now that I'm out of the corporate learning world, I find I have more freedom to explore and be creative. I'm really pleased with my most recent course - the subject matter may not be riveting (a history of minimum wage), but the design has made me capture more potential out of Rise than I was getting when I had to churn out courses more to satisfy a timeline than a learning objective. It's really the addition of the Code Block that has opened up new capabilities. Reflection Blocks. Previously, I had to create everything in Storyline in order to enable the learner to type in the response to a reflection question. That, of course, takes much longer, and limits the content to a slide. Using a code block, I'm able to ask a question, capture the response, and feed it back to the learner at the end of the course. Caveat - the response is stored locally on their hard drive, so if they switch devices while taking the course or clear their cache, the information is lost. Also, the responses are not reportable via SCORM. Consider the information under "Caveat" my wish list. Using the code block, I am now able to add interactive web pages directly in the course instead of creating something and sending the learner outside of the course. In this case, I created an interactive table of all 50 states and data associated with minimum wage and minimum cost of living. This enables the learner to sort, filter, and look up information pertinent to their situation. If you'd like to take a look at what this looks like (this is a free course, accessed via Quick Share): Why Do We Have a Minimum Wage? I'd love to know if you think this works well, or if you have a solution that might work even better. Thanks! JenniferScenario Signal Studio: Helping Learners Separate Signal from Noise
I wanted to share a reusable scenario interaction pattern Iāve been building called Scenario Signal Studio. The idea is to help learners practice the part of decision-making that often happens before they choose an answer: reading the situation. In many workplace scenarios, the challenge is not just picking the correct response. It is figuring out what information actually matters, what is helpful context, what is distracting noise, and what needs to be verified before taking action. Iām sharing it here because I think the pattern could be useful beyond this specific example, especially for anyone designing scenario practice, coaching feedback, or decision-based learning. š How it works In this example, learners review a messy support scenario and classify each piece of information as: Signal Context Noise Verify After sorting the information, they receive coaching feedback based on how they read the situation. š ļø Build approach I built this as a lightweight HTML/CSS/JavaScript interaction, but the pattern could also be adapted in Storyline using variables, states, layers, and feedback logic. This could work well for: Customer support scenarios Safety decisions Compliance judgment Escalation decisions Manager coaching Onboarding practice Operational troubleshooting š” Why I built it What I like about this pattern is that it slows the decision moment down. Instead of asking learners to jump straight to the ārightā answer, it helps them practice noticing, sorting, verifying, and thinking before they act. Live example and build notes: Scenario Signal Studio Curious how others would build this in Storyline: variables and states, drag-and-drop sorting, button sets, or something else?My Custom Rise Block Component Library
Hi everyone! I wanted to share a custom library of Rise-compatible interactive components Iāve been building and experimenting with for eLearning projects. The library includes custom-designed blocks and interactions intended to help make Rise courses more engaging, flexible, and visually dynamic beyond the default block set. You can explore the library here: https://cognitoblox.netlify.app/ This is an ongoing project, and Iād genuinely love feedback from the community: Which components do you find most useful? What kinds of interactions would you like to see added? Any ideas for improving usability or accessibility? Happy to connect with fellow developers who are experimenting with custom Rise code blocks as well! Thanks for checking it outItās All About That Prompt...
You know that feeling when you have a massive project looming, and your timeline is shorter than a TikTok trend? That was the energy I brought into my latest project. I set out to build a comprehensive, highly interactive courseā"Copilot for Beginners: Use AI to Work Smarter, Safer, and Faster"āand I wanted to see just how much I could push the boundaries of rapid development without sacrificing the "WOW" factor. The Secret Sauce: It's All About That Prompt To get this done, I lived by a new mantra (apologies to Meghan Trainor): "Because you know I'm all about that prompt, 'bout that prompt, no trouble..." Letās be real: teaching AI to beginners is 10% explaining what it is and 90% convincing them that "Please do the thing" is not a valid prompt. The core of this course is dedicated to the art of the ask. I wanted to show learners that if you treat your prompt like a bad text to an exāvague, confusing, and full of typosāthe AI is going to ghost your expectations. š» By focusing on high-quality prompting with Claude AI, Iāve been able to move from concept to a bespoke, custom-coded experience at lightning speed. Itās a bit of "prompt-ception"āusing expert prompts to build a course that teaches people how to be expert prompters. What usually takes a massive development cycle is coming together faster than I ever thought possible. How Iām Building It (The Tech Stack) I decided to forgo the standard Rise 360 blocks entirely for this one. I wanted a 100% custom feel, so here is the "special ops" toolkit I used instead: The Framework: Everything is built using the </> Code block and Project blocks. For those who haven't tinkered with it, the Project block is a total game-changerāit allows you to upload zipped files (like a video with a custom wrapper or a self-contained web interaction) directly into the lesson. The Custom Visuals: Iām utilizing Custom blocks to build my own unique visuals from scratch. This gives me total creative control over the aesthetic, ensuring that every chart, diagram, and layout perfectly aligns with the Copilot branding rather than relying on generic templates. The Custom Flair: By using the </> Code block, Iām injecting custom HTML and CSS to create a UI that feels completely unique. No "Rise-standard" buttons here! The Digital Mentor: Instead of just text on a screen, Iāve integrated an AI Avatar. This virtual guide walks beginners through the nuances of AI safety and security, making the learning path feel more personal and a lot less robotic. The Brains: Claude AI is my creative partner. Iām using it to "vibe code" the custom interactions, refining the UI/UX in real-time until the functionality is snappy and intuitive. Why Speed Doesn't Kill Quality Building "Smarter, Safer, and Faster" isn't just the course title; itās the philosophy behind the build. Using AI to handle the heavy lifting of the code means I can focus my energy on the instructional designāensuring the "Safer" part of the Copilot training actually sticks. What Do You Think? Iām still tinkering with the final transitions and polishing the edges, but I wanted to share the process with the community. How are you all using Project blocks to bring in external zipped assets? Are you experimenting with Custom blocks for your visuals, or sticking to the Rise defaults? How are you teaching "prompt engineering" to people who still struggle with "Ctrl+Alt+Delete"? Drop your thoughts belowāIām all ears (and all about those prompts)! š Copilot for Beginners: Use AI to Work Smarter, Safer, and FasterFrom Tolerating Rise to Being Obsessed With It ā A Code Block Story
Okay, I owe Rise 360 an apology. A public one. Right here. For a long time, I was that person. The one muttering under their breath about how Rise was "too rigid" and "not flexible enough" and "why can't I just make it do the thing." I used it because I had to. I tolerated it the way you tolerate a coworker who microwaves fish in the break room. š And thenā¦ Code Blocks happened. š¤ Suddenly I could drop custom HTML, CSS, and JavaScript directly into Rise and build whatever I wanted. Interactive tabs. Scenario cards with reveal animations. A full permissions comparison table with filter toggles. A side-by-side AI Avatar video wrapper with bullet points that sync to the video as it plays ā like, ACTUALLY sync, using JavaScript timeupdate listeners. Rise went from "I guess this works" to "wait, I can do THAT?" faster than I'd like to admit. My latest project is a 9-lesson Rise 360 course for Learning Experience Designers on Team Folders. The whole thing is built with Code Blocks and Articulate AI Avatars ā branded with a full custom color system, video intros on every lesson, and enough JavaScript to make past-me very confused and present-me very smug. A few things I never thought I'd say about Rise: I built a custom play button overlay because Rise iframes block autoplay ā and it looks amazing I embedded video directly into HTML as base64 so it's fully self-contained ā one file, no dependencies I applied an entire brand palette via CSS custom properties and it justā¦ worked I actually looked forward to opening Rise every morning. I know. I'm as surprised as you are. šµ If you've ever felt like Rise had a ceiling ā I'm here to tell you the ceiling is a Code Block and you can build whatever you want on top of it. What's the most "wait, Rise can DO that?!" thing you've ever built? Drop it below. I need to know I'm not alone. š Rise 360: Managing Shared Content and FoldersCreate an Animation for Rise Using PowerPoint
If you create something like this flowchart in PowerPoint, then add in a fade-in animation to each item, set the animation to happen "After Previous" (automatically). (time to play through 1 second). Duplicate the slide - set each item to have no animation. Go back to first slide - add a transition - NONE but set it to Advance slide after X seconds (where X is the same length of time as it takes for the animation to play [example 1 second) Go to second slide - add a transition - MORPH and have it Advance Slide after Y seconds (where Y is the length of time before the animation loops again [example 10 seconds]) Then you can add this animation directly into a Rise Image Block (or elsewhere) You can also change the slide size in PPT to reduce the white space around the animation. Example (chart 4.gif) I changed the slide size to half the height First animation (chart.gif) - no 2nd slide Second animation (chart 3.gif) - 10 second 2nd slide
