Build and deploy / test-python (push) Failing after 1m15s
Build and deploy / test-js (push) Successful in 54s
Build and deploy / lint-python (push) Failing after 1m12s
Build and deploy / lint-js (push) Failing after 1m8s
Build and deploy / build-and-push (push) Skipped
Build and deploy / deploy (push) Skipped
Build and deploy / sonarqube (push) Failing after 1m4s
Retour utilisateur : "une consequence peut mener a d'autres choix et
ainsi de suite, il n'y a pas de notion vrai/faux, il faut une modale
avec la possibilite de construire un veritable arbre de choix
consequence". Remplace le modele plat (situation + 2-4 choix + un seul
bon choix + une consequence terminale) par un vrai graphe de nœuds :
{"title", "nodes": [{"id", "text", "choices": [{"text", "target_id"}]}]}
- nodes[0] est la situation initiale, chaque choix peut pointer vers
n'importe quel autre nœud (branchement, convergence, fins multiples),
un nœud sans choix est une fin de branche valide. Aucune notion de
bonne/mauvaise reponse.
L'arbre se construit desormais dans une modale dediee (trop de
structure pour la colonne etroite du panneau Proprietes) : liste de
nœuds, chaque choix avec un menu deroulant "mene a" listant les autres
nœuds ou "fin de branche". La modale est un composant generique
(.docModal*) independant de tout framework externe.
sanitize_scenario_config degrade silencieusement tout target_id
orphelin (nœud supprime) vers None plutot que de faire echouer le
scenario entier. Le lecteur cote client navigue le graphe nœud par
nœud, le texte du nœud visite remplace le precedent (toujours pas un
Quiz), jusqu'a une fin de branche puis passage au scenario suivant.
Verifie via simulation DOM reelle (jsdom) : navigation ramifiee
(branchement, convergence, fin via nœud vide ET via choix sans cible),
plusieurs arbres a la suite, et l'editeur modal complet (ouverture,
ajout/suppression de nœud avec reparation des references pendantes,
changement de cible, fermeture bouton/fond/Echap).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
138 lines
8.9 KiB
Markdown
138 lines
8.9 KiB
Markdown
# document_engine/rendering/
|
|
|
|
Rendu HTML du document — point d'entrée unique utilisé à la fois par le
|
|
canevas d'édition et par le Mode Aperçu (même fonction, voir
|
|
`docs/plan/PLAN.md` — "Aperçu réel").
|
|
|
|
## `render_document(elements: list[dict[str, Any]]) -> str`
|
|
Assemble le document entier à partir de la liste à plat renvoyée par
|
|
`document_engine.list_document_elements` : regroupe les éléments par
|
|
`parent_id`, puis rend récursivement les éléments top-niveau dans
|
|
l'ordre (une rangée rend elle-même ses propres enfants côte à côte).
|
|
- **Retour** : le HTML complet du document.
|
|
- **Exceptions** : aucune.
|
|
|
|
## `render_document_element(el: dict[str, Any], children_by_parent: dict[int | None, list[dict[str, Any]]]) -> str`
|
|
HTML d'un seul élément — dispatch par dict (table `_RENDERERS`) selon
|
|
`el["kind"]`, plutôt qu'un enchaînement de `if` (mirroir de l'esprit de
|
|
`game_engine/scenes/render_scene_object.py`). `children_by_parent` est le
|
|
regroupement précalculé par `render_document`, transmis pour que les
|
|
rangées puissent rendre récursivement leurs enfants sans refaire le
|
|
regroupement à chaque appel.
|
|
- **Retour** : le HTML de cet élément (et de ses enfants s'il s'agit
|
|
d'une rangée).
|
|
- **Exceptions** : aucune ; un `kind` inconnu produit un bloc
|
|
`docUnknown` visible plutôt qu'une levée d'exception.
|
|
|
|
### Détail des rendus par catégorie (fonctions privées, table de dispatch)
|
|
- **Rangée** (`row`) : conteneur flex (`gap`/`align-items`/
|
|
`justify-content` réels depuis `attributes`), enfants rendus
|
|
récursivement.
|
|
- **Formes** (`rectangle`/`cercle`/`triangle`/`trait`) : `<div>` positionné
|
|
en absolu (`x`/`y`/`width`/`height`/`rotation`/`z_index` réels) contenant
|
|
un SVG (`rect`/`circle`/`polygon`/`line` selon le type).
|
|
- **Texte** (`titre`/`paragraphe`) : `<div>` stylé selon `style` (préréglage
|
|
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** : 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.
|
|
- **Association** : toujours une carte résumant la config réelle (nombre
|
|
de paires) — sanitizée (`sanitize_association_config`) avant lecture.
|
|
Si au moins une paire existe, s'y ajoute (fonction privée
|
|
`_render_association_player`) le plateau de glisser-déposer RÉEL et
|
|
interactif affiché en Mode Aperçu, masqué en édition par CSS
|
|
(`.docAssocPlayer`) : les deux colonnes (termes/correspondances) sont
|
|
mélangées INDÉPENDAMMENT (`random.shuffle`, mélange d'affichage — voir
|
|
`CODE_QUALITY.md`) puis embarquées en JSON dans un attribut
|
|
`data-assoc-config`, échappé pour l'HTML — même principe que le Quiz,
|
|
aucun aller-retour serveur pendant qu'on joue. Contrairement au Quiz,
|
|
le plateau reste affiché en permanence une fois la partie terminée :
|
|
seul le bouton "Recommencer" (`.docMinigameRestartBar`, partagé avec
|
|
Memory) apparaît, jamais d'écran de résultat séparé qui le
|
|
remplacerait.
|
|
- **Memory** : toujours une carte résumant la config réelle (nombre de
|
|
cartes définies, mode paire/simple) — sanitizée
|
|
(`sanitize_memory_config`) avant lecture. Si au moins une carte existe,
|
|
s'y ajoute (fonction privée `_render_memory_player`) le plateau de
|
|
retournement RÉEL et interactif : en mode `"paire"`, chaque carte
|
|
définie est DUPLIQUÉE en deux instances partageant le même
|
|
`card_index` (l'appariement se fait dessus, classique Memory) ; en mode
|
|
`"single"`, une seule instance par carte (simple retournement, sans
|
|
appariement). Les instances sont mélangées (`random.shuffle`, mélange
|
|
d'affichage — voir `CODE_QUALITY.md`) puis embarquées en JSON dans un
|
|
attribut `data-memory-config`, échappé pour l'HTML — même principe que
|
|
le Quiz/l'Association, aucun aller-retour serveur pendant qu'on joue.
|
|
Comme l'Association, le plateau reste affiché une fois toutes les
|
|
paires trouvées (ou toutes les cartes révélées en mode `"single"`) :
|
|
seul le bouton "Recommencer" (`.docMinigameRestartBar`) apparaît.
|
|
- **Mots mêlés** : toujours une carte résumant la config réelle (nombre
|
|
de mots) — sanitizée (`sanitize_mots_config`) avant lecture. Si au
|
|
moins un mot existe, s'y ajoute (fonction privée `_render_mots_player`)
|
|
la grille RÉELLE et interactive. La grille ET la position exacte de
|
|
chaque mot sont calculées ICI côté serveur (`_build_mots_grid`, jamais
|
|
recalculées côté client) : chaque mot est placé horizontalement,
|
|
verticalement, ou en diagonale (haut-gauche→bas-droite ou
|
|
haut-droite→bas-gauche — jamais à l'envers), les lettres restantes
|
|
tirées au hasard (`random.choice`/`random.randint`, tirage de jeu —
|
|
voir `CODE_QUALITY.md`) ; si un mot ne trouve pas sa place, la grille
|
|
entière est agrandie et le placement retenté depuis zéro, plutôt que
|
|
d'abandonner silencieusement ce mot. Le tout (grille + coordonnées de
|
|
chaque mot) est embarqué en JSON dans un attribut `data-mots-config`,
|
|
échappé pour l'HTML — même principe que les autres mini-jeux, aucun
|
|
aller-retour serveur pendant qu'on joue : `static/document/js/
|
|
document-editor.js` compare les coordonnées EXACTES sélectionnées par
|
|
l'apprenant à celles de chaque mot (jamais une simple comparaison de
|
|
texte, qui se tromperait sur des lettres partagées entre deux mots qui
|
|
se croisent). Comme l'Association/Memory, la grille reste affichée une
|
|
fois tous les mots trouvés : seul le bouton "Recommencer"
|
|
(`.docMinigameRestartBar`) apparaît.
|
|
- **Scénario** : toujours une carte résumant la config réelle (nombre de
|
|
scénarios) — sanitizée (`sanitize_scenario_config`) avant lecture. Si
|
|
au moins un scénario existe, s'y ajoute (fonction privée
|
|
`_render_scenario_player`) la mise en situation RÉELLE et interactive :
|
|
un scénario est un ARBRE DE DÉCISION (voir `scenario_config.py` pour la
|
|
forme exacte — `nodes[0]` = situation initiale, chaque choix pointe
|
|
vers un autre nœud via `target_id`, un nœud sans choix est une fin de
|
|
branche), pas une simple question à une seule conséquence. Aucune
|
|
notion de bonne/mauvaise réponse (retour utilisateur du 20/09/2026 :
|
|
"il n'y a pas de notion vrai/faux, l'utilisateur observe les
|
|
conséquences") : l'apprenant choisit une option, le texte du nœud visé
|
|
REMPLACE l'affichage du nœud précédent (les boutons de choix
|
|
disparaissent avec lui), et ainsi de suite jusqu'à une fin de branche
|
|
— volontairement PAS le comportement du Quiz, où la question resterait
|
|
affichée à côté d'un encart de feedback séparé. Une fois une fin de
|
|
branche atteinte, passage au scénario (arbre) suivant. Les scénarios
|
|
gardent l'ORDRE d'écriture du créateur (jamais mélangés, contrairement
|
|
à Association/Memory/Mots mêlés — ce sont des mises en situation
|
|
séquentielles, pas des éléments à faire correspondre/retrouver).
|
|
Réutilise les classes visuelles du Quiz (`.docQuizOptions`/
|
|
`.docQuizNextBar`/`.docQuizQuestionText`) plutôt que de dupliquer ces
|
|
règles. L'arbre complet (tous les nœuds/choix de tous les scénarios)
|
|
est embarqué en JSON dans un attribut `data-scenario-config`, échappé
|
|
pour l'HTML — même principe que les autres mini-jeux, aucun
|
|
aller-retour serveur pendant qu'on joue : toute la navigation dans
|
|
l'arbre se fait côté client. Comme l'Association/Memory/Mots mêlés
|
|
(mais contrairement au Quiz), le dernier scénario reste affiché une
|
|
fois une fin de branche atteinte : seul le bouton "Recommencer"
|
|
(`.docMinigameRestartBar`) apparaît. L'arbre lui-même se construit
|
|
dans une MODALE dédiée depuis le panneau Propriétés (voir
|
|
`forgeDocOpenScenarioTreeModal`, static/document/js/document-editor.js)
|
|
— trop de structure (nœuds + choix + destinations) pour la colonne
|
|
étroite du panneau Propriétés, contrairement aux autres mini-jeux.
|
|
- **Autres mini-jeux** (`zones`) : carte placeholder portant le libellé
|
|
du type (voir `document_engine/labels/element_kind_labels.py`) —
|
|
emplacement réservé, formulaire de contenu dédié hors périmètre de
|
|
cette passe.
|