Explain labeled graphics and image comparisons

Before you start, link to this section

• Prepare a clear base image for labels, or two related images for comparison.
• Include a text explanation for information that would otherwise depend entirely on seeing the image.

Step by step, link to this section

1. Choose Add block → Interactive → Labeled image to add an image with explanatory markers.
2. Upload the image, add markers, and position each marker over the relevant detail.
3. Edit the marker’s title and explanation, then check the placement in preview.
4. For a before-and-after comparison, choose Before / after in the Media category and add the two images.
5. Set the available labels and display options, and preview the comparison slider.
6. Test both types at phone width so markers and labels remain understandable.

What to expect, link to this section

Learners open markers to reveal details or move a slider to compare the images. These activities are exploratory rather than graded assessments.

Tips & troubleshooting, link to this section

• Use matching image proportions for a comparison where possible.
• After replacing or cropping a labeled image, review every marker position.
• Avoid using two images that look almost identical without explaining which difference matters.