Files

T

2026-09-24 20:30:39 +02:00

27 KiB

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 `1re-numerique`	C	`assets/theme.css` `assets/numerique-1re.css` `1re-numerique/1TC-NUM_bloc-01_ouvrir-le-cours.html` (exemple élève) `1re-numerique/1TC-NUM_bloc-01_pilotage.html` (exemple enseignant, si la séance en a besoin)
2e différenciée `2e-differenciee`	jeux	`assets/theme.css` `assets/jeux-differenciee.css` `2e-differenciee/module-a/index.html` (exemple : il porte aussi tout le moteur de jeux)
2e commune `2e-commune`	A	`assets/theme.css` `assets/exercices-commune.css` `2e-commune/module1/bloc2.html` (exemple)
3e TQ Technique sociale `3tq-technique-sociale`	B	`assets/theme.css` `assets/atelier-texte.css` `assets/atelier-texte.js` `3tq-technique-sociale/module1/index.html` (exemple)
4e TQ Agent d'éducation `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

Ouvrir une conversation par module. Un module par conversation : au-delà, Claude perd le fil et mélange les gabarits.
Joindre les pièces du tableau ci-dessus.
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.
Récupérer la livraison au format imposé en 11 : fichiers complets, carte d'index, liste des images attendues.
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

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.
Liens explicites vers index.html : écrire ../index.html, pas ../ (sinon le lien ne marche pas depuis une clé USB).
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).
Ne jamais redéfinir :root, body, h1, h2, h3, .action, .encadre ni aucune classe de theme.css.
Un seul <h1>, dans l'en-tête. Le contenu commence à <h2>.
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.
Les retours de correction (« Juste », « Non… ») vont dans un élément role="status" aria-live="polite".
Pas de localStorage obligatoire : la page doit fonctionner entièrement sans lui.
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.

<!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

{"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

{"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

{"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

{"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

{"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

{"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

{"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

{"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

{"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

{"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

<!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)

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)

<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>

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 :

<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"> :

<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 :

Récapitulatif : classe, dossier du module, gabarit utilisé, liste des fichiers avec leur chemin complet depuis la racine (3tq-technique-sociale/module3/index.html).
Chaque fichier en entier, dans un bloc de code précédé de son chemin. Jamais d'extrait, jamais de « … reste inchangé ».
La carte d'index (section 9).
Les images attendues : tableau nom de fichier / ce qu'elle doit montrer.
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.

27 KiB Raw Blame History