Forum Discussion
🔍 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
13 Replies
Would love to have a version!
Hi Marie, feel free to use the base file, and I used prompt engineering to draft and debug the code
Reach out on LinkedIn if you'd like, and I'd be happy to give you more detailed directions if neededhttps://www.linkedin.com/in/daniel-boyland-577b6476/
I agree! I'd love to use this in my patient safety courses. I am not a programmer and am not sure how to accomplish something similar. I would love to use this as a tool to teach healthcare workers how to identify risks to patients.
Hi Lisa, I'd love to support you with this as I not a programmer/coder either, feel free to reach out to me on LinkedIn, or if you aren't on there, let me know and I'm happy to share my email
https://www.linkedin.com/in/daniel-boyland-577b6476/
Happy to support
DanBoylandUK Thank you for sharing so much detail here! We’ll be featuring this in an upcoming ELH Weekly newsletter, so keep an eye out. If you want it delivered to your inbox, be sure you’re subscribed. 🎉
That's amazing news, 2nd time now, how exciting!
Is there a keyboard-draggable magnifier version?
Hi Adam, not currently, as I had to tag in some keyboard options for the zoom it wasn't my first option.
It would not be too much effort with the right vibe code, I'm sure, just taking care not to bind zoom option combinations with other navigation options and taking care to map all behaviour to WindowsOS, MacOS and the various Mobile interactions.
This could unintentionally bloat the code and make it fragile and/or sticky, as I didn't have a test audience, as this was mainly a play about, after a random brain fart, I didn't want to add code that couldn't be stress tested.
It's a fair point, though and something I'd be glad to tinker with in later iterations
Great example of interactivity. Thanks for sharing Dan. 😎
May I ask why you created it in Storyline instead of using the Code block in Rise?
Hi David, you are welcome to the share, and I appreciate the feedback
Long answer to a short question for the package option, for scalability to be honest. The code sits in isolation and needs support/compression with images, and whilst it is easily edited locally, the publish option across Review/Rise means that other stakeholders can easily review/provide feedback.
It's also a UX/UI thing, Storyline adds a layer of tailorability (not a word I'm sure😁) without having to add or alter bulk css styling and/or HTML and/or js in the asset. I suppose it's easier to change the curtains rather than the view out of the window for some elements.
One final comment is also that whilst code in Rise blocks can be edited, once you package for zip upload with any supporting assets (i.e., images as with this option), you can only delete and change; you can't download the asset, so again it becomes a copy control issue, which is just easier in Storyline.
Short answer to a short question - it's easier, at least for me and my developing experience
Feel free to tinker and play with, and suggest any improvements in the option, and if you are on LI, feel free to reach outhttps://www.linkedin.com/in/daniel-boyland-577b6476/
Thanks Dan.
That makes perfect sense and I agree on the code block (bulk upload option) being a copy control issue. I posted a question about this very issue (Managing code resources). It's interesting to see how others are dealing with this. Cheers!
This is great. Is it accessible for screen readers? I'd love to use it in one of my projects but it would have to be accessible for screen readers as all our content has to be compliant.
Hi Helen, it is in principle, although not stressed tested for the various tech as I imagine the read order would be key for the learner and some assistive tech has different read order. All imagery and text have embedded alt text in the HTML and can be adapted as needed.
Let me know if you like any hint and tips if you like to integrate
