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
2 Replies
- MarieAcree-30dcCommunity Member
Would love to have a version!
- DanBoylandUKCommunity Member
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/
Related Content
- 12 months ago