🔍 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 ZIPSUsing 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 memorizationHow I Embedded an AI Chatbot into a Rise 360 Course
This interactive course demonstrates how an AI-powered teaching assistant can be embedded directly into a Rise 360 experience. Please let me know what you think of the live demo Built with GPT-4o, LangChain, FAISS, and Streamlit, the assistant retrieves content from Teaching in a Digital Age by Dr. Tony Bates and answers learner questions in real time. You can try the assistant directly within the course to see how AI can support self-paced learning by offering just-in-time help, contextual answers, and scalable support—without the need for live facilitation. This project showcases how instructional designers can combine low-code tools and open content to build smarter, more responsive digital learning environments. If you’re interested, I’d happily share a short Loom walkthrough explaining how it was built.Code 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 360Genially 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!AI Course Drafts
✨ My favorite Articulate Rise feature of 2025: AI Course Drafts ✨ As a learning and instructional designer, I’m always looking for tools that help me work smarter without sacrificing quality or creativity—and the AI Course Drafts in Articulate Rise absolutely delivered this year. In 2025 alone, I’ve created several courses using this feature, and it has dramatically simplified the development process. Starting with a solid AI-generated structure saved me hours of setup time and gave me a strong instructional foundation to build on. What I loved most? 👉 The drafts weren’t the final product—they were the launch point. I went in, refined the learning flow, customized activities, adjusted the tone, and added meaningful personal and cultural touches. I even created two full courses in different languages: 🇺🇸 English: The Structure and Meaning of the Traditional Latin Mass: A Guided Exploration 🇪🇸 Spanish: Uso Efectivo y Ético de la Inteligencia Artificial en el Trabajo Being able to personalize content while still saving time is a game changer—especially when designing for different audiences, languages, and subject matter depth. AI didn’t replace my role —it amplified it. Curious to hear from other: 👉 Have you tried AI Course Drafts yet? How are you using them in your workflow?Simple but mighty
I used the Custom Block Beta tool and created a set of blocks in Rise to highlight some of the content in my eLearning lessons. Each block is simply built with a text box and an AI image in the top left corner. These blocks act as a placeholder for text, and is intended for use where content needs to be flagged as one of the following: DISCLAIMER, NOTE, IMPORTANT, RISK, MANDATORY, WARNING, or INFORMATION: Block Name Purpose DISCLAIMER Legal or compliance-related notes IMPORTANT Key points that require attention RISK Content that involves potential hazards MANDATORY Instructions that must be followed WARNING Alerts about critical issues INFORMATION/NOTE General supporting details Pre-creating these blocks helps streamline development, guarantees consistent sizing for Rise lessons, and ensures a standardised design for all flagged content types. I hope this example provides useful insight and sparks ideas for creating consistent, reusable content.What Does Ice Cream & Business Financials Have in Common?
Check out my very first Microlearning created in Rise 360! It's been just about 2 months now getting familiar with Articulate and all it has to offer- so why not hop in and participate in my first weekly challenge to close out the year! Here's what its about... Business financials can be a scary topic- so why not mix in a little ice cream. That was the angle I took with this sample. I wanted to create something a bit fun and interesting while still nailing the key points and the needs of my learners. Please, check it out. I'm extremely new to this and open to feedback...link is below Warmly, Tiesha Microlearning Course
