lrdlg
81 lines
3.7 KiB
Markdown
81 lines
3.7 KiB
Markdown
# 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`.
|
|
|
|
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
|
|
|
|
1. 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.
|
|
2. 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">`.
|
|
3. 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
|
|
|
|
1. 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.
|
|
2. Une règle `.classe--xxx` et un bloc `<a>` dans `index.html` à la racine.
|
|
3. 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`.
|