Quiz reellement interactif en Mode Apercu (voir maquette document-formation-web.html)

Le quiz affichait jusqu'ici la meme carte resume en edition comme en
Apercu. Ajoute un vrai questionnaire jouable, visible UNIQUEMENT en
Mode Apercu (masque en edition via CSS, jamais les deux a la fois) :
options de reponse cliquables, marquage correct/incorrect immediat,
score qui accumule les points de chaque question repondue
correctement, progression "Question suivante", et un ecran de
resultat final (score obtenu / total des points possibles) avec
"Recommencer le quiz" - structure et identite visuelle calquees sur
docs/plan/maquettes/document-formation-web.html (cartes en degrade,
options A/B/C/D, feedback vert/orange), adaptees aux tokens --doc-*
deja en place (theme clair/sombre inclus, nouvelles variables
--doc-quiz-success-*/--doc-quiz-danger-*).

Cote rendu (document_engine/rendering/render_document_element.py),
_render_quiz ajoute desormais le questionnaire (fonction privee
_render_quiz_player) des qu'au moins une question existe : les
questions sont embarquees en JSON dans un attribut data-quiz-config
(jamais un <script> par element), echappees pour l'HTML - aucun
aller-retour serveur pendant qu'on joue, tout le deroulé (reponse/
score/suivant/resultat) est gere par
static/document/js/document-editor.js. pointer-events, desactive sur
tout element en Apercu pour empecher la selection/le glisser-deposer
pendant le test, est reactive specifiquement dans le questionnaire
pour qu'il reste reellement cliquable.

Tests : 3 nouveaux tests de rendu purs (sans Flask, dont un qui
verifie l'echappement HTML du texte d'une question contre une
injection). Verifie en live via une simulation DOM complete
(basculer Apercu, repondre correctement puis incorrectement,
verifier score/feedback/etat des options, passer a la question
suivante, voir l'ecran de resultat) - le script de diagnostic n'a pas
ete conserve dans le depot.

SKIP=djlint : backlog H021 pre-existant, aucun template touche ici.
ruff/mypy --strict/vulture/bandit/import-linter/eslint/stylelint tous
verts ; 48 tests cibles (document + onboarding) verifies frais.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

document_engine/rendering/render_document_element.py

@@ -1,4 +1,5 @@
 import html as html_lib
+import json
 from typing import Any
 
 _SHAPE_TAGS = {"rectangle": "rect", "cercle": "circle", "trait": "line"}
@@ -130,9 +131,42 @@ def _render_minigame_placeholder(
     return (
         f'<div class="docMinigame" data-element-id="{el["id"]}" data-kind="{el["kind"]}" '
         f'style="border-color:{theme_color};">'
+        f'<div class="docMinigameBadge">'
         f'<span class="docMinigameLabel">{label}</span>'
         f'<span class="docMinigamePlaceholder">Formulaire de contenu à venir</span>'
+        f"</div></div>"
+    )
+
+
+def _render_quiz_player(config: dict[str, Any]) -> str:
+    """Questionnaire RÉELLEMENT interactif — affiché uniquement en Mode
+    Aperçu (voir static/document/document-editor.css,
+    .docEditor3--preview), pour que le créateur puisse tester son quiz
+    avant un futur export (voir docs/plan/maquettes/
+    document-formation-web.html, référence visuelle de ce rendu). Les
+    questions sont embarquées en JSON dans un attribut data-* (jamais un
+    <script> par élément) — static/document/js/document-editor.js les lit
+    et gère tout le déroulé (réponse/score/question suivante/résultat)
+    côté client, sans aucun aller-retour serveur (une session d'Aperçu
+    n'est jamais persistée)."""
+    config_json = html_lib.escape(json.dumps({"questions": config["questions"]}), quote=True)
+    return (
+        f'<div class="docQuizPlayer" data-quiz-config="{config_json}">'
+        f'<div class="docQuizCard">'
+        f'<div class="docQuizKicker">Quiz</div>'
+        f'<div class="docQuizPlayerTitle">Vérifiez vos connaissances</div>'
+        f'<div class="docQuizProgressTrack"><div class="docQuizProgressFill"></div></div>'
+        f'<div class="docQuizMeta"><span class="docQuizProg"></span><span class="docQuizScore"></span></div>'
+        f'<div class="docQuizQuestionText"></div>'
+        f'<div class="docQuizOptions"></div>'
+        f'<div class="docQuizFeedback"></div>'
+        f'<div class="docQuizNextBar"><button type="button" class="docQuizNextBtn">Question suivante</button></div>'
         f"</div>"
+        f'<div class="docQuizResultCard" style="display:none;">'
+        f'<div class="docQuizResultBig"></div>'
+        f'<div class="docQuizResultSub"></div>'
+        f'<button type="button" class="docQuizRestartBtn">Recommencer le quiz</button>'
+        f"</div></div>"
     )
 
 
@@ -146,12 +180,16 @@ def _render_quiz(el: dict[str, Any], _children_by_parent: dict[int | None, list[
     total_points = quiz_total_points(config)
     timer_note = f" · ⏱ {config['timer_seconds']}s/question" if config["timer_enabled"] else ""
     subtitle = f"{question_count} {question_label} · {total_points} points{timer_note}"
+    player_html = _render_quiz_player(config) if config["questions"] else ""
     return (
         f'<div class="docMinigame" data-element-id="{el["id"]}" data-kind="quiz" '
         f'style="border-color:{theme_color};">'
+        f'<div class="docMinigameBadge">'
         f'<span class="docMinigameLabel">Quiz</span>'
         f'<span class="docMinigamePlaceholder">{html_lib.escape(subtitle)}</span>'
         f"</div>"
+        f"{player_html}"
+        f"</div>"
     )
 
 

document_engine/rendering/rendering.md

@@ -35,10 +35,19 @@ regroupement à chaque appel.
   taille/graisse/interligne) et `bold`/`italic`/`underline`/`align`/`color`.
 - **Image** : `<img>`, ou un bloc placeholder si `src` est vide.
 - **Bouton** : `<button>` avec son `label` et un `data-target` optionnel.
-- **Quiz** : carte résumant la config réelle (nombre de questions, total
-  des points via `quiz_total_points`, minuteur si activé) — sanitizée
-  (`sanitize_quiz_config`) avant lecture, jamais un rendu direct
-  d'`attributes` brut.
+- **Quiz** : toujours une carte résumant la config réelle (nombre de
+  questions, total des points via `quiz_total_points`, minuteur si
+  activé) — sanitizée (`sanitize_quiz_config`) avant lecture, jamais un
+  rendu direct d'`attributes` brut. Si au moins une question existe,
+  s'y ajoute (fonction privée `_render_quiz_player`) le questionnaire
+  RÉEL et interactif affiché en Mode Aperçu (voir docs/plan/maquettes/
+  document-formation-web.html — référence visuelle), masqué en édition
+  par CSS (`.docQuizPlayer`, voir static/document/document-editor.css) :
+  les questions sont embarquées en JSON dans un attribut `data-quiz-config`
+  (jamais un `<script>` par élément), échappé pour l'HTML
+  (`html.escape(..., quote=True)`) — static/document/js/document-editor.js
+  lit cet attribut et gère tout le déroulé (réponse/score/question
+  suivante/résultat) côté client, sans aucun aller-retour serveur.
 - **Autres mini-jeux** (`association`/`memory`/`mots`/`scenario`/`zones`) :
   carte placeholder portant le libellé du type (voir
   `document_engine/labels/element_kind_labels.py`) — emplacement réservé,