Forum Discussion

DanBoylandUK's avatar
DanBoylandUK
Community Member
4 days ago

🔍 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

  • DanBoylandUK's avatar
    DanBoylandUK
    Community 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 needed

    LinkedIn

    https://www.linkedin.com/in/daniel-boyland-577b6476/