Skip to main content

🔍 Using the Image Analysis block

Guide your learners through the key zones of an image, or let them explore freely. Ideal for technical, software, or any visually complex content.

Written by Océane

⏱️ The essentials
​
• The Image Analysis block lets you highlight specific zones of an image, each linked to an explanatory text.
• Two modes: Guided analysis (zones are revealed as the learner scrolls) and Free exploration (the learner clicks on markers to reveal each zone).
• Markers are customisable: colour, style (filled or hollow centre), or replaced by directly visible zones.
• Learners can zoom into the image by double-clicking to see details up close.
• Text can be displayed below or to the right of the image, and the block can be widened (L).

🧠 What is the Image Analysis block for?

The Image Analysis block lets you annotate an image by defining focus zones, each linked to an explanatory text. It is particularly useful for:

  • software training (highlighting a button, a UI area)

  • technical diagrams (identifying the components of a piece of equipment)

  • maps, plans or mockups to describe zone by zone

⚙️ Setting up the block

Choosing the display mode

From the Layout option (visible on hover), two modes are available:

  • Guided analysis (default): the block takes over the full screen and steps through zones one by one. The learner progresses in the order defined by the author.

  • Free exploration: markers appear on the image. The learner clicks on each one to reveal the corresponding zone in a floating panel.

ℹ️ In Free exploration mode, if a zone has no marker placed on the image, it will not be visible to the learner. The editor warns you and offers two fixes: add a marker, or switch back to Guided analysis mode.

💡 In Free exploration mode, learners are not required to open every zone before moving on. If you need every zone to be seen, use Guided analysis mode.

Customising the layout

From the Format option (visible on hover), you can also set:

  • Vertical margin size: XS, S, M, L

  • Block width: M or L (widens or narrows how the image is displayed)

  • Text position: display the focus text below the image (default) or to the right

In Free exploration mode, Format also lets you choose the marker colour (indigo by default) and toggle the hollow-centre marker option, which shows only the halo without covering what is behind it.

🗺️ Importing images and positioning focus zones

Once the visual settings are configured, hover over the block and click ✏️ Content.

  1. Add your images.

  2. Add and position your focus zones: the zone editor lets you place and resize each zone directly on the image.

For small zones (a button, a detail on a diagram…):

  • Zoom in the editor to enlarge the image and position the zone precisely.

  • Use the Normal size button to return to the full view in one click.

  • Select an existing zone and click Frame zone: the editor automatically zooms to that zone to make adjustments easier.

🎓 What learners see

  • In Guided analysis mode: the block takes over the full screen. The learner scrolls through zones in order. Each zone reveals its associated text.

  • In Free exploration mode: markers are visible on the image. The learner clicks a marker, the text appears in a floating panel (or at the bottom of the screen on mobile). The highlight effect on hover helps identify clickable zones.

  • In both modes: learners can double-click on the image to zoom and see details. The cursor changes to "+" to signal this.

⚠️ Known limitation

In Free exploration mode, the learner's progress (opened zones) is tracked during the session but is not saved. If the learner leaves the page and comes back, zones appear as unopened again. This does not block progression through the course.

Keywords: image analysis, interactive image, focus zones, markers, free exploration, guided analysis, software training, technical diagram, zoom

Did this answer your question?

Related Articles

Didask Eu Help Center
Effective learning at scale