🔍 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. Interactions Interactive Timeline Interactive Glossary Course Completion Certificate Click and Reveal Checklist Persisent Learner Name Adjustable Labeled Graphic Block Swipe Card Quiz with Completion Custom Vertical and Horizonal Tabs Custom Flip Cards Sorting Interaction with Feedback Notebook Graphics & Effects Blended Image Slider Image Compare Slider Hover Definitions and Popup Info Confetti Dividers Ideas from Others Quiz Swipe Cards (*updated with new features*) Animated ChecklistObject-Intersection Layer Control in Storyline 360
This demo showcases an interactive procedure built in Articulate Storyline 360 using object intersection triggers to control which content layer is displayed. As the learner drags an on-screen object across the interface, Storyline detects when it intersects with specific target areas and automatically reveals the corresponding layer. The interaction is also fully synced with the seek bar, allowing learners to scrub through the timeline to preview or review each step of the procedure. Whether advanced by dragging the object or by using the seek bar, the visible layer always updates dynamically, creating a smooth, intuitive, and highly responsive learning experience. See ExampleCapturing & Consolidating Learner Notes
I created an example of adding a learner notes functionality using the new Rise Code Block. This let's learners capture notes at various places in a course and then consolidates them all into a printable format or an email. The demo also includes a complete code design walk-through and has all of the code at the end for easy copy/paste into your own projects. Enjoy! https://360.articulate.com/review/content/4c2a7e7f-09ca-4d4f-890d-86cec26bf48b/review💡 Confidence Self-Check: A Reflective Benchmark Tool UPDATED 151125 - See comments below!! 👇
Hi everyone, UPDATED 151125 - See comments below!! 👇 Here’s a quick show-and-tell example I’ve been experimenting with — a Confidence Self-Check tool built in Storyline 360 and embedded into Rise 360 as a formative reflection block. The goal was to give learners a way to benchmark their confidence and awareness before and after a session, helping them see their own progress and prompting metacognitive reflection — without the need for LMS data capture. I wanted something that: ✅ Supports metacognition — helping learners think about their own learning 🔄 Tracks progress with “before” and “after” self-checks 🧠 Encourages reflection rather than testing knowledge 💬 Uses local storage only (no data collection) to keep it private and learner-centred 💻 How it was created This build was produced through an iterative Generative AI-assisted workflow, where I coached an AI (ChatGPT – GPT-5) step-by-step through design reasoning, JavaScript development, accessibility checks, and instructional alignment. The focus was on human-assured prompting — using AI to accelerate build logic while maintaining learning design intent, tone, and pedagogy. The project was inspired by JoeDey’s “Perpetual Notepad” (huge kudos for the original concept!), and extended to include weighted confidence scoring, dual checkpoints, and adaptive feedback messages. ⚙️ Known limitation Because this tool is designed to be session-specific, each new deployment requires: Updating the SESSION_LABEL and STORAGE_PREFIX variables in the JavaScript to give that session its own ID. Editing the question text to match the focus of that session. These edit points are clearly marked in the script with: >>> EDIT SESSION METADATA HERE <<< and >>> EDIT QUESTIONS FOR THIS SESSION HERE <<< It’s a simple one-minute change — but worth noting if you plan to scale this across multiple modules or courses. You can explore the working example here: 👉 Rise Review link A downloadable .story file is included inside the review for anyone who wants to look under the hood, edit the JavaScript, or adapt the design for their own learners. 💬 Open for feedback I’d love to hear from other e-learning designers — especially anyone experimenting with AI-supported authoring or reflective learner tools. How might you extend or refine this concept? I’d love your thoughts or suggestions — particularly around: How you’d extend this for different learner profiles Ideas for alternative feedback messages or visual treatments Whether you’ve built similar “confidence meter” interactions in your own work Feel free to reuse, remix, or expand the concept. Always happy to connect and collaborate with other learning designers! 🔗 Portfolio: forgedframeworks.co.uk/ 📧 Contact: dan.boyland@forgeframeworks.co.uk Thanks in advance for any feedback, and again, credit to Joe Dey and the Articulate community for sharing the foundation idea that made this possible.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. All three examples are linked below, along with the downloadable files. 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. Review360 Zip files GDrive location: HERE
Crossword in Rise
I vibe coded a crossword puzzle interaction in the new Articulate Rise custom html block to support our Accounts Review training. It took about an hour of back-and-forth with Copilot to get this working. Check it out here https://rise.articulate.com/share/OHzJApuSIhFcNe4GLwmto58-5dg_-j-C#/lessons/3cT6ydJmoggnBlDSVsXmKaxp11ASrlKp Full HTML code is below the preview, feel free to adapt it and repurpose for own projects.Javascript - Free text box with answer
AI helped me write code to create a quiz question using a free text box answer with suggested answer and requirement to complete before continuing. Screenshots are attached to show what it looks like if the learner doesn't enter text and when they do. Code is: <div class="custom-container"> <h1 class="custom-header">ENTER QUESTION HERE</h1> <div class="input-container"> <textarea id="myTextArea" class="custom-textbox" placeholder="Type your answer here..." rows="5"></textarea> <button id="submitBtn" class="custom-submit-button">Submit</button> <p id="submissionMessage" class="message"></p> </div> <!-- New element to display the suggested answer, hidden by default --> <div id="suggestedAnswer" class="suggested-answer" style="display: none;"> <p><b>Answer:</b></p> <p>ENTER ANSWER HERE</p> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const submitBtn = document.getElementById('submitBtn'); const textArea = document.getElementById('myTextArea'); const submissionMessage = document.getElementById('submissionMessage'); const suggestedAnswer = document.getElementById('suggestedAnswer'); submitBtn.addEventListener('click', function() { // Check if the text box has content if (textArea.value.trim() !== '') { // Sends the completion message to the parent Rise window window.parent.postMessage({ type: 'complete' }, '*'); // Update UI to show completion submissionMessage.innerText = 'Submission successful!'; submissionMessage.style.color = '#001655'; submitBtn.disabled = true; textArea.disabled = true; // Show the suggested answer suggestedAnswer.style.display = 'block'; } else { // Provide feedback to the learner if they didn't enter text submissionMessage.innerText = 'Please enter your response before submitting.'; submissionMessage.style.color = '#d32f2f'; // A red color for errors } }); }); </script> <style> .custom-container { background-color: white; font-family: Arial, sans-serif; text-align: center; padding: 0px; border-radius: 8px; margin: 0 auto; /* Center the container */ max-width: 850px; } .custom-header { color: #001655; /* Use the hex code for the header color */ font-size: 20px; /* Updated header font size */ margin-bottom: 20px; } .input-container { display: flex; flex-direction: column; align-items: center; } .custom-textbox { width: 100%; max-width: 850px; background-color: #e2f0fa; color: #001965; border: 1px solid #c8dbe6; padding: 15px; font-size: 17px; /* Updated text box font size */ line-height: 1.5; border-radius: 5px; box-sizing: border-box; /* Ensures padding is included in width */ } .custom-submit-button { background-color: #001965; /* Dark blue for the button */ color: white; border: none; padding: 12px 24px; font-size: 18px; cursor: pointer; margin-top: 10px; border-radius: 5px; transition: background-color 0.3s ease; } .custom-submit-button:hover { background-color: #003366; /* A slightly lighter blue on hover */ } .message { margin-top: 15px; font-weight: bold; min-height: 20px; /* Prevents layout shift */ } .suggested-answer { text-align: left; margin-top: 30px; padding: 10px; background-color: #f0f8ff; border: 1px solid #c8dbe6; border-radius: 5px; } .suggested-answer p { margin: 0 0 10px 0; color: #001965; } .suggested-answer p:last-child { margin-bottom: 0; } </style>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.
