Mes cours — plateforme d'exercices

Site statique, sans dépendance et sans outil de construction : du HTML, du CSS et du JavaScript natif. Il fonctionne à la racine d'un domaine, dans un sous-dossier, et depuis une clé USB sans connexion Internet.

Organisation

index.html                    page d'aiguillage : une tuile par classe
assets/                       ressources communes à toute la plateforme
  theme.css                   couleurs, typographie, composants partagés
  exercices-commune.css/.js   moteur d'exercices de la 2e commune
  jeux-differenciee.css       jeux du module A de la 2e différenciée
  atelier-texte.css/.js       cours de traitement de texte (3e et 4e TQ)

<classe>/index.html           index de la classe : la liste de ses modules
<classe>/<module>/index.html  le module lui-même

Classes en place : 1re-numerique, 2e-differenciee, 2e-commune, 3tq-technique-sociale, 4tq-agent-education.

Exception assumée : 1re-numerique range ses pages à plat, sans dossier de module, parce que la séquence est annuelle (35 séances en six parties) et que chaque séance existe en deux versions, élève et enseignant. Son index.html est à la fois l'index de la classe et le menu de l'année. La version enseignant part de pilotage.html, qui n'est volontairement liée depuis aucune page élève.

Tous les liens internes sont relatifs. Ne jamais écrire /assets/theme.css mais ../assets/theme.css : un chemin absolu casserait le site dès qu'il n'est pas servi à la racine du domaine, et depuis une clé USB.

Ajouter un module à une classe

Créer le dossier du module dans le dossier de la classe, avec un index.html dedans. Le plus simple est de copier un module existant.
Ouvrir l'index.html de la classe : un commentaire en toutes lettres y donne le gabarit de carte à copier-coller dans la liste <ul class="modules">.
Adapter le href, le numéro, le titre, le résumé et la ligne de détail.

Un module annoncé mais pas encore prêt se garde dans la liste avec la classe module--bientot, sans lien.

Ajouter une classe

Un triplet de jetons --xxx-fond / --xxx-trait / --xxx-encre dans assets/theme.css, puis une règle .classe-xxx dans le même fichier. La variante -encre doit rester lisible sur fond clair : viser un contraste d'au moins 4,5 pour 1, les cinq couleurs actuelles sont entre 5,8 et 6,0.
Une règle .classe--xxx et un bloc <a> dans index.html à la racine.
Un dossier de classe avec son index.html, copié sur une classe existante.

Charte

Titres en JetBrains Mono, texte en Inter, chargés depuis Google Fonts avec des polices de secours déclarées dans theme.css. Si le réseau de l'école bloque Google Fonts, la mise en page tient quand même.
Chaque classe a sa couleur. Elle se pose en ajoutant class="classe-xxx" sur le <body> : tout le reste de la page ne connaît que --accent, --accent-fond et --accent-encre.
Le vert de marque et les autres couleurs vives ne servent jamais pour du texte, seulement pour des fonds et des filets. C'est la variante -encre qui sert au texte coloré.

Exercices

Le moteur de la 2e commune (assets/exercices-commune.js) lit un tableau window.DATA déclaré dans chaque page. Types reconnus : qcm, vf, assoc, tri, ordre, hotspot, calcul, texte, intrus, chrono.

Règle de comptage, identique pour tous les types : un exercice vaut un point, une seule fois, au moment où il est terminé, et il est réussi s'il a été terminé sans erreur. Recommencer une série chronométrée ne réajoute pas de point.

Les clés de window.DATA sont sans accent (enonce, reponse, acceptees, etapes, secondes, tolerance…) : ce sont des identifiants lus par le moteur. Seules les valeurs sont du texte affiché à l'élève, et celui-là est accentué.

Captures d'écran

Les pages de traitement de texte affichent un encadré « Capture à ajouter » tant que l'image manque. La liste des captures attendues et leur cadrage sont dans 3tq-technique-sociale/images/LISEZMOI.md.

Produire un module avec Claude (claude.ai)

Donner FEUILLE-DE-ROUTE-CLAUDE-CHAT.md en début de conversation, avec assets/theme.css et la feuille du gabarit choisi. Les règles de nommage, les gabarits de page, le format des exercices et le format de livraison y sont.

4.3 KiB Raw Permalink Blame History