🔍 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 ZIPSNeon & Dark Mode Soft Skills Training: Getting Creative with Block Content Backgrounds!
Oftentimes, the visual 'design' portions of learning content can be basic and monotonous- So I challenge y'all to find a unique visual concept and run with it to strengthen those design muscles! Personally, I went for a Dark Mode Neon color theme, reminiscent of Miami Vice color themes. Let me know what y'all think!💡 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.Microlearning Demo: “Desk Stretches for Remote Workers” – 5-Minute Wellness eLearning in Rise 360
Hi everyone! 👋 I recently created a microlearning module in Rise 360 titled “Desk Stretches for Remote Workers.” It’s a short, interactive learning experience designed to help professionals reduce stiffness and improve posture during long work hours. The module includes: 🎧 Optional voice-over guidance and captions 🪑 Quick knowledge checks and interactive buttons I built this as part of my Instructional Design portfolio to demonstrate the use of microlearning principles, visual consistency, and learner engagement techniques within Rise 360. I’d love your feedback on: The flow and interactivity design Visual clarity and consistency Ideas for making wellness topics more engaging in micro formats 👉 Thanks for checking it out — excited to learn from your thoughts and suggestions! — Amit Kumar Verma Instructional Designer | eLearning Developer | Articulate 360 EnthusiastJavascript - 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.Halloween Inspired Code Block: Haunted Emoji Hunt
Overview I recently experimented with the Rise Code Block for the first time and wanted to share a fun idea I developed. It started as a simple “Crack the Code” game for a project, and I later gave it a Halloween twist 👻! The project includes two interactive code blocks: 🎃 Emoji Guessing Game: Players must complete a section to unlock the continue button. 🎃 Badge Generator: Creates a badge with name, date, and timestamp. What I learned: Code 1 (emoji game) was straightforward to build and modify. Block 1 displays correctly on both PC and iPhone, but the tick ✅ and cross ❌ icons don’t appear when the link is accessed on a Samsung mobile device. Code 2 (badge generator) was more complex due to embedding an image using a Base64 string. I’m not a coder, so I learned everything through Copilot while experimenting and this was a great learning experience! Things I would improve or reconsider next time: I didn’t test how the timestamp behaves across different time zones or include any prompt instructions for that. I tried adding a “Download Badge” button. This worked in HTML but not within Rise. Project link: https://bit.ly/HauntedEmojiHunt Project Code: See attachments Please share your feedback, thoughts and ideas to make this better or on where it could be used.
