Image Juxtaposition
The Image Juxtaposition content type shows a before/after comparison of exactly two generated images, revealed with a draggable slider. The AI generates both images, their labels and alternative texts, and configures the slider from the teacher's prompt.
AI-generated configuration
| Setting | Description | Possible values | Default |
|---|---|---|---|
| Number of images | How many images the comparison holds. | Exactly 2 — the type only supports a before and an after | 2 |
| Slider orientation | The direction the comparison slider moves in. | Horizontal / Vertical | Horizontal, unless the prompt asks for vertical |
| Slider starting position | Where the slider sits when the activity loads. | 0 to 100 | 50 (centered) |
| Image labels | The label of each image (e.g. the before and the after). | Text correctly assigned to its image | Derived from the prompt |
| Alternative texts | The alt text of each image. | Text describing the image | Generated for both images |
Generated content
- Exactly two generated images: the before and the after of the contrast being taught.
- A label per image, correctly assigned to the state it represents.
- An alternative text per image.
- A comparison slider in the requested orientation and starting position.
When a syllabus or source document is uploaded, the contrast represented and the labels are drawn strictly from it, with terms and concepts traceable to the document and no invented material.
Rules and behavior
- Both images are indispensable for this type: they are generated even when the "Generate images" toggle is off. This is by design, not a failure.
- Both images are mandatory: if either one fails to generate, the generation is retried.
- The type only admits two images. A request for more (e.g. three states of a glacier) is resolved by comparing exactly two of them — for example the oldest and the current one — without failing the generation.
- The slider's starting position can be moved away from the center (documented range 0 to 100, default 50), for example so that one of the two states fills most of the view when the activity loads.
Example prompts
Without syllabus
A horizontal before/after comparison with two generated images, each with its label and alt text:
I need an H5P image juxtaposition for the urban planning course showing a downtown square before and after its pedestrianization: first full of cars and then converted into a pedestrian space with trees. With the slider set horizontal.
A comparison whose slider starts near the edge so the deteriorated state fills most of the initial view:
I want an H5P image juxtaposition on art restoration: a deteriorated fresco and the same fresco restored. When the activity opens, almost all of the deteriorated fresco should be visible, with the slider near the edge.
With syllabus
A vertical-slider comparison of the two situations contrasted in topic 2 of the uploaded document:
Prepare an H5P image juxtaposition that contrasts the two situations compared in topic 2 of the document I uploaded. I want the slider to move vertically.
A request for three stages that the type resolves to exactly two images without failing:
Make me an H5P image juxtaposition with three stages of the process developed in the complete document I uploaded: the initial, the intermediate and the final one.