# GAB-135 · ExerciseImageQuestion — « Question sur image »

**Archétype / renderer_key :** `text_cta` (cartographie) · **module :** EdTechExerciseLearning
**Critère validé :** changer le JSON change le rendu sans modifier le HTML.

## Pack (structure officielle par-GAB)
```
GAB-135/
  renderer.html            <- moteur question sur image (ne pas modifier par instance)
  instance.example.json    <- SOURCE DE VERITE (contenu réel, à plat)
  schema.contract.json     <- contrat de validation
  README-contract.md       <- ce fichier
```

## Archétype

ExerciseImageQuestion est un gabarit **V1_CORE · M · P0** (ExerciseLearning, vague 4).
Il présente une image ou carte avec des points repères cliquables (hotspots), suivis d'une question QCM à réponse unique notée.

Cas d'usage validés : géographie (carte + villes), schéma anatomique ou scientifique,
document visuel (affiche, œuvre, diagramme) nécessitant une réponse évaluée.

## Champs requis (instance, à plat)

`gab_id` · `exercise_id` · `instruction` · `question` · `options[]{id,label,correct}` · `correct_answer_id`

Optionnels : `title`, `image_src`, `image_alt`, `image_caption`, `hotspots[]{id,label,color,top_pct,left_pct}`,
`feedback_correct`, `feedback_incorrect`, `primary_cta{label,action}`, `accessibility{...}`.

## Ce qui vient du JSON vs HTML

- **JSON** : instruction, image (src + alt + caption), positions et couleurs des hotspots, libellé de la question,
  labels et drapeaux correct des options, feedbacks (correct/incorrect), libellé du bouton CTA.
- **HTML** : layout carte, zone visuelle, rendu hotspots positionnés en %, liste d'options, barre CTA, panel feedback.

## Garde-fous (child_safety)

- **Anti-invention** : `image_src` absent ou préfixé `_TODO:` → placeholder visuel SVG généré par le moteur, jamais une image inventée.
- **BLOCKED** si `instruction`, `question`, `options` (vide), ou `correct_answer_id` absents.
- Une et une seule option `correct:true` dans `options[]` ; `correct_answer_id` doit référencer un id existant.
- `image_alt` obligatoire si `image_src` fourni (accessibilité WCAG 2.1 AA).

## QA à vérifier

1. Modifier `question`/`options` → rendu change sans toucher au HTML (critère d'or).
2. `options:[]` → BLOCKED propre dans la carte principale.
3. `correct_answer_id` absent → BLOCKED propre.
4. `image_src` absent → placeholder visuel, pas d'erreur, hotspots affichés.
5. Cliquer hotspot → point sélectionné (`.selected`), puis choisir bonne option + valider → `.ok` + `feedback_correct`.
6. Mauvaise option + valider → `.ko` sur sélection + `.ok` sur bonne + `feedback_incorrect`.
7. Responsive 375/768/1024 : aucun débordement, image proportionnelle 16/10.
8. `ENGINE.init(monInstance)` injectée → rendu change sans modifier le HTML.

## Liens externes (external_refs / dependencies)

| Référence | Contexte |
|---|---|
| GAB-083 | Image annotée pédagogique (NE PAS utiliser GAB-135 si image annotée sans QCM) |
| GAB-055 | Scène narrative — image illustrative sans question évaluée |
| GAB-128/GAB-130 | QCM texte simple ou QCM avec retry (sans image) |

## Source

`INDEX-300-exerciselearning-GAB-131-135-PLAYABLE.html` — stage `data-tpl="135"`,
handlers `imgPick()` et `imgAnswer()`, styles `.img-card/.img-visual/.img-pt/.img-opt/.img-fb`.