mise à niveau de tout le site
This commit is contained in:
lrdlg
+15
@@ -0,0 +1,15 @@
|
||||
# macOS
|
||||
.DS_Store
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
|
||||
# Windows (postes de l'école)
|
||||
Thumbs.db
|
||||
desktop.ini
|
||||
|
||||
# Éditeurs
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*~
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>1re tronc commun — Numérique</title>
|
||||
<meta name="description" content="Les modules du cours de Numérique de 1re tronc commun.">
|
||||
<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">
|
||||
</head>
|
||||
<body class="classe-tc">
|
||||
|
||||
<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><strong>1re tronc commun</strong>
|
||||
</nav>
|
||||
<h1>1re tronc commun</h1>
|
||||
<p class="entete__meta">Numérique · M. Courcelle</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="contenu">
|
||||
|
||||
<p class="chapeau">Choisis le module sur lequel tu travailles. Chaque module contient la théorie du chapitre, des exercices et des jeux à refaire autant de fois que tu veux.</p>
|
||||
|
||||
<h2>Les modules du cours</h2>
|
||||
|
||||
<!-- ==================================================================
|
||||
POUR AJOUTER UN MODULE
|
||||
1. Créer le dossier du module à côté de ce fichier, avec son
|
||||
index.html dedans (le plus simple : copier un module existant).
|
||||
2. Copier-coller le bloc <li class="module"> ci-dessous, juste
|
||||
avant la fin de la liste, et remplir les quatre champs :
|
||||
module__num « Module 3 », « Module C »…
|
||||
module__titre le titre affiché à l'élève
|
||||
module__resume une phrase sur ce qu'on y fait
|
||||
module__meta nombre de séances, chapitre du cours papier…
|
||||
3. Adapter le href vers le dossier du nouveau module.
|
||||
|
||||
Gabarit à copier :
|
||||
|
||||
<li class="module">
|
||||
<a class="module__lien" href="DOSSIER/index.html">
|
||||
<span class="module__num">Module N</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">X séances · cours papier, chapitre Y</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Un module annoncé mais pas encore prêt : garder le <li> en
|
||||
ajoutant la classe « module--bientot » et remplacer le <a> par
|
||||
un <div class="module__lien">, sans href.
|
||||
================================================================== -->
|
||||
|
||||
<p class="vide">
|
||||
Aucun module n'est encore en ligne pour cette classe.<br>
|
||||
Les exercices arriveront ici au fil de l'année.
|
||||
</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="pied">
|
||||
<div class="pied__interieur">
|
||||
Les exercices fonctionnent sans connexion Internet et peuvent être lancés depuis une clé USB.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>2e commune — Informatique</title>
|
||||
<meta name="description" content="Les modules du cours d'informatique de 2e commune.">
|
||||
<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">
|
||||
</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><strong>2e commune</strong>
|
||||
</nav>
|
||||
<h1>2e commune</h1>
|
||||
<p class="entete__meta">Informatique, activité complémentaire EPT · M. Courcelle</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="contenu">
|
||||
|
||||
<p class="chapeau">Choisis le module sur lequel tu travailles. Chaque module reprend la théorie du cours papier, puis propose des exercices et des jeux corrigés automatiquement.</p>
|
||||
|
||||
<h2>Les modules du cours</h2>
|
||||
|
||||
<!-- ==================================================================
|
||||
POUR AJOUTER UN MODULE
|
||||
1. Créer le dossier du module à côté de ce fichier, avec son
|
||||
index.html dedans (le plus simple : copier un module existant).
|
||||
2. Copier-coller le bloc <li class="module"> ci-dessous, juste
|
||||
avant la fin de la liste, et remplir les quatre champs :
|
||||
module__num « Module 3 », « Module C »…
|
||||
module__titre le titre affiché à l'élève
|
||||
module__resume une phrase sur ce qu'on y fait
|
||||
module__meta nombre de séances, chapitre du cours papier…
|
||||
3. Adapter le href vers le dossier du nouveau module.
|
||||
|
||||
Gabarit à copier :
|
||||
|
||||
<li class="module">
|
||||
<a class="module__lien" href="DOSSIER/index.html">
|
||||
<span class="module__num">Module N</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">X séances · cours papier, chapitre Y</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Un module annoncé mais pas encore prêt : garder le <li> en
|
||||
ajoutant la classe « module--bientot » et remplacer le <a> par
|
||||
un <div class="module__lien">, sans href.
|
||||
================================================================== -->
|
||||
|
||||
<ul class="modules">
|
||||
<li class="module">
|
||||
<a class="module__lien" href="module1/index.html">
|
||||
<span class="module__num">Module 1</span>
|
||||
<span class="module__titre">La machine et son vocabulaire</span>
|
||||
<span class="module__resume">Ce qui compose un ordinateur, les ports, allumer et éteindre, Windows, et les deux mémoires.</span>
|
||||
<span class="module__meta">5 blocs de deux périodes · chapitres 1 à 5 · 84 exercices</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="pied">
|
||||
<div class="pied__interieur">
|
||||
Support d'exercices hors ligne, utilisable depuis une clé USB. Toute la théorie utilisée figure dans le cours papier.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Module 1 — 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 1</strong>
|
||||
</nav>
|
||||
<h1>La machine et son vocabulaire</h1>
|
||||
<p class="entete__meta">Module 1 · Activité complémentaire EPT Informatique · M. Courcelle</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="sommaire" aria-label="Blocs du module">
|
||||
<div class="sommaire__interieur">
|
||||
<a href="index.html" aria-current="page">Accueil</a>
|
||||
<a href="bloc2.html">Bloc 2</a>
|
||||
<a href="bloc3.html">Bloc 3</a>
|
||||
<a href="bloc4.html">Bloc 4</a>
|
||||
<a href="bloc5.html">Bloc 5</a>
|
||||
<a href="bloc6.html">Bloc 6</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="contenu">
|
||||
|
||||
<p class="chapeau">Ce site accompagne le module 1 du cours. Chaque page correspond à un bloc de
|
||||
deux périodes et reprend d'abord la théorie du chapitre, puis les exercices et les jeux.</p>
|
||||
|
||||
<p>Toutes les notions utilisées dans les jeux figurent dans le cours papier. Si tu bloques,
|
||||
la réponse est dans ton cours, au chapitre indiqué en haut de la page.</p>
|
||||
|
||||
<h2>Les cinq blocs</h2>
|
||||
<ul class="modules">
|
||||
<li class="module">
|
||||
<a class="module__lien" href="bloc2.html">
|
||||
<span class="module__num">Bloc 2</span>
|
||||
<span class="module__titre">Ce qui compose un ordinateur</span>
|
||||
<span class="module__resume">Unité centrale, écran, clavier, pointage, allumage. Entrée, traitement, sortie.</span>
|
||||
<span class="module__meta">Cours papier, chapitre 1 · 16 exercices</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="module">
|
||||
<a class="module__lien" href="bloc3.html">
|
||||
<span class="module__num">Bloc 3</span>
|
||||
<span class="module__titre">Les ports de connexion</span>
|
||||
<span class="module__resume">USB, HDMI, VGA, RJ45, mini-jack, SD : reconnaître la forme et savoir ce qui passe dedans.</span>
|
||||
<span class="module__meta">Cours papier, chapitre 2 · 15 exercices</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="module">
|
||||
<a class="module__lien" href="bloc4.html">
|
||||
<span class="module__num">Bloc 4</span>
|
||||
<span class="module__titre">Allumer, verrouiller, éteindre</span>
|
||||
<span class="module__resume">La session, la veille, le verrouillage, l'arrêt propre et le dépannage de base.</span>
|
||||
<span class="module__meta">Cours papier, chapitre 3 · 16 exercices</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="module">
|
||||
<a class="module__lien" href="bloc5.html">
|
||||
<span class="module__num">Bloc 5</span>
|
||||
<span class="module__titre">Se repérer dans Windows</span>
|
||||
<span class="module__resume">Bureau, barre des tâches, menu Démarrer, fenêtres, dossiers et fichiers.</span>
|
||||
<span class="module__meta">Cours papier, chapitre 4 · 18 exercices</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="module">
|
||||
<a class="module__lien" href="bloc6.html">
|
||||
<span class="module__num">Bloc 6</span>
|
||||
<span class="module__titre">Mémoire vive et mémoire de stockage</span>
|
||||
<span class="module__resume">Le plan de travail et l'armoire. Octet, Ko, Mo, Go, To, et quand enregistrer.</span>
|
||||
<span class="module__meta">Cours papier, chapitre 5 · 19 exercices</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Comment ça marche</h2>
|
||||
<div class="encadre encadre--theorie">
|
||||
<ul>
|
||||
<li>Le compteur en haut de chaque page indique combien d'exercices tu as réussis.</li>
|
||||
<li>Un exercice compte pour un point, une seule fois, quand tu l'as terminé.
|
||||
Il est réussi si tu l'as terminé sans erreur.</li>
|
||||
<li>Pour les associations et les tris : clique d'abord sur l'étiquette, puis sur sa destination.</li>
|
||||
<li>Les séries chronométrées demandent au moins 70 pour cent de bonnes réponses.
|
||||
Tu peux les recommencer autant que tu veux : seul le premier passage compte pour le score.</li>
|
||||
<li>Le bouton « Tout recommencer » remet la page à zéro.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>Le site fonctionne sans connexion Internet. Il peut être lancé depuis une clé USB.</p>
|
||||
|
||||
</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, chapitres 1 à 5.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>2e différenciée — Initiation à l'informatique</title>
|
||||
<meta name="description" content="Les modules du cours d'initiation à l'informatique de 2e différenciée.">
|
||||
<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">
|
||||
</head>
|
||||
<body class="classe-diff">
|
||||
|
||||
<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><strong>2e différenciée</strong>
|
||||
</nav>
|
||||
<h1>2e différenciée</h1>
|
||||
<p class="entete__meta">Initiation à l'informatique · M. Courcelle</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="contenu">
|
||||
|
||||
<p class="chapeau">Choisis le module sur lequel tu travailles. Tous les jeux se refont autant de fois que tu veux : le deuxième essai est toujours meilleur que le premier.</p>
|
||||
|
||||
<h2>Les modules du cours</h2>
|
||||
|
||||
<!-- ==================================================================
|
||||
POUR AJOUTER UN MODULE
|
||||
1. Créer le dossier du module à côté de ce fichier, avec son
|
||||
index.html dedans (le plus simple : copier un module existant).
|
||||
2. Copier-coller le bloc <li class="module"> ci-dessous, juste
|
||||
avant la fin de la liste, et remplir les quatre champs :
|
||||
module__num « Module 3 », « Module C »…
|
||||
module__titre le titre affiché à l'élève
|
||||
module__resume une phrase sur ce qu'on y fait
|
||||
module__meta nombre de séances, chapitre du cours papier…
|
||||
3. Adapter le href vers le dossier du nouveau module.
|
||||
|
||||
Gabarit à copier :
|
||||
|
||||
<li class="module">
|
||||
<a class="module__lien" href="DOSSIER/index.html">
|
||||
<span class="module__num">Module N</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">X séances · cours papier, chapitre Y</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Un module annoncé mais pas encore prêt : garder le <li> en
|
||||
ajoutant la classe « module--bientot » et remplacer le <a> par
|
||||
un <div class="module__lien">, sans href.
|
||||
================================================================== -->
|
||||
|
||||
<ul class="modules">
|
||||
<li class="module">
|
||||
<a class="module__lien" href="module-a/index.html">
|
||||
<span class="module__num">Module A</span>
|
||||
<span class="module__titre">Le poste de travail</span>
|
||||
<span class="module__resume">Mettre en marche, la souris, les appareils, les programmes, enregistrer, puis le parcours complet.</span>
|
||||
<span class="module__meta">6 séances d'une heure · 24 jeux</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="pied">
|
||||
<div class="pied__interieur">
|
||||
Travaux sur ordinateur, local 134 INFO. Les jeux fonctionnent sans connexion Internet.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,142 +3,56 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Module A. Le poste de travail</title>
|
||||
<style>
|
||||
:root{--encre:#1F3864;--encre-clair:#3E5C93;--papier:#FBFAF7;--trait:#C9C6BC;
|
||||
--cible:#F2B01E;--ok:#2E7D4F;--erreur:#C0392B;--base:17px}
|
||||
*{box-sizing:border-box}
|
||||
html{font-size:var(--base)}
|
||||
body{margin:0;background:var(--papier);color:var(--encre);
|
||||
font-family:Verdana,"DejaVu Sans",Geneva,sans-serif;line-height:1.55}
|
||||
body.projection{--base:25px}
|
||||
header{background:var(--encre);color:var(--papier);padding:.9rem 1.2rem;
|
||||
display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:baseline}
|
||||
header h1{font-size:1rem;font-weight:normal;margin:0}
|
||||
nav{display:flex;flex-wrap:wrap;gap:.4rem;margin-left:auto}
|
||||
nav button{font:inherit;font-size:.82rem;background:transparent;color:var(--papier);
|
||||
border:2px solid rgba(251,250,247,.45);padding:.3rem .7rem;cursor:pointer;border-radius:2px}
|
||||
nav button[aria-current="true"]{background:var(--cible);color:var(--encre);border-color:var(--cible)}
|
||||
nav button:hover{border-color:var(--papier)}
|
||||
main{max-width:60rem;margin:0 auto;padding:1.6rem 1.2rem 5rem}
|
||||
section[hidden]{display:none}
|
||||
h2{font-size:1.6rem;line-height:1.2;margin:.2rem 0}
|
||||
.kicker{font-size:.85rem;color:var(--encre-clair);margin:0 0 1.6rem}
|
||||
h3{font-size:1.1rem;margin:2.2rem 0 .6rem;border-top:2px solid var(--trait);padding-top:.8rem}
|
||||
p{max-width:44rem}
|
||||
ol.plan{counter-reset:s;list-style:none;padding:0;max-width:44rem}
|
||||
ol.plan li{counter-increment:s;position:relative;padding:.45rem 0 .45rem 3rem;border-bottom:1px solid var(--trait)}
|
||||
ol.plan li::before{content:counter(s);position:absolute;left:0;top:.45rem;width:2rem;height:2rem;
|
||||
line-height:2rem;text-align:center;background:var(--encre);color:var(--papier);font-size:.9rem;border-radius:50%}
|
||||
ul.but{list-style:none;padding:0;max-width:44rem}
|
||||
ul.but li{padding:.35rem 0 .35rem 1.6rem;position:relative}
|
||||
ul.but li::before{content:"";position:absolute;left:0;top:.95rem;width:.7rem;height:.7rem;background:var(--cible)}
|
||||
.rappel{background:#FDF3DA;border-left:6px solid var(--cible);padding:.7rem 1rem;margin:.9rem 0;max-width:44rem}
|
||||
.atelier{border:2px solid var(--trait);border-radius:3px;margin:1.2rem 0;background:#fff}
|
||||
.atelier>h4{margin:0;padding:.6rem 1rem;background:var(--encre);color:var(--papier);font-size:.98rem;font-weight:normal;
|
||||
display:flex;gap:.6rem;align-items:baseline}
|
||||
.atelier>h4 .num{background:var(--cible);color:var(--encre);font-size:.8rem;padding:0 .45rem;border-radius:2px}
|
||||
.atelier .corps{padding:1rem}
|
||||
.consigne{margin:0 0 .9rem;font-size:.95rem}
|
||||
.barre{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;align-items:center;margin:.2rem 0 .9rem;font-size:.95rem}
|
||||
.cible-txt{font-weight:bold;font-size:1.05rem}
|
||||
.score{color:var(--encre-clair);font-size:.9rem}
|
||||
button.action{font:inherit;background:var(--encre);color:var(--papier);border:0;padding:.45rem 1rem;cursor:pointer;border-radius:2px}
|
||||
button.action:hover{background:var(--encre-clair)}
|
||||
:focus-visible{outline:3px solid var(--cible);outline-offset:2px}
|
||||
.aire{position:relative;width:100%;height:22rem;background:#F4F2EC;border:2px solid var(--trait);overflow:hidden;touch-action:none}
|
||||
.pion{position:absolute;width:3.2rem;height:3.2rem;line-height:3.2rem;text-align:center;font-family:inherit;
|
||||
font-size:1.25rem;font-weight:bold;background:#fff;color:var(--encre);border:2px solid var(--encre);
|
||||
border-radius:50%;cursor:pointer;user-select:none;padding:0}
|
||||
.pion.fait{background:var(--ok);border-color:var(--ok);color:#fff}
|
||||
.pion.actif{background:var(--cible);border-color:var(--cible)}
|
||||
.rate{animation:secousse .25s}
|
||||
@keyframes secousse{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
|
||||
.boites{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;max-width:34rem}
|
||||
.boite{aspect-ratio:1/1;border:2px solid var(--encre);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
|
||||
.boite.ouverte{background:var(--ok);border-color:var(--ok)}
|
||||
.boite .forme{width:52%;height:52%;opacity:0}
|
||||
.boite.ouverte .forme{background:#fff;opacity:1;border-radius:50%}
|
||||
.tri{display:flex;flex-wrap:wrap;gap:1.2rem}
|
||||
.reserve{flex:1 1 16rem;min-height:8rem;padding:.6rem;border:2px dashed var(--trait);
|
||||
display:flex;flex-wrap:wrap;gap:.5rem;align-content:flex-start}
|
||||
.bacs{flex:2 1 22rem;display:flex;gap:.8rem;flex-wrap:wrap}
|
||||
.bac{flex:1 1 7rem;min-height:8rem;border:2px solid var(--encre);display:flex;flex-wrap:wrap;
|
||||
gap:.5rem;align-content:flex-start;padding:.5rem}
|
||||
.bac .titre{flex:1 0 100%;font-size:.85rem;text-align:center;color:var(--encre-clair)}
|
||||
.bac.vise{background:#FDF3DA;border-color:var(--cible)}
|
||||
.jeton{padding:.4rem .65rem;background:#fff;border:2px solid var(--encre);cursor:grab;user-select:none;font-size:.88rem;touch-action:none}
|
||||
.jeton.pris{position:fixed;z-index:99;pointer-events:none;cursor:grabbing;box-shadow:0 6px 14px rgba(31,56,100,.3)}
|
||||
.jeton .glyphe{display:block;width:2rem;height:2rem}
|
||||
.etapes{display:flex;flex-direction:column;gap:.5rem;max-width:42rem}
|
||||
.etape{font:inherit;text-align:left;padding:.5rem .75rem;background:#fff;border:2px solid var(--encre);cursor:pointer}
|
||||
.etape.placee{background:var(--ok);border-color:var(--ok);color:#fff;cursor:default}
|
||||
.rang{display:inline-block;min-width:1.6rem;font-weight:bold}
|
||||
.vf{max-width:44rem}
|
||||
.vf .ligne{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--trait)}
|
||||
.vf .txt{flex:1 1 18rem}
|
||||
.vf .verdict{font-size:.85rem;flex:1 1 100%}
|
||||
.vf button{font:inherit;padding:.25rem .8rem;border:2px solid var(--encre);background:#fff;color:var(--encre);cursor:pointer}
|
||||
.vf button.choisi{background:var(--encre);color:#fff}
|
||||
.juste{color:var(--ok)}
|
||||
.faux{color:var(--erreur)}
|
||||
.qcm{max-width:44rem}
|
||||
.qcm .q{font-weight:bold;margin:.2rem 0 .6rem}
|
||||
.qcm .choix{display:flex;flex-wrap:wrap;gap:.5rem}
|
||||
.qcm .choix button{font:inherit;padding:.4rem .85rem;border:2px solid var(--encre);background:#fff;color:var(--encre);cursor:pointer;text-align:left}
|
||||
.qcm .choix button.bon{background:var(--ok);border-color:var(--ok);color:#fff}
|
||||
.qcm .choix button.mauvais{background:var(--erreur);border-color:var(--erreur);color:#fff}
|
||||
.qcm .retour{margin-top:.7rem;font-size:.9rem;min-height:1.4rem}
|
||||
.paires{display:flex;gap:1rem;flex-wrap:wrap;max-width:44rem}
|
||||
.paires .col{flex:1 1 13rem;display:flex;flex-direction:column;gap:.45rem}
|
||||
.paires button{font:inherit;font-size:.88rem;text-align:left;padding:.45rem .7rem;background:#fff;
|
||||
border:2px solid var(--encre);color:var(--encre);cursor:pointer}
|
||||
.paires button.choisi{background:var(--cible);border-color:var(--cible)}
|
||||
.paires button.liee{background:var(--ok);border-color:var(--ok);color:#fff;cursor:default}
|
||||
.chemin{max-width:40rem}
|
||||
.fil{font-size:.9rem;color:var(--encre-clair);margin-bottom:.6rem;word-break:break-word}
|
||||
.liste{display:flex;flex-direction:column;gap:.4rem}
|
||||
.liste button{font:inherit;text-align:left;padding:.45rem .7rem;background:#fff;border:2px solid var(--encre);color:var(--encre);cursor:pointer}
|
||||
.liste button.dossier::before{content:"[dossier] ";color:var(--encre-clair);font-size:.8rem}
|
||||
.liste button.fichier::before{content:"[fichier] ";color:var(--encre-clair);font-size:.8rem}
|
||||
.zone{fill:#fff;stroke:#1F3864;stroke-width:2;cursor:pointer}
|
||||
.zone:hover{fill:#FDF3DA}
|
||||
.zone.trouve{fill:#D6EBDE;stroke:#2E7D4F}
|
||||
svg text{font-family:inherit;font-size:11px;fill:#1F3864;pointer-events:none}
|
||||
figure.schema{margin:0;max-width:30rem}
|
||||
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
|
||||
@media print{header,nav{display:none}section[hidden]{display:block}}
|
||||
</style>
|
||||
<title>Module A — 2e différenciée</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/jeux-differenciee.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="classe-diff">
|
||||
|
||||
<header>
|
||||
<h1>Module A. Le poste de travail</h1>
|
||||
<nav id="nav">
|
||||
<button data-cible="accueil" aria-current="true">Accueil</button>
|
||||
<button data-cible="p1">1. Mettre en marche</button>
|
||||
<button data-cible="p2">2. La souris</button>
|
||||
<button data-cible="p3">3. Les appareils</button>
|
||||
<button data-cible="p4">4. Les programmes</button>
|
||||
<button data-cible="p5">5. Enregistrer</button>
|
||||
<button data-cible="p6">6. Le parcours</button>
|
||||
<button id="btn-projection">Agrandir</button>
|
||||
<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 différenciée</a><span aria-hidden="true">/</span><strong>Module A</strong>
|
||||
</nav>
|
||||
<div class="entete__barre">
|
||||
<div>
|
||||
<h1>Le poste de travail</h1>
|
||||
<p class="entete__meta">Module A · Travaux sur ordinateur · local 134 INFO</p>
|
||||
</div>
|
||||
<button class="action action--secondaire" id="btn-projection" type="button">Agrandir</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<nav class="sommaire" id="nav" aria-label="Séances du module">
|
||||
<div class="sommaire__interieur">
|
||||
<button type="button" data-cible="accueil" aria-current="true">Accueil</button>
|
||||
<button type="button" data-cible="p1">1. Mettre en marche</button>
|
||||
<button type="button" data-cible="p2">2. La souris</button>
|
||||
<button type="button" data-cible="p3">3. Les appareils</button>
|
||||
<button type="button" data-cible="p4">4. Les programmes</button>
|
||||
<button type="button" data-cible="p5">5. Enregistrer</button>
|
||||
<button type="button" data-cible="p6">6. Le parcours</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="contenu">
|
||||
|
||||
<section id="accueil">
|
||||
<h2>Six heures pour prendre l'ordinateur en main</h2>
|
||||
<p class="kicker">Travaux sur ordinateur, 2e différenciée. Local 134 INFO.</p>
|
||||
<p class="chapeau">Travaux sur ordinateur, 2e différenciée. Local 134 INFO.</p>
|
||||
<p>Chaque heure suit le même ordre : on lit le cours, on fait les exercices écrits, on fait les jeux de ce site, on manipule sur le poste, on range et on éteint.</p>
|
||||
<p>Tous les jeux se refont autant de fois que tu veux. Le deuxième essai est toujours meilleur que le premier.</p>
|
||||
<div class="rappel"><strong>Avant de partir, toujours.</strong> Démarrer, Alimentation, Arrêter. Jamais le bouton de la boîte.</div>
|
||||
<div class="encadre encadre--cle"><strong>Avant de partir, toujours.</strong> Démarrer, Alimentation, Arrêter. Jamais le bouton de la boîte.</div>
|
||||
</section>
|
||||
|
||||
<section id="p1" hidden>
|
||||
<h2>Mettre l'ordinateur en marche</h2>
|
||||
<p class="kicker">Période 1. Six jeux.</p>
|
||||
<p class="chapeau">Période 1. Six jeux.</p>
|
||||
<h3>Le plan de l'heure</h3>
|
||||
<ol class="plan">
|
||||
<li>Les règles du local et ton poste.</li>
|
||||
@@ -154,14 +68,14 @@ figure.schema{margin:0;max-width:30rem}
|
||||
<li>Verrouiller ton écran quand tu t'absentes une minute.</li>
|
||||
<li>Éteindre par le menu, seul.</li>
|
||||
</ul>
|
||||
<div class="rappel"><strong>Un ordinateur ne devine pas.</strong> Il fait exactement ce qu'on lui demande. Quand le résultat est faux, c'est presque toujours la demande qui n'était pas claire.</div>
|
||||
<div class="encadre encadre--cle"><strong>Un ordinateur ne devine pas.</strong> Il fait exactement ce qu'on lui demande. Quand le résultat est faux, c'est presque toujours la demande qui n'était pas claire.</div>
|
||||
<h3>Les jeux</h3>
|
||||
<div id="jeux-p1"></div>
|
||||
</section>
|
||||
|
||||
<section id="p2" hidden>
|
||||
<h2>La souris</h2>
|
||||
<p class="kicker">Période 2. Neuf jeux.</p>
|
||||
<p class="chapeau">Période 2. Neuf jeux.</p>
|
||||
<h3>Le plan de l'heure</h3>
|
||||
<ol class="plan">
|
||||
<li>Le cours et les six exercices.</li>
|
||||
@@ -169,14 +83,14 @@ figure.schema{margin:0;max-width:30rem}
|
||||
<li>Trier les douze images du dossier Exercices.</li>
|
||||
<li>Ranger et éteindre.</li>
|
||||
</ol>
|
||||
<div class="rappel"><strong>Un clic choisit. Deux clics ouvrent.</strong> Pour déplacer, tu gardes le bouton appuyé pendant tout le trajet. La forme du curseur t'annonce ce qui va se passer.</div>
|
||||
<div class="encadre encadre--cle"><strong>Un clic choisit. Deux clics ouvrent.</strong> Pour déplacer, tu gardes le bouton appuyé pendant tout le trajet. La forme du curseur t'annonce ce qui va se passer.</div>
|
||||
<h3>Les jeux</h3>
|
||||
<div id="jeux-p2"></div>
|
||||
</section>
|
||||
|
||||
<section id="p3" hidden>
|
||||
<h2>Les appareils autour de l'ordinateur</h2>
|
||||
<p class="kicker">Période 3. Sept jeux.</p>
|
||||
<p class="chapeau">Période 3. Sept jeux.</p>
|
||||
<h3>Le plan de l'heure</h3>
|
||||
<ol class="plan">
|
||||
<li>Le cours et les sept exercices.</li>
|
||||
@@ -185,14 +99,14 @@ figure.schema{margin:0;max-width:30rem}
|
||||
<li>Brancher et tester le casque, puis la webcam.</li>
|
||||
<li>Compléter le lexique, puis ranger et éteindre.</li>
|
||||
</ol>
|
||||
<div class="rappel"><strong>L'ordinateur reçoit, il transforme, il renvoie.</strong> Ce n'est pas parce que les câbles arrivent à l'unité centrale que c'est une entrée : l'entrée, c'est ce qui est au bout du câble, dans ta main.</div>
|
||||
<div class="encadre encadre--cle"><strong>L'ordinateur reçoit, il transforme, il renvoie.</strong> Ce n'est pas parce que les câbles arrivent à l'unité centrale que c'est une entrée : l'entrée, c'est ce qui est au bout du câble, dans ta main.</div>
|
||||
<h3>Les jeux</h3>
|
||||
<div id="jeux-p3"></div>
|
||||
</section>
|
||||
|
||||
<section id="p4" hidden>
|
||||
<h2>Ouvrir et quitter un programme</h2>
|
||||
<p class="kicker">Période 4. Sept jeux.</p>
|
||||
<p class="chapeau">Période 4. Sept jeux.</p>
|
||||
<h3>Le plan de l'heure</h3>
|
||||
<ol class="plan">
|
||||
<li>La démonstration du professeur.</li>
|
||||
@@ -201,14 +115,14 @@ figure.schema{margin:0;max-width:30rem}
|
||||
<li>Ouvrir trois programmes, basculer, quitter, vérifier la barre.</li>
|
||||
<li>Ranger et éteindre.</li>
|
||||
</ol>
|
||||
<div class="rappel"><strong>Réduire n'est pas quitter.</strong> Tant que la marque est dans la barre du bas, le programme tourne encore.</div>
|
||||
<div class="encadre encadre--cle"><strong>Réduire n'est pas quitter.</strong> Tant que la marque est dans la barre du bas, le programme tourne encore.</div>
|
||||
<h3>Les jeux</h3>
|
||||
<div id="jeux-p4"></div>
|
||||
</section>
|
||||
|
||||
<section id="p5" hidden>
|
||||
<h2>Enregistrer et retrouver son travail</h2>
|
||||
<p class="kicker">Période 5. Sept jeux.</p>
|
||||
<p class="chapeau">Période 5. Sept jeux.</p>
|
||||
<h3>Le plan de l'heure</h3>
|
||||
<ol class="plan">
|
||||
<li>La démonstration du professeur.</li>
|
||||
@@ -217,16 +131,16 @@ figure.schema{margin:0;max-width:30rem}
|
||||
<li>Créer son dossier, enregistrer, fermer, retrouver, rouvrir.</li>
|
||||
<li>Retirer sa clé, ranger et éteindre.</li>
|
||||
</ol>
|
||||
<div class="rappel"><strong>Ton travail n'existe que quand il est enregistré.</strong> Avant, il est sur ton banc, et le banc est vidé ce soir.</div>
|
||||
<div class="encadre encadre--cle"><strong>Ton travail n'existe que quand il est enregistré.</strong> Avant, il est sur ton banc, et le banc est vidé ce soir.</div>
|
||||
<h3>Les jeux</h3>
|
||||
<div id="jeux-p5"></div>
|
||||
</section>
|
||||
|
||||
<section id="p6" hidden>
|
||||
<h2>Le parcours complet</h2>
|
||||
<p class="kicker">Période 6. Cinq jeux de révision.</p>
|
||||
<p class="chapeau">Période 6. Cinq jeux de révision.</p>
|
||||
<p>Pas de matière nouvelle. Tu révises avec les jeux, puis tu fais le parcours complet sur ton poste, seul. Ce parcours compte pour le bulletin.</p>
|
||||
<div class="rappel"><strong>Lis les huit étapes en entier avant de commencer.</strong> Si tu bloques, dis-le : un parcours raté se refait, et c'est la version corrigée qui compte.</div>
|
||||
<div class="encadre encadre--cle"><strong>Lis les huit étapes en entier avant de commencer.</strong> Si tu bloques, dis-le : un parcours raté se refait, et c'est la version corrigée qui compte.</div>
|
||||
<h3>Les huit étapes</h3>
|
||||
<ol class="plan">
|
||||
<li>Installe ton poste et allume l'ordinateur.</li>
|
||||
@@ -244,6 +158,13 @@ figure.schema{margin:0;max-width:30rem}
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="pied">
|
||||
<div class="pied__interieur">
|
||||
Travaux sur ordinateur, 2e différenciée, local 134 INFO.
|
||||
Les jeux fonctionnent sans connexion Internet et se refont autant de fois que tu veux.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
@@ -256,8 +177,10 @@ nav.addEventListener("click", e => {
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
document.getElementById("btn-projection").addEventListener("click", e => {
|
||||
document.body.classList.toggle("projection");
|
||||
e.target.textContent = document.body.classList.contains("projection") ? "Taille normale" : "Agrandir";
|
||||
/* Sur <html> : c'est lui qui porte font-size, donc la valeur du rem. */
|
||||
const grand = document.documentElement.classList.toggle("projection");
|
||||
e.target.textContent = grand ? "Taille normale" : "Agrandir";
|
||||
e.target.setAttribute("aria-pressed", grand);
|
||||
});
|
||||
|
||||
/* ================= utilitaires ================= */
|
||||
@@ -418,25 +341,56 @@ function mTrieur(corps, cfg){
|
||||
const tri = el("div","tri"), reserve = el("div","reserve"), bacs = el("div","bacs");
|
||||
tri.append(reserve, bacs); corps.appendChild(tri);
|
||||
let restant = 0, erreurs = 0, pris = null, fantome = null, dx = 0, dy = 0;
|
||||
let depX = 0, depY = 0, bouge = false, choisi = null;
|
||||
|
||||
function maj(){ cible.textContent = restant > 0 ? "Restant " + restant : "Terminé"; score.textContent = "Erreurs " + erreurs; }
|
||||
|
||||
function demarrer(){
|
||||
erreurs = 0; restant = cfg.items.length; bacs.innerHTML = ""; reserve.innerHTML = "";
|
||||
erreurs = 0; restant = cfg.items.length; choisi = null;
|
||||
bacs.innerHTML = ""; reserve.innerHTML = "";
|
||||
cfg.bacs.forEach(b => {
|
||||
/* Le bac reçoit rôle et tabulation : un bouton ne peut pas
|
||||
contenir les jetons déposés, qui sont eux-mêmes des boutons. */
|
||||
const d = el("div","bac"); d.dataset.id = b.id;
|
||||
d.tabIndex = 0; d.setAttribute("role","button");
|
||||
d.setAttribute("aria-label", "Bac " + b.nom);
|
||||
d.appendChild(el("span","titre", b.nom)); bacs.appendChild(d);
|
||||
});
|
||||
melange(cfg.items.slice()).forEach(it => {
|
||||
const j = el("div","jeton"); j.dataset.bac = it.bac;
|
||||
const j = el("button","jeton"); j.type = "button"; j.dataset.bac = it.bac;
|
||||
if (it.glyphe) j.innerHTML = it.glyphe;
|
||||
if (it.nom) j.insertAdjacentText("beforeend", it.nom);
|
||||
reserve.appendChild(j);
|
||||
});
|
||||
maj();
|
||||
}
|
||||
|
||||
function bacSous(x,y){ const e2 = document.elementFromPoint(x,y); return e2 ? e2.closest(".bac") : null; }
|
||||
|
||||
/* Dépose un jeton dans un bac, que l'ordre vienne du glisser,
|
||||
du clic ou de la touche Entrée. */
|
||||
function deposer(j, b){
|
||||
if (b.dataset.id === j.dataset.bac){
|
||||
j.classList.remove("choisi");
|
||||
b.appendChild(j); j.style.cursor = "default"; restant--;
|
||||
if (choisi === j) choisi = null;
|
||||
} else {
|
||||
erreurs++; rate(j);
|
||||
}
|
||||
maj();
|
||||
}
|
||||
|
||||
function selectionner(j){
|
||||
if (choisi) choisi.classList.remove("choisi");
|
||||
choisi = (choisi === j) ? null : j;
|
||||
if (choisi) choisi.classList.add("choisi");
|
||||
}
|
||||
|
||||
/* --- glisser-déposer --- */
|
||||
document.addEventListener("pointerdown", e => {
|
||||
const j = e.target.closest(".jeton"); if (!j || !reserve.contains(j)) return;
|
||||
e.preventDefault(); pris = j;
|
||||
e.preventDefault(); pris = j; bouge = false;
|
||||
depX = e.clientX; depY = e.clientY;
|
||||
const r = j.getBoundingClientRect(); dx = e.clientX - r.left; dy = e.clientY - r.top;
|
||||
fantome = j.cloneNode(true); fantome.classList.add("pris");
|
||||
fantome.style.left = r.left+"px"; fantome.style.top = r.top+"px"; fantome.style.width = r.width+"px";
|
||||
@@ -444,6 +398,7 @@ function mTrieur(corps, cfg){
|
||||
});
|
||||
document.addEventListener("pointermove", e => {
|
||||
if (!pris || !reserve.contains(pris)) return;
|
||||
if (Math.abs(e.clientX - depX) > 6 || Math.abs(e.clientY - depY) > 6) bouge = true;
|
||||
fantome.style.left = (e.clientX-dx)+"px"; fantome.style.top = (e.clientY-dy)+"px";
|
||||
const b = bacSous(e.clientX, e.clientY);
|
||||
bacs.querySelectorAll(".bac").forEach(x => x.classList.toggle("vise", x === b));
|
||||
@@ -455,10 +410,30 @@ function mTrieur(corps, cfg){
|
||||
bacs.querySelectorAll(".bac").forEach(x => x.classList.remove("vise"));
|
||||
if (fantome){ fantome.remove(); fantome = null; }
|
||||
pris.style.opacity = "";
|
||||
if (b && b.dataset.id === pris.dataset.bac){ b.appendChild(pris); pris.style.cursor = "default"; restant--; }
|
||||
else if (b){ erreurs++; rate(pris); }
|
||||
pris = null; maj();
|
||||
/* Un simple clic ne déplace rien : c'est le gestionnaire de clic
|
||||
ci-dessous qui sélectionne, pour que le clavier suive le même
|
||||
chemin que la souris. */
|
||||
if (bouge && b){ deposer(pris, b); if (choisi){ choisi.classList.remove("choisi"); choisi = null; } }
|
||||
pris = null;
|
||||
});
|
||||
|
||||
/* --- sélection puis dépôt, au clic comme au clavier --- */
|
||||
reserve.addEventListener("click", e => {
|
||||
const j = e.target.closest(".jeton");
|
||||
if (j && reserve.contains(j)) selectionner(j);
|
||||
});
|
||||
bacs.addEventListener("click", e => {
|
||||
const b = e.target.closest(".bac");
|
||||
if (b && choisi) deposer(choisi, b);
|
||||
});
|
||||
bacs.addEventListener("keydown", e => {
|
||||
if (e.key !== "Enter" && e.key !== " " && e.key !== "Spacebar") return;
|
||||
const b = e.target.closest(".bac"); if (!b) return;
|
||||
e.preventDefault();
|
||||
if (choisi) deposer(choisi, b);
|
||||
else cible.textContent = "Choisis d'abord une étiquette dans la réserve.";
|
||||
});
|
||||
|
||||
bouton.addEventListener("click", demarrer); demarrer();
|
||||
}
|
||||
|
||||
@@ -609,42 +584,42 @@ const SCHEMA_BUREAU = `
|
||||
<rect class="zone" data-id="fond" x="6" y="6" width="408" height="288"/>
|
||||
<text x="300" y="150">fond d'écran</text>
|
||||
<g class="zone" data-id="icone">
|
||||
<rect x="24" y="24" width="42" height="42"/><line x1="34" y1="56" x2="56" y2="56" stroke="#1F3864" stroke-width="2"/>
|
||||
<rect x="24" y="24" width="42" height="42"/><line x1="34" y1="56" x2="56" y2="56" stroke="var(--encre)" stroke-width="2"/>
|
||||
</g>
|
||||
<g class="zone" data-id="icone2">
|
||||
<rect x="24" y="88" width="42" height="42"/><line x1="34" y1="120" x2="56" y2="120" stroke="#1F3864" stroke-width="2"/>
|
||||
<rect x="24" y="88" width="42" height="42"/><line x1="34" y1="120" x2="56" y2="120" stroke="var(--encre)" stroke-width="2"/>
|
||||
</g>
|
||||
<g class="zone" data-id="corbeille">
|
||||
<rect x="24" y="196" width="42" height="46"/>
|
||||
<line x1="24" y1="206" x2="66" y2="206" stroke="#1F3864" stroke-width="2"/>
|
||||
<line x1="38" y1="216" x2="38" y2="234" stroke="#1F3864" stroke-width="2"/>
|
||||
<line x1="52" y1="216" x2="52" y2="234" stroke="#1F3864" stroke-width="2"/>
|
||||
<line x1="24" y1="206" x2="66" y2="206" stroke="var(--encre)" stroke-width="2"/>
|
||||
<line x1="38" y1="216" x2="38" y2="234" stroke="var(--encre)" stroke-width="2"/>
|
||||
<line x1="52" y1="216" x2="52" y2="234" stroke="var(--encre)" stroke-width="2"/>
|
||||
</g>
|
||||
<rect class="zone" data-id="barre" x="6" y="256" width="408" height="38"/>
|
||||
<g class="zone" data-id="demarrer"><rect x="14" y="262" width="28" height="26"/>
|
||||
<line x1="20" y1="270" x2="36" y2="270" stroke="#1F3864" stroke-width="2"/>
|
||||
<line x1="20" y1="276" x2="36" y2="276" stroke="#1F3864" stroke-width="2"/>
|
||||
<line x1="20" y1="282" x2="36" y2="282" stroke="#1F3864" stroke-width="2"/></g>
|
||||
<line x1="20" y1="270" x2="36" y2="270" stroke="var(--encre)" stroke-width="2"/>
|
||||
<line x1="20" y1="276" x2="36" y2="276" stroke="var(--encre)" stroke-width="2"/>
|
||||
<line x1="20" y1="282" x2="36" y2="282" stroke="var(--encre)" stroke-width="2"/></g>
|
||||
<g class="zone" data-id="horloge"><rect x="340" y="262" width="66" height="26"/></g>
|
||||
<text x="348" y="279">10:45</text>
|
||||
</svg>`;
|
||||
|
||||
const SCHEMA_UC = `
|
||||
<svg viewBox="0 0 420 520" width="100%" role="img" aria-label="Schéma de l'intérieur d'une unité centrale">
|
||||
<rect x="10" y="10" width="400" height="500" fill="#F4F2EC" stroke="#1F3864" stroke-width="3"/>
|
||||
<rect class="zone" data-id="carte" x="40" y="140" width="345" height="345" style="fill:#EDEBE4"/>
|
||||
<rect x="10" y="10" width="400" height="500" fill="var(--papier)" stroke="var(--encre)" stroke-width="3"/>
|
||||
<rect class="zone" data-id="carte" x="40" y="140" width="345" height="345" style="fill:var(--accent-fond)"/>
|
||||
<text x="52" y="160">carte mère</text>
|
||||
<rect class="zone" data-id="alim" x="248" y="32" width="137" height="82"/>
|
||||
<text x="262" y="78">alimentation</text>
|
||||
<g class="zone" data-id="ventb">
|
||||
<circle cx="120" cy="73" r="46"/>
|
||||
<line x1="120" y1="27" x2="120" y2="119" stroke="#1F3864" stroke-width="2"/>
|
||||
<line x1="74" y1="73" x2="166" y2="73" stroke="#1F3864" stroke-width="2"/>
|
||||
<line x1="120" y1="27" x2="120" y2="119" stroke="var(--encre)" stroke-width="2"/>
|
||||
<line x1="74" y1="73" x2="166" y2="73" stroke="var(--encre)" stroke-width="2"/>
|
||||
</g>
|
||||
<g class="zone" data-id="proc">
|
||||
<rect x="150" y="180" width="130" height="130"/>
|
||||
<circle cx="215" cy="245" r="52" fill="none" stroke="#1F3864" stroke-width="2"/>
|
||||
<circle cx="215" cy="245" r="12" fill="#1F3864"/>
|
||||
<circle cx="215" cy="245" r="52" fill="none" stroke="var(--encre)" stroke-width="2"/>
|
||||
<circle cx="215" cy="245" r="12" fill="var(--encre)"/>
|
||||
</g>
|
||||
<g class="zone" data-id="memoire">
|
||||
<rect x="305" y="170" width="16" height="150"/>
|
||||
@@ -661,19 +636,19 @@ const SCHEMA_FENETRE = `
|
||||
<rect class="zone" data-id="titre" x="18" y="18" width="424" height="34"/>
|
||||
<text x="28" y="40">Mon document</text>
|
||||
<g class="zone" data-id="reduire"><rect x="330" y="20" width="34" height="30"/>
|
||||
<line x1="339" y1="42" x2="355" y2="42" stroke="#1F3864" stroke-width="2"/></g>
|
||||
<line x1="339" y1="42" x2="355" y2="42" stroke="var(--encre)" stroke-width="2"/></g>
|
||||
<g class="zone" data-id="agrandir"><rect x="366" y="20" width="34" height="30"/>
|
||||
<rect x="376" y="28" width="14" height="14" fill="none" stroke="#1F3864" stroke-width="2"/></g>
|
||||
<rect x="376" y="28" width="14" height="14" fill="none" stroke="var(--encre)" stroke-width="2"/></g>
|
||||
<g class="zone" data-id="fermer"><rect x="402" y="20" width="34" height="30"/>
|
||||
<line x1="412" y1="28" x2="426" y2="42" stroke="#1F3864" stroke-width="2"/>
|
||||
<line x1="426" y1="28" x2="412" y2="42" stroke="#1F3864" stroke-width="2"/></g>
|
||||
<line x1="412" y1="28" x2="426" y2="42" stroke="var(--encre)" stroke-width="2"/>
|
||||
<line x1="426" y1="28" x2="412" y2="42" stroke="var(--encre)" stroke-width="2"/></g>
|
||||
<rect class="zone" data-id="travail" x="18" y="60" width="424" height="222"/>
|
||||
<text x="30" y="86">zone de travail</text>
|
||||
</svg>`;
|
||||
|
||||
const rond = '<svg class="glyphe" viewBox="0 0 40 40"><circle cx="20" cy="20" r="17" fill="#1F3864"/></svg>';
|
||||
const carre = '<svg class="glyphe" viewBox="0 0 40 40"><rect x="4" y="4" width="32" height="32" fill="#2E7D4F"/></svg>';
|
||||
const triangle = '<svg class="glyphe" viewBox="0 0 40 40"><polygon points="20,3 37,36 3,36" fill="#C0392B"/></svg>';
|
||||
const rond = '<svg class="glyphe" viewBox="0 0 40 40"><circle cx="20" cy="20" r="17" fill="var(--encre)"/></svg>';
|
||||
const carre = '<svg class="glyphe" viewBox="0 0 40 40"><rect x="4" y="4" width="32" height="32" fill="var(--juste)"/></svg>';
|
||||
const triangle = '<svg class="glyphe" viewBox="0 0 40 40"><polygon points="20,3 37,36 3,36" fill="var(--erreur)"/></svg>';
|
||||
|
||||
const ES = [
|
||||
{bac:"e",nom:"le clavier"},{bac:"e",nom:"la souris"},{bac:"e",nom:"la webcam"},
|
||||
@@ -0,0 +1,19 @@
|
||||
# Captures d'écran à déposer ici
|
||||
|
||||
Les pages des modules affichent un encadré « Capture à ajouter » tant que le
|
||||
fichier n'est pas présent. Déposer les fichiers ci-dessous dans ce dossier,
|
||||
avec exactement ces noms, fait disparaître l'encadré sans rien modifier au code.
|
||||
|
||||
| Fichier | Ce qu'il doit montrer |
|
||||
|---|---|
|
||||
| `m1-poste.jpg` | Le poste de la salle : unité centrale, écran, clavier et souris visibles. |
|
||||
| `m1-fenetre-writer.png` | La fenêtre complète de LibreOffice Writer, document vide, les six zones numérotées de 1 à 6 (barre de titre, barre de menus, barre de formatage, règle, zone de texte, barre d'état). |
|
||||
| `m1-enregistrer-sous.png` | La boîte de dialogue « Enregistrer sous », avec le champ du nom et le sélecteur de format bien lisibles. |
|
||||
| `m2-caractere-special.png` | La boîte de dialogue « Caractère spécial » de Writer. |
|
||||
|
||||
Conseils de prise de vue :
|
||||
|
||||
- Capturer sur la version de LibreOffice installée en salle, pas sur une autre.
|
||||
- Largeur utile : environ 1400 px. Au-delà, le fichier est lourd pour rien.
|
||||
- PNG pour les captures d'écran, JPEG pour les photos de matériel.
|
||||
- Vérifier qu'aucun nom d'élève ni aucun document personnel n'apparaît.
|
||||
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>3e TQ Technique sociale — Traitement de texte</title>
|
||||
<meta name="description" content="Les modules du cours de traitement de texte de 3e TQ Technique sociale.">
|
||||
<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">
|
||||
</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><strong>3e TQ Technique sociale</strong>
|
||||
</nav>
|
||||
<h1>3e TQ Technique sociale</h1>
|
||||
<p class="entete__meta">Traitement de texte · M. Courcelle</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="contenu">
|
||||
|
||||
<p class="chapeau">Choisis le module sur lequel tu travailles. Chaque module se lit du début à la fin, avec des exercices à faire directement dans la page.</p>
|
||||
|
||||
<h2>Les modules du cours</h2>
|
||||
|
||||
<!-- ==================================================================
|
||||
POUR AJOUTER UN MODULE
|
||||
1. Créer le dossier du module à côté de ce fichier, avec son
|
||||
index.html dedans (le plus simple : copier un module existant).
|
||||
2. Copier-coller le bloc <li class="module"> ci-dessous, juste
|
||||
avant la fin de la liste, et remplir les quatre champs :
|
||||
module__num « Module 3 », « Module C »…
|
||||
module__titre le titre affiché à l'élève
|
||||
module__resume une phrase sur ce qu'on y fait
|
||||
module__meta nombre de séances, chapitre du cours papier…
|
||||
3. Adapter le href vers le dossier du nouveau module.
|
||||
|
||||
Gabarit à copier :
|
||||
|
||||
<li class="module">
|
||||
<a class="module__lien" href="DOSSIER/index.html">
|
||||
<span class="module__num">Module N</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">X séances · cours papier, chapitre Y</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Un module annoncé mais pas encore prêt : garder le <li> en
|
||||
ajoutant la classe « module--bientot » et remplacer le <a> par
|
||||
un <div class="module__lien">, sans href.
|
||||
================================================================== -->
|
||||
|
||||
<ul class="modules">
|
||||
<li class="module">
|
||||
<a class="module__lien" href="module1/index.html">
|
||||
<span class="module__num">Module 1</span>
|
||||
<span class="module__titre">Le poste et les fichiers</span>
|
||||
<span class="module__resume">La machine et ses parties, la fenêtre de Writer, enregistrer et nommer un fichier pour le retrouver.</span>
|
||||
<span class="module__meta">Saisir, enregistrer, retrouver · quiz de fin de module</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="module">
|
||||
<a class="module__lien" href="module2/index.html">
|
||||
<span class="module__num">Module 2</span>
|
||||
<span class="module__titre">Saisir au kilomètre</span>
|
||||
<span class="module__resume">La touche Entrée, la ponctuation, les accents, les raccourcis, et ce que le correcteur ne voit pas.</span>
|
||||
<span class="module__meta">Textes à saisir · chronomètre de frappe · quiz de fin de module</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="pied">
|
||||
<div class="pied__interieur">
|
||||
Les exercices se font dans LibreOffice Writer. Enregistre ton travail dans ton dossier de l'année, sur ta clé.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,248 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Module 1 — 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 1</strong>
|
||||
</nav>
|
||||
<h1>Le poste et les fichiers</h1>
|
||||
<p class="entete__meta">Traitement de texte · saisir, enregistrer, retrouver</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<nav class="sommaire-lat" aria-label="Sommaire">
|
||||
<a class="top" href="#haut">Module 1</a>
|
||||
<h2>Module 1, le poste et les fichiers</h2>
|
||||
<a href="#m1-machine">La machine</a>
|
||||
<a href="#m1-fenetre">La fenêtre de Writer</a>
|
||||
<a href="#m1-fichier">Fichier, dossier, extension</a>
|
||||
<a href="#m1-enregistrer">Enregistrer</a>
|
||||
<a href="#m1-nommer">Nommer un fichier</a>
|
||||
<a href="#m1-erreurs">Quand ça coince</a>
|
||||
<a href="#m1-quiz">Teste-toi</a>
|
||||
<h2>Autres modules</h2>
|
||||
<a href="../index.html">Tous les modules de la classe</a>
|
||||
<a href="../module2/index.html">Module 2, saisir au kilomètre</a>
|
||||
</nav>
|
||||
|
||||
<main class="feuille" id="haut">
|
||||
<div class="regle" aria-hidden="true"></div>
|
||||
<div class="inner">
|
||||
|
||||
<p class="chapeau">Ce module sert pendant le cours. Tu y retrouves les règles, les captures de
|
||||
la fenêtre de Writer et de quoi vérifier toi-même si tu as compris. Il ne remplace pas tes notes :
|
||||
il sert à les retrouver vite quand tu es devant ton écran.</p>
|
||||
|
||||
<h2 id="m1-machine"><span class="module-tag">Module 1</span><br>La machine et ses parties</h2>
|
||||
|
||||
<p>Un poste de travail se compose de trois familles d'éléments.</p>
|
||||
<table>
|
||||
<tr><th>Famille</th><th>À quoi ça sert</th><th>Exemples</th></tr>
|
||||
<tr><td>Entrée</td><td>Donner des informations à la machine</td><td>Clavier, souris, micro, scanner</td></tr>
|
||||
<tr><td>Sortie</td><td>Recevoir un résultat de la machine</td><td>Écran, imprimante, haut-parleurs</td></tr>
|
||||
<tr><td>Unité centrale</td><td>Traiter et conserver</td><td>Processeur, mémoire vive, disque</td></tr>
|
||||
</table>
|
||||
|
||||
<div class="regle-cle">
|
||||
<p>La mémoire vive s'efface quand la machine s'éteint. Tant que tu n'as pas enregistré, ton document n'existe que là. Une coupure de courant ne laisse rien.</p>
|
||||
</div>
|
||||
|
||||
<figure>
|
||||
<img src="../images/m1-poste.jpg" alt="Le poste de travail de la salle informatique"
|
||||
onerror="this.outerHTML='<div class=\'manque\'>Capture à ajouter : <code>3tq-technique-sociale/images/m1-poste.jpg</code><br>Le poste de la salle, unité centrale, écran, clavier et souris visibles.</div>'">
|
||||
<figcaption>Le poste de travail de la salle.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h2 id="m1-fenetre">La fenêtre de Writer</h2>
|
||||
<p>Elle contient toujours les mêmes zones. Clique sur une zone pour savoir à quoi elle sert.</p>
|
||||
|
||||
<figure>
|
||||
<img src="../images/m1-fenetre-writer.png" alt="Fenêtre de LibreOffice Writer avec ses différentes zones"
|
||||
onerror="this.outerHTML='<div class=\'manque\'>Capture à ajouter : <code>3tq-technique-sociale/images/m1-fenetre-writer.png</code><br>Fenêtre complète de Writer, document vide, zones numérotées de 1 à 6.</div>'">
|
||||
<figcaption>Les six zones de la fenêtre de Writer.</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="zones" id="zones"></div>
|
||||
<p id="zone-txt">Choisis une zone ci-dessus.</p>
|
||||
|
||||
<h2 id="m1-fichier">Fichier, dossier, extension</h2>
|
||||
<p>Un <strong>fichier</strong> est un ensemble d'informations enregistré sous un nom. Un <strong>dossier</strong> regroupe des fichiers et peut en contenir d'autres : c'est l'arborescence. L'<strong>extension</strong> est ce qui suit le point dans le nom. Elle dit de quel type de fichier il s'agit et quel programme l'ouvrira.</p>
|
||||
|
||||
<table>
|
||||
<tr><th>Extension</th><th>Type</th><th>S'ouvre avec</th></tr>
|
||||
<tr><td><code>.odt</code></td><td>Document texte, format ouvert</td><td>LibreOffice Writer</td></tr>
|
||||
<tr><td><code>.docx</code></td><td>Document texte, format Microsoft</td><td>Word, Writer</td></tr>
|
||||
<tr><td><code>.pdf</code></td><td>Document figé, non modifiable</td><td>Lecteur PDF, navigateur</td></tr>
|
||||
<tr><td><code>.jpg</code> <code>.png</code></td><td>Image</td><td>Visionneuse d'images</td></tr>
|
||||
<tr><td><code>.mp3</code></td><td>Son</td><td>Lecteur audio</td></tr>
|
||||
</table>
|
||||
|
||||
<div class="regle-cle">
|
||||
<p>Renommer <code>photo.jpg</code> en <code>photo.odt</code> ne transforme pas une photo en document. Ça rend seulement le fichier illisible.</p>
|
||||
</div>
|
||||
|
||||
<h3>Ton dossier de l'année</h3>
|
||||
<p class="specimen">traitement-de-texte-<em>tonnom</em><br>
|
||||
m01<br>
|
||||
exercices<br>
|
||||
m02<br>
|
||||
m03 … jusqu'à m09</p>
|
||||
<p>Les numéros à deux chiffres ne sont pas un caprice : sans le zéro, le classement met <code>m10</code> juste après <code>m1</code>.</p>
|
||||
|
||||
<h2 id="m1-enregistrer">Enregistrer</h2>
|
||||
<table>
|
||||
<tr><th>Commande</th><th>Quand</th><th>Ce qu'elle demande</th></tr>
|
||||
<tr><td>Enregistrer sous</td><td>La première fois, ou pour faire une copie</td><td>Où, sous quel nom, dans quel format</td></tr>
|
||||
<tr><td>Enregistrer<br><code>Ctrl+S</code></td><td>Toutes les fois suivantes</td><td>Rien, elle réécrit au même endroit</td></tr>
|
||||
</table>
|
||||
|
||||
<div class="regle-cle">
|
||||
<p><code>Ctrl+S</code> toutes les cinq minutes, sans y penser. C'est le geste le plus rentable de l'année.</p>
|
||||
</div>
|
||||
|
||||
<figure>
|
||||
<img src="../images/m1-enregistrer-sous.png" alt="Boîte de dialogue Enregistrer sous"
|
||||
onerror="this.outerHTML='<div class=\'manque\'>Capture à ajouter : <code>3tq-technique-sociale/images/m1-enregistrer-sous.png</code><br>Boîte Enregistrer sous, champ Nom de fichier et liste Type de fichier bien visibles.</div>'">
|
||||
<figcaption>Les trois questions posées par Enregistrer sous.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h2 id="m1-nommer">Nommer un fichier</h2>
|
||||
<p>Trois règles, et elles valent aussi en stage.</p>
|
||||
<ol>
|
||||
<li>Ni accent, ni espace, ni caractère spécial. Un tiret remplace l'espace.</li>
|
||||
<li>Un nom qui décrit le contenu. <code>Document1</code> ne dit rien.</li>
|
||||
<li>Une structure constante. Dans ce cours : <code>module-sujet-tonnom</code>.</li>
|
||||
</ol>
|
||||
|
||||
<p>Tape un nom de fichier pour le vérifier.</p>
|
||||
<div class="nomtest">
|
||||
<label for="nom-in">Nom à tester</label><br>
|
||||
<input id="nom-in" type="text" value="Rapport de stage (définitif).odt" spellcheck="false">
|
||||
<ul class="check" id="nom-check"></ul>
|
||||
<p id="nom-suggest"></p>
|
||||
</div>
|
||||
|
||||
<h2 id="m1-erreurs">Quand ça coince</h2>
|
||||
<p>Un message d'erreur n'est pas une punition, c'est une information. On le lit avant de cliquer.</p>
|
||||
|
||||
<details><summary>« Le document a été modifié. Voulez-vous enregistrer ? »</summary>
|
||||
<p>Tu fermes sans avoir enregistré. Réponds Enregistrer, sauf si tu veux vraiment perdre ce que tu viens de faire.</p></details>
|
||||
<details><summary>Mon fichier s'ouvre avec un programme inconnu</summary>
|
||||
<p>L'extension est associée à un autre logiciel. Clic droit sur le fichier, Ouvrir avec, puis choisis LibreOffice Writer.</p></details>
|
||||
<details><summary>Writer ne répond plus</summary>
|
||||
<p>Attends trente secondes sans cliquer partout. Si rien ne revient, ferme par le gestionnaire des tâches, relance Writer et accepte la récupération qu'il propose.</p></details>
|
||||
<details><summary>« Ce fichier est en lecture seule »</summary>
|
||||
<p>Le fichier est déjà ouvert ailleurs, ou il est protégé. Fais Enregistrer sous avec un autre nom.</p></details>
|
||||
<details><summary>Je ne retrouve pas mon travail de la semaine dernière</summary>
|
||||
<p>Dans l'ordre : regarde dans ton dossier de travail, puis cherche un morceau du nom dans le gestionnaire de fichiers, puis ouvre le menu Fichier de Writer et regarde les derniers documents utilisés.</p></details>
|
||||
|
||||
<h2 id="m1-quiz">Teste-toi, module 1</h2>
|
||||
<div class="quiz" id="quiz1"></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>
|
||||
<p>Les captures d'écran sont à réaliser sur la version de LibreOffice installée en salle.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../../assets/atelier-texte.js"></script>
|
||||
<script>
|
||||
"use strict";
|
||||
/* ---------- zones de la fenêtre ---------- */
|
||||
const ZONES = [
|
||||
["Barre de titre","Affiche le nom du document. Tant que tu n'as pas enregistré, elle indique « Sans nom 1 »."],
|
||||
["Barre de menus","Toutes les commandes du logiciel, classées par thème : Fichier, Édition, Format, Tableau…"],
|
||||
["Barre de formatage","Les boutons de mise en forme les plus utilisés : police, taille, gras, alignement."],
|
||||
["Règle","La largeur de la zone de texte et les marges. Plus tard, elle portera aussi les taquets de tabulation."],
|
||||
["Zone de texte","La page sur laquelle tu écris."],
|
||||
["Barre d'état","En bas : numéro de page, nombre de mots, langue du texte."]
|
||||
];
|
||||
const zc = document.getElementById('zones');
|
||||
ZONES.forEach((z,i)=>{
|
||||
const b = document.createElement('button');
|
||||
b.textContent = (i+1)+'. '+z[0];
|
||||
b.setAttribute('aria-pressed','false');
|
||||
b.addEventListener('click',()=>{
|
||||
zc.querySelectorAll('button').forEach(x=>x.setAttribute('aria-pressed','false'));
|
||||
b.setAttribute('aria-pressed','true');
|
||||
document.getElementById('zone-txt').textContent = z[1];
|
||||
});
|
||||
zc.appendChild(b);
|
||||
});
|
||||
|
||||
|
||||
/* ---------- validateur de nom de fichier ---------- */
|
||||
const nomIn = document.getElementById('nom-in');
|
||||
const nomCheck = document.getElementById('nom-check');
|
||||
const nomSug = document.getElementById('nom-suggest');
|
||||
|
||||
function testerNom(){
|
||||
const v = nomIn.value;
|
||||
const base = v.replace(/\.[^.]*$/,'');
|
||||
const tests = [
|
||||
["Pas d'espace", !/\s/.test(v)],
|
||||
["Pas d'accent ni de cédille", !/[àâäéèêëîïôöùûüçÀÂÄÉÈÊËÎÏÔÖÙÛÜÇ]/.test(v)],
|
||||
["Pas de majuscule", v === v.toLowerCase()],
|
||||
["Pas de caractère spécial", !/[()\[\]{}'"?!*:;,\/\\&%$#@]/.test(v)],
|
||||
["Une extension est présente", /\.[a-z0-9]{2,5}$/i.test(v)],
|
||||
["Le nom décrit le contenu", base.length > 5 && !/^(document|truc|nouveau|sans[-_ ]?nom|travail|essai|test)\d*$/i.test(base)]
|
||||
];
|
||||
nomCheck.innerHTML = tests.map(t=>'<li class="'+(t[1]?'ok':'ko')+'">'+t[0]+'</li>').join('');
|
||||
if(tests.every(t=>t[1])){
|
||||
nomSug.innerHTML = '<strong>Ce nom est correct.</strong>';
|
||||
}else{
|
||||
let p = v.normalize('NFD').replace(/[\u0300-\u036f]/g,'').toLowerCase();
|
||||
const m = p.match(/\.[a-z0-9]{2,5}$/);
|
||||
const ext = m ? m[0] : '.odt';
|
||||
p = p.replace(/\.[a-z0-9]{2,5}$/,'');
|
||||
p = p.replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'');
|
||||
nomSug.innerHTML = p ? 'Proposition : <code>'+p+ext+'</code>' : 'Donne un nom qui décrit le contenu.';
|
||||
}
|
||||
}
|
||||
nomIn.addEventListener('input', testerNom);
|
||||
testerNom();
|
||||
|
||||
|
||||
quiz(document.getElementById('quiz1'), [
|
||||
{q:"Tu tapes depuis vingt minutes sans avoir enregistré. Le courant saute. Que reste-t-il ?",
|
||||
r:["Tout, le disque garde le travail","Rien, le texte n'était que dans la mémoire vive","La moitié"],
|
||||
b:1, e:"Tant que tu n'as pas enregistré, le document n'existe que dans la mémoire vive, qui s'efface."},
|
||||
{q:"Quelle commande utilises-tu la première fois que tu enregistres un document ?",
|
||||
r:["Enregistrer","Enregistrer sous","Exporter"],
|
||||
b:1, e:"Enregistrer sous demande où, sous quel nom et dans quel format. Ensuite, Ctrl+S suffit."},
|
||||
{q:"Lequel de ces noms de fichier est correct ?",
|
||||
r:["Rapport de stage (final).odt","m02-annonce-dupont.odt","Document1.odt"],
|
||||
b:1, e:"Pas d'espace, pas d'accent, pas de parenthèse, et un nom qui dit ce qu'il y a dedans."},
|
||||
{q:"Tu renommes une photo de <code>photo.jpg</code> en <code>photo.odt</code>. Que se passe-t-il ?",
|
||||
r:["Elle devient un document texte","Rien ne change","Le fichier ne s'ouvre plus correctement"],
|
||||
b:2, e:"L'extension annonce le type du fichier, elle ne le transforme pas. On ne la change pas à la main."},
|
||||
{q:"Dans quel cas envoies-tu un PDF plutôt qu'un fichier modifiable ?",
|
||||
r:["Quand le document est terminé et doit rester tel quel","Quand le fichier est trop lourd","Quand le destinataire n'a pas d'ordinateur"],
|
||||
b:0, e:"Le PDF fige le document : le destinataire le voit exactement comme tu l'as fait."}
|
||||
]);
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,350 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Module 2 — 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 2</strong>
|
||||
</nav>
|
||||
<h1>Saisir au kilomètre</h1>
|
||||
<p class="entete__meta">Traitement de texte · ponctuation, raccourcis, vitesse de frappe</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<nav class="sommaire-lat" aria-label="Sommaire">
|
||||
<a class="top" href="#haut">Module 2</a>
|
||||
<h2>Module 2, saisir au kilomètre</h2>
|
||||
<a href="#m2-demo">La démonstration</a>
|
||||
<a href="#m2-kilometre">Saisir au kilomètre</a>
|
||||
<a href="#m2-entree">La touche Entrée</a>
|
||||
<a href="#m2-ponctuation">La ponctuation</a>
|
||||
<a href="#m2-caracteres">Accents et signes</a>
|
||||
<a href="#m2-raccourcis">Raccourcis</a>
|
||||
<a href="#m2-correcteur">Le correcteur</a>
|
||||
<a href="#m2-textes">Textes à saisir</a>
|
||||
<a href="#m2-chrono">Chronomètre</a>
|
||||
<a href="#m2-quiz">Teste-toi</a>
|
||||
<h2>Autres modules</h2>
|
||||
<a href="../index.html">Tous les modules de la classe</a>
|
||||
<a href="../module1/index.html">Module 1, le poste et les fichiers</a>
|
||||
</nav>
|
||||
|
||||
<main class="feuille" id="haut">
|
||||
<div class="regle" aria-hidden="true"></div>
|
||||
<div class="inner">
|
||||
|
||||
<p class="chapeau">Taper vite et bien commence par une règle simple : on tape les mots, la présentation vient après. Ce module montre pourquoi, et entraîne la frappe.</p>
|
||||
|
||||
<h2 id="m2-demo">Commence par ceci</h2>
|
||||
<p>Voici le même paragraphe, tapé de deux façons. À gauche, le texte a été saisi au kilomètre : une seule marque de paragraphe, tout à la fin. À droite, quelqu'un a appuyé sur Entrée en fin de chaque ligne.</p>
|
||||
<p>Affiche les marques, puis agrandis la police. Regarde ce qui arrive à la colonne de droite.</p>
|
||||
|
||||
<div class="demo">
|
||||
<div class="demo-barre">
|
||||
<button id="btn-marques" class="plein" aria-pressed="false">Afficher les marques</button>
|
||||
<label for="taille">Taille : <output id="taille-val">11</output> pt</label>
|
||||
<input type="range" id="taille" min="11" max="26" value="11" step="1">
|
||||
</div>
|
||||
<div class="demo-corps">
|
||||
<div class="demo-col" id="col-bon">
|
||||
<h4>Saisi au kilomètre</h4>
|
||||
<div class="txt"></div>
|
||||
</div>
|
||||
<div class="demo-col" id="col-mauvais">
|
||||
<h4>Entrée à chaque ligne</h4>
|
||||
<div class="txt"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>À gauche, le texte se réorganise tout seul. À droite, il part en morceaux. C'est toute la différence entre un document qu'on peut encore modifier et un document qu'il faudra retaper.</p>
|
||||
|
||||
<h2 id="m2-kilometre"><span class="module-tag">Module 2</span><br>Saisir au kilomètre</h2>
|
||||
<p>Saisir au kilomètre, c'est taper tout le texte d'une traite, sans s'occuper de son apparence. Pas de gras, pas de centrage, pas de police choisie. Rien que les mots, dans l'ordre. La mise en forme vient après.</p>
|
||||
<p>Ce n'est pas un exercice d'école, c'est la façon dont on travaille vraiment. Tu vas plus vite, tu fais moins de fautes, et tu peux changer la présentation d'un seul coup à la fin.</p>
|
||||
|
||||
<h2 id="m2-entree">La touche Entrée</h2>
|
||||
<p>Le logiciel passe tout seul à la ligne quand la ligne est pleine. Tu n'as rien à faire.</p>
|
||||
<div class="regle-cle">
|
||||
<p>Entrée sert à une seule chose : terminer un paragraphe et en commencer un autre. Elle insère une marque de paragraphe <span class="pil">¶</span>.</p>
|
||||
</div>
|
||||
<p><code>Ctrl+F10</code> affiche les marques. Utilise-le chaque fois que quelque chose te semble bizarre : tu verras ce que tu as réellement tapé. Remonte en haut de la page pour revoir la démonstration.</p>
|
||||
<p>Une ligne vide entre deux paragraphes se règle par un espacement, pas par trois touches Entrée. Ça vient au module 3.</p>
|
||||
|
||||
<h2 id="m2-ponctuation">La ponctuation</h2>
|
||||
<table>
|
||||
<tr><th>Signe</th><th>Espace avant</th><th>Espace après</th></tr>
|
||||
<tr><td>virgule <code>,</code></td><td>non</td><td>oui</td></tr>
|
||||
<tr><td>point <code>.</code></td><td>non</td><td>oui</td></tr>
|
||||
<tr><td>point-virgule <code>;</code></td><td>oui, insécable</td><td>oui</td></tr>
|
||||
<tr><td>deux-points <code>:</code></td><td>oui, insécable</td><td>oui</td></tr>
|
||||
<tr><td>point d'interrogation <code>?</code></td><td>oui, insécable</td><td>oui</td></tr>
|
||||
<tr><td>point d'exclamation <code>!</code></td><td>oui, insécable</td><td>oui</td></tr>
|
||||
<tr><td>parenthèse ouvrante <code>(</code></td><td>oui</td><td>non</td></tr>
|
||||
<tr><td>parenthèse fermante <code>)</code></td><td>non</td><td>oui</td></tr>
|
||||
</table>
|
||||
<p>Une espace insécable empêche le logiciel de couper la ligne à cet endroit. Sans elle, un point d'interrogation peut se retrouver tout seul au début de la ligne suivante. On l'obtient par <code>Ctrl+Maj+Espace</code>.</p>
|
||||
<div class="regle-cle">
|
||||
<p>Les deux erreurs qui se voient le plus sur un document imprimé : une espace avant la virgule, et pas d'espace après le point.</p>
|
||||
</div>
|
||||
|
||||
<h3>Trouve les espacements fautifs</h3>
|
||||
<p>Clique sur chaque endroit où l'espacement est faux. Il y en a huit.</p>
|
||||
<div class="chasse" id="chasse-esp"></div>
|
||||
<p class="score" id="score-esp"></p>
|
||||
<div class="actions"><button id="reset-esp">Recommencer</button><button id="sol-esp">Montrer la solution</button></div>
|
||||
|
||||
<h2 id="m2-caracteres">Accents et signes</h2>
|
||||
<p>Les majuscules s'accentuent. On écrit <strong>École</strong>, <strong>À partir de</strong>, <strong>Étienne</strong>. La méthode qui marche sur tous les postes : tape <code>é</code>, sélectionne-le avec <code>Maj</code>+flèche gauche, puis Format, Texte, MAJUSCULES. Sur certains claviers, <code>Verr.Maj</code> suivi de <code>é</code> donne directement <code>É</code> ; sur d'autres, il donne un 2. Essaie sur ton poste.</p>
|
||||
<p>Les symboles absents du clavier (degré, case à cocher, flèche, lettres grecques) se trouvent au même endroit.</p>
|
||||
<figure>
|
||||
<img src="../images/m2-caractere-special.png" alt="Boîte de dialogue Caractère spécial"
|
||||
onerror="this.outerHTML='<div class=\'manque\'>Capture à ajouter : <code>3tq-technique-sociale/images/m2-caractere-special.png</code><br>Boîte Caractère spécial, liste des polices et champ de recherche visibles.</div>'">
|
||||
<figcaption>Insertion, puis Caractère spécial.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h2 id="m2-raccourcis">Raccourcis</h2>
|
||||
<p>La souris est lente. Tape un mot pour filtrer la liste.</p>
|
||||
<label for="filtre">Filtrer</label><br>
|
||||
<input id="filtre" type="text" placeholder="par exemple : sélectionner" spellcheck="false">
|
||||
<table id="tab-racc"><tbody></tbody></table>
|
||||
|
||||
<h2 id="m2-correcteur">Le correcteur ne relit pas à ta place</h2>
|
||||
<p>Le correcteur souligne les mots qu'il ne trouve pas dans son dictionnaire. Il ne voit pas un mot qui existe mais qui n'est pas le bon.</p>
|
||||
<p>Dans le texte ci-dessous, tous les mots existent en français. Clique sur ceux qui sont faux. Il y en a dix.</p>
|
||||
<div class="chasse" id="chasse-mots"></div>
|
||||
<p class="score" id="score-mots"></p>
|
||||
<div class="actions"><button id="reset-mots">Recommencer</button><button id="sol-mots">Montrer la solution</button></div>
|
||||
<div class="regle-cle">
|
||||
<p>Le correcteur trouve les mots qui n'existent pas. Pas les mots qui ne sont pas à leur place. Tu relis toi-même, toujours, après lui.</p>
|
||||
</div>
|
||||
<p>Vérifie aussi la langue du document, en bas de la fenêtre. Un texte français réglé sur l'anglais est souligné en rouge de bout en bout.</p>
|
||||
|
||||
<h2 id="m2-textes">Textes à saisir</h2>
|
||||
<p>Les textes des exercices, pour les avoir sous les yeux pendant que tu tapes. Ne recopie pas les retours à la ligne que tu vois à l'écran : appuie sur Entrée uniquement entre deux paragraphes.</p>
|
||||
|
||||
<details><summary>Exercice 1, le centre de vacances La Ruche</summary>
|
||||
<div class="specimen">
|
||||
<p>Le centre de vacances La Ruche ouvre ses portes du 1er au 15 juillet. Il accueille les enfants de six à douze ans, du lundi au vendredi, de huit heures trente à seize heures trente. Une garderie est assurée à partir de sept heures trente et jusqu'à dix-sept heures trente.</p>
|
||||
<p>Chaque semaine est construite autour d'un thème. La première semaine sera consacrée à la nature et à la découverte de la forêt voisine. La seconde portera sur les arts du cirque, avec l'intervention de deux artistes professionnels le jeudi.</p>
|
||||
<p>Les inscriptions se prennent au secrétariat, au 12 de la rue des Écoles, ou par téléphone au 069 22 34 56. Le nombre de places est limité à quarante enfants par semaine. Une fiche médicale complétée par les parents est indispensable.</p>
|
||||
<p>Le prix de la semaine est de cinquante euros pour le premier enfant et de quarante euros à partir du second. Ce montant comprend les collations, le matériel et les assurances. Le repas de midi n'est pas fourni.</p>
|
||||
</div>
|
||||
<p>Quatre paragraphes, donc quatre marques <span class="pil">¶</span>. Attention au É de « rue des Écoles ».</p>
|
||||
</details>
|
||||
|
||||
<details><summary>Exercice 3, les services aux familles</summary>
|
||||
<div class="specimen">
|
||||
<p>Services proposés aux familles</p>
|
||||
<p>L'agence communale ouvre un guichet unique destiné aux familles. Que vous cherchiez une place en crèche, une aide administrative ou une information sur les activités extrascolaires, une seule adresse suffit désormais.</p>
|
||||
<p>Quels services trouve-t-on au guichet ? Trois missions principales lui sont confiées.</p>
|
||||
<p>L'accueil et l'orientation : un agent reçoit sans rendez-vous et oriente vers le service compétent. Il dispose de la liste complète des milieux d'accueil de la commune.</p>
|
||||
<p>L'aide au remplissage des documents : allocations, primes de naissance, inscriptions scolaires. Aucune connaissance administrative n'est nécessaire de la part des familles.</p>
|
||||
<p>Le suivi des demandes : chaque dossier reçoit un numéro et peut être suivi par téléphone. Le délai de traitement annoncé est de quinze jours ouvrables.</p>
|
||||
<p>Le guichet est ouvert du lundi au vendredi, de huit heures trente à midi, et le mercredi après-midi de treize heures à seize heures. Il est fermé les jours fériés. Une permanence téléphonique reste assurée en dehors de ces heures.</p>
|
||||
<p>Étienne Delval, échevin des Affaires sociales</p>
|
||||
</div>
|
||||
<p>Espaces insécables devant les deux-points et le point d'interrogation. Et le É d'Étienne.</p>
|
||||
</details>
|
||||
|
||||
<details><summary>Exercice 6, texte du chronomètre</summary>
|
||||
<div class="specimen">
|
||||
<p>L'animation d'un groupe d'enfants demande de la préparation. Avant chaque séance, l'animateur prévoit le matériel, vérifie l'espace disponible et prépare une activité de remplacement en cas de mauvais temps. Il connaît le nombre d'enfants attendus et les éventuelles allergies alimentaires signalées par les parents.</p>
|
||||
<p>Pendant la séance, il observe autant qu'il anime. Un enfant qui reste à l'écart, un groupe qui se forme contre un autre, une consigne qui n'est pas comprise : ce sont des informations utiles pour la suite. L'animateur note ce qu'il remarque, sans interrompre l'activité.</p>
|
||||
<p>Après la séance, un temps de rangement collectif est prévu. Les enfants y participent, car il fait partie de l'activité et non de la corvée qui la suit. L'animateur profite de ce moment pour recueillir les impressions du groupe sur ce qui vient d'être fait.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<h2 id="m2-chrono">Chronomètre</h2>
|
||||
<p>Cinq minutes de frappe. Tape dans le cadre, le compteur avance tout seul. Ce relevé n'est pas coté : il sert à voir ta progression d'un mois à l'autre. Note tes deux chiffres dans ta grille.</p>
|
||||
<div class="chrono">
|
||||
<div class="temps" id="temps">05:00</div>
|
||||
<button id="go" class="plein">Démarrer</button>
|
||||
<button id="stop">Arrêter</button>
|
||||
<div>Mots : <strong id="mots">0</strong></div>
|
||||
</div>
|
||||
<textarea id="zone-frappe" placeholder="Le chronomètre démarre quand tu cliques sur Démarrer." spellcheck="false" disabled></textarea>
|
||||
<p id="bilan"></p>
|
||||
|
||||
<h2 id="m2-quiz">Teste-toi, module 2</h2>
|
||||
<div class="quiz" id="quiz2"></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>
|
||||
<p>Les captures d'écran sont à réaliser sur la version de LibreOffice installée en salle.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../../assets/atelier-texte.js"></script>
|
||||
<script>
|
||||
"use strict";
|
||||
/* ---------- démonstration des marques de paragraphe ---------- */
|
||||
const PARA = "Le centre de vacances La Ruche ouvre ses portes du 1er au 15 juillet. Il accueille les enfants de six à douze ans, du lundi au vendredi. Une garderie est assurée dès sept heures trente.";
|
||||
const LIGNES = ["Le centre de vacances La Ruche ouvre ses","portes du 1er au 15 juillet. Il accueille","les enfants de six à douze ans, du lundi","au vendredi. Une garderie est assurée dès","sept heures trente."];
|
||||
let marques = false;
|
||||
|
||||
function rendreDemo(){
|
||||
const pil = marques ? '<span class="marque">¶</span>' : '';
|
||||
const bon = marques ? PARA.replace(/ /g,'<span class="esp">·</span>') : PARA;
|
||||
document.querySelector('#col-bon .txt').innerHTML = '<p>'+bon+pil+'</p>';
|
||||
const mauvais = LIGNES.map(l=>{
|
||||
const t = marques ? l.replace(/ /g,'<span class="esp">·</span>') : l;
|
||||
return '<p style="margin:0">'+t+pil+'</p>';
|
||||
}).join('');
|
||||
document.querySelector('#col-mauvais .txt').innerHTML = mauvais;
|
||||
}
|
||||
document.getElementById('btn-marques').addEventListener('click', e=>{
|
||||
marques = !marques;
|
||||
e.target.setAttribute('aria-pressed', marques);
|
||||
e.target.textContent = marques ? 'Masquer les marques' : 'Afficher les marques';
|
||||
rendreDemo();
|
||||
});
|
||||
document.getElementById('taille').addEventListener('input', e=>{
|
||||
const v = e.target.value;
|
||||
document.getElementById('taille-val').textContent = v;
|
||||
document.querySelectorAll('.demo-col .txt').forEach(n=>n.style.fontSize = v+'pt');
|
||||
});
|
||||
rendreDemo();
|
||||
|
||||
|
||||
/* espacements fautifs, 8 erreurs */
|
||||
const T_ESP = [
|
||||
{t:"L'",f:true},{t:"animatrice"},{t:"a"},{t:"posé"},{t:"la"},{t:"question"},{t:"suivante"},
|
||||
{t:":«",f:true},{t:"qui"},{t:"veut"},{t:"participer"},{t:"?"},{t:"»"},
|
||||
{t:"Douze"},{t:"enfants"},{t:"ont"},{t:"levé"},{t:"la"},{t:"main"},{t:",trois",f:true},
|
||||
{t:"sont"},{t:"restés"},{t:"silencieux"},{t:".",f:true},
|
||||
{t:"Marie"},{t:"a"},{t:"expliqué"},{t:"le"},{t:"programme"},{t:":"},{t:"départ"},
|
||||
{t:"à"},{t:"neuf"},{t:"heures"},{t:",retour",f:true},{t:"à"},{t:"seize"},{t:"heures."},
|
||||
{t:"Attention"},{t:"!"},{t:"Les"},{t:"parents"},{t:"signent"},{t:"avant"},
|
||||
{t:"mercredi"},{t:";aucune",f:true},{t:"inscription"},{t:"ne"},{t:"sera"},{t:"acceptée"},{t:"après"},{t:"cette"},{t:"date."},
|
||||
{t:"Le"},{t:"prix(",f:true},{t:"cinq"},{t:"euros"},{t:")comprend",f:true},{t:"le"},{t:"transport."}
|
||||
];
|
||||
chasse(document.getElementById('chasse-esp'), document.getElementById('score-esp'),
|
||||
document.getElementById('reset-esp'), document.getElementById('sol-esp'),
|
||||
T_ESP, T_ESP.filter(j=>j.f).length, "Relis la règle : jamais d'espace avant la virgule ou le point.");
|
||||
|
||||
/* mots faux mais existants, 10 erreurs */
|
||||
const T_MOT = [
|
||||
{t:"Les"},{t:"enfants"},{t:"son",f:true},{t:"arrivés"},{t:"a",f:true},{t:"dix"},{t:"heures."},
|
||||
{t:"L'animateur"},{t:"les"},{t:"a"},{t:"accueilli",f:true},{t:"dans"},{t:"la"},{t:"grande"},{t:"salle."},
|
||||
{t:"Ceux"},{t:"qui"},{t:"avais",f:true},{t:"apporté"},{t:"leur"},{t:"pique-nique"},
|
||||
{t:"l'on",f:true},{t:"déposé"},{t:"dans"},{t:"le"},{t:"frigo."},
|
||||
{t:"Les"},{t:"autres"},{t:"on",f:true},{t:"reçu"},{t:"un"},{t:"ticket."},
|
||||
{t:"La"},{t:"sortie"},{t:"et",f:true},{t:"prévue"},{t:"pour"},{t:"quatorze"},{t:"heures."},
|
||||
{t:"Les"},{t:"parents"},{t:"qui"},{t:"souhaite",f:true},{t:"venir"},{t:"doivent"},
|
||||
{t:"ce",f:true},{t:"faire"},{t:"connaître."},{t:"Le"},{t:"car"},{t:"peu",f:true},{t:"prendre"},{t:"cinquante"},{t:"personnes."}
|
||||
];
|
||||
chasse(document.getElementById('chasse-mots'), document.getElementById('score-mots'),
|
||||
document.getElementById('reset-mots'), document.getElementById('sol-mots'),
|
||||
T_MOT, T_MOT.filter(j=>j.f).length, "Et pourtant, le correcteur n'en souligne presque aucune.");
|
||||
|
||||
|
||||
/* ---------- raccourcis filtrables ---------- */
|
||||
const RACC = [
|
||||
["Enregistrer","Ctrl+S"],
|
||||
["Annuler la dernière action","Ctrl+Z"],
|
||||
["Rétablir","Ctrl+Y"],
|
||||
["Afficher les marques de paragraphe","Ctrl+F10"],
|
||||
["Couper","Ctrl+X"],["Copier","Ctrl+C"],["Coller","Ctrl+V"],
|
||||
["Coller sans la mise en forme","Ctrl+Maj+V"],
|
||||
["Tout sélectionner","Ctrl+A"],
|
||||
["Espace insécable","Ctrl+Maj+Espace"],
|
||||
["Aller au début de la ligne","Origine"],
|
||||
["Aller à la fin de la ligne","Fin"],
|
||||
["Aller au début du document","Ctrl+Origine"],
|
||||
["Aller à la fin du document","Ctrl+Fin"],
|
||||
["Avancer d'un mot","Ctrl+flèche droite"],
|
||||
["Sélectionner en se déplaçant","Maj + une touche de déplacement"],
|
||||
["Sélectionner un mot","double-clic sur le mot"],
|
||||
["Vérification orthographique","F7"],
|
||||
["Rechercher et remplacer","Ctrl+H"]
|
||||
];
|
||||
const tb = document.querySelector('#tab-racc tbody');
|
||||
function rendreRacc(q){
|
||||
const f = q ? RACC.filter(r=>(r[0]+' '+r[1]).toLowerCase().includes(q.toLowerCase())) : RACC;
|
||||
tb.innerHTML = f.length
|
||||
? f.map(r=>'<tr><td>'+r[0]+'</td><td><code>'+r[1]+'</code></td></tr>').join('')
|
||||
: '<tr><td colspan="2">Aucun raccourci ne correspond. Essaie un autre mot.</td></tr>';
|
||||
}
|
||||
document.getElementById('filtre').addEventListener('input', e=>rendreRacc(e.target.value));
|
||||
rendreRacc('');
|
||||
|
||||
|
||||
quiz(document.getElementById('quiz2'), [
|
||||
{q:"Quand appuies-tu sur Entrée ?",
|
||||
r:["À la fin de chaque ligne","Seulement pour changer de paragraphe","Quand le texte touche la marge"],
|
||||
b:1, e:"Le passage à la ligne est automatique. Entrée termine un paragraphe et en ouvre un autre."},
|
||||
{q:"Quel espacement est correct ?",
|
||||
r:["Les enfants , les parents et les animateurs","Les enfants, les parents et les animateurs","Les enfants ,les parents et les animateurs"],
|
||||
b:1, e:"Jamais d'espace avant la virgule, toujours une après."},
|
||||
{q:"Comment obtient-on une espace insécable ?",
|
||||
r:["Ctrl+Maj+Espace","Deux fois la barre d'espace","Alt+Espace"],
|
||||
b:0, e:"Elle empêche le logiciel de couper la ligne juste avant un signe comme ? ou :."},
|
||||
{q:"Le correcteur ne souligne rien dans « les enfants son arrivés ». Pourquoi ?",
|
||||
r:["Il est mal réglé","Parce que « son » existe en français","Parce que la phrase est correcte"],
|
||||
b:1, e:"Le correcteur vérifie l'existence des mots, pas leur place dans la phrase."},
|
||||
{q:"Que fait <code>Ctrl+F10</code> ?",
|
||||
r:["Il enregistre le document","Il affiche les marques de paragraphe et les espaces","Il corrige l'orthographe"],
|
||||
b:1, e:"C'est le moyen de voir ce que tu as réellement tapé quand quelque chose semble bizarre."},
|
||||
{q:"Tu colles un texte venu d'un site web et il arrive avec sa mise en forme. Que fais-tu ?",
|
||||
r:["Tu le retapes","Tu utilises Ctrl+Maj+V et Texte non formaté","Tu changes la police à la main"],
|
||||
b:1, e:"Le collage spécial en texte non formaté enlève tout ce qui vient du site."}
|
||||
]);
|
||||
|
||||
|
||||
/* ---------- chronomètre ---------- */
|
||||
let reste = 300, tid = null;
|
||||
const tEl = document.getElementById('temps');
|
||||
const zone = document.getElementById('zone-frappe');
|
||||
const motsEl = document.getElementById('mots');
|
||||
const bilan = document.getElementById('bilan');
|
||||
|
||||
function affiche(){
|
||||
const m = String(Math.floor(reste/60)).padStart(2,'0');
|
||||
const s = String(reste%60).padStart(2,'0');
|
||||
tEl.textContent = m+':'+s;
|
||||
}
|
||||
function compter(){
|
||||
const n = zone.value.trim() ? zone.value.trim().split(/\s+/).length : 0;
|
||||
motsEl.textContent = n;
|
||||
return n;
|
||||
}
|
||||
function arreter(){
|
||||
if(!tid && !zone.value) return; // rien n'a été lancé
|
||||
clearInterval(tid); tid = null; zone.disabled = true;
|
||||
bilan.innerHTML = '<strong>'+compter()+' mots en '+Math.round((300-reste)/60*10)/10+' minute(s).</strong> '
|
||||
+ 'Relis maintenant et compte tes fautes de frappe, puis note les deux chiffres dans ta grille.';
|
||||
}
|
||||
document.getElementById('go').addEventListener('click',()=>{
|
||||
if(tid) return;
|
||||
reste = 300; affiche(); zone.disabled = false; zone.value = ''; compter();
|
||||
bilan.textContent = ''; zone.focus();
|
||||
tid = setInterval(()=>{ reste--; affiche(); if(reste<=0) arreter(); },1000);
|
||||
});
|
||||
document.getElementById('stop').addEventListener('click', arreter);
|
||||
zone.addEventListener('input', compter);
|
||||
affiche();
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>4e TQ Agent d'éducation — Traitement de texte</title>
|
||||
<meta name="description" content="Les modules du cours de traitement de texte de 4e TQ Agent d'éducation.">
|
||||
<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">
|
||||
</head>
|
||||
<body class="classe-ae">
|
||||
|
||||
<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><strong>4e TQ Agent d'éducation</strong>
|
||||
</nav>
|
||||
<h1>4e TQ Agent d'éducation</h1>
|
||||
<p class="entete__meta">Traitement de texte · M. Courcelle</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="contenu">
|
||||
|
||||
<p class="chapeau">Choisis le module sur lequel tu travailles. Chaque module se lit du début à la fin, avec des exercices à faire directement dans la page.</p>
|
||||
|
||||
<h2>Les modules du cours</h2>
|
||||
|
||||
<!-- ==================================================================
|
||||
POUR AJOUTER UN MODULE
|
||||
1. Créer le dossier du module à côté de ce fichier, avec son
|
||||
index.html dedans (le plus simple : copier un module existant).
|
||||
2. Copier-coller le bloc <li class="module"> ci-dessous, juste
|
||||
avant la fin de la liste, et remplir les quatre champs :
|
||||
module__num « Module 3 », « Module C »…
|
||||
module__titre le titre affiché à l'élève
|
||||
module__resume une phrase sur ce qu'on y fait
|
||||
module__meta nombre de séances, chapitre du cours papier…
|
||||
3. Adapter le href vers le dossier du nouveau module.
|
||||
|
||||
Gabarit à copier :
|
||||
|
||||
<li class="module">
|
||||
<a class="module__lien" href="DOSSIER/index.html">
|
||||
<span class="module__num">Module N</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">X séances · cours papier, chapitre Y</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Un module annoncé mais pas encore prêt : garder le <li> en
|
||||
ajoutant la classe « module--bientot » et remplacer le <a> par
|
||||
un <div class="module__lien">, sans href.
|
||||
================================================================== -->
|
||||
|
||||
<p class="vide">
|
||||
Aucun module n'est encore en ligne pour cette classe.<br>
|
||||
Les exercices arriveront ici au fil de l'année.
|
||||
</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="pied">
|
||||
<div class="pied__interieur">
|
||||
Les exercices se font dans LibreOffice Writer. Enregistre ton travail dans ton dossier de l'année, sur ta clé.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+80
@@ -0,0 +1,80 @@
|
||||
# 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`.
|
||||
@@ -0,0 +1,304 @@
|
||||
/* ==================================================================
|
||||
Cours de traitement de texte (3e TQ, 4e TQ)
|
||||
Chargé après assets/theme.css, dont il reprend toutes les couleurs.
|
||||
Mise en page « document long » : un sommaire latéral qui suit la
|
||||
lecture, et une feuille de papier au centre.
|
||||
================================================================== */
|
||||
|
||||
/* ---------- gabarit à deux colonnes ---------- */
|
||||
|
||||
.wrap {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 16rem minmax(0, 1fr);
|
||||
gap: 2rem;
|
||||
max-width: 80rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.sommaire-lat {
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
align-self: start;
|
||||
max-height: calc(100vh - 3rem);
|
||||
overflow: auto;
|
||||
}
|
||||
.sommaire-lat h2 {
|
||||
font-family: var(--police-texte);
|
||||
font-size: .78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--encre-douce);
|
||||
margin: 1.4rem 0 .4rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.sommaire-lat h2:first-of-type { margin-top: 0; }
|
||||
.sommaire-lat a {
|
||||
display: block;
|
||||
padding: .28rem .55rem;
|
||||
color: var(--encre);
|
||||
text-decoration: none;
|
||||
border-left: 3px solid transparent;
|
||||
font-size: .93rem;
|
||||
}
|
||||
.sommaire-lat a:hover { background: var(--accent-fond); }
|
||||
.sommaire-lat a.on {
|
||||
border-left-color: var(--accent);
|
||||
background: var(--accent-fond);
|
||||
font-weight: 600;
|
||||
}
|
||||
.sommaire-lat .top {
|
||||
font-family: var(--police-titre);
|
||||
font-weight: 700;
|
||||
font-size: .98rem;
|
||||
margin-bottom: .8rem;
|
||||
color: var(--accent-encre);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ---------- la feuille ---------- */
|
||||
|
||||
.feuille {
|
||||
background: var(--blanc);
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .3rem;
|
||||
box-shadow: 0 12px 30px -20px rgba(22, 48, 43, .5);
|
||||
}
|
||||
/* Règle graduée, comme en haut de la fenêtre de Writer. */
|
||||
.regle {
|
||||
height: 20px;
|
||||
border-bottom: 1px solid var(--trait);
|
||||
background: var(--papier);
|
||||
background-image: repeating-linear-gradient(to right, var(--trait) 0 1px, transparent 1px 56px);
|
||||
background-position: 24px 0;
|
||||
position: relative;
|
||||
}
|
||||
.regle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 24px; right: 24px; bottom: 0;
|
||||
height: 5px;
|
||||
background: var(--accent);
|
||||
opacity: .45;
|
||||
}
|
||||
.inner { padding: 2.4rem clamp(1.2rem, 4vw, 3.4rem) 3rem; max-width: 46rem; }
|
||||
|
||||
.module-tag {
|
||||
display: inline-block;
|
||||
font-family: var(--police-titre);
|
||||
font-size: .75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--papier);
|
||||
background: var(--accent-encre);
|
||||
padding: .1rem .5rem;
|
||||
border-radius: .2rem;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
|
||||
/* ---------- blocs de contenu ---------- */
|
||||
|
||||
/* Alias historique de .encadre--cle, conservé pour le contenu existant. */
|
||||
.regle-cle {
|
||||
border-left: .35rem solid var(--cible);
|
||||
background: var(--cible-fond);
|
||||
border-radius: 0 .4rem .4rem 0;
|
||||
padding: .9rem 1.1rem;
|
||||
margin: 1.4rem 0;
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
.regle-cle p { margin: 0; }
|
||||
|
||||
.specimen {
|
||||
font-family: var(--police-doc);
|
||||
font-size: 1rem;
|
||||
line-height: 1.75;
|
||||
background: var(--papier);
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .3rem;
|
||||
padding: 1rem 1.2rem;
|
||||
}
|
||||
.pil { color: var(--cible); font-weight: 700; }
|
||||
|
||||
details {
|
||||
border-bottom: 1px solid var(--trait);
|
||||
padding: .6rem 0;
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
summary { cursor: pointer; font-weight: 600; }
|
||||
summary::marker { color: var(--accent); }
|
||||
details[open] summary { margin-bottom: .6rem; }
|
||||
|
||||
/* ---------- boutons ---------- */
|
||||
|
||||
button {
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--accent-encre);
|
||||
background: var(--blanc);
|
||||
color: var(--accent-encre);
|
||||
padding: .4rem .85rem;
|
||||
border-radius: .3rem;
|
||||
}
|
||||
button:hover { background: var(--accent-fond); }
|
||||
button.plein { background: var(--accent-encre); color: var(--papier); }
|
||||
button.plein:hover { background: var(--encre); border-color: var(--encre); }
|
||||
|
||||
/* ---------- démonstration des marques de paragraphe ---------- */
|
||||
|
||||
.demo { border: 1px solid var(--trait); border-radius: .3rem; margin: 1.2rem 0; overflow: hidden; }
|
||||
.demo-barre {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: var(--papier);
|
||||
border-bottom: 1px solid var(--trait);
|
||||
padding: .55rem .8rem;
|
||||
font-size: .9rem;
|
||||
}
|
||||
.demo-corps { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
|
||||
.demo-col { padding: .9rem 1rem; font-family: var(--police-doc); line-height: 1.7; overflow: hidden; }
|
||||
.demo-col:first-child { border-right: 1px solid var(--trait); }
|
||||
.demo-col h4 {
|
||||
margin: 0 0 .5rem;
|
||||
font-family: var(--police-texte);
|
||||
font-size: .82rem;
|
||||
color: var(--encre-douce);
|
||||
}
|
||||
.marque { color: var(--cible); font-weight: 700; }
|
||||
.esp { color: var(--trait-fort); }
|
||||
@media (max-width: 640px) {
|
||||
.demo-corps { grid-template-columns: 1fr; }
|
||||
.demo-col:first-child { border-right: 0; border-bottom: 1px solid var(--trait); }
|
||||
}
|
||||
|
||||
/* ---------- zones cliquables de la fenêtre de Writer ---------- */
|
||||
|
||||
.zones { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
|
||||
.zones button { font-size: .9rem; }
|
||||
.zones button[aria-pressed="true"] { background: var(--accent-encre); color: var(--papier); }
|
||||
#zone-txt {
|
||||
min-height: 3.2rem;
|
||||
background: var(--accent-fond);
|
||||
border-radius: .3rem;
|
||||
padding: .7rem .9rem;
|
||||
font-size: .95rem;
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
|
||||
/* ---------- validateur de nom de fichier ---------- */
|
||||
|
||||
.nomtest input {
|
||||
font: inherit;
|
||||
font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
|
||||
padding: .45rem .6rem;
|
||||
border: 1px solid var(--trait-fort);
|
||||
border-radius: .3rem;
|
||||
width: min(28rem, 100%);
|
||||
}
|
||||
.check { list-style: none; padding: 0; margin: .8rem 0; font-size: .95rem; }
|
||||
.check li { padding-left: 1.7rem; position: relative; margin-bottom: .3rem; }
|
||||
.check li::before { position: absolute; left: 0; font-weight: 700; }
|
||||
.check li.ok::before { content: "\2713"; color: var(--juste); }
|
||||
.check li.ko::before { content: "\2715"; color: var(--erreur); }
|
||||
|
||||
/* ---------- chasse aux fautes ---------- */
|
||||
|
||||
.chasse {
|
||||
font-family: var(--police-doc);
|
||||
line-height: 2;
|
||||
background: var(--papier);
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .3rem;
|
||||
padding: 1rem 1.2rem;
|
||||
}
|
||||
.chasse span { cursor: pointer; padding: 0 .1rem; border-bottom: 2px solid transparent; }
|
||||
.chasse span:hover { background: var(--accent-fond); }
|
||||
.chasse span.trouve { background: var(--cible); border-bottom-color: #B8912A; }
|
||||
.chasse span.rate { background: var(--erreur-fond); border-bottom-color: var(--erreur); }
|
||||
.score { font-weight: 600; margin-top: .6rem; }
|
||||
|
||||
/* ---------- quiz ---------- */
|
||||
|
||||
.quiz {
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .4rem;
|
||||
padding: 1.1rem 1.2rem;
|
||||
margin: 1.2rem 0;
|
||||
background: var(--blanc);
|
||||
}
|
||||
.q { margin-bottom: 1.3rem; }
|
||||
.q p { font-weight: 600; margin-bottom: .5rem; }
|
||||
.q label { display: block; padding: .32rem .5rem; cursor: pointer; border-left: 3px solid transparent; }
|
||||
.q label:hover { background: var(--accent-fond); }
|
||||
.q input { margin-right: .5rem; }
|
||||
.q label.bon { background: var(--juste-fond); border-left-color: var(--juste); }
|
||||
.q label.mauvais { background: var(--erreur-fond); border-left-color: var(--erreur); }
|
||||
.verdict { margin-top: .5rem; font-size: .93rem; color: var(--encre-douce); }
|
||||
|
||||
/* ---------- chronomètre de frappe ---------- */
|
||||
|
||||
.chrono {
|
||||
display: flex;
|
||||
gap: 1.2rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: var(--papier);
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .3rem;
|
||||
padding: .9rem 1rem;
|
||||
}
|
||||
.temps {
|
||||
font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
#zone-frappe {
|
||||
width: 100%;
|
||||
min-height: 9rem;
|
||||
font-family: var(--police-doc);
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
padding: .8rem;
|
||||
border: 1px solid var(--trait-fort);
|
||||
border-radius: .3rem;
|
||||
margin-top: .8rem;
|
||||
}
|
||||
|
||||
/* ---------- filtre des raccourcis ---------- */
|
||||
|
||||
#filtre {
|
||||
font: inherit;
|
||||
padding: .45rem .6rem;
|
||||
border: 1px solid var(--trait-fort);
|
||||
border-radius: .3rem;
|
||||
width: min(22rem, 100%);
|
||||
}
|
||||
|
||||
/* ---------- petits écrans ---------- */
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.wrap { grid-template-columns: 1fr; padding: .8rem; }
|
||||
.sommaire-lat {
|
||||
position: static;
|
||||
max-height: none;
|
||||
background: var(--blanc);
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .3rem;
|
||||
}
|
||||
.sommaire-lat a { display: inline-block; border-left: 0; border-bottom: 3px solid transparent; }
|
||||
.sommaire-lat a.on { border-left: 0; border-bottom-color: var(--accent); }
|
||||
}
|
||||
|
||||
@media print {
|
||||
.sommaire-lat, .actions, .chrono, #zone-frappe { display: none; }
|
||||
.feuille { box-shadow: none; border: 0; }
|
||||
.wrap { display: block; padding: 0; }
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
/* ==================================================================
|
||||
Outils communs aux cours de traitement de texte (3e TQ, 4e TQ)
|
||||
------------------------------------------------------------------
|
||||
Trois briques réutilisables d'un module à l'autre :
|
||||
quiz(element, questions) questionnaire à choix, correction immédiate
|
||||
chasse(...) chasse aux fautes dans un texte
|
||||
suivreSommaire() surligne l'entrée courante du sommaire
|
||||
|
||||
Chaque page de module charge ce fichier, puis déclare ses propres
|
||||
données dans un <script> qui lui est propre.
|
||||
================================================================== */
|
||||
|
||||
"use strict";
|
||||
|
||||
/* ---------- questionnaire à choix multiples ----------
|
||||
questions : [{q: énoncé, r: [réponses], b: index de la bonne, e: explication}] */
|
||||
function quiz(el, questions){
|
||||
if (!el) return;
|
||||
el.innerHTML = questions.map(function(q, i){
|
||||
return '<div class="q" data-i="' + i + '"><p>' + (i + 1) + '. ' + q.q + '</p>' +
|
||||
q.r.map(function(r, j){
|
||||
return '<label><input type="radio" name="' + el.id + '-' + i + '" value="' + j + '">' + r + '</label>';
|
||||
}).join('') +
|
||||
'<div class="verdict" role="status" aria-live="polite"></div></div>';
|
||||
}).join('');
|
||||
|
||||
el.addEventListener('change', function(e){
|
||||
var bloc = e.target.closest('.q');
|
||||
var i = +bloc.dataset.i, q = questions[i];
|
||||
bloc.querySelectorAll('label').forEach(function(l, j){
|
||||
l.className = (j === q.b) ? 'bon' : (l.querySelector('input').checked ? 'mauvais' : '');
|
||||
});
|
||||
bloc.querySelector('.verdict').textContent =
|
||||
(+e.target.value === q.b ? 'Exact. ' : 'Non. ') + q.e;
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- chasse aux fautes ----------
|
||||
jetons : [{t: mot, f: true si c'est une faute}] */
|
||||
function chasse(conteneur, scoreEl, resetBtn, solBtn, jetons, total, motFinal){
|
||||
if (!conteneur) return;
|
||||
var trouves = new Set(), rates = new Set();
|
||||
|
||||
function maj(){
|
||||
conteneur.querySelectorAll('span').forEach(function(s){
|
||||
var i = +s.dataset.i;
|
||||
s.className = trouves.has(i) ? 'trouve' : (rates.has(i) ? 'rate' : '');
|
||||
});
|
||||
scoreEl.textContent = trouves.size + ' sur ' + total + ' trouvées' +
|
||||
(rates.size ? ', ' + rates.size + ' clic' + (rates.size > 1 ? 's' : '') + ' à côté' : '') +
|
||||
(trouves.size === total ? '. ' + motFinal : '');
|
||||
}
|
||||
|
||||
conteneur.innerHTML = jetons.map(function(j, i){
|
||||
return '<span data-i="' + i + '">' + j.t + '</span>';
|
||||
}).join(' ');
|
||||
|
||||
conteneur.addEventListener('click', function(e){
|
||||
var s = e.target.closest('span');
|
||||
if (!s) return;
|
||||
var i = +s.dataset.i;
|
||||
if (jetons[i].f) trouves.add(i); else rates.add(i);
|
||||
maj();
|
||||
});
|
||||
resetBtn.addEventListener('click', function(){
|
||||
trouves = new Set(); rates = new Set(); maj();
|
||||
});
|
||||
solBtn.addEventListener('click', function(){
|
||||
jetons.forEach(function(j, i){ if (j.f) trouves.add(i); });
|
||||
rates = new Set(); maj();
|
||||
});
|
||||
|
||||
maj();
|
||||
}
|
||||
|
||||
/* ---------- surlignage de l'entrée courante du sommaire ---------- */
|
||||
function suivreSommaire(){
|
||||
var liens = [].slice.call(document.querySelectorAll('.sommaire-lat a[href^="#"]'));
|
||||
var cibles = liens
|
||||
.map(function(a){ return document.getElementById(a.getAttribute('href').slice(1)); })
|
||||
.filter(Boolean);
|
||||
if (!cibles.length || !window.IntersectionObserver) return;
|
||||
|
||||
var obs = new IntersectionObserver(function(entrees){
|
||||
entrees.forEach(function(en){
|
||||
if (!en.isIntersecting) return;
|
||||
liens.forEach(function(a){
|
||||
a.classList.toggle('on', a.getAttribute('href') === '#' + en.target.id);
|
||||
});
|
||||
});
|
||||
}, { rootMargin: '-10% 0px -80% 0px' });
|
||||
|
||||
cibles.forEach(function(c){ obs.observe(c); });
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', suivreSommaire);
|
||||
@@ -0,0 +1,184 @@
|
||||
/* ==================================================================
|
||||
Composants du moteur d'exercices de la 2e commune.
|
||||
Chargé après assets/theme.css, dont il reprend toutes les couleurs.
|
||||
================================================================== */
|
||||
|
||||
/* ---------- bandeau de score ---------- */
|
||||
|
||||
.score {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
background: var(--blanc);
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .5rem;
|
||||
padding: .8rem 1.1rem 1rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.score__txt { font-size: .95rem; }
|
||||
.score strong { color: var(--accent-encre); }
|
||||
.score .action { margin-top: .7rem; }
|
||||
|
||||
.jauge {
|
||||
height: .7rem;
|
||||
background: var(--accent-fond);
|
||||
border-radius: .35rem;
|
||||
overflow: hidden;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
.jauge span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: var(--juste);
|
||||
transition: width .3s;
|
||||
}
|
||||
|
||||
/* ---------- carte d'exercice ---------- */
|
||||
|
||||
.ex {
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .5rem;
|
||||
padding: 1.1rem 1.2rem 1.2rem;
|
||||
margin: 1.2rem 0;
|
||||
background: var(--blanc);
|
||||
}
|
||||
.ex .consigne {
|
||||
font-family: var(--police-titre);
|
||||
font-weight: 700;
|
||||
font-size: .95rem;
|
||||
color: var(--accent-encre);
|
||||
margin: 0 0 .3rem;
|
||||
max-width: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .3rem 1rem;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.ex .enonce { margin: 0 0 .9rem; }
|
||||
.ex h4 { margin: 0 0 .5rem; color: var(--encre-douce); font-size: .85rem; }
|
||||
|
||||
.minuteur {
|
||||
font-family: var(--police-titre);
|
||||
font-weight: 700;
|
||||
color: var(--erreur);
|
||||
}
|
||||
|
||||
/* ---------- boutons de réponse ---------- */
|
||||
|
||||
.opt, .jeton, .item {
|
||||
font: inherit;
|
||||
font-size: .97rem;
|
||||
display: inline-block;
|
||||
margin: .25rem .35rem .25rem 0;
|
||||
padding: .5rem .8rem;
|
||||
border: 1px solid var(--trait-fort);
|
||||
border-radius: .4rem;
|
||||
background: var(--blanc);
|
||||
color: var(--encre);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
.opt { display: block; width: 100%; }
|
||||
.jeton--bloc { display: block; width: 100%; }
|
||||
.jeton--mini { font-size: .8rem; padding: .2rem .55rem; margin-left: .4rem; }
|
||||
|
||||
.opt:hover:not([disabled]),
|
||||
.jeton:hover:not([disabled]),
|
||||
.item:hover:not([disabled]) { border-color: var(--encre); }
|
||||
|
||||
.opt.choisi, .jeton.choisi, .item.choisi {
|
||||
background: var(--encre);
|
||||
color: var(--papier);
|
||||
border-color: var(--encre);
|
||||
}
|
||||
|
||||
.opt.juste, .jeton.juste, .item.juste {
|
||||
background: var(--juste-fond);
|
||||
border-color: var(--juste);
|
||||
}
|
||||
.opt.faux, .jeton.faux, .item.faux {
|
||||
background: var(--erreur-fond);
|
||||
border-color: var(--erreur);
|
||||
}
|
||||
.opt[disabled], .jeton[disabled], .item[disabled] { cursor: default; }
|
||||
|
||||
/* ---------- tri en paniers ---------- */
|
||||
|
||||
.reserve { margin-bottom: .6rem; }
|
||||
|
||||
.paniers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .8rem;
|
||||
margin-top: .8rem;
|
||||
}
|
||||
.panier {
|
||||
flex: 1 1 11rem;
|
||||
min-height: 6rem;
|
||||
border: 2px dashed var(--trait-fort);
|
||||
border-radius: .5rem;
|
||||
padding: .6rem;
|
||||
background: var(--papier);
|
||||
cursor: pointer;
|
||||
}
|
||||
.panier:hover { border-color: var(--accent); }
|
||||
.panier.vise { border-color: var(--accent); background: var(--accent-fond); }
|
||||
.panier h4 {
|
||||
margin: 0 0 .4rem;
|
||||
font-family: var(--police-titre);
|
||||
font-size: .85rem;
|
||||
color: var(--accent-encre);
|
||||
}
|
||||
|
||||
/* ---------- association en deux colonnes ---------- */
|
||||
|
||||
.deux-col { display: flex; gap: 1.2rem; flex-wrap: wrap; }
|
||||
.deux-col > div { flex: 1 1 14rem; }
|
||||
|
||||
/* ---------- remise en ordre ---------- */
|
||||
|
||||
.liste-ordre { margin-bottom: .6rem; }
|
||||
.item--bloc { display: block; width: 100%; }
|
||||
|
||||
/* ---------- saisie ---------- */
|
||||
|
||||
.court {
|
||||
font: inherit;
|
||||
padding: .5rem .6rem;
|
||||
border: 1px solid var(--trait-fort);
|
||||
border-radius: .4rem;
|
||||
width: 11rem;
|
||||
}
|
||||
|
||||
/* ---------- schéma à zones cliquables ---------- */
|
||||
|
||||
.schema { margin: .4rem 0 .8rem; }
|
||||
.schema svg { max-width: 100%; height: auto; }
|
||||
svg .zone {
|
||||
fill: transparent;
|
||||
stroke: var(--accent-encre);
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
svg .zone:hover { fill: var(--accent-fond); fill-opacity: .55; }
|
||||
svg .zone.juste { fill: var(--juste); fill-opacity: .3; stroke: var(--juste); }
|
||||
svg .zone.faux { fill: var(--erreur); fill-opacity: .3; stroke: var(--erreur); }
|
||||
svg text { font-family: inherit; font-size: 13px; fill: var(--encre); pointer-events: none; }
|
||||
|
||||
/* ---------- verdict ---------- */
|
||||
|
||||
.retour {
|
||||
margin-top: .8rem;
|
||||
font-size: .93rem;
|
||||
padding: .55rem .7rem;
|
||||
border-radius: .4rem;
|
||||
display: none;
|
||||
}
|
||||
.retour--ok { display: block; background: var(--juste-fond); border: 1px solid var(--juste); }
|
||||
.retour--ko { display: block; background: var(--erreur-fond); border: 1px solid var(--erreur); }
|
||||
|
||||
@media print {
|
||||
.score, .ex .action, .panier { display: none; }
|
||||
}
|
||||
@@ -0,0 +1,557 @@
|
||||
/* ==================================================================
|
||||
Moteur d'exercices hors ligne — 2e commune
|
||||
------------------------------------------------------------------
|
||||
Aucune dépendance externe. Chaque page de bloc déclare ses exercices
|
||||
dans window.DATA, un tableau d'objets. Types reconnus :
|
||||
qcm, vf, assoc, tri, ordre, hotspot, calcul, texte, intrus, chrono
|
||||
|
||||
Règle de comptage, la même pour tous les types :
|
||||
un exercice compte pour 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 donc pas de point.
|
||||
================================================================== */
|
||||
|
||||
"use strict";
|
||||
|
||||
var TOTAL = 0, REUSSIS = 0, TERMINES = 0;
|
||||
|
||||
/* ---------- petits utilitaires ---------- */
|
||||
|
||||
function norm(s){
|
||||
return (s || "").toString().toLowerCase()
|
||||
.normalize("NFD").replace(/[̀-ͯ]/g, "")
|
||||
.replace(/[^a-z0-9]/g, "");
|
||||
}
|
||||
|
||||
function el(tag, cls, txt){
|
||||
var e = document.createElement(tag);
|
||||
if (cls) e.className = cls;
|
||||
if (txt !== undefined) e.textContent = txt;
|
||||
return e;
|
||||
}
|
||||
|
||||
function melange(t){
|
||||
var a = t.slice();
|
||||
for (var i = a.length - 1; i > 0; i--){
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var x = a[i]; a[i] = a[j]; a[j] = x;
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
/* ---------- score ---------- */
|
||||
|
||||
function majScore(){
|
||||
var s = document.getElementById("score");
|
||||
if (!s) return;
|
||||
var pct = TOTAL ? Math.round(REUSSIS / TOTAL * 100) : 0;
|
||||
s.querySelector(".score__txt").innerHTML =
|
||||
"Exercices réussis : <strong>" + REUSSIS + " / " + TOTAL + "</strong> (" + pct + " %)" +
|
||||
(TERMINES ? " — " + TERMINES + " terminé" + (TERMINES > 1 ? "s" : "") : "");
|
||||
s.querySelector(".jauge span").style.width = pct + "%";
|
||||
}
|
||||
|
||||
/* Clôture un exercice : affiche le verdict et le compte, une seule fois.
|
||||
Un exercice déjà clos peut encore être rejoué (série chronométrée),
|
||||
mais il ne change plus le score. */
|
||||
function clore(box, reussi, msg){
|
||||
var r = box.querySelector(".retour");
|
||||
r.className = "retour " + (reussi ? "retour--ok" : "retour--ko");
|
||||
r.textContent = (reussi ? "Réussi. " : "Terminé, mais avec des erreurs. ") + (msg || "");
|
||||
if (box.dataset.compte === "1") return;
|
||||
box.dataset.compte = "1";
|
||||
TERMINES++;
|
||||
if (reussi) REUSSIS++;
|
||||
majScore();
|
||||
}
|
||||
|
||||
/* Message intermédiaire : ne clôt pas l'exercice, ne compte pas. */
|
||||
function signaler(box, ok, msg){
|
||||
var r = box.querySelector(".retour");
|
||||
r.className = "retour " + (ok ? "retour--ok" : "retour--ko");
|
||||
r.textContent = msg;
|
||||
}
|
||||
|
||||
/* ---------- cadre commun ---------- */
|
||||
|
||||
function cadre(d){
|
||||
var box = el("article", "ex");
|
||||
box.appendChild(el("p", "consigne", d.consigne || "Exercice"));
|
||||
if (d.enonce) box.appendChild(el("p", "enonce", d.enonce));
|
||||
return box;
|
||||
}
|
||||
|
||||
function finir(box){
|
||||
/* role="status" : le verdict est annoncé aux lecteurs d'écran
|
||||
sans déplacer le focus de l'élève. */
|
||||
var r = el("div", "retour");
|
||||
r.setAttribute("role", "status");
|
||||
r.setAttribute("aria-live", "polite");
|
||||
box.appendChild(r);
|
||||
return box;
|
||||
}
|
||||
|
||||
/* ---------- QCM ---------- */
|
||||
|
||||
function faireQcm(d){
|
||||
var box = cadre(d), fini = false;
|
||||
d.options.forEach(function(txt, i){
|
||||
var b = el("button", "opt", txt);
|
||||
b.type = "button";
|
||||
b.onclick = function(){
|
||||
if (fini) return;
|
||||
fini = true;
|
||||
var ok = (i === d.reponse);
|
||||
b.classList.add(ok ? "juste" : "faux");
|
||||
if (!ok) box.querySelectorAll(".opt")[d.reponse].classList.add("juste");
|
||||
box.querySelectorAll(".opt").forEach(function(o){ o.disabled = true; });
|
||||
clore(box, ok, d.explication || "");
|
||||
};
|
||||
box.appendChild(b);
|
||||
});
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Vrai / Faux ---------- */
|
||||
|
||||
function faireVf(d){
|
||||
var box = cadre(d), fini = false;
|
||||
["Vrai", "Faux"].forEach(function(txt, i){
|
||||
var b = el("button", "jeton", txt);
|
||||
b.type = "button";
|
||||
b.onclick = function(){
|
||||
if (fini) return;
|
||||
fini = true;
|
||||
var ok = ((i === 0) === d.reponse);
|
||||
b.classList.add(ok ? "juste" : "faux");
|
||||
box.querySelectorAll(".jeton").forEach(function(o){ o.disabled = true; });
|
||||
clore(box, ok, d.explication || "");
|
||||
};
|
||||
box.appendChild(b);
|
||||
});
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Association : un clic à gauche, un clic à droite ---------- */
|
||||
|
||||
function faireAssoc(d){
|
||||
var box = cadre(d);
|
||||
var zone = el("div", "deux-col");
|
||||
var g = el("div"), dr = el("div");
|
||||
g.appendChild(el("h4", null, "Colonne A"));
|
||||
dr.appendChild(el("h4", null, "Colonne B"));
|
||||
var choisi = null, trouves = 0, erreurs = 0;
|
||||
var droite = melange(d.paires.map(function(p, i){ return { t: p[1], i: i }; }));
|
||||
|
||||
d.paires.forEach(function(p, i){
|
||||
var b = el("button", "jeton jeton--bloc", p[0]);
|
||||
b.type = "button";
|
||||
b.dataset.i = i;
|
||||
b.onclick = function(){
|
||||
if (b.disabled) return;
|
||||
if (choisi) choisi.classList.remove("choisi");
|
||||
choisi = b; b.classList.add("choisi");
|
||||
};
|
||||
g.appendChild(b);
|
||||
});
|
||||
|
||||
droite.forEach(function(o){
|
||||
var b = el("button", "jeton jeton--bloc", o.t);
|
||||
b.type = "button";
|
||||
b.onclick = function(){
|
||||
if (b.disabled) return;
|
||||
if (!choisi){
|
||||
signaler(box, false, "Choisis d'abord une étiquette dans la colonne A.");
|
||||
return;
|
||||
}
|
||||
var ok = (parseInt(choisi.dataset.i, 10) === o.i);
|
||||
if (ok){
|
||||
choisi.classList.remove("choisi");
|
||||
choisi.classList.add("juste"); b.classList.add("juste");
|
||||
choisi.disabled = true; b.disabled = true;
|
||||
choisi = null; trouves++;
|
||||
if (trouves === d.paires.length){
|
||||
clore(box, erreurs === 0, (d.explication || "") +
|
||||
(erreurs ? " Erreurs : " + erreurs + "." : ""));
|
||||
} else {
|
||||
signaler(box, true, "Bonne association. Il en reste " +
|
||||
(d.paires.length - trouves) + ".");
|
||||
}
|
||||
} else {
|
||||
erreurs++;
|
||||
b.classList.add("faux");
|
||||
setTimeout(function(){ b.classList.remove("faux"); }, 600);
|
||||
signaler(box, false, "Ce n'est pas la bonne correspondance, essaie autre chose.");
|
||||
}
|
||||
};
|
||||
dr.appendChild(b);
|
||||
});
|
||||
|
||||
zone.appendChild(g); zone.appendChild(dr);
|
||||
box.appendChild(zone);
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Tri dans des paniers ----------
|
||||
Les paniers sont des div : un bouton ne peut pas contenir les
|
||||
étiquettes déposées, qui sont elles-mêmes des boutons. On leur
|
||||
donne donc explicitement le rôle, la tabulation et les touches
|
||||
Entrée et Espace, pour qu'ils soient utilisables au clavier. */
|
||||
|
||||
function faireTri(d){
|
||||
var box = cadre(d);
|
||||
var reserve = el("div", "reserve");
|
||||
var choisi = null, places = 0, erreurs = 0;
|
||||
|
||||
melange(d.items).forEach(function(it){
|
||||
var b = el("button", "item", it[0]);
|
||||
b.type = "button";
|
||||
b.dataset.p = it[1];
|
||||
b.onclick = function(){
|
||||
if (b.disabled) return;
|
||||
if (choisi) choisi.classList.remove("choisi");
|
||||
choisi = b; b.classList.add("choisi");
|
||||
signaler(box, true, "« " + it[0] + " » est sélectionné. Choisis maintenant son panier.");
|
||||
};
|
||||
reserve.appendChild(b);
|
||||
});
|
||||
box.appendChild(reserve);
|
||||
|
||||
var paniers = el("div", "paniers");
|
||||
d.paniers.forEach(function(nom, pi){
|
||||
var p = el("div", "panier");
|
||||
p.tabIndex = 0;
|
||||
p.setAttribute("role", "button");
|
||||
p.setAttribute("aria-label", "Panier " + nom);
|
||||
p.appendChild(el("h4", null, nom));
|
||||
|
||||
function deposer(){
|
||||
if (!choisi){
|
||||
signaler(box, false, "Choisis d'abord une étiquette dans la réserve.");
|
||||
return;
|
||||
}
|
||||
var ok = (parseInt(choisi.dataset.p, 10) === pi);
|
||||
if (ok){
|
||||
choisi.classList.remove("choisi");
|
||||
choisi.classList.add("juste");
|
||||
choisi.disabled = true;
|
||||
p.appendChild(choisi);
|
||||
choisi = null; places++;
|
||||
if (places === d.items.length){
|
||||
clore(box, erreurs === 0, (d.explication || "") +
|
||||
(erreurs ? " Erreurs : " + erreurs + "." : ""));
|
||||
} else {
|
||||
signaler(box, true, "Bien classé. Il en reste " + (d.items.length - places) + ".");
|
||||
}
|
||||
} else {
|
||||
erreurs++;
|
||||
p.classList.add("vise");
|
||||
setTimeout(function(){ p.classList.remove("vise"); }, 500);
|
||||
signaler(box, false, "Ce n'est pas le bon panier.");
|
||||
}
|
||||
}
|
||||
|
||||
p.onclick = deposer;
|
||||
p.onkeydown = function(e){
|
||||
if (e.key === "Enter" || e.key === " " || e.key === "Spacebar"){
|
||||
e.preventDefault();
|
||||
deposer();
|
||||
}
|
||||
};
|
||||
paniers.appendChild(p);
|
||||
});
|
||||
box.appendChild(paniers);
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Remise en ordre ---------- */
|
||||
|
||||
function faireOrdre(d){
|
||||
var box = cadre(d);
|
||||
var liste = el("div", "liste-ordre");
|
||||
var ordre = melange(d.etapes.map(function(t, i){ return { t: t, i: i }; }));
|
||||
var fini = false, essais = 0;
|
||||
|
||||
function dessiner(){
|
||||
liste.innerHTML = "";
|
||||
ordre.forEach(function(o, pos){
|
||||
var ligne = el("div", "item item--bloc");
|
||||
ligne.appendChild(document.createTextNode((pos + 1) + ". " + o.t + " "));
|
||||
var up = el("button", "jeton jeton--mini", "monter");
|
||||
var dn = el("button", "jeton jeton--mini", "descendre");
|
||||
up.type = dn.type = "button";
|
||||
up.setAttribute("aria-label", "Monter : " + o.t);
|
||||
dn.setAttribute("aria-label", "Descendre : " + o.t);
|
||||
up.disabled = (pos === 0);
|
||||
dn.disabled = (pos === ordre.length - 1);
|
||||
up.onclick = function(){
|
||||
var x = ordre[pos - 1]; ordre[pos - 1] = ordre[pos]; ordre[pos] = x; dessiner();
|
||||
};
|
||||
dn.onclick = function(){
|
||||
var x = ordre[pos + 1]; ordre[pos + 1] = ordre[pos]; ordre[pos] = x; dessiner();
|
||||
};
|
||||
ligne.appendChild(up); ligne.appendChild(dn);
|
||||
liste.appendChild(ligne);
|
||||
});
|
||||
}
|
||||
dessiner();
|
||||
box.appendChild(liste);
|
||||
|
||||
var v = el("button", "action", "Vérifier l'ordre");
|
||||
v.type = "button";
|
||||
v.onclick = function(){
|
||||
if (fini) return;
|
||||
var ok = ordre.every(function(o, pos){ return o.i === pos; });
|
||||
if (ok){
|
||||
fini = true; v.disabled = true;
|
||||
liste.querySelectorAll(".item").forEach(function(i){ i.classList.add("juste"); });
|
||||
clore(box, essais === 0, (d.explication || "") +
|
||||
(essais ? " Vérifications ratées : " + essais + "." : ""));
|
||||
} else {
|
||||
essais++;
|
||||
signaler(box, false, "L'ordre n'est pas encore correct, déplace encore des lignes.");
|
||||
}
|
||||
};
|
||||
box.appendChild(v);
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Zones cliquables sur schéma ----------
|
||||
Les zones SVG reçoivent tabindex et role pour être atteignables
|
||||
au clavier, comme les boutons du reste de la page. */
|
||||
|
||||
function faireHotspot(d){
|
||||
var box = cadre(d);
|
||||
var wrap = el("div", "schema");
|
||||
wrap.innerHTML = d.svg;
|
||||
box.appendChild(wrap);
|
||||
|
||||
var question = el("p", "enonce");
|
||||
question.setAttribute("role", "status");
|
||||
question.setAttribute("aria-live", "polite");
|
||||
box.appendChild(question);
|
||||
|
||||
var restants = melange(d.zones.slice());
|
||||
var erreurs = 0;
|
||||
|
||||
function demander(){
|
||||
if (!restants.length){
|
||||
question.textContent = "Terminé.";
|
||||
clore(box, erreurs === 0, (d.explication || "") +
|
||||
(erreurs ? " Erreurs : " + erreurs + "." : ""));
|
||||
return;
|
||||
}
|
||||
question.innerHTML = "Clique sur : <strong>" + restants[0] + "</strong>";
|
||||
}
|
||||
|
||||
wrap.querySelectorAll(".zone").forEach(function(z){
|
||||
z.setAttribute("tabindex", "0");
|
||||
z.setAttribute("role", "button");
|
||||
z.setAttribute("aria-label", z.dataset.zone || "zone");
|
||||
function essayer(){
|
||||
if (!restants.length) return;
|
||||
if (z.dataset.zone === restants[0]){
|
||||
z.classList.add("juste");
|
||||
restants.shift();
|
||||
demander();
|
||||
} else {
|
||||
erreurs++;
|
||||
z.classList.add("faux");
|
||||
setTimeout(function(){ z.classList.remove("faux"); }, 500);
|
||||
signaler(box, false, "Ce n'est pas cet élément.");
|
||||
}
|
||||
}
|
||||
z.addEventListener("click", essayer);
|
||||
z.addEventListener("keydown", function(e){
|
||||
if (e.key === "Enter" || e.key === " " || e.key === "Spacebar"){
|
||||
e.preventDefault();
|
||||
essayer();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
demander();
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Calcul ou réponse courte ---------- */
|
||||
|
||||
function faireSaisie(d){
|
||||
var box = cadre(d);
|
||||
var champ = el("input", "court");
|
||||
champ.type = "text";
|
||||
champ.setAttribute("aria-label", d.enonce || d.consigne || "Réponse");
|
||||
var v = el("button", "action", "Vérifier");
|
||||
v.type = "button";
|
||||
var fini = false, essais = 0;
|
||||
|
||||
function verifier(){
|
||||
if (fini) return;
|
||||
var ok;
|
||||
if (d.type === "calcul"){
|
||||
var n = parseFloat(champ.value.replace(",", ".").replace(/[^0-9.\-]/g, ""));
|
||||
ok = !isNaN(n) && Math.abs(n - d.reponse) <= (d.tolerance || 0);
|
||||
} else {
|
||||
ok = d.acceptees.some(function(a){ return norm(a) === norm(champ.value); });
|
||||
}
|
||||
if (ok){
|
||||
fini = true; v.disabled = true; champ.disabled = true;
|
||||
clore(box, essais === 0, (d.explication || "") +
|
||||
(essais ? " Essais ratés : " + essais + "." : ""));
|
||||
} else {
|
||||
essais++;
|
||||
signaler(box, false, d.indice || "Relis la théorie du chapitre et réessaie.");
|
||||
}
|
||||
}
|
||||
|
||||
v.onclick = verifier;
|
||||
champ.onkeydown = function(e){ if (e.key === "Enter"){ e.preventDefault(); verifier(); } };
|
||||
|
||||
box.appendChild(champ);
|
||||
box.appendChild(document.createTextNode(" "));
|
||||
box.appendChild(v);
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Chasse aux affirmations fausses ---------- */
|
||||
|
||||
function faireIntrus(d){
|
||||
var box = cadre(d);
|
||||
var restants = d.items.filter(function(i){ return i[1]; }).length;
|
||||
var erreurs = 0;
|
||||
d.items.forEach(function(it){
|
||||
var b = el("button", "opt", it[0]);
|
||||
b.type = "button";
|
||||
b.onclick = function(){
|
||||
if (b.disabled) return;
|
||||
b.disabled = true;
|
||||
if (it[1]){
|
||||
b.classList.add("juste");
|
||||
restants--;
|
||||
if (restants === 0){
|
||||
clore(box, erreurs === 0, (d.explication || "") +
|
||||
(erreurs ? " Affirmations correctes cliquées par erreur : " + erreurs + "." : ""));
|
||||
} else {
|
||||
signaler(box, true, "Bien vu. Il reste " + restants + " affirmation" +
|
||||
(restants > 1 ? "s" : "") + " fausse" + (restants > 1 ? "s" : "") + ".");
|
||||
}
|
||||
} else {
|
||||
b.classList.add("faux");
|
||||
erreurs++;
|
||||
signaler(box, false, "Cette affirmation est correcte, ce n'est pas un intrus.");
|
||||
}
|
||||
};
|
||||
box.appendChild(b);
|
||||
});
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Série chronométrée ----------
|
||||
Le premier passage fixe le score de l'exercice. Les suivants
|
||||
servent à s'entraîner : ils affichent un résultat mais ne
|
||||
touchent plus au compteur de la page. */
|
||||
|
||||
function faireChrono(d){
|
||||
var box = cadre(d);
|
||||
var minuteur = el("span", "minuteur", "");
|
||||
minuteur.setAttribute("role", "timer");
|
||||
box.querySelector(".consigne").appendChild(minuteur);
|
||||
|
||||
var zone = el("div"); box.appendChild(zone);
|
||||
var idx = 0, bons = 0, temps = d.secondes || 60, timer = null, encours = false;
|
||||
|
||||
var demarrer = el("button", "action", "Démarrer la série");
|
||||
demarrer.type = "button";
|
||||
box.appendChild(demarrer);
|
||||
|
||||
demarrer.onclick = function(){
|
||||
if (encours) return;
|
||||
encours = true;
|
||||
demarrer.hidden = true;
|
||||
idx = 0; bons = 0; temps = d.secondes || 60;
|
||||
minuteur.textContent = temps + " s";
|
||||
timer = setInterval(function(){
|
||||
temps--;
|
||||
minuteur.textContent = temps + " s";
|
||||
if (temps <= 0) terminer();
|
||||
}, 1000);
|
||||
poser();
|
||||
};
|
||||
|
||||
function poser(){
|
||||
zone.innerHTML = "";
|
||||
if (idx >= d.questions.length){ terminer(); return; }
|
||||
var q = d.questions[idx];
|
||||
zone.appendChild(el("p", "enonce", (idx + 1) + ". " + q.enonce));
|
||||
q.options.forEach(function(t, i){
|
||||
var b = el("button", "jeton", t);
|
||||
b.type = "button";
|
||||
b.onclick = function(){
|
||||
if (!encours) return;
|
||||
if (i === q.reponse) bons++;
|
||||
idx++;
|
||||
poser();
|
||||
};
|
||||
zone.appendChild(b);
|
||||
});
|
||||
}
|
||||
|
||||
function terminer(){
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
encours = false;
|
||||
zone.innerHTML = "";
|
||||
var seuil = Math.ceil(d.questions.length * 0.7);
|
||||
var ok = bons >= seuil;
|
||||
var deja = (box.dataset.compte === "1");
|
||||
var detail = "Score : " + bons + " / " + d.questions.length +
|
||||
". Seuil de réussite : " + seuil + ".";
|
||||
if (deja){
|
||||
/* Déjà compté au premier passage : on informe sans toucher au score. */
|
||||
signaler(box, ok, detail + " Ce nouvel essai ne change plus le compteur de la page.");
|
||||
} else {
|
||||
clore(box, ok, detail);
|
||||
}
|
||||
demarrer.textContent = "Recommencer la série";
|
||||
demarrer.hidden = false;
|
||||
}
|
||||
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Construction de la page ---------- */
|
||||
|
||||
var FABRIQUES = {
|
||||
qcm: faireQcm, vf: faireVf, assoc: faireAssoc, tri: faireTri,
|
||||
ordre: faireOrdre, hotspot: faireHotspot, calcul: faireSaisie,
|
||||
texte: faireSaisie, intrus: faireIntrus, chrono: faireChrono
|
||||
};
|
||||
|
||||
function construire(data){
|
||||
var cible = document.getElementById("exercices");
|
||||
if (!cible) return;
|
||||
|
||||
TOTAL = data.length; REUSSIS = 0; TERMINES = 0;
|
||||
|
||||
var s = el("div", "score");
|
||||
s.id = "score";
|
||||
s.appendChild(el("div", "score__txt"));
|
||||
var jauge = el("div", "jauge");
|
||||
jauge.appendChild(el("span"));
|
||||
s.appendChild(jauge);
|
||||
var rz = el("button", "action action--secondaire", "Tout recommencer");
|
||||
rz.type = "button";
|
||||
rz.onclick = function(){ location.reload(); };
|
||||
s.appendChild(rz);
|
||||
cible.parentNode.insertBefore(s, cible);
|
||||
|
||||
data.forEach(function(d){
|
||||
var f = FABRIQUES[d.type];
|
||||
if (f) cible.appendChild(f(d));
|
||||
});
|
||||
majScore();
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", function(){
|
||||
if (window.DATA) construire(window.DATA);
|
||||
});
|
||||
@@ -0,0 +1,297 @@
|
||||
/* ==================================================================
|
||||
Jeux du module A — 2e différenciée
|
||||
Chargé après assets/theme.css, dont il reprend toutes les couleurs.
|
||||
Les jeux sont conçus pour la projection au TBI : cibles larges,
|
||||
contrastes francs, aucun texte sous 0,85 rem.
|
||||
================================================================== */
|
||||
|
||||
/* ---------- séances affichées une par une ---------- */
|
||||
|
||||
section[hidden] { display: none; }
|
||||
|
||||
/* ---------- plan et objectifs de la séance ---------- */
|
||||
|
||||
ol.plan {
|
||||
counter-reset: s;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
ol.plan li {
|
||||
counter-increment: s;
|
||||
position: relative;
|
||||
padding: .45rem 0 .45rem 3rem;
|
||||
border-bottom: 1px solid var(--trait);
|
||||
}
|
||||
ol.plan li::before {
|
||||
content: counter(s);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: .45rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
background: var(--encre);
|
||||
color: var(--papier);
|
||||
font-size: .9rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
ul.but { list-style: none; padding: 0; max-width: var(--lecture); }
|
||||
ul.but li { padding: .35rem 0 .35rem 1.6rem; position: relative; }
|
||||
ul.but li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: .95rem;
|
||||
width: .7rem;
|
||||
height: .7rem;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
/* ---------- carte d'un jeu ---------- */
|
||||
|
||||
.atelier {
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .5rem;
|
||||
margin: 1.2rem 0;
|
||||
background: var(--blanc);
|
||||
overflow: hidden;
|
||||
}
|
||||
.atelier > h4 {
|
||||
margin: 0;
|
||||
padding: .6rem 1rem;
|
||||
background: var(--encre);
|
||||
color: var(--papier);
|
||||
font-family: var(--police-titre);
|
||||
font-size: .95rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
gap: .6rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
.atelier > h4 .num {
|
||||
background: var(--accent);
|
||||
color: var(--encre);
|
||||
font-size: .78rem;
|
||||
padding: .05rem .45rem;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.atelier .corps { padding: 1rem; }
|
||||
.consigne { margin: 0 0 .9rem; font-size: .95rem; max-width: var(--lecture); }
|
||||
|
||||
/* ---------- barre d'état d'un jeu ---------- */
|
||||
|
||||
.barre {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .7rem 1.4rem;
|
||||
align-items: center;
|
||||
margin: .2rem 0 .9rem;
|
||||
font-size: .95rem;
|
||||
}
|
||||
.cible-txt { font-weight: 700; font-size: 1.05rem; }
|
||||
.score { color: var(--encre-douce); font-size: .9rem; }
|
||||
|
||||
/* ---------- boutons de jeu ---------- */
|
||||
|
||||
.vf button,
|
||||
.qcm .choix button,
|
||||
.paires button,
|
||||
.liste button,
|
||||
.etape {
|
||||
font: inherit;
|
||||
background: var(--blanc);
|
||||
color: var(--encre);
|
||||
border: 2px solid var(--encre);
|
||||
border-radius: .3rem;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* ---------- aire de pions (jeu des nombres) ---------- */
|
||||
|
||||
.aire {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 22rem;
|
||||
background: var(--papier);
|
||||
border: 2px solid var(--trait-fort);
|
||||
border-radius: .4rem;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
}
|
||||
.pion {
|
||||
position: absolute;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
text-align: center;
|
||||
font-family: var(--police-titre);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
background: var(--blanc);
|
||||
color: var(--encre);
|
||||
border: 2px solid var(--encre);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 0;
|
||||
}
|
||||
.pion.fait { background: var(--juste); border-color: var(--juste); color: #fff; }
|
||||
.pion.actif { background: var(--cible); border-color: var(--cible); }
|
||||
|
||||
.rate { animation: secousse .25s; }
|
||||
@keyframes secousse { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
|
||||
|
||||
/* ---------- double-clic : les douze boîtes ---------- */
|
||||
|
||||
.boites {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: .7rem;
|
||||
max-width: 34rem;
|
||||
}
|
||||
.boite {
|
||||
aspect-ratio: 1 / 1;
|
||||
border: 2px solid var(--encre);
|
||||
border-radius: .3rem;
|
||||
background: var(--blanc);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.boite.ouverte { background: var(--juste); border-color: var(--juste); }
|
||||
.boite .forme { width: 52%; height: 52%; opacity: 0; }
|
||||
.boite.ouverte .forme { background: #fff; opacity: 1; border-radius: 50%; }
|
||||
|
||||
/* ---------- glisser-déposer dans des bacs ---------- */
|
||||
|
||||
.tri { display: flex; flex-wrap: wrap; gap: 1.2rem; }
|
||||
.reserve {
|
||||
flex: 1 1 16rem;
|
||||
min-height: 8rem;
|
||||
padding: .6rem;
|
||||
border: 2px dashed var(--trait-fort);
|
||||
border-radius: .4rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.bacs { flex: 2 1 22rem; display: flex; gap: .8rem; flex-wrap: wrap; }
|
||||
.bac {
|
||||
flex: 1 1 7rem;
|
||||
min-height: 8rem;
|
||||
border: 2px solid var(--encre);
|
||||
border-radius: .4rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
align-content: flex-start;
|
||||
padding: .5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bac .titre {
|
||||
flex: 1 0 100%;
|
||||
font-size: .85rem;
|
||||
text-align: center;
|
||||
color: var(--encre-douce);
|
||||
}
|
||||
.bac.vise { background: var(--cible-fond); border-color: var(--cible); }
|
||||
|
||||
.jeton {
|
||||
font: inherit;
|
||||
padding: .4rem .65rem;
|
||||
background: var(--blanc);
|
||||
border: 2px solid var(--encre);
|
||||
border-radius: .3rem;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
font-size: .88rem;
|
||||
touch-action: none;
|
||||
}
|
||||
/* Sélection au clic : alternative au glisser pour qui ne maîtrise pas
|
||||
encore le maintien du bouton, et seul moyen au clavier. */
|
||||
.jeton.choisi { background: var(--cible); border-color: var(--cible); }
|
||||
.jeton.pris {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
pointer-events: none;
|
||||
cursor: grabbing;
|
||||
box-shadow: 0 6px 14px rgba(22, 48, 43, .3);
|
||||
}
|
||||
.jeton .glyphe { display: block; width: 2rem; height: 2rem; }
|
||||
|
||||
/* ---------- remise en ordre ---------- */
|
||||
|
||||
.etapes { display: flex; flex-direction: column; gap: .5rem; max-width: 42rem; }
|
||||
.etape { padding: .5rem .75rem; }
|
||||
.etape.placee { background: var(--juste); border-color: var(--juste); color: #fff; cursor: default; }
|
||||
.rang { display: inline-block; min-width: 1.6rem; font-weight: 700; }
|
||||
|
||||
/* ---------- vrai ou faux ---------- */
|
||||
|
||||
.vf { max-width: var(--lecture); }
|
||||
.vf .ligne {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
align-items: center;
|
||||
padding: .5rem 0;
|
||||
border-bottom: 1px solid var(--trait);
|
||||
}
|
||||
.vf .txt { flex: 1 1 18rem; }
|
||||
.vf .verdict { font-size: .85rem; flex: 1 1 100%; }
|
||||
.vf button { padding: .25rem .8rem; }
|
||||
.vf button.choisi { background: var(--encre); color: var(--papier); }
|
||||
|
||||
.juste { color: var(--juste); }
|
||||
.faux { color: var(--erreur); }
|
||||
|
||||
/* ---------- questions à choix ---------- */
|
||||
|
||||
.qcm { max-width: var(--lecture); }
|
||||
.qcm .q { font-weight: 700; margin: .2rem 0 .6rem; }
|
||||
.qcm .choix { display: flex; flex-wrap: wrap; gap: .5rem; }
|
||||
.qcm .choix button { padding: .4rem .85rem; }
|
||||
.qcm .choix button.bon { background: var(--juste); border-color: var(--juste); color: #fff; }
|
||||
.qcm .choix button.mauvais { background: var(--erreur); border-color: var(--erreur); color: #fff; }
|
||||
.qcm .retour { margin-top: .7rem; font-size: .9rem; min-height: 1.4rem; }
|
||||
|
||||
/* ---------- paires à relier ---------- */
|
||||
|
||||
.paires { display: flex; gap: 1rem; flex-wrap: wrap; max-width: var(--lecture); }
|
||||
.paires .col { flex: 1 1 13rem; display: flex; flex-direction: column; gap: .45rem; }
|
||||
.paires button { font-size: .88rem; padding: .45rem .7rem; }
|
||||
.paires button.choisi { background: var(--cible); border-color: var(--cible); }
|
||||
.paires button.liee { background: var(--juste); border-color: var(--juste); color: #fff; cursor: default; }
|
||||
|
||||
/* ---------- parcours de dossiers ---------- */
|
||||
|
||||
.chemin { max-width: 40rem; }
|
||||
.chemin .fil {
|
||||
font-size: .9rem;
|
||||
color: var(--encre-douce);
|
||||
margin-bottom: .6rem;
|
||||
word-break: break-word;
|
||||
}
|
||||
.liste { display: flex; flex-direction: column; gap: .4rem; }
|
||||
.liste button { padding: .45rem .7rem; }
|
||||
.liste button.dossier::before { content: "[dossier] "; color: var(--encre-douce); font-size: .8rem; }
|
||||
.liste button.fichier::before { content: "[fichier] "; color: var(--encre-douce); font-size: .8rem; }
|
||||
|
||||
/* ---------- schémas à zones ---------- */
|
||||
|
||||
figure.schema { margin: 0; max-width: 30rem; }
|
||||
.zone { fill: var(--blanc); stroke: var(--encre); stroke-width: 2; cursor: pointer; }
|
||||
.zone:hover { fill: var(--cible-fond); }
|
||||
.zone.trouve { fill: var(--juste-fond); stroke: var(--juste); }
|
||||
svg text { font-family: inherit; font-size: 11px; fill: var(--encre); pointer-events: none; }
|
||||
|
||||
@media print {
|
||||
section[hidden] { display: block; }
|
||||
.aire, .boites { display: none; }
|
||||
}
|
||||
@@ -0,0 +1,491 @@
|
||||
/* ==================================================================
|
||||
Thème commun de la plateforme « Mes cours » — M. Courcelle
|
||||
------------------------------------------------------------------
|
||||
Une seule feuille pour toute la plateforme : la page d'aiguillage,
|
||||
les index de classe et les pages de module partagent ces jetons,
|
||||
cette typographie et ces composants. Les feuilles spécialisées
|
||||
(exercices-commune.css, jeux-differenciee.css, atelier-texte.css)
|
||||
ne redéfinissent jamais une couleur en dur : elles consomment les
|
||||
variables déclarées ici.
|
||||
|
||||
Pour ajouter une classe :
|
||||
1. un couple --xxx-fond / --xxx-trait / --xxx-encre dans :root ;
|
||||
2. une règle .classe-xxx plus bas ;
|
||||
3. les règles de la tuile (.classe--xxx) dans index.html.
|
||||
================================================================== */
|
||||
|
||||
:root {
|
||||
/* --- encres et papiers ------------------------------------------ */
|
||||
--encre: #16302B; /* texte principal, vert très sombre */
|
||||
--encre-douce: #3E5751; /* texte secondaire, AA sur tous les fonds */
|
||||
--papier: #FBFCFB; /* fond de page */
|
||||
--blanc: #FFFFFF; /* fond des cartes et des champs */
|
||||
--trait: #D5DEDA; /* bordures neutres */
|
||||
--trait-fort: #B3C2BC;
|
||||
|
||||
/* --- couleurs par classe ---------------------------------------- */
|
||||
/* -fond : aplat pâle ; -trait : filet vif, jamais du texte ;
|
||||
-encre : variante sombre du filet, contraste AA pour du texte. */
|
||||
--tc-fond: #FBE1E7; --tc-trait: #D6336C; --tc-encre: #B82A59;
|
||||
--diff-fond: #DDF5EC; --diff-trait: #05BC8A; --diff-encre: #036F51;
|
||||
--comm-fond: #FDF0CF; --comm-trait: #E0A100; --comm-encre: #7F5B00;
|
||||
--ts-fond: #DFEAFB; --ts-trait: #2F6FDB; --ts-encre: #215FC2;
|
||||
--ae-fond: #F1E3F7; --ae-trait: #9B4DCA; --ae-encre: #8840B4;
|
||||
|
||||
/* --- couleurs de verdict ---------------------------------------- */
|
||||
--juste: #1E7A4C;
|
||||
--juste-fond: #E3F3EA;
|
||||
--erreur: #B0322A;
|
||||
--erreur-fond: #F9E5E3;
|
||||
--cible: #F5C542; /* surlignage, marqueur */
|
||||
--cible-fond: #FDF6E1;
|
||||
|
||||
/* --- accent courant --------------------------------------------- */
|
||||
/* Neutre par défaut ; chaque page de classe le remplace en posant
|
||||
une classe .classe-xxx sur <body>. Tout le reste de la plateforme
|
||||
ne connaît que --accent, --accent-fond et --accent-encre. */
|
||||
--accent: var(--encre);
|
||||
--accent-fond: #EDF2F0;
|
||||
--accent-encre: var(--encre);
|
||||
|
||||
/* --- typographie ------------------------------------------------- */
|
||||
--police-titre: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
|
||||
--police-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
--police-doc: Cambria, Georgia, "Times New Roman", serif; /* specimens de traitement de texte */
|
||||
|
||||
/* --- mesures ------------------------------------------------------ */
|
||||
--lecture: 64ch; /* largeur de confort d'un paragraphe */
|
||||
--page: 58rem; /* largeur de la colonne de contenu */
|
||||
--gouttiere: 1.5rem; /* marge latérale, identique partout */
|
||||
--base: 17px;
|
||||
}
|
||||
|
||||
/* Identité de classe : posée sur <body>. */
|
||||
.classe-tc { --accent: var(--tc-trait); --accent-fond: var(--tc-fond); --accent-encre: var(--tc-encre); }
|
||||
.classe-diff { --accent: var(--diff-trait); --accent-fond: var(--diff-fond); --accent-encre: var(--diff-encre); }
|
||||
.classe-comm { --accent: var(--comm-trait); --accent-fond: var(--comm-fond); --accent-encre: var(--comm-encre); }
|
||||
.classe-ts { --accent: var(--ts-trait); --accent-fond: var(--ts-fond); --accent-encre: var(--ts-encre); }
|
||||
.classe-ae { --accent: var(--ae-trait); --accent-fond: var(--ae-fond); --accent-encre: var(--ae-encre); }
|
||||
|
||||
/* ==================================================================
|
||||
Base
|
||||
================================================================== */
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
font-size: var(--base);
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--papier);
|
||||
color: var(--encre);
|
||||
font-family: var(--police-texte);
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* Mode projection : agrandit toute la page d'un coup pour le TBI.
|
||||
Le jeton doit être posé sur <html> et non sur <body> : c'est <html>
|
||||
qui porte font-size, et donc la valeur du rem pour toute la page. */
|
||||
html.projection { --base: 25px; }
|
||||
|
||||
p, ul, ol { max-width: var(--lecture); }
|
||||
p { margin: 0 0 .9rem; }
|
||||
li { margin-bottom: .35rem; }
|
||||
|
||||
a { color: var(--accent-encre); }
|
||||
a:hover { text-decoration-thickness: 2px; }
|
||||
|
||||
strong { font-weight: 600; }
|
||||
|
||||
code, kbd {
|
||||
font-family: ui-monospace, "JetBrains Mono", Consolas, "Courier New", monospace;
|
||||
font-size: .92em;
|
||||
background: var(--accent-fond);
|
||||
padding: .05rem .3rem;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 3px solid var(--accent-encre);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
*, *::before, *::after { animation: none !important; transition: none !important; }
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
En-tête de page
|
||||
Fil d'Ariane, titre, sous-titre, et le filet de couleur de la
|
||||
classe — le même motif que les tuiles de la page d'accueil.
|
||||
================================================================== */
|
||||
|
||||
.entete {
|
||||
background: var(--blanc);
|
||||
border-bottom: .5rem solid var(--accent);
|
||||
}
|
||||
|
||||
.entete__interieur {
|
||||
max-width: calc(var(--page) + 2 * var(--gouttiere));
|
||||
margin: 0 auto;
|
||||
padding: 1rem var(--gouttiere) 1.1rem;
|
||||
}
|
||||
|
||||
.ariane {
|
||||
font-size: .85rem;
|
||||
color: var(--encre-douce);
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.ariane a { color: var(--encre-douce); }
|
||||
.ariane a:hover { color: var(--accent-encre); }
|
||||
.ariane span[aria-hidden] { padding: 0 .35rem; color: var(--trait-fort); }
|
||||
.ariane strong { color: var(--encre); font-weight: 600; }
|
||||
|
||||
.entete h1 {
|
||||
margin: 0;
|
||||
font-family: var(--police-titre);
|
||||
font-size: clamp(1.35rem, 3.2vw, 1.9rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.entete__meta {
|
||||
margin: .35rem 0 0;
|
||||
max-width: none;
|
||||
color: var(--encre-douce);
|
||||
font-size: .95rem;
|
||||
}
|
||||
|
||||
/* Outils à droite du titre (bouton « Agrandir », par exemple) */
|
||||
.entete__barre {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .6rem 1.2rem;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Corps de page
|
||||
================================================================== */
|
||||
|
||||
.contenu {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: calc(var(--page) + 2 * var(--gouttiere));
|
||||
margin: 0 auto;
|
||||
padding: 2rem var(--gouttiere) 4rem;
|
||||
}
|
||||
|
||||
.chapeau {
|
||||
font-size: 1.08rem;
|
||||
color: var(--encre-douce);
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--police-titre);
|
||||
font-size: clamp(1.15rem, 2.6vw, 1.45rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.25;
|
||||
margin: 2.8rem 0 .8rem;
|
||||
padding-top: .8rem;
|
||||
border-top: 2px solid var(--accent);
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
|
||||
.contenu > h2:first-child,
|
||||
section > h2:first-child,
|
||||
.inner > h2:first-child {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--police-titre);
|
||||
font-size: 1.02rem;
|
||||
font-weight: 700;
|
||||
margin: 1.8rem 0 .5rem;
|
||||
color: var(--accent-encre);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: .95rem;
|
||||
font-weight: 600;
|
||||
margin: 1.2rem 0 .4rem;
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Encadrés
|
||||
.encadre rappel neutre
|
||||
.encadre--theorie ce qu'il faut savoir avant de jouer
|
||||
.encadre--cle la règle à retenir
|
||||
.encadre--attention piège fréquent
|
||||
================================================================== */
|
||||
|
||||
.encadre {
|
||||
background: var(--accent-fond);
|
||||
border-left: .4rem solid var(--accent);
|
||||
border-radius: 0 .4rem .4rem 0;
|
||||
padding: .9rem 1.1rem;
|
||||
margin: 1.4rem 0;
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
.encadre > :first-child { margin-top: 0; }
|
||||
.encadre > :last-child { margin-bottom: 0; }
|
||||
.encadre h3 { margin-top: 0; color: var(--encre); }
|
||||
|
||||
.encadre--theorie { background: var(--accent-fond); }
|
||||
.encadre--cle { background: var(--cible-fond); border-left-color: var(--cible); }
|
||||
.encadre--attention { background: var(--erreur-fond); border-left-color: var(--erreur); }
|
||||
|
||||
/* ==================================================================
|
||||
Boutons
|
||||
================================================================== */
|
||||
|
||||
.action {
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
font-size: .95rem;
|
||||
background: var(--encre);
|
||||
color: var(--papier);
|
||||
border: 2px solid var(--encre);
|
||||
border-radius: .4rem;
|
||||
padding: .5rem 1.05rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.action:hover { background: var(--accent-encre); border-color: var(--accent-encre); }
|
||||
|
||||
.action--secondaire {
|
||||
background: var(--blanc);
|
||||
color: var(--encre);
|
||||
}
|
||||
.action--secondaire:hover { background: var(--encre); color: var(--papier); border-color: var(--encre); }
|
||||
|
||||
.action[disabled] { opacity: .5; cursor: default; }
|
||||
.action[disabled]:hover { background: var(--encre); border-color: var(--encre); }
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
flex-wrap: wrap;
|
||||
margin: .9rem 0;
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Sommaire d'un module (bandeau de blocs / de séances)
|
||||
================================================================== */
|
||||
|
||||
.sommaire {
|
||||
background: var(--accent-fond);
|
||||
border-bottom: 1px solid var(--trait);
|
||||
}
|
||||
|
||||
.sommaire__interieur {
|
||||
max-width: calc(var(--page) + 2 * var(--gouttiere));
|
||||
margin: 0 auto;
|
||||
padding: .7rem var(--gouttiere);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .4rem;
|
||||
}
|
||||
|
||||
.sommaire a,
|
||||
.sommaire button {
|
||||
font: inherit;
|
||||
font-size: .9rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: var(--encre);
|
||||
background: var(--blanc);
|
||||
border: 1px solid var(--trait-fort);
|
||||
border-radius: .35rem;
|
||||
padding: .35rem .8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sommaire a:hover,
|
||||
.sommaire button:hover { border-color: var(--encre); }
|
||||
|
||||
.sommaire a[aria-current="page"],
|
||||
.sommaire button[aria-current="true"] {
|
||||
background: var(--encre);
|
||||
border-color: var(--encre);
|
||||
color: var(--papier);
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Index de classe : la liste des modules
|
||||
Un <li class="module"> par module. Voir le gabarit en commentaire
|
||||
dans chaque index de classe.
|
||||
================================================================== */
|
||||
|
||||
.modules {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1.2rem 0 0;
|
||||
max-width: none;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.module { margin: 0; }
|
||||
|
||||
.module__lien {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: .3rem;
|
||||
background: var(--blanc);
|
||||
border: 1px solid var(--trait);
|
||||
border-top: .4rem solid var(--accent);
|
||||
border-radius: .5rem;
|
||||
padding: 1.1rem 1.2rem 1.2rem;
|
||||
color: var(--encre);
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.module__lien:hover { border-color: var(--accent); border-top-color: var(--accent); }
|
||||
.module__lien:hover .module__titre { text-decoration: underline; text-decoration-thickness: 2px; }
|
||||
}
|
||||
|
||||
.module__num {
|
||||
font-family: var(--police-titre);
|
||||
font-size: .78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-encre);
|
||||
}
|
||||
|
||||
.module__titre {
|
||||
font-family: var(--police-titre);
|
||||
font-size: 1.12rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.module__resume {
|
||||
color: var(--encre-douce);
|
||||
font-size: .95rem;
|
||||
margin-top: .2rem;
|
||||
}
|
||||
|
||||
.module__meta {
|
||||
margin-top: auto;
|
||||
padding-top: .8rem;
|
||||
color: var(--encre-douce);
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
/* Module annoncé mais pas encore en ligne : même carte, sans lien. */
|
||||
.module--bientot .module__lien {
|
||||
border-top-color: var(--trait-fort);
|
||||
background: var(--papier);
|
||||
color: var(--encre-douce);
|
||||
cursor: default;
|
||||
}
|
||||
.module--bientot .module__num { color: var(--encre-douce); }
|
||||
|
||||
/* Classe sans aucun module publié */
|
||||
.vide {
|
||||
background: var(--blanc);
|
||||
border: 2px dashed var(--trait-fort);
|
||||
border-radius: .5rem;
|
||||
padding: 2rem 1.5rem;
|
||||
text-align: center;
|
||||
color: var(--encre-douce);
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Tableaux, figures, captures
|
||||
================================================================== */
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
max-width: var(--lecture);
|
||||
margin: 1.2rem 0;
|
||||
font-size: .95rem;
|
||||
}
|
||||
th, td {
|
||||
border-bottom: 1px solid var(--trait);
|
||||
padding: .45rem .6rem;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
th {
|
||||
background: var(--accent-fond);
|
||||
border-bottom: 2px solid var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1.4rem 0;
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
figure img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .3rem;
|
||||
}
|
||||
figcaption {
|
||||
font-size: .86rem;
|
||||
color: var(--encre-douce);
|
||||
margin-top: .4rem;
|
||||
}
|
||||
|
||||
/* Capture pas encore déposée : la page reste lisible et dit quoi ajouter. */
|
||||
.manque {
|
||||
border: 2px dashed var(--trait-fort);
|
||||
background: var(--papier);
|
||||
border-radius: .3rem;
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
color: var(--encre-douce);
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
/* ==================================================================
|
||||
Pied de page
|
||||
================================================================== */
|
||||
|
||||
.pied {
|
||||
border-top: 1px solid var(--trait);
|
||||
background: var(--blanc);
|
||||
color: var(--encre-douce);
|
||||
font-size: .88rem;
|
||||
}
|
||||
.pied__interieur {
|
||||
max-width: calc(var(--page) + 2 * var(--gouttiere));
|
||||
margin: 0 auto;
|
||||
padding: 1.2rem var(--gouttiere) 2rem;
|
||||
}
|
||||
.pied a { color: var(--encre-douce); }
|
||||
|
||||
/* ==================================================================
|
||||
Impression
|
||||
================================================================== */
|
||||
|
||||
@media print {
|
||||
body { background: #fff; }
|
||||
.sommaire, .action, .actions, .entete__barre button { display: none; }
|
||||
.entete { border-bottom-width: 2px; }
|
||||
.contenu { max-width: none; padding: 0; }
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
Déposez ici le site de la 2e commune (Informatique).
|
||||
Son fichier d'accueil doit s'appeler index.html et se trouver directement dans ce dossier.
|
||||
Tous les liens internes du site doivent être relatifs (ex. "css/style.css", pas "/css/style.css"),
|
||||
sinon ils pointeront vers la racine du domaine et casseront.
|
||||
Supprimez ce fichier une fois le site en place.
|
||||
@@ -1,402 +0,0 @@
|
||||
/* Moteur d'exercices hors ligne. Aucune dependance externe.
|
||||
Types supportes : qcm, vf, assoc, tri, ordre, hotspot, calcul, texte, intrus. */
|
||||
|
||||
var TOTAL = 0, REUSSIS = 0, TENTES = 0;
|
||||
|
||||
function norm(s){
|
||||
return (s || "").toString().toLowerCase()
|
||||
.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
|
||||
.replace(/[^a-z0-9]/g, "");
|
||||
}
|
||||
function el(tag, cls, txt){
|
||||
var e = document.createElement(tag);
|
||||
if (cls) e.className = cls;
|
||||
if (txt !== undefined) e.textContent = txt;
|
||||
return e;
|
||||
}
|
||||
function melange(t){
|
||||
var a = t.slice();
|
||||
for (var i = a.length - 1; i > 0; i--){
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var x = a[i]; a[i] = a[j]; a[j] = x;
|
||||
}
|
||||
return a;
|
||||
}
|
||||
function compter(ok){
|
||||
TENTES++; if (ok) REUSSIS++;
|
||||
majScore();
|
||||
}
|
||||
function majScore(){
|
||||
var s = document.getElementById("score");
|
||||
if (!s) return;
|
||||
var pct = TOTAL ? Math.round(REUSSIS / TOTAL * 100) : 0;
|
||||
s.querySelector(".txt").innerHTML = "Exercices reussis : <strong>" + REUSSIS +
|
||||
" / " + TOTAL + "</strong> (" + pct + " %)";
|
||||
s.querySelector(".barre span").style.width = pct + "%";
|
||||
}
|
||||
function retour(box, ok, msg){
|
||||
var r = box.querySelector(".retour");
|
||||
r.className = "retour " + (ok ? "ok" : "ko");
|
||||
r.textContent = (ok ? "Correct. " : "Ce n'est pas cela. ") + (msg || "");
|
||||
}
|
||||
|
||||
function cadre(d){
|
||||
var box = el("article", "ex");
|
||||
var c = el("p", "consigne", d.consigne || "Exercice");
|
||||
box.appendChild(c);
|
||||
if (d.enonce) box.appendChild(el("p", "enonce", d.enonce));
|
||||
return box;
|
||||
}
|
||||
function finir(box){
|
||||
box.appendChild(el("div", "retour"));
|
||||
return box;
|
||||
}
|
||||
|
||||
/* ---------- QCM ---------- */
|
||||
function faireQcm(d){
|
||||
var box = cadre(d), fini = false;
|
||||
d.options.forEach(function(txt, i){
|
||||
var b = el("button", "opt", txt);
|
||||
b.onclick = function(){
|
||||
if (fini) return;
|
||||
fini = true;
|
||||
var ok = (i === d.reponse);
|
||||
b.classList.add(ok ? "juste" : "faux");
|
||||
if (!ok) box.querySelectorAll(".opt")[d.reponse].classList.add("juste");
|
||||
box.querySelectorAll(".opt").forEach(function(o){ o.disabled = true; });
|
||||
retour(box, ok, d.explication || "");
|
||||
compter(ok);
|
||||
};
|
||||
box.appendChild(b);
|
||||
});
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Vrai / Faux ---------- */
|
||||
function faireVf(d){
|
||||
var box = cadre(d), fini = false;
|
||||
["Vrai", "Faux"].forEach(function(txt, i){
|
||||
var b = el("button", "jeton", txt);
|
||||
b.onclick = function(){
|
||||
if (fini) return;
|
||||
fini = true;
|
||||
var ok = ((i === 0) === d.reponse);
|
||||
b.classList.add(ok ? "juste" : "faux");
|
||||
box.querySelectorAll(".jeton").forEach(function(o){ o.disabled = true; });
|
||||
retour(box, ok, d.explication || "");
|
||||
compter(ok);
|
||||
};
|
||||
box.appendChild(b);
|
||||
});
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Association (clic gauche puis clic droit) ---------- */
|
||||
function faireAssoc(d){
|
||||
var box = cadre(d);
|
||||
var zone = el("div", "deux-col");
|
||||
var g = el("div"), dr = el("div");
|
||||
g.appendChild(el("h4", null, "Colonne A"));
|
||||
dr.appendChild(el("h4", null, "Colonne B"));
|
||||
var choisi = null, trouves = 0;
|
||||
var droite = melange(d.paires.map(function(p, i){ return { t: p[1], i: i }; }));
|
||||
d.paires.forEach(function(p, i){
|
||||
var b = el("button", "jeton", p[0]);
|
||||
b.style.display = "block"; b.dataset.i = i;
|
||||
b.onclick = function(){
|
||||
if (b.disabled) return;
|
||||
if (choisi) choisi.classList.remove("choisi");
|
||||
choisi = b; b.classList.add("choisi");
|
||||
};
|
||||
g.appendChild(b);
|
||||
});
|
||||
droite.forEach(function(o){
|
||||
var b = el("button", "jeton", o.t);
|
||||
b.style.display = "block";
|
||||
b.onclick = function(){
|
||||
if (!choisi || b.disabled) return;
|
||||
var ok = (parseInt(choisi.dataset.i, 10) === o.i);
|
||||
if (ok){
|
||||
choisi.classList.remove("choisi");
|
||||
choisi.classList.add("juste"); b.classList.add("juste");
|
||||
choisi.disabled = true; b.disabled = true;
|
||||
choisi = null; trouves++;
|
||||
if (trouves === d.paires.length){
|
||||
retour(box, true, d.explication || "Toutes les paires sont correctes.");
|
||||
compter(true);
|
||||
}
|
||||
} else {
|
||||
b.classList.add("faux");
|
||||
setTimeout(function(){ b.classList.remove("faux"); }, 600);
|
||||
retour(box, false, "Essaie une autre correspondance.");
|
||||
}
|
||||
};
|
||||
dr.appendChild(b);
|
||||
});
|
||||
zone.appendChild(g); zone.appendChild(dr);
|
||||
box.appendChild(zone);
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Tri dans des paniers ---------- */
|
||||
function faireTri(d){
|
||||
var box = cadre(d);
|
||||
var reserve = el("div", "reserve");
|
||||
var choisi = null, places = 0;
|
||||
melange(d.items).forEach(function(it){
|
||||
var b = el("button", "item", it[0]);
|
||||
b.dataset.p = it[1];
|
||||
b.onclick = function(){
|
||||
if (b.disabled) return;
|
||||
if (choisi) choisi.classList.remove("choisi");
|
||||
choisi = b; b.classList.add("choisi");
|
||||
};
|
||||
reserve.appendChild(b);
|
||||
});
|
||||
box.appendChild(reserve);
|
||||
var paniers = el("div", "paniers");
|
||||
d.paniers.forEach(function(nom, pi){
|
||||
var p = el("div", "panier");
|
||||
p.appendChild(el("h4", null, nom));
|
||||
p.onclick = function(){
|
||||
if (!choisi) return;
|
||||
var ok = (parseInt(choisi.dataset.p, 10) === pi);
|
||||
if (ok){
|
||||
choisi.classList.remove("choisi");
|
||||
choisi.classList.add("juste");
|
||||
choisi.disabled = true;
|
||||
p.appendChild(choisi);
|
||||
choisi = null; places++;
|
||||
if (places === d.items.length){
|
||||
retour(box, true, d.explication || "Tout est bien classe.");
|
||||
compter(true);
|
||||
}
|
||||
} else {
|
||||
p.classList.add("vise");
|
||||
setTimeout(function(){ p.classList.remove("vise"); }, 500);
|
||||
retour(box, false, "Ce n'est pas le bon panier.");
|
||||
}
|
||||
};
|
||||
paniers.appendChild(p);
|
||||
});
|
||||
box.appendChild(paniers);
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Remise en ordre ---------- */
|
||||
function faireOrdre(d){
|
||||
var box = cadre(d);
|
||||
var liste = el("div");
|
||||
var ordre = melange(d.etapes.map(function(t, i){ return { t: t, i: i }; }));
|
||||
function dessiner(){
|
||||
liste.innerHTML = "";
|
||||
ordre.forEach(function(o, pos){
|
||||
var ligne = el("div", "item");
|
||||
ligne.style.display = "block";
|
||||
ligne.textContent = (pos + 1) + ". " + o.t;
|
||||
var up = el("button", "jeton", "monter");
|
||||
var dn = el("button", "jeton", "descendre");
|
||||
up.onclick = function(){
|
||||
if (pos === 0) return;
|
||||
var x = ordre[pos - 1]; ordre[pos - 1] = ordre[pos]; ordre[pos] = x; dessiner();
|
||||
};
|
||||
dn.onclick = function(){
|
||||
if (pos === ordre.length - 1) return;
|
||||
var x = ordre[pos + 1]; ordre[pos + 1] = ordre[pos]; ordre[pos] = x; dessiner();
|
||||
};
|
||||
ligne.appendChild(document.createTextNode(" "));
|
||||
ligne.appendChild(up); ligne.appendChild(dn);
|
||||
liste.appendChild(ligne);
|
||||
});
|
||||
}
|
||||
dessiner();
|
||||
box.appendChild(liste);
|
||||
var v = el("button", "action", "Verifier l'ordre");
|
||||
var fini = false;
|
||||
v.onclick = function(){
|
||||
if (fini) return;
|
||||
var ok = ordre.every(function(o, pos){ return o.i === pos; });
|
||||
if (ok){
|
||||
fini = true; v.disabled = true;
|
||||
liste.querySelectorAll(".item").forEach(function(i){ i.classList.add("juste"); });
|
||||
retour(box, true, d.explication || "");
|
||||
compter(true);
|
||||
} else {
|
||||
retour(box, false, "L'ordre n'est pas encore correct, recommence.");
|
||||
}
|
||||
};
|
||||
box.appendChild(v);
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Zones cliquables sur schema ---------- */
|
||||
function faireHotspot(d){
|
||||
var box = cadre(d);
|
||||
var wrap = el("div");
|
||||
wrap.innerHTML = d.svg;
|
||||
box.appendChild(wrap);
|
||||
var question = el("p", "enonce");
|
||||
box.appendChild(question);
|
||||
var restants = melange(d.zones.slice());
|
||||
var trouves = 0;
|
||||
function demander(){
|
||||
if (!restants.length){
|
||||
retour(box, true, d.explication || "Toutes les zones ont ete trouvees.");
|
||||
compter(true);
|
||||
question.textContent = "Termine.";
|
||||
return;
|
||||
}
|
||||
question.innerHTML = "Clique sur : <strong>" + restants[0] + "</strong>";
|
||||
}
|
||||
wrap.querySelectorAll(".zone").forEach(function(z){
|
||||
z.addEventListener("click", function(){
|
||||
if (!restants.length) return;
|
||||
if (z.dataset.zone === restants[0]){
|
||||
z.classList.add("juste");
|
||||
restants.shift(); trouves++;
|
||||
demander();
|
||||
} else {
|
||||
z.classList.add("faux");
|
||||
setTimeout(function(){ z.classList.remove("faux"); }, 500);
|
||||
retour(box, false, "Ce n'est pas cet element.");
|
||||
}
|
||||
});
|
||||
});
|
||||
demander();
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Calcul ou reponse courte ---------- */
|
||||
function faireSaisie(d){
|
||||
var box = cadre(d);
|
||||
var champ = el("input", "court");
|
||||
champ.type = "text";
|
||||
var v = el("button", "action", "Verifier");
|
||||
var fini = false;
|
||||
v.onclick = function(){
|
||||
if (fini) return;
|
||||
var ok;
|
||||
if (d.type === "calcul"){
|
||||
var n = parseFloat(champ.value.replace(",", ".").replace(/[^0-9.\-]/g, ""));
|
||||
ok = !isNaN(n) && Math.abs(n - d.reponse) <= (d.tolerance || 0);
|
||||
} else {
|
||||
ok = d.acceptees.some(function(a){ return norm(a) === norm(champ.value); });
|
||||
}
|
||||
if (ok){
|
||||
fini = true; v.disabled = true; champ.disabled = true;
|
||||
retour(box, true, d.explication || "");
|
||||
compter(true);
|
||||
} else {
|
||||
retour(box, false, d.indice || "Relis la theorie du chapitre et reessaie.");
|
||||
}
|
||||
};
|
||||
box.appendChild(champ);
|
||||
box.appendChild(document.createTextNode(" "));
|
||||
box.appendChild(v);
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Chasse a l'intrus (plusieurs affirmations fausses) ---------- */
|
||||
function faireIntrus(d){
|
||||
var box = cadre(d);
|
||||
var restants = d.items.filter(function(i){ return i[1]; }).length;
|
||||
var erreurs = 0;
|
||||
d.items.forEach(function(it){
|
||||
var b = el("button", "opt", it[0]);
|
||||
b.onclick = function(){
|
||||
if (b.disabled) return;
|
||||
b.disabled = true;
|
||||
if (it[1]){
|
||||
b.classList.add("juste");
|
||||
restants--;
|
||||
if (restants === 0){
|
||||
retour(box, erreurs === 0, d.explication || "");
|
||||
compter(erreurs === 0);
|
||||
}
|
||||
} else {
|
||||
b.classList.add("faux");
|
||||
erreurs++;
|
||||
retour(box, false, "Cette affirmation est correcte, ce n'est pas un intrus.");
|
||||
}
|
||||
};
|
||||
box.appendChild(b);
|
||||
});
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Serie chronometree ---------- */
|
||||
function faireChrono(d){
|
||||
var box = cadre(d);
|
||||
var minuteur = el("span", "chrono", "");
|
||||
box.querySelector(".consigne").appendChild(minuteur);
|
||||
var zone = el("div"); box.appendChild(zone);
|
||||
var idx = 0, bons = 0, temps = d.secondes || 60, timer = null, encours = false;
|
||||
|
||||
var demarrer = el("button", "action", "Demarrer la serie");
|
||||
box.appendChild(demarrer);
|
||||
demarrer.onclick = function(){
|
||||
if (encours) return;
|
||||
encours = true; demarrer.style.display = "none";
|
||||
idx = 0; bons = 0; temps = d.secondes || 60;
|
||||
minuteur.textContent = temps + " s";
|
||||
timer = setInterval(function(){
|
||||
temps--; minuteur.textContent = temps + " s";
|
||||
if (temps <= 0) terminer();
|
||||
}, 1000);
|
||||
poser();
|
||||
};
|
||||
function poser(){
|
||||
zone.innerHTML = "";
|
||||
if (idx >= d.questions.length){ terminer(); return; }
|
||||
var q = d.questions[idx];
|
||||
zone.appendChild(el("p", "enonce", (idx + 1) + ". " + q.enonce));
|
||||
q.options.forEach(function(t, i){
|
||||
var b = el("button", "jeton", t);
|
||||
b.onclick = function(){
|
||||
if (i === q.reponse) bons++;
|
||||
idx++; poser();
|
||||
};
|
||||
zone.appendChild(b);
|
||||
});
|
||||
}
|
||||
function terminer(){
|
||||
clearInterval(timer); encours = false;
|
||||
zone.innerHTML = "";
|
||||
var seuil = Math.ceil(d.questions.length * 0.7);
|
||||
var ok = bons >= seuil;
|
||||
retour(box, ok, "Score : " + bons + " / " + d.questions.length +
|
||||
". Seuil de reussite : " + seuil + ".");
|
||||
compter(ok);
|
||||
demarrer.textContent = "Recommencer la serie";
|
||||
demarrer.style.display = "inline-block";
|
||||
}
|
||||
return finir(box);
|
||||
}
|
||||
|
||||
/* ---------- Construction de la page ---------- */
|
||||
var FABRIQUES = {
|
||||
qcm: faireQcm, vf: faireVf, assoc: faireAssoc, tri: faireTri,
|
||||
ordre: faireOrdre, hotspot: faireHotspot, calcul: faireSaisie,
|
||||
texte: faireSaisie, intrus: faireIntrus, chrono: faireChrono
|
||||
};
|
||||
|
||||
function construire(data){
|
||||
var cible = document.getElementById("exercices");
|
||||
TOTAL = data.length; REUSSIS = 0; TENTES = 0;
|
||||
var s = el("div", "score");
|
||||
s.id = "score";
|
||||
var t = el("div", "txt"); s.appendChild(t);
|
||||
var b = el("div", "barre"); b.appendChild(el("span")); s.appendChild(b);
|
||||
var rz = el("button", "action secondaire", "Tout recommencer");
|
||||
rz.onclick = function(){ location.reload(); };
|
||||
s.appendChild(rz);
|
||||
cible.parentNode.insertBefore(s, cible);
|
||||
data.forEach(function(d){
|
||||
var f = FABRIQUES[d.type];
|
||||
if (f) cible.appendChild(f(d));
|
||||
});
|
||||
majScore();
|
||||
}
|
||||
window.addEventListener("DOMContentLoaded", function(){
|
||||
if (window.DATA) construire(window.DATA);
|
||||
});
|
||||
@@ -1,98 +0,0 @@
|
||||
:root{
|
||||
--bleu:#1f4e79;
|
||||
--bleu-clair:#dbe7f3;
|
||||
--vert:#2e7d32;
|
||||
--rouge:#c62828;
|
||||
--gris:#f4f5f7;
|
||||
--bordure:#c9d2dc;
|
||||
--texte:#1c2733;
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
body{
|
||||
margin:0;
|
||||
font-family:"Segoe UI",Calibri,Arial,sans-serif;
|
||||
font-size:17px;
|
||||
line-height:1.55;
|
||||
color:var(--texte);
|
||||
background:#fff;
|
||||
}
|
||||
header.site{
|
||||
background:var(--bleu);
|
||||
color:#fff;
|
||||
padding:14px 24px;
|
||||
}
|
||||
header.site h1{margin:0;font-size:1.35rem}
|
||||
header.site p{margin:4px 0 0;font-size:.9rem;opacity:.85}
|
||||
nav.blocs{
|
||||
display:flex;flex-wrap:wrap;gap:6px;
|
||||
background:var(--bleu-clair);
|
||||
padding:8px 24px;
|
||||
border-bottom:2px solid var(--bordure);
|
||||
}
|
||||
nav.blocs a{
|
||||
text-decoration:none;color:var(--bleu);font-weight:600;
|
||||
padding:6px 12px;border-radius:4px;background:#fff;
|
||||
border:1px solid var(--bordure);font-size:.92rem;
|
||||
}
|
||||
nav.blocs a.actif{background:var(--bleu);color:#fff}
|
||||
main{max-width:900px;margin:0 auto;padding:24px}
|
||||
h2{color:var(--bleu);border-bottom:2px solid var(--bleu-clair);padding-bottom:6px;margin-top:38px}
|
||||
h3{color:var(--bleu);margin-bottom:6px}
|
||||
.theorie{
|
||||
background:var(--gris);
|
||||
border-left:5px solid var(--bleu);
|
||||
padding:14px 18px;border-radius:0 6px 6px 0;margin:18px 0;
|
||||
}
|
||||
.theorie h3{margin-top:0}
|
||||
.theorie ul{margin:8px 0 0 18px}
|
||||
.ex{
|
||||
border:1px solid var(--bordure);
|
||||
border-radius:8px;padding:16px 18px;margin:18px 0;
|
||||
background:#fff;
|
||||
}
|
||||
.ex .consigne{font-weight:700;margin:0 0 4px;color:var(--bleu)}
|
||||
.ex .enonce{margin:0 0 12px}
|
||||
.opt,.jeton,.cible,.item{
|
||||
display:inline-block;margin:4px 6px 4px 0;padding:8px 13px;
|
||||
border:1px solid var(--bordure);border-radius:6px;background:#fff;
|
||||
cursor:pointer;font-size:.97rem;
|
||||
}
|
||||
.opt{display:block;width:100%;text-align:left}
|
||||
.opt:hover,.jeton:hover,.item:hover{background:var(--bleu-clair)}
|
||||
.opt.juste,.jeton.juste,.item.juste{background:#e3f4e4;border-color:var(--vert)}
|
||||
.opt.faux,.jeton.faux,.item.faux{background:#fbe3e3;border-color:var(--rouge)}
|
||||
.opt.choisi,.jeton.choisi{background:var(--bleu);color:#fff;border-color:var(--bleu)}
|
||||
.opt[disabled],.jeton[disabled]{cursor:default}
|
||||
.paniers{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
|
||||
.panier{
|
||||
flex:1 1 180px;min-height:90px;border:2px dashed var(--bordure);
|
||||
border-radius:8px;padding:8px;background:var(--gris);
|
||||
}
|
||||
.panier h4{margin:0 0 6px;font-size:.92rem;color:var(--bleu)}
|
||||
.panier.vise{border-color:var(--bleu);background:var(--bleu-clair)}
|
||||
.deux-col{display:flex;gap:18px;flex-wrap:wrap}
|
||||
.deux-col>div{flex:1 1 220px}
|
||||
.retour{margin-top:10px;font-size:.93rem;padding:8px 10px;border-radius:6px;display:none}
|
||||
.retour.ok{display:block;background:#e3f4e4;border:1px solid var(--vert)}
|
||||
.retour.ko{display:block;background:#fbe3e3;border:1px solid var(--rouge)}
|
||||
.chrono{float:right;font-weight:700;color:var(--rouge)}
|
||||
.barre{height:12px;background:var(--bordure);border-radius:6px;overflow:hidden;margin:6px 0 0}
|
||||
.barre span{display:block;height:100%;background:var(--vert);width:0;transition:width .3s}
|
||||
.score{
|
||||
position:sticky;top:0;z-index:5;background:#fff;
|
||||
border:1px solid var(--bordure);border-radius:8px;padding:10px 14px;margin-bottom:10px;
|
||||
}
|
||||
.score strong{color:var(--bleu)}
|
||||
button.action{
|
||||
background:var(--bleu);color:#fff;border:none;border-radius:6px;
|
||||
padding:9px 15px;font-size:.95rem;cursor:pointer;margin-top:10px;
|
||||
}
|
||||
button.action.secondaire{background:#fff;color:var(--bleu);border:1px solid var(--bleu)}
|
||||
svg .zone{fill:#ffffff00;stroke:var(--bleu);stroke-width:2;cursor:pointer}
|
||||
svg .zone:hover{fill:#1f4e7933}
|
||||
svg .zone.juste{fill:#2e7d3255;stroke:var(--vert)}
|
||||
svg .zone.faux{fill:#c6282855;stroke:var(--rouge)}
|
||||
svg text{font-size:13px;fill:var(--texte);font-family:inherit}
|
||||
input.court{padding:8px;border:1px solid var(--bordure);border-radius:6px;font-size:1rem;width:160px}
|
||||
footer{margin:40px 0 0;padding:16px 24px;background:var(--gris);border-top:2px solid var(--bordure);font-size:.85rem}
|
||||
@media print{nav.blocs,button.action{display:none}}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,42 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Module 1 - accueil</title>
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="site">
|
||||
<h1>Module 1 : la machine et son vocabulaire</h1>
|
||||
<p>Activite complementaire EPT Informatique, 2e commune, M. Courcelle</p>
|
||||
</header>
|
||||
<nav class="blocs"><a href="index.html" class="actif">Accueil</a><a href="bloc2.html">Bloc 2</a><a href="bloc3.html">Bloc 3</a><a href="bloc4.html">Bloc 4</a><a href="bloc5.html">Bloc 5</a><a href="bloc6.html">Bloc 6</a></nav>
|
||||
<main>
|
||||
<h2>Accueil</h2>
|
||||
|
||||
<p>Ce site accompagne le module 1 du cours. Chaque page correspond a un bloc de deux periodes
|
||||
et reprend d'abord la theorie du chapitre, puis les exercices et les jeux.</p>
|
||||
<p>Toutes les notions utilisees dans les jeux figurent dans le cours papier. Si tu bloques,
|
||||
la reponse est dans ton cours, au chapitre indique en bas de page.</p>
|
||||
<div class="theorie"><h3>Les cinq blocs</h3><ul>
|
||||
<li><strong>Bloc 2</strong> : ce qui compose un ordinateur, chapitre 1</li>
|
||||
<li><strong>Bloc 3</strong> : les ports de connexion, chapitre 2</li>
|
||||
<li><strong>Bloc 4</strong> : allumer, verrouiller, eteindre, chapitre 3</li>
|
||||
<li><strong>Bloc 5</strong> : se reperer dans Windows, chapitre 4</li>
|
||||
<li><strong>Bloc 6</strong> : memoire vive et stockage, chapitre 5</li>
|
||||
</ul></div>
|
||||
<div class="theorie"><h3>Comment ca marche</h3><ul>
|
||||
<li>Le compteur en haut de page indique combien d'exercices tu as reussis.</li>
|
||||
<li>Pour les associations et les tris : clique d'abord sur l'etiquette, puis sur sa destination.</li>
|
||||
<li>Les series chronometrees demandent au moins 70 pour cent de bonnes reponses.</li>
|
||||
<li>Le bouton "Tout recommencer" remet la page a zero.</li>
|
||||
</ul></div>
|
||||
<p>Le site fonctionne sans connexion Internet. Il peut etre lance depuis une cle USB.</p>
|
||||
|
||||
|
||||
</main>
|
||||
<footer>Support d'exercices hors ligne. Toute la theorie utilisee ici figure dans le cours papier, chapitre .</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Vendored
BIN
Binary file not shown.
@@ -1,5 +0,0 @@
|
||||
Déposez ici le site de la 2e différenciée (Initiation à l'informatique).
|
||||
Son fichier d'accueil doit s'appeler index.html et se trouver directement dans ce dossier.
|
||||
Tous les liens internes du site doivent être relatifs (ex. "css/style.css", pas "/css/style.css"),
|
||||
sinon ils pointeront vers la racine du domaine et casseront.
|
||||
Supprimez ce fichier une fois le site en place.
|
||||
+103
-89
@@ -3,66 +3,46 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Informatique en 2e | M. Courcelle</title>
|
||||
<meta name="description" content="Choisis ta classe pour accéder au cours d'informatique de 2e secondaire.">
|
||||
<!-- Pas d'indexation : page destinée aux élèves, pas au public. -->
|
||||
<title>Mes cours | M. Courcelle</title>
|
||||
<meta name="description" content="Choisis ta classe pour accéder à ton cours.">
|
||||
<!-- Pas d'indexation : pages destinées aux élèves, pas au public. -->
|
||||
<meta name="robots" content="noindex">
|
||||
|
||||
<!--
|
||||
Mêmes polices que courcellematthi.eu pour garder une identité commune.
|
||||
Si le réseau de l'école bloque Google Fonts, les polices de secours
|
||||
prennent le relais sans casser la mise en page.
|
||||
déclarées dans assets/theme.css prennent le relais sans casser la page.
|
||||
-->
|
||||
<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">
|
||||
|
||||
<!-- Jetons de couleur, typographie et composants communs à toute la plateforme. -->
|
||||
<link rel="stylesheet" href="assets/theme.css">
|
||||
|
||||
<style>
|
||||
/* ------------------------------------------------------------------
|
||||
Jetons de design
|
||||
Mode clair uniquement, comme le site principal.
|
||||
Le vert #05BC8A n'est jamais utilisé pour du texte (contraste
|
||||
insuffisant sur fond clair) : il sert de fond et de filet.
|
||||
Chaque classe reçoit sa propre couleur pour que les élèves
|
||||
repèrent leur côté d'un coup d'œil, même au fond de la classe
|
||||
devant le TBI.
|
||||
Mise en page propre à l'aiguillage : cinq tuiles pleine hauteur.
|
||||
Les couleurs viennent de assets/theme.css (--tc-fond, --tc-trait…).
|
||||
Pour ajouter une classe : un couple de jetons dans theme.css, une
|
||||
règle .classe--xxx ici, et un bloc <a> dans le HTML plus bas.
|
||||
------------------------------------------------------------------ */
|
||||
:root {
|
||||
--encre: #16302B; /* texte principal, vert très sombre */
|
||||
--encre-douce: #3E5751; /* texte secondaire, contraste AA sur les deux fonds */
|
||||
--papier: #FBFCFB; /* fond de l'en-tête et du pied */
|
||||
|
||||
--diff-fond: #DDF5EC; /* 2e différenciée : dérivé du vert de marque */
|
||||
--diff-trait: #05BC8A;
|
||||
|
||||
--comm-fond: #FDF0CF; /* 2e commune : jaune chaud, bien distinct du vert */
|
||||
--comm-trait: #E0A100;
|
||||
|
||||
--police-titre: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
|
||||
--police-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
/* La page occupe exactement l'écran : en-tête, deux moitiés, pied.
|
||||
height: 100% plutôt que 100vh pour éviter le débordement
|
||||
des barres d'adresse mobiles. */
|
||||
html, body { height: 100%; margin: 0; }
|
||||
|
||||
/* min-height et non height : avec cinq classes, la page peut dépasser
|
||||
l'écran sur un petit appareil et doit alors défiler. */
|
||||
html { height: 100%; }
|
||||
body {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--papier);
|
||||
color: var(--encre);
|
||||
font-family: var(--police-texte);
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------
|
||||
En-tête : sobre, il ne fait qu'identifier le cours et le prof.
|
||||
En-tête : sobre, il identifie seulement le prof et l'année.
|
||||
------------------------------------------------------------------ */
|
||||
.entete {
|
||||
.accueil-entete {
|
||||
padding: 1.25rem 1.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -71,7 +51,7 @@
|
||||
gap: 0.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.entete h1 {
|
||||
.accueil-entete h1 {
|
||||
margin: 0;
|
||||
font-family: var(--police-titre);
|
||||
font-size: 1.25rem;
|
||||
@@ -79,84 +59,97 @@
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.entete p {
|
||||
.accueil-entete p {
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
color: var(--encre-douce);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------
|
||||
Aiguillage : deux moitiés côte à côte.
|
||||
Chaque moitié est un lien entier, pour offrir la plus grande
|
||||
zone de clic possible (doigt sur le TBI, souris imprécise).
|
||||
Aiguillage : grille de 6 colonnes sur grand écran.
|
||||
Première ligne : le 1er degré (1re, 2e différenciée, 2e commune),
|
||||
chaque case occupe 2 colonnes, donc un tiers de la largeur.
|
||||
Seconde ligne : le qualifiant (3e et 4e TQ), chaque case occupe
|
||||
3 colonnes, donc la moitié de la largeur.
|
||||
Chaque case est un lien entier, pour offrir la plus grande zone
|
||||
de clic possible (doigt sur le TBI, souris imprécise).
|
||||
------------------------------------------------------------------ */
|
||||
.aiguillage {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-auto-rows: minmax(15rem, 1fr);
|
||||
}
|
||||
|
||||
.classe--tc, .classe--diff, .classe--comm { grid-column: span 2; }
|
||||
.classe--ts, .classe--ae { grid-column: span 3; }
|
||||
|
||||
.classe {
|
||||
flex: 1 1 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 2rem 1.5rem 2.5rem;
|
||||
padding: 2rem 1.5rem 1.75rem;
|
||||
color: var(--encre);
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.classe--diff { background: var(--diff-fond); }
|
||||
.classe--comm { background: var(--comm-fond); }
|
||||
|
||||
/* Filet de couleur vive en haut de chaque moitié */
|
||||
/* Filet de couleur vive en haut de chaque case */
|
||||
.classe::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 0 auto 0;
|
||||
height: 0.5rem;
|
||||
}
|
||||
.classe--diff::before { background: var(--diff-trait); }
|
||||
.classe--comm::before { background: var(--comm-trait); }
|
||||
|
||||
/* Le nom de la classe est l'élément fort de la page :
|
||||
très grand, pour être lisible depuis le fond du local. */
|
||||
.classe--tc { background: var(--tc-fond); }
|
||||
.classe--tc::before { background: var(--tc-trait); }
|
||||
.classe--diff { background: var(--diff-fond); }
|
||||
.classe--diff::before { background: var(--diff-trait); }
|
||||
.classe--comm { background: var(--comm-fond); }
|
||||
.classe--comm::before { background: var(--comm-trait); }
|
||||
.classe--ts { background: var(--ts-fond); }
|
||||
.classe--ts::before { background: var(--ts-trait); }
|
||||
.classe--ae { background: var(--ae-fond); }
|
||||
.classe--ae::before { background: var(--ae-trait); }
|
||||
|
||||
/* Le nom de la classe est l'élément fort de la page.
|
||||
Taille calculée pour que le mot le plus long (« différenciée »,
|
||||
12 caractères à chasse fixe) tienne sur une ligne dans un tiers
|
||||
de largeur d'écran. Les noms en deux mots (« tronc commun »,
|
||||
« Technique sociale ») peuvent passer sur deux lignes. */
|
||||
.classe__nom {
|
||||
margin: 0;
|
||||
font-family: var(--police-titre);
|
||||
font-weight: 700;
|
||||
/* Taille calculée pour que « différenciée » (12 caractères à chasse
|
||||
fixe) tienne sur une ligne dans une demi-largeur d'écran. */
|
||||
font-size: clamp(2.25rem, 5vw, 4.5rem);
|
||||
line-height: 0.95;
|
||||
font-size: clamp(2rem, 3.6vw, 3.25rem);
|
||||
line-height: 1;
|
||||
letter-spacing: -0.03em;
|
||||
hyphens: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* « 2e » sur sa propre ligne, plus discret que le nom de la filière */
|
||||
/* Niveau (« 2e », « 3e TQ ») sur sa propre ligne, plus discret */
|
||||
.classe__niveau {
|
||||
display: block;
|
||||
margin-bottom: 0.1em;
|
||||
color: var(--encre-douce);
|
||||
}
|
||||
|
||||
.classe__cours {
|
||||
margin: 1rem 0 0;
|
||||
font-size: clamp(1.125rem, 1.8vw, 1.375rem);
|
||||
margin: 0.75rem 0 0;
|
||||
max-width: none;
|
||||
font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.classe__detail {
|
||||
margin: 0.25rem 0 0;
|
||||
max-width: 34ch;
|
||||
color: var(--encre-douce);
|
||||
}
|
||||
|
||||
/* Faux bouton : purement visuel, c'est toute la moitié qui est cliquable */
|
||||
/* Faux bouton : purement visuel, c'est toute la case qui est cliquable */
|
||||
.classe__action {
|
||||
align-self: flex-start;
|
||||
margin-top: 1.5rem;
|
||||
padding: 0.7rem 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
padding: 0.6rem 1.15rem;
|
||||
border: 2px solid var(--encre);
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
@@ -178,56 +171,77 @@
|
||||
/* ------------------------------------------------------------------
|
||||
Pied de page
|
||||
------------------------------------------------------------------ */
|
||||
.pied {
|
||||
.accueil-pied {
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--encre-douce);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------
|
||||
Mobile : les deux moitiés s'empilent.
|
||||
Mobile : les cinq cases s'empilent.
|
||||
Même point de rupture que courcellematthi.eu (56rem).
|
||||
------------------------------------------------------------------ */
|
||||
@media (max-width: 56rem) {
|
||||
.aiguillage { flex-direction: column; }
|
||||
.classe { padding: 1.75rem 1.25rem 2rem; }
|
||||
.classe__nom { font-size: clamp(2rem, 10vw, 3.5rem); }
|
||||
.aiguillage {
|
||||
grid-template-columns: 1fr;
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
.classe--tc, .classe--diff, .classe--comm,
|
||||
.classe--ts, .classe--ae { grid-column: auto; }
|
||||
.classe { padding: 1.75rem 1.25rem 1.5rem; }
|
||||
.classe__nom { font-size: clamp(2rem, 9.5vw, 3.25rem); }
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="entete">
|
||||
<h1>Informatique en 2e</h1>
|
||||
<header class="accueil-entete">
|
||||
<h1>Mes cours</h1>
|
||||
<p>M. Courcelle, année 2026-2027</p>
|
||||
</header>
|
||||
|
||||
<!--
|
||||
Les liens sont relatifs ("differenciee/" et non "/differenciee/") :
|
||||
la page fonctionne donc à la racine d'un sous-domaine comme dans
|
||||
un sous-dossier (courcellematthi.eu/2e/), sans rien modifier.
|
||||
Les liens sont relatifs ("2e-commune/index.html" et non "/2e-commune/…") :
|
||||
la page fonctionne à la racine d'un sous-domaine, dans un sous-dossier
|
||||
(courcellematthi.eu/cours/) et depuis une clé USB, sans rien modifier.
|
||||
Chaque lien mène à l'index de la classe, qui liste ses modules.
|
||||
-->
|
||||
<main class="aiguillage" aria-label="Choix de la classe">
|
||||
|
||||
<a class="classe classe--diff" href="differenciee/">
|
||||
<h2 class="classe__nom"><span class="classe__niveau">2e</span>différenciée</h2>
|
||||
<p class="classe__cours">Initiation à l'informatique</p>
|
||||
<p class="classe__detail">Pour les élèves de 2e différenciée.</p>
|
||||
<a class="classe classe--tc" href="1re-numerique/index.html">
|
||||
<h2 class="classe__nom"><span class="classe__niveau">1re</span>tronc commun</h2>
|
||||
<p class="classe__cours">Numérique</p>
|
||||
<span class="classe__action">Ouvrir mon cours</span>
|
||||
</a>
|
||||
|
||||
<a class="classe classe--comm" href="commune/">
|
||||
<a class="classe classe--diff" href="2e-differenciee/index.html">
|
||||
<h2 class="classe__nom"><span class="classe__niveau">2e</span>différenciée</h2>
|
||||
<p class="classe__cours">Initiation à l'informatique</p>
|
||||
<span class="classe__action">Ouvrir mon cours</span>
|
||||
</a>
|
||||
|
||||
<a class="classe classe--comm" href="2e-commune/index.html">
|
||||
<h2 class="classe__nom"><span class="classe__niveau">2e</span>commune</h2>
|
||||
<p class="classe__cours">Informatique</p>
|
||||
<p class="classe__detail">Pour les élèves de 2e commune.</p>
|
||||
<span class="classe__action">Ouvrir mon cours</span>
|
||||
</a>
|
||||
|
||||
<a class="classe classe--ts" href="3tq-technique-sociale/index.html">
|
||||
<h2 class="classe__nom"><span class="classe__niveau">3e TQ</span>Technique sociale</h2>
|
||||
<p class="classe__cours">Traitement de texte</p>
|
||||
<span class="classe__action">Ouvrir mon cours</span>
|
||||
</a>
|
||||
|
||||
<a class="classe classe--ae" href="4tq-agent-education/index.html">
|
||||
<h2 class="classe__nom"><span class="classe__niveau">4e TQ</span>Agent d'éducation</h2>
|
||||
<p class="classe__cours">Traitement de texte</p>
|
||||
<span class="classe__action">Ouvrir mon cours</span>
|
||||
</a>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="pied">
|
||||
Tu ne sais pas dans quelle classe tu es ? Regarde ton horaire ou demande à ton professeur.
|
||||
<footer class="accueil-pied">
|
||||
Tu ne sais pas quelle case choisir ? Regarde ton horaire ou demande à ton professeur.
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user