Guided Hotspot Explorer template

The Guided Hotspot Explorer turns a static image into an interactive learning experience. Authors can position hotspots over any uploaded image and add explanatory content for learners to explore.

Hotspots can be displayed all at once for free exploration or revealed sequentially to guide learners through an image in a deliberate order. Visited markers, progress indicators and a clear current-marker state help learners keep track of where they are, with an optional key takeaway providing a purposeful conclusion to the activity.

The template is designed to be reusable across subjects — for example, identifying parts of equipment, exploring a process diagram, examining a workplace, introducing a product or highlighting features within an interface. Authors can configure the number and position of hotspots, content, marker size and behaviour, colours, navigation and completion messaging without editing the code.

It is responsive and designed with keyboard and screen-reader accessibility in mind, including accessible hotspot states, reduced-motion support and configurable high-contrast focus styling.

Add an activity title, introductory copy and an image. Place each marker, then add its title and explanation.

Write the opening prompt and completion message in your own words. Add a key takeaway when you want a final teaching point.

The starting layout uses a horse image and starts with five hotspots. Its labels cover the poll and withers, plus points on the legs.

The introduction sends learners to the first marker and asks them to continue in sequence. Progress dots show their place. Previous and Reset controls are shown.