"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 HERECode 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. Code Block: Interactive Process | Review 360🔍 Interactive Magnifier Tool for Image Inspection
Hi everyone, I wanted to share a new experiment I’ve been playing with recently, a custom magnifying-glass inspection tool built with HTML, CSS, and JavaScript, then embedded into Rise 360 using a Storyline block. This idea came from reviewing an AI-generated laboratory image that looked perfectly fine at a distance, but the closer I examined it, the more inconsistencies and small “AI giveaways” I found. That sparked the idea for a scenario-based inspection activity, where learners can zoom in to look for issues, hazards, or clues. 🔧 What it does The interaction uses a hexagonal lens that lets learners: Toggle Inspect Mode on/off Move a magnifying glass across an image Zoom in with the mouse wheel Zoom using keyboard shortcuts (+ and −) Navigate smoothly across very large, detailed visuals It works brilliantly for: Spot-the-issue / observational tasks Quality assurance or audit simulations Safety checks Equipment-familiarisation exercises Any situation where learners must analyse detail 🎨 Customisable If you’d like to adapt it, you can easily modify: The shape of the magnifier The image The zoom strength The toggle button The colours and frame styling I’ll include instructions in the shared example so you can download the code, replace the image, or restyle it however you like. 💡 Why I’m sharing it Like many of you, I love finding ways to push what Rise + Storyline can do together. This tool combines accessibility, usability, and custom code in a way that still fits neatly inside the Articulate ecosystem — no outside hosting needed. Would love to hear any thoughts, suggestions, or creative variations you might come up with! 🎁 If you'd like… I can also generate: A compressed ZIP of the interaction A Storyline .storyfile with everything preconfigured A variation with hotspots that react when the lens passes over them A version that reveals information only when inspecting certain regions An accessibility-first version with keyboard-draggable magnifier Have a play REVIEW360 Shared folder for ZIPSA Growing List of Cool Code Block Examples
View the examples and grab the code Hi everyone! 👋 I've been playing around and created a growing list of cool examples of using the code block. I've included the code that you can copy to use in your projects. If you have any questions, just leave a comment in the Review tool. New: New interactions: Memory Match and Capture & Recall Your Input Suggestion Box Interactions Click & Reveal Checklist Flip Cards Glossary Hover Definitions & Popup Info Labeled Graphic Matching Activity Memory Match Scratch Card Reveal Sorting Interaction with Feedback Timeline Vertical & Horizonal Tabs Effects Animated Checklist Confetti Dividers Graphics Blended Image Slider Image Compare Slider Knowledge Check / Quizzes Quiz Swipe Cards (updated) Swipe Card Quiz User Input Capture & Recall Course Completion Certificate Persistent Learner Name Notebook Just For Fun! Interactive Snow GlobeUsing the Code Block to allow course participants to enter their own text
I have found a way for course participants to be able to enter their own text during a course by way of reflection. This is done by using the following code in the new Code Block: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; padding: 0; background: transparent; } .reflection-container { width: 100%; max-width: 800px; margin: 0 auto; } label { display: block; font-size: 1.4rem; font-weight: 600; margin-bottom: 0.75rem; } textarea { width: 100%; min-height: 180px; padding: 12px; font-size: 1rem; line-height: 1.5; border: 1px solid #cfcfcf; border-radius: 6px; resize: vertical; box-sizing: border-box; } textarea:focus { outline: none; border-color: #5b9cff; box-shadow: 0 0 0 2px rgba(91, 156, 255, 0.2); } .controls { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; position: relative; } .helper-text { font-size: 0.875rem; color: #666; } /* Styled button */ #copyButton { background-color: #5b9cff; color: #fff; border: none; border-radius: 4px; padding: 6px 12px; font-size: 0.875rem; cursor: pointer; transition: background-color 0.2s ease; } #copyButton:hover:not(:disabled) { background-color: #4a8ae6; } #copyButton:disabled { background-color: #a8c4f5; cursor: default; } /* Temporary Copied message */ .copied-message { position: absolute; top: -1.8rem; right: 0; font-size: 0.875rem; color: #28a745; opacity: 0; transition: opacity 0.3s ease-in-out; } .copied-message.show { opacity: 1; } </style> </head> <body> <div class="reflection-container"> <label for="reflection">Reflection</label> <textarea id="reflection" placeholder="Type your response here..." ></textarea> <div class="controls"> <div class="helper-text"> This space is for personal reflection and is not saved. </div> <div> <span id="copiedMessage" class="copied-message">Copied to clipboard!</span> <button id="copyButton" disabled>Copy text</button> </div> </div> </div> <script> const textarea = document.getElementById("reflection"); const copyButton = document.getElementById("copyButton"); const copiedMessage = document.getElementById("copiedMessage"); let messageTimer; // Enable/disable button based on text textarea.addEventListener("input", () => { copyButton.disabled = textarea.value.trim().length === 0; }); function copyToClipboard(text) { const temp = document.createElement("textarea"); temp.value = text; document.body.appendChild(temp); temp.select(); try { const successful = document.execCommand('copy'); document.body.removeChild(temp); return successful; } catch (err) { document.body.removeChild(temp); return false; } } // Copy text and show temporary message copyButton.addEventListener("click", () => { if (textarea.value.trim().length === 0) return; // Try Clipboard API first let success = false; if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(textarea.value).then(() => { success = true; }).catch(() => { success = copyToClipboard(textarea.value); }).finally(showMessage); } else { success = copyToClipboard(textarea.value); showMessage(); } function showMessage() { copiedMessage.classList.add("show"); clearTimeout(messageTimer); messageTimer = setTimeout(() => { copiedMessage.classList.remove("show"); }, 1500); } }); </script> </body> </html> Participants can use the Copy text button that is included to copy all of the text they have entered and paste it into a separate file. [e.g. Word, Notepad, Excel, PowerPoint] A Copied to clipboard message is displayed once the text they have entered has been copied to the clipboard after clicking the Copy text button. All of the text they have entered will automatically be cleared once they come out of the course.Vibe Coding to Turn Reflection into Interaction in WBT
This is an interactive reflection activity designed for web-based training using vibe coding in a code block in Rise. I was inspired by Kaylene Wance's example. I'm sharing with others who are experimenting with vibe coding or looking for ways to move beyond traditional multiple-choice interactions in WBT. I wanted to the font larger for accessibility, but then the entire layout got negatively changed. After much time and struggle, I let that go for another project. One step at a time! Learners: Identify barriers that interfere with working effectively in their department See their input reflected in common workplace patterns Review simple, practical strategies to reduce those barriers Choose one strategy and explain how it could help in their own work There are no right or wrong answers and no scoring. The focus is on thinking, relevance, and transfer, not recall. This approach works especially well for: Professional skills Change management Process improvement Leadership or workplace effectiveness topics Any course where judgment and reflection matter more than memorizationGenially Embed in Rise
Hello, E-Learning Heroes! This is nothing world-changing (like holy cow I am learning so much from all of you!) but this month I made a goal to spend some more time in Rise since I've been wrapped up in Storyline. I hadn't even tried out the embed block in Rise yet, so I decided to whip up a microlearning integrating a hotspot slide from Genially into Rise, and I used ChatGPT for some image creation. I was super impressed with how easy the integration was. I wrote a Blog Post about my experience and the topic if you'd like to check it out, or just experience the project for yourself here: Investigating Effective Alt Text | Review 360 I'm always open to feedback and new ideas, so please feel free to chime in or ask any questions!Freeform Knowledge Check Code Block
I've been experimenting with the code blocks lately. I vibe coded a block for a Knowledge Management course I've been working on to do a pre-knowledge check with ChatGPT. I really wanted the user to type in an answer verses doing a multiple choice. Essentially, the user types in what they think is a Knowledge Management Barrier and see if it matches once of the barriers they'll learn about later. I limited it to 5 tries so it's not infuriating but also stops you after trying too much. You get feedback noting if you got one or not and then at the end, you can see which ones you got and which you missed. The code can be found in the Rise course. Freeform Code Block | Review 360
