Skip to main content

🔍 Add an Interactive Image Exercise

Ask your learners to click on specific areas of an image to validate their understanding of a gesture, an interface, or a procedure.

Written by Océane

⏱️ The essentials
​
• The Interactive Image exercise consists of defining clickable zones on an image and specifying which ones are correct or incorrect.
• Each zone can have a custom feedback.
• This exercise cannot be used in placement tests or final evaluations.
• It is particularly suited to testing technical gestures, tool usage, or diagram reading.


🧠 Why use Interactive Image exercises?

Some skills are harder to assess with multiple-choice questions: identifying a danger zone on a worksite, locating a button in an interface, spotting an error in an assembly. The Interactive Image exercise lets you assess these skills in context, asking learners to interact directly with a visual that reflects their professional reality. The format also encourages attention and active observation, unlike a plain descriptive text.

This exercise is particularly suited to:

  • software training (finding a button, navigating an interface)

  • technical training (identifying a component, locating a zone on a diagram)

  • any exercise requiring precise visual recognition


💡 Typical use cases

  • Software or interface navigation: click the right button or menu.

  • Technical gestures: identify the correct areas of intervention (first aid, maintenance, safety).

  • Reading diagrams or plans: locate elements on a map, an org chart, a circuit.

  • Clue hunting: analyse a scene and identify the relevant elements.


⚙️ How to create an Interactive Image exercise

1️⃣ Add the exercise

In your module, add a granule and choose the Interactive Image exercise type.

Write a context if needed by adding the available content blocks (text, image, dialogue…).

Click the 📏 icon, then click Edit exercise to fill in the question and add your images.

2️⃣ Define the answer zones

Import your image, then position the focus zones directly on it. For small zones:

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

  2. Use the Normal size button to return to the full view.

  3. Select a zone and click Frame zone to zoom automatically to it.

💡 In the editor, hovering over a zone highlights it, making it easier to check its position.

You can create an exercise with multiple images in a row. The learner moves through the images in order, with the option to go back to a previous one.

💡 Useful for software training that requires navigating through several screens in sequence.

3️⃣ Customise the markers

From Format (accessible via the 📏 icon on hover), you can adjust:

  • Show or hide interactive zones :

    • When hidden, learners must find the zones without any visual cue. If they click outside a zone, an "outside zone" feedback appears. After 3 unsuccessful attempts, a Hint button appears to temporarily display the markers. This option works well for exercises where the goal is to locate an element from memory (a button in an interface, a zone on a plan…).

  • Display style : Choose between markers or directly visible zones.

  • Marker colour and style : Choose the colour of the interactive zone or enable the hollow-centre marker to show only the halo without covering what is behind it.

  • Immersive mode : Immersive mode forces the learner to complete the exercise full screen. Without it, the learner can choose to go full screen from within the exercise. With it, full screen is imposed as soon as the exercise opens.

💡 Using Interactive Images in multilingual courses? Each image and question can be fully adapted per language. Select the target language from the language picker (top of the project, or bottom left in the granule editor), open the granule, then click Edit exercise to translate the question and/or add a new image.


🎓 What learners see

  • Markers appear on the image (unless zones are hidden).

  • Hovering over a zone highlights it.

  • Learners can double-click to zoom into the image.

  • After completing one image, the exercise moves automatically to the next.

  • A Close button lets them exit full screen or the exercise.


📱 Compatibility

The Interactive Image exercise works on mobile. It is also available in evaluation modules, chapter placement tests, and final evaluations.


Keywords: interactive image, exercise, hidden zones, hint, full screen, immersive mode, software training, markers, multiple images, evaluation

Did this answer your question?