lrdlg/2CInfo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
661dc2e15b16c3ecbebfe900363eb8209d5d438b
2CInfo/FEUILLE-DE-ROUTE-CLAUDE-CHAT.md
T
lrdlg b0f500a954 4TQ séance 1
2026-09-24 20:30:39 +02:00

650 lines
27 KiB
Markdown
Raw Blame History

# Feuille de route — créer un module de cours pour la plateforme « Mes cours »
> **À l'attention de Claude (claude.ai).** Ce document décrit comment produire
> les pages d'un module de cours pour une plateforme existante. Les pages que tu
> produis seront déposées telles quelles dans le dépôt. Respecte les règles à la
> lettre : tout écart (chemin absolu, couleur en dur, bibliothèque externe…) casse
> le site ou son unité visuelle.
>
> **Conseil à l'enseignant :** joins à la conversation `assets/theme.css`, ainsi
> que la feuille du gabarit choisi (`assets/exercices-commune.css`,
> `assets/atelier-texte.css` ou `assets/numerique-1re.css`). Claude connaîtra
> ainsi les classes réelles.
---
## 0. Ce qu'il faut joindre à la conversation
Toujours ce fichier, plus les pièces de la classe concernée. Sans la feuille de
style, Claude invente des classes qui n'existent pas ; sans la page d'exemple,
il invente une structure de page.
| Classe | Gabarit | À joindre, en plus de ce fichier |
|---|---|---|
| **1re tronc commun**<br>`1re-numerique` | C | `assets/theme.css`<br>`assets/numerique-1re.css`<br>`1re-numerique/1TC-NUM_bloc-01_ouvrir-le-cours.html` *(exemple élève)*<br>`1re-numerique/1TC-NUM_bloc-01_pilotage.html` *(exemple enseignant, si la séance en a besoin)* |
| **2e différenciée**<br>`2e-differenciee` | jeux | `assets/theme.css`<br>`assets/jeux-differenciee.css`<br>`2e-differenciee/module-a/index.html` *(exemple : il porte aussi tout le moteur de jeux)* |
| **2e commune**<br>`2e-commune` | A | `assets/theme.css`<br>`assets/exercices-commune.css`<br>`2e-commune/module1/bloc2.html` *(exemple)* |
| **3e TQ Technique sociale**<br>`3tq-technique-sociale` | B | `assets/theme.css`<br>`assets/atelier-texte.css`<br>`assets/atelier-texte.js`<br>`3tq-technique-sociale/module1/index.html` *(exemple)* |
| **4e TQ Agent d'éducation**<br>`4tq-agent-education` | B | les mêmes qu'en 3e TQ : le cours est le même, seule la classe du `<body>` change (`classe-ae`) |
Remarques :
- `assets/exercices-commune.js` n'a pas besoin d'être joint : Claude n'écrit pas
de code pour le gabarit A, seulement les données `window.DATA` décrites en 6.2.
- Pour la 2e différenciée, le moteur de jeux est écrit **dans la page** du
module A. C'est pourquoi on joint la page entière : elle sert à la fois
d'exemple de structure et de bibliothèque de jeux à réutiliser.
- Si la conversation devient longue et que Claude se met à dériver, rouvrir une
conversation neuve et rejoindre les mêmes pièces. C'est plus rapide que de le
corriger.
### La marche à suivre, en cinq temps
1. **Ouvrir une conversation par module.** Un module par conversation : au-delà,
Claude perd le fil et mélange les gabarits.
2. **Joindre les pièces** du tableau ci-dessus.
3. **Décrire la commande** : la classe, le numéro et le titre du module, le
nombre de séances, et le contenu du cours (un extrait du cours papier, le
plan, les notions à couvrir). Plus c'est précis, moins il invente.
4. **Récupérer la livraison** au format imposé en 11 : fichiers complets,
carte d'index, liste des images attendues.
5. **Rapporter le tout ici**, dans Claude Code : mise en place des fichiers,
ajout de la carte dans l'index de la classe, et vérification du rendu réel
dans le navigateur.
---
## 1. Le contexte en bref
- Site **statique** : HTML, CSS et JavaScript natifs. Aucun framework, aucune
bibliothèque, aucun CDN, aucun outil de construction.
- Il doit fonctionner **hors ligne**, y compris ouvert depuis une clé USB
(`file://`). Aucun appel réseau, sauf la feuille Google Fonts déjà prévue dans
le gabarit (elle échoue sans dommage si le réseau la bloque).
- Public : élèves du secondaire (12-18 ans), en local informatique, souvent
devant un TBI. Textes courts, consignes directes, tutoiement.
- Langue : **français correctement accentué** partout dans le texte affiché.
- Toutes les couleurs, polices et composants de base existent déjà dans
`assets/theme.css`. **Tu ne crées pas de charte : tu utilises la sienne.**
> **Aperçu dans le chat :** les pages chargent leurs feuilles de style par des
> chemins relatifs (`../../assets/…`) qui n'existent pas dans ton aperçu. La
> page y apparaîtra donc sans mise en forme. C'est normal. **N'intègre pas le
> thème dans la page pour « corriger » l'aperçu.**
---
## 2. Arborescence
```
index.html aiguillage général (ne pas toucher)
assets/ ressources communes (ne pas toucher)
<classe>/index.html liste des modules de la classe
<classe>/images/ images de la classe, partagées par ses modules
<classe>/<module>/index.html accueil du module (ou le module entier)
<classe>/<module>/bloc2.html … pages supplémentaires éventuelles
```
### Les classes
| Dossier | Classe du `<body>` | Nom affiché | Cours |
|---|---|---|---|
| `1re-numerique` | `classe-tc` | 1re tronc commun | Numérique |
| `2e-differenciee` | `classe-diff` | 2e différenciée | Initiation à l'informatique |
| `2e-commune` | `classe-comm` | 2e commune | Informatique |
| `3tq-technique-sociale` | `classe-ts` | 3e TQ Technique sociale | Traitement de texte |
| `4tq-agent-education` | `classe-ae` | 4e TQ Agent d'éducation | Traitement de texte |
### Nommage
- Dossier du module : `module1`, `module2`… (ou `module-a`, `module-b`). Minuscules,
sans accent, sans espace.
- Pages : `index.html` obligatoire. Pages suivantes : `bloc2.html`, `seance2.html`…
- Images : `m<numéro>-<sujet>.png|jpg`, par exemple `m3-menu-format.png`,
rangées dans `<classe>/images/`.
---
## 3. Règles absolues
1. **Chemins relatifs uniquement.** Depuis une page de module :
`../../assets/theme.css`, `../index.html`, `../images/m3-menu.png`.
Jamais `/assets/…`, jamais `https://…` vers le site lui-même.
2. **Liens explicites vers `index.html`** : écrire `../index.html`, pas `../`
(sinon le lien ne marche pas depuis une clé USB).
3. **Aucune couleur en dur** (`#1f4e79`, `blue`, `rgb(…)`) dans le HTML, le CSS
ou les SVG. Utiliser les variables de la section 5. Seule exception tolérée :
`#fff` pour un texte posé sur `var(--juste)` ou `var(--erreur)`.
4. **Ne jamais redéfinir `:root`, `body`, `h1`, `h2`, `h3`, `.action`,
`.encadre`** ni aucune classe de `theme.css`.
5. **Un seul `<h1>`**, dans l'en-tête. Le contenu commence à `<h2>`.
6. **Toute action se fait sur un `<button type="button">`**, jamais sur un
`<div onclick>`. Si un élément non-bouton doit être cliquable (zone SVG,
conteneur qui reçoit des étiquettes), lui donner `tabindex="0"`,
`role="button"`, un `aria-label` et gérer Entrée et Espace.
7. **Les retours de correction** (« Juste », « Non… ») vont dans un élément
`role="status" aria-live="polite"`.
8. **Pas de `localStorage` obligatoire** : la page doit fonctionner entièrement
sans lui.
9. **Pas de texte qui repose sur la couleur seule** : un verdict dit « Juste » ou
« Non », il ne se contente pas de verdir.
---
## 4. Choisir un gabarit
| Besoin | Gabarit | Exemple existant |
|---|---|---|
| Théorie courte + série d'exercices corrigés automatiquement, avec compteur de score | **A — Exercices** | `2e-commune/module1/` |
| Cours à lire, long, avec démonstrations, quiz et exercices intégrés au texte | **B — Document long** | `3tq-technique-sociale/module1/` |
| Séance projetée, minutée, avec un rail d'activités et une page de pilotage enseignant | **C — Séance projetée** | `1re-numerique/` |
Le gabarit **A** est à privilégier : ses exercices sont décrits en données, sans
code à écrire. Le gabarit **B** convient au traitement de texte et à tout
contenu surtout textuel.
### Gabarit C, la séance projetée (1re tronc commun)
Cette classe suit une organisation particulière, déjà en place : **pas de
sous-dossiers de module**, les pages vivent à plat dans `1re-numerique/`, et
chaque séance existe en deux versions.
| Fichier | Public |
|---|---|
| `index.html` | élèves — le menu de l'année, les 35 cours en six parties |
| `1TC-NUM_bloc-NN_<sujet>.html` | élèves — la séance, projetée au tableau |
| `pilotage.html` | enseignant — les 35 blocs avec attendus et évaluations |
| `1TC-NUM_bloc-NN_pilotage.html` | enseignant — la conduite de la séance |
Pour produire une nouvelle séance, **copier le squelette d'une séance
existante** (`1TC-NUM_bloc-01_ouvrir-le-cours.html`) : sa tête de page, son
en-tête, son rail d'activités et son pied sont déjà conformes. Les feuilles à
charger sont `../assets/theme.css` puis `../assets/numerique-1re.css` (un seul
niveau de `../`, les pages étant à plat).
Composants propres à ce gabarit, tous déjà stylés : `.dashboard`/`.stat`,
`.chrono`/`.pendule`/`.ecart`, `.navtabs`/`.tab`/`.panel`, `.card`,
`.carte-entete`, `.consigne`, `.info`, `.accordeon`/`.item`, `.qcard`,
`.steps`/`.step`, `.trace`, `.check`, `table.grille`, `.progres`/`.barre`,
`.q`, `.btn`, `.etiquettes`/`.etiquette`, `.apercu`, et, pour les pages de
pilotage, `.filtres`, `.partie`/`.partie-tete`/`.partie-note`, `.blocs`/`.bloc`.
Trois pièges propres à ce gabarit :
- **`.entete` appartient au thème** (l'en-tête de page). L'en-tête interne
d'une carte s'appelle `.carte-entete`.
- **`.module` appartient au thème** (carte de module). Une partie de l'année
s'appelle `.partie`.
- Dans les schémas SVG, les couleurs vives **encodent des catégories**
(entrée, sortie, les deux, matériel, logiciel). Les garder telles quelles ;
seuls les neutres passent aux jetons du thème (`var(--encre)`,
`var(--encre-douce)`, `var(--papier)`, `var(--trait-fort)`).
Après avoir ajouté une séance, inscrire son `href` dans le tableau `MODULES`
de `index.html` et dans celui de `pilotage.html` : la carte du bloc devient
alors un lien au lieu d'un cadre en pointillés.
---
## 5. Jetons et composants disponibles (`assets/theme.css`)
### Variables de couleur
| Variable | Usage |
|---|---|
| `--encre` | texte principal, contours |
| `--encre-douce` | texte secondaire |
| `--papier` | fond de page |
| `--blanc` | fond des cartes et champs |
| `--trait`, `--trait-fort` | bordures neutres |
| `--accent` | couleur vive de la classe : **fonds et filets seulement, jamais du texte** |
| `--accent-fond` | aplat pâle de la classe |
| `--accent-encre` | couleur de la classe **lisible en texte** |
| `--juste`, `--juste-fond` | bonne réponse |
| `--erreur`, `--erreur-fond` | mauvaise réponse |
| `--cible`, `--cible-fond` | surlignage, élément actif |
Polices : `--police-titre` (JetBrains Mono), `--police-texte` (Inter),
`--police-doc` (Cambria, pour imiter un document Word/Writer).
Mesures : `--lecture` (largeur de paragraphe), `--page`, `--gouttiere`.
### Composants
| Classe | Rôle |
|---|---|
| `.chapeau` | paragraphe d'introduction, plus grand, gris |
| `.encadre` | encadré neutre coloré à la classe |
| `.encadre.encadre--theorie` | « Ce qu'il faut savoir » |
| `.encadre.encadre--cle` | la règle à retenir (jaune) |
| `.encadre.encadre--attention` | piège fréquent (rouge) |
| `.action` | bouton principal ; `.action--secondaire` pour le bouton blanc |
| `.actions` | rangée de boutons |
| `table`, `th`, `td` | tableaux déjà stylés, rien à ajouter |
| `figure`, `figcaption` | images légendées |
| `.manque` | cadre « image à ajouter » (voir section 8) |
| `code`, `kbd` | raccourcis clavier, noms de fichiers |
| `.modules` / `.module` | cartes de liste (pour l'accueil d'un module à plusieurs pages) |
---
## 6. Gabarit A — Module d'exercices
### 6.1 Squelette d'une page
Remplacer les `{{…}}`. Ne rien retirer d'autre.
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{Bloc 2}} — {{Module 3}} — {{2e commune}}</title>
<meta name="robots" content="noindex">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../assets/theme.css">
<link rel="stylesheet" href="../../assets/exercices-commune.css">
</head>
<body class="{{classe-comm}}">
<header class="entete">
<div class="entete__interieur">
<nav class="ariane" aria-label="Fil d'Ariane">
<a href="../../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="../index.html">{{2e commune}}</a><span aria-hidden="true">/</span><strong>{{Module 3}}</strong>
</nav>
<h1>{{Titre de la page}}</h1>
<p class="entete__meta">{{Bloc 2 du module 3, titre du module · cours papier, chapitre 7}}</p>
</div>
</header>
<!-- Uniquement si le module a plusieurs pages. aria-current="page" sur la page courante. -->
<nav class="sommaire" aria-label="Blocs du module">
<div class="sommaire__interieur">
<a href="index.html">Accueil</a>
<a href="bloc2.html" aria-current="page">Bloc 2</a>
<a href="bloc3.html">Bloc 3</a>
</div>
</nav>
<main class="contenu">
<div class="encadre encadre--theorie">
<h3>Ce qu'il faut savoir avant de jouer</h3>
<ul>
<li>{{Notion 1}}</li>
<li>{{Notion 2}}</li>
</ul>
</div>
<h2>Exercices et jeux</h2>
<div id="exercices"></div>
</main>
<footer class="pied">
<div class="pied__interieur">
Support d'exercices hors ligne, utilisable depuis une clé USB.
Toute la théorie utilisée ici figure dans le cours papier, chapitre {{7}}.
</div>
</footer>
<script>window.DATA = [ /* exercices, voir 6.2 */ ];</script>
<script src="../../assets/exercices-commune.js"></script>
</body>
</html>
```
Le moteur construit tout seul le compteur de score, les cartes d'exercice et les
corrections. **N'écris aucun JavaScript** pour ce gabarit : seulement `window.DATA`.
### 6.2 Format des exercices
> **Les clés sont sans accent** (`enonce`, `reponse`, `acceptees`, `etapes`…) :
> ce sont des identifiants lus par le moteur. **Les valeurs sont du français
> accentué.** Ne jamais traduire ni accentuer une clé.
Champs communs à tous les types :
| Clé | Obligatoire | Contenu |
|---|---|---|
| `type` | oui | un des dix types ci-dessous |
| `consigne` | oui | titre court de l'exercice |
| `enonce` | selon le type | la question ou l'instruction |
| `explication` | non, conseillé | affichée à la fin, dit **pourquoi** |
#### `qcm` — une seule bonne réponse
```json
{"type": "qcm", "consigne": "La pièce qui travaille",
"enonce": "Où se font les calculs de l'ordinateur ?",
"options": ["dans l'écran", "dans le clavier", "dans le processeur"],
"reponse": 2,
"explication": "L'écran affiche, il ne calcule pas."}
```
`reponse` = index de la bonne option, **en partant de 0**.
#### `vf` — vrai ou faux
```json
{"type": "vf", "consigne": "Vrai ou faux",
"enonce": "Un smartphone n'est pas un ordinateur.",
"reponse": false,
"explication": "C'est un ordinateur dont l'écran et le clavier ont fusionné."}
```
#### `assoc` — relier deux colonnes
```json
{"type": "assoc", "consigne": "Chaque élément son rôle",
"enonce": "Associe chaque élément à ce qu'il fait.",
"paires": [["écran", "afficher"], ["clavier", "entrer du texte"], ["processeur", "calculer"]]}
```
La colonne de droite est mélangée automatiquement. 3 à 6 paires.
#### `tri` — classer dans des paniers
```json
{"type": "tri", "consigne": "Entrée ou sortie",
"enonce": "Choisis un objet, puis clique sur le panier qui convient.",
"paniers": ["Entrée", "Sortie", "Les deux"],
"items": [["clavier", 0], ["écran", 1], ["écran tactile", 2]]}
```
Dans `items`, le nombre est l'index du bon panier (à partir de 0). 2 à 4 paniers, 6 à 12 étiquettes.
#### `ordre` — remettre des étapes dans l'ordre
```json
{"type": "ordre", "consigne": "Retirer une clé USB",
"etapes": ["Cliquer sur l'icône de retrait", "Choisir d'éjecter", "Attendre la confirmation", "Retirer la clé"]}
```
Écrire les étapes **dans le bon ordre** : le moteur les mélange.
#### `texte` — réponse courte tapée
```json
{"type": "texte", "consigne": "Réponse courte",
"enonce": "Comment appelle-t-on la pièce qui effectue les calculs ?",
"acceptees": ["processeur", "le processeur", "cpu"],
"indice": "Relis le point 1.4 du cours."}
```
Majuscules, accents et ponctuation sont ignorés à la comparaison. Lister les
variantes raisonnables. `indice` s'affiche après une erreur.
#### `calcul` — réponse numérique
```json
{"type": "calcul", "consigne": "Calcul de capacité",
"enonce": "Combien de photos de 4 Mo tiennent sur une clé de 32 Go ?",
"reponse": 8000, "tolerance": 50,
"indice": "Convertis d'abord les Go en Mo."}
```
`tolerance` = écart accepté (0 par défaut). La virgule décimale est acceptée.
#### `intrus` — trouver les affirmations fausses
```json
{"type": "intrus", "consigne": "Chasse aux affirmations fausses",
"enonce": "Clique uniquement sur les affirmations fausses.",
"items": [["L'écran fait les calculs", true], ["Le clavier est un périphérique d'entrée", false]]}
```
`true` = cette affirmation est **fausse** (c'est un intrus à cliquer). Au moins un `true`.
#### `chrono` — série chronométrée
```json
{"type": "chrono", "consigne": "Série chronométrée",
"enonce": "Huit questions, une minute.", "secondes": 60,
"questions": [
{"enonce": "Fait les calculs :", "options": ["écran", "processeur", "souris"], "reponse": 1}
]}
```
Réussite à 70 % de bonnes réponses. 6 à 10 questions de 3 options courtes.
Compter environ 7 secondes par question.
#### `hotspot` — cliquer sur un schéma
```json
{"type": "hotspot", "consigne": "Les éléments du poste",
"enonce": "Clique sur l'élément demandé.",
"svg": "<svg viewBox=\"0 0 400 220\" width=\"100%\" style=\"max-width:400px\"><rect x=\"20\" y=\"20\" width=\"90\" height=\"160\" rx=\"6\" fill=\"var(--accent-fond)\" stroke=\"var(--encre)\"/><rect class=\"zone\" data-zone=\"unité centrale\" x=\"20\" y=\"20\" width=\"90\" height=\"160\" rx=\"6\"/><text x=\"26\" y=\"200\">unité centrale</text></svg>",
"zones": ["unité centrale"]}
```
- Le dessin et la zone cliquable sont deux formes superposées : la forme
visible avec ses couleurs, puis la même forme avec `class="zone"` et
`data-zone`, **sans** `fill` ni `stroke` (le thème s'en charge).
- Chaque valeur de `zones` doit être **identique, accents compris**, à un `data-zone`.
- Couleurs du dessin : uniquement `var(--accent-fond)`, `var(--encre)`,
`var(--papier)`, `var(--blanc)`.
- Guillemets du SVG échappés en `\"` puisqu'il est dans une chaîne JSON.
### 6.3 Composition d'une page
- 12 à 20 exercices par page, en variant les types.
- Ordre conseillé : repérage (`hotspot`, `assoc`), classement (`tri`),
vérification (`qcm`, `vf`), production (`texte`, `calcul`), piège (`intrus`),
et un `chrono` en fin de page.
- Toute notion utilisée dans un exercice doit figurer dans l'encadré théorie de
la page ou dans le cours papier cité en pied de page.
### 6.4 Accueil d'un module à plusieurs pages
L'`index.html` du module présente le module et liste ses pages avec les cartes
`.modules` (même balisage que la section 9), puis un encadré « Comment ça
marche ». Il charge `exercices-commune.css` mais **pas** le script, et n'a pas
de `<div id="exercices">`. Modèle : `2e-commune/module1/index.html`.
---
## 7. Gabarit B — Document long (traitement de texte)
### 7.1 Squelette
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{Module 3}} — {{3e TQ Technique sociale}}</title>
<meta name="robots" content="noindex">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../assets/theme.css">
<link rel="stylesheet" href="../../assets/atelier-texte.css">
</head>
<body class="{{classe-ts}}">
<header class="entete">
<div class="entete__interieur">
<nav class="ariane" aria-label="Fil d'Ariane">
<a href="../../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="../index.html">{{3e TQ Technique sociale}}</a><span aria-hidden="true">/</span><strong>{{Module 3}}</strong>
</nav>
<h1>{{Titre du module}}</h1>
<p class="entete__meta">{{Traitement de texte · sous-titre}}</p>
</div>
</header>
<div class="wrap">
<nav class="sommaire-lat" aria-label="Sommaire">
<a class="top" href="#haut">{{Module 3}}</a>
<h2>{{Module 3, titre}}</h2>
<a href="#m3-{{section}}">{{Section}}</a>
<!-- une entrée par <h2 id="…"> du contenu -->
<h2>Autres modules</h2>
<a href="../index.html">Tous les modules de la classe</a>
</nav>
<main class="feuille" id="haut">
<div class="regle" aria-hidden="true"></div>
<div class="inner">
<p class="chapeau">{{Introduction}}</p>
<h2 id="m3-{{section}}"><span class="module-tag">Module 3</span><br>{{Première section}}</h2>
<p>…</p>
<h2 id="m3-quiz">Teste-toi, module 3</h2>
<div class="quiz" id="quiz3"></div>
</div>
</main>
</div>
<footer class="pied">
<div class="pied__interieur">
<p>Cours de traitement de texte, {{3e année Techniques sociales et d'animation}}. M. Courcelle, 2026-2027.</p>
</div>
</footer>
<script src="../../assets/atelier-texte.js"></script>
<script>
"use strict";
quiz(document.getElementById('quiz3'), [ /* voir 7.3 */ ]);
</script>
</body>
</html>
```
Les `id` des sections sont préfixés par le module (`m3-…`) et correspondent
exactement aux liens du sommaire latéral, qui se surligne tout seul à la lecture.
### 7.2 Composants propres au gabarit B
| Balisage | Rôle |
|---|---|
| `<span class="module-tag">Module 3</span><br>` | étiquette au-dessus du premier `<h2>` |
| `<div class="regle-cle"><p>…</p></div>` | la règle à retenir |
| `<div class="specimen">…</div>` | extrait de document, en police de document |
| `<span class="pil">¶</span>` | marque de paragraphe |
| `<details><summary>Question</summary><p>Réponse</p></details>` | FAQ « Quand ça coince » |
| `<table>` | tableaux de raccourcis, de règles |
### 7.3 Outils JavaScript fournis (`assets/atelier-texte.js`)
**Quiz** — `quiz(element, questions)`
```js
quiz(document.getElementById('quiz3'), [
{q: "Quel raccourci enregistre le document&nbsp;?",
r: ["Ctrl+S", "Ctrl+E", "Ctrl+P"],
b: 0,
e: "S comme Save. À faire toutes les quelques minutes."}
]);
```
`b` = index de la bonne réponse (à partir de 0), `e` = explication.
**Chasse aux fautes** — `chasse(conteneur, score, boutonReset, boutonSolution, jetons, total, messageFinal)`
```html
<div class="chasse" id="chasse-m3"></div>
<p class="score" id="score-m3" role="status" aria-live="polite"></p>
<div class="actions">
<button type="button" id="reset-m3">Recommencer</button>
<button type="button" id="sol-m3">Voir la solution</button>
</div>
```
```js
const T_M3 = [{t:"Les"}, {t:"enfants"}, {t:"son", f:true}, {t:"arrivés."}];
chasse(document.getElementById('chasse-m3'), document.getElementById('score-m3'),
document.getElementById('reset-m3'), document.getElementById('sol-m3'),
T_M3, T_M3.filter(j => j.f).length, "Le correcteur n'en a souligné aucune.");
```
Un jeton par mot ; `f: true` marque une faute.
Pour tout autre élément interactif, voir la section 10.
---
## 8. Images
- Rangées dans `<classe>/images/`, appelées en `../images/nom.png` depuis un module.
- Tu ne peux pas fournir les images : **prévois-les** et donne leur liste
(section 11). En attendant, chaque image affiche un cadre explicite grâce à
ce balisage, à reproduire tel quel :
```html
<figure>
<img src="../images/m3-menu-format.png" alt="Menu Format de Writer, ouvert"
onerror="this.outerHTML='&lt;div class=\'manque\'&gt;Capture à ajouter : &lt;code&gt;{{dossier-classe}}/images/m3-menu-format.png&lt;/code&gt;&lt;br&gt;{{Ce que la capture doit montrer.}}&lt;/div&gt;'">
<figcaption>{{Légende courte.}}</figcaption>
</figure>
```
- `alt` décrit ce que l'image montre, pas « image de… ».
- Pas de schéma en image quand un SVG ou un tableau fait l'affaire.
---
## 9. La carte à ajouter dans l'index de la classe
Pour chaque module livré, fournis ce bloc, prêt à coller dans
`<classe>/index.html`, dans la liste `<ul class="modules">` :
```html
<li class="module">
<a class="module__lien" href="{{module3}}/index.html">
<span class="module__num">{{Module 3}}</span>
<span class="module__titre">{{Titre du module}}</span>
<span class="module__resume">{{Ce qu'on y apprend, en une phrase.}}</span>
<span class="module__meta">{{4 blocs · cours papier, chapitres 6 à 9 · 62 exercices}}</span>
</a>
</li>
```
---
## 10. Si un besoin sort des gabarits
Un jeu ou une démonstration que les outils existants ne couvrent pas est
possible, à ces conditions :
- Code dans **un seul** `<style>` et **un seul** `<script>` en fin de page, chacun
commençant par un commentaire `/* SPÉCIFIQUE : … */` qui dit ce qu'il fait.
- Toutes ses classes CSS sont **préfixées** par le module : `.m3-…`. Aucun
sélecteur de balise nu (`button {}`, `p {}`) : ils déborderaient sur le thème.
- Couleurs et polices exclusivement par les variables de la section 5.
- JavaScript : `"use strict"`, aucune variable globale hors d'une fonction
d'initialisation, aucune dépendance.
- Accessibilité : section 3, points 6, 7 et 9.
- Signale-le dans ta livraison (section 11, point 5) : s'il est réutilisable, il
sera intégré aux outils communs.
---
## 11. Format de livraison
Rends ta réponse dans cet ordre :
1. **Récapitulatif** : classe, dossier du module, gabarit utilisé, liste des
fichiers avec leur chemin complet depuis la racine
(`3tq-technique-sociale/module3/index.html`).
2. **Chaque fichier en entier**, dans un bloc de code précédé de son chemin.
Jamais d'extrait, jamais de « … reste inchangé ».
3. **La carte d'index** (section 9).
4. **Les images attendues** : tableau nom de fichier / ce qu'elle doit montrer.
5. **Les points d'attention** : code spécifique (section 10), notion supposée
connue, renvoi à un chapitre du cours papier à vérifier.
---
## 12. Liste de vérification avant de livrer
- [ ] Chemins tous relatifs, `../../assets/` depuis un module, liens finissant par `index.html`.
- [ ] `<body class="classe-…">` correspond à la classe (section 2).
- [ ] Fil d'Ariane : Mes cours / classe / module, avec les bons liens.
- [ ] Un seul `<h1>`, dans l'en-tête.
- [ ] Aucune couleur en dur, SVG compris.
- [ ] Aucune règle CSS sur une classe ou une balise du thème.
- [ ] Gabarit A : `window.DATA` est un JSON valide, clés sans accent, valeurs accentuées.
- [ ] Gabarit A : chaque `reponse` et chaque index de panier existe bien (on compte à partir de 0).
- [ ] Gabarit A : chaque entrée de `zones` a son `data-zone` identique.
- [ ] Gabarit B : chaque lien du sommaire latéral a son `id` dans la page.
- [ ] Tout élément cliquable est un `<button type="button">` ou a `tabindex`, `role` et le clavier.
- [ ] Texte en français accentué, tutoiement, phrases courtes.
- [ ] Chaque image a son `alt` et son cadre « Capture à ajouter ».
- [ ] La carte d'index et la liste des images sont fournies.
Reference in New Issue View Git Blame Copy Permalink