formation numérique
This commit is contained in:
lrdlg
@@ -0,0 +1,584 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Cours 1 – Ouvrir le cours</title>
|
||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
||||
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
|
||||
button,input,select{font:inherit}
|
||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
||||
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
|
||||
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
|
||||
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
|
||||
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
|
||||
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
|
||||
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
|
||||
.hero a.up:hover{color:#fff}
|
||||
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
||||
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
|
||||
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hero-chip b{font-size:14px}
|
||||
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
|
||||
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
|
||||
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
|
||||
|
||||
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
|
||||
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
|
||||
.stat strong{display:block;font-size:22px;margin-top:3px}
|
||||
.stat small{color:#64748b;font-weight:800}
|
||||
.stat.ok strong{color:var(--green)}
|
||||
|
||||
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
|
||||
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
|
||||
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
|
||||
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
|
||||
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
|
||||
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
|
||||
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
|
||||
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
|
||||
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
|
||||
|
||||
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
|
||||
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
|
||||
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
|
||||
.tab:hover{border-color:#93c5fd}
|
||||
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
|
||||
.tab.active span{color:#c7dcff}
|
||||
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
|
||||
|
||||
.panel{display:none}.panel.active{display:block}
|
||||
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
|
||||
.card h2,.card h3{margin-top:0}
|
||||
.card h2{font-size:26px;letter-spacing:-.5px}
|
||||
.muted{color:var(--muted);line-height:1.6}
|
||||
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
||||
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
|
||||
.btn:hover{filter:brightness(.97)}
|
||||
.btn.primary{background:#2563eb;color:#fff}
|
||||
.btn.soft{background:#f1f5f9;color:#334155}
|
||||
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
|
||||
.feedback{min-height:31px;margin-top:12px;font-weight:850}
|
||||
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
|
||||
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
|
||||
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
|
||||
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
|
||||
.info b{color:var(--ink)}
|
||||
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
|
||||
.info.alerte b{color:#991b1b}
|
||||
|
||||
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
|
||||
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
|
||||
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
|
||||
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
|
||||
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
|
||||
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
|
||||
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
|
||||
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
|
||||
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
|
||||
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
|
||||
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
|
||||
.colonne li button:hover{color:var(--red)}
|
||||
|
||||
.accordeon{display:grid;gap:10px}
|
||||
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
|
||||
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
|
||||
.item>button:hover{background:#f8fbff}
|
||||
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
|
||||
.item .t{font-weight:850;font-size:17px;flex:1}
|
||||
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
|
||||
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
|
||||
.item.ouvert .corps{display:block}
|
||||
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.item.ouvert .n{background:#2563eb;color:#fff}
|
||||
|
||||
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
|
||||
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
|
||||
.qtag.cle{background:#fef3c7;color:#92400e}
|
||||
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
|
||||
.answer-grid{display:grid;gap:8px}
|
||||
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
|
||||
.answer.ok{border-color:#22c55e;background:#f0fdf4}
|
||||
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
|
||||
.reveal.on{display:block}
|
||||
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
|
||||
|
||||
.steps{display:grid;gap:11px}
|
||||
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
|
||||
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.step.fait{opacity:1}
|
||||
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
|
||||
.step.on .n{background:#2563eb;color:#fff}
|
||||
.step.fait .n{background:#dcfce7;color:#15803d}
|
||||
.step h3{margin:0 0 4px;font-size:17px}
|
||||
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
|
||||
|
||||
figure{margin:0 0 18px}
|
||||
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
||||
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
|
||||
|
||||
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
|
||||
.trace h3{margin:0 0 14px;font-size:22px}
|
||||
.trace p{margin:0 0 .5em}
|
||||
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
|
||||
|
||||
.check{display:grid;gap:9px}
|
||||
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
|
||||
.check label:hover{border-color:#93c5fd}
|
||||
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
|
||||
.check input:checked+span{color:var(--green);font-weight:900}
|
||||
|
||||
table.grille{width:100%;border-collapse:collapse;font-size:15px}
|
||||
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
|
||||
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
|
||||
table.grille td.masque{color:transparent;background:#f8fafc}
|
||||
table.grille tr.on td{background:#f0fdf4}
|
||||
table.grille td b{color:#15803d}
|
||||
|
||||
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
|
||||
.module{margin-bottom:30px}
|
||||
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
|
||||
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
|
||||
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
|
||||
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
|
||||
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
|
||||
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
|
||||
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
|
||||
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
|
||||
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
|
||||
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
|
||||
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
||||
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
|
||||
.et.eval{background:#fee2e2;color:#991b1b}
|
||||
.et.fac{background:#f3e8ff;color:#6b21a8}
|
||||
.et.pret{background:#dcfce7;color:#15803d}
|
||||
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
|
||||
a.bloc .n{background:#2563eb;color:#fff}
|
||||
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
|
||||
.bloc.vide h3{font-weight:800}
|
||||
.masque{display:none!important}
|
||||
|
||||
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
|
||||
|
||||
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
|
||||
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
|
||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
||||
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<section class="hero">
|
||||
<div>
|
||||
<a class="up" href="index.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
|
||||
<div class="eyebrow">Cours 1 · Formation numérique · 1re année</div>
|
||||
<h1>Ouvrir le cours</h1>
|
||||
<p>Aujourd'hui, tu découvres le local, les règles qu'on y suit, ton compte et ton dossier personnel. À la fin du cours, tu sauras te connecter et retrouver ton travail depuis n'importe quel poste.</p>
|
||||
<div class="badges">
|
||||
<span class="badge">2 périodes</span>
|
||||
<span class="badge">Ce cours n'est pas coté</span>
|
||||
<span class="badge">Livret à garder dans le cahier</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M12 3v3M5.6 5.6l2.1 2.1M3 12h3M5.6 18.4l2.1-2.1M12 18v3M18.4 18.4l-2.1-2.1M21 12h-3M18.4 5.6l-2.1 2.1"/><circle cx="12" cy="12" r="3"/></svg><b>Mon réveil</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><b>La charte</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.8-.9 1.4v.6"/><circle cx="12" cy="17" r="1"/><circle cx="12" cy="12" r="9"/></svg><b>Ce que je sais</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4M8.5 10.5l2 2 4.5-4.5"/></svg><b>Ma connexion</b></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="dashboard">
|
||||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
||||
<div class="stat"><small>Temps depuis le début</small><strong id="sTemps">00:00</strong></div>
|
||||
<div class="stat"><small>Il reste pour cette activité</small><strong id="sReste">–</strong></div>
|
||||
<div class="stat"><small>Étape de connexion</small><strong id="sConn">0 sur 5</strong></div>
|
||||
</section>
|
||||
|
||||
<div class="card" style="padding:16px 18px">
|
||||
<div class="row">
|
||||
<button class="btn primary" id="btnGo">Démarrer</button>
|
||||
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
||||
<span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1 · Mon réveil numérique</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navtabs n6" id="rail"></nav>
|
||||
|
||||
<!-- 1 -->
|
||||
<section class="panel active" id="p0"><div class="card">
|
||||
<div class="entete"><div><h2>Activité 1. Mon réveil numérique</h2><p class="muted">Ton livret, page 1. Ordinateurs éteints.</p></div><span class="score">15 min</span></div>
|
||||
|
||||
<div class="consigne"><small>Consigne</small>
|
||||
Sur ton livret, écris tout ce que tu as fait avec un écran depuis que tu t'es réveillé ce matin. Tout, même trente secondes. Tu as cinq minutes.</div>
|
||||
|
||||
<h3>Le classement de la classe</h3>
|
||||
<div class="saisie">
|
||||
<input id="entree" placeholder="Ce que la classe vient de citer" autocomplete="off">
|
||||
<select id="cat" aria-label="Catégorie"></select>
|
||||
<button class="btn primary" id="ajouter">Ajouter</button>
|
||||
</div>
|
||||
<div class="colonnes" id="colonnes"></div>
|
||||
|
||||
<div class="consigne" style="margin-bottom:0"><small>À compléter dans ton livret</small>
|
||||
La plupart de ces usages ne se font pas avec un ......................... .</div>
|
||||
</div></section>
|
||||
|
||||
<!-- 2 -->
|
||||
<section class="panel" id="p1"><div class="card">
|
||||
<div class="entete"><div><h2>Activité 2. La charte du local</h2><p class="muted">Huit règles. Pour chacune, essaie de deviner pourquoi elle existe avant qu'on ouvre la réponse.</p></div><span class="score">15 min</span></div>
|
||||
<div class="accordeon" id="regles"></div>
|
||||
<div class="consigne" style="margin-bottom:0"><small>Pour terminer</small>
|
||||
Signe ta charte au bas de la page 2 de ton livret, et note ton numéro de poste en haut de la page 1.</div>
|
||||
</div></section>
|
||||
|
||||
<!-- 3 -->
|
||||
<section class="panel" id="p2"><div class="card">
|
||||
<div class="entete"><div><h2>Activité 3. Ce que je sais déjà</h2><p class="muted">Vingt questions dans ton livret, pages 3 et 4.</p></div><span class="score">25 min</span></div>
|
||||
|
||||
<div class="consigne"><small>À lire avant de commencer</small>
|
||||
Ce questionnaire n'est pas coté. Il sert à savoir ce que tu sais déjà, pour ne pas te faire perdre du temps sur ce que tu maîtrises. Si tu ne sais pas, écris que tu ne sais pas : c'est une réponse utile.</div>
|
||||
|
||||
<div class="row" style="margin-bottom:16px">
|
||||
<button class="btn soft" id="qprec">Question précédente</button>
|
||||
<button class="btn primary" id="qsuiv">Question suivante</button>
|
||||
<button class="btn" id="qrev">Voir la réponse</button>
|
||||
<span class="score" id="qcompte"></span>
|
||||
</div>
|
||||
|
||||
<div class="qcard" id="qbloc"></div>
|
||||
</div></section>
|
||||
|
||||
<!-- 4 -->
|
||||
<section class="panel" id="p3"><div class="card">
|
||||
<div class="entete"><div><h2>Activité 4. Ma première connexion</h2><p class="muted">Ton livret, page 5. Attends l'annonce de chaque étape avant de la faire.</p></div><span class="score">30 min</span></div>
|
||||
|
||||
<div class="steps" id="etapes"></div>
|
||||
<div class="row" style="margin-top:14px">
|
||||
<button class="btn soft" id="etprec">Étape précédente</button>
|
||||
<button class="btn primary" id="etsuiv">Étape suivante</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Ce qu'il faut comprendre</h3>
|
||||
<p class="muted" style="margin-top:0">Ton compte te suit d'un poste à l'autre. La machine, elle, ne te suit pas.</p>
|
||||
<figure>
|
||||
<svg viewBox="0 0 780 300" role="img" aria-label="Un élève retrouve son dossier personnel depuis n'importe quel poste, alors que le bureau reste attaché à une seule machine">
|
||||
<defs>
|
||||
<marker id="fl" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#172554"/></marker>
|
||||
<marker id="flr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#dc2626"/></marker>
|
||||
</defs>
|
||||
<g font-family="Inter, system-ui, sans-serif">
|
||||
<circle cx="72" cy="112" r="19" fill="none" stroke="#172554" stroke-width="2.5"/>
|
||||
<path d="M42 164 a30 34 0 0 1 60 0" fill="none" stroke="#172554" stroke-width="2.5"/>
|
||||
<rect x="24" y="180" width="96" height="26" rx="13" fill="#2563eb"/>
|
||||
<text x="72" y="198" text-anchor="middle" font-size="13" font-weight="800" fill="#fff">mon compte</text>
|
||||
<text x="72" y="224" text-anchor="middle" font-size="12.5" fill="#667085">Marie, 1C</text>
|
||||
<g stroke="#172554" stroke-width="2.5" fill="#f8fafc">
|
||||
<rect x="212" y="44" width="118" height="76" rx="8"/><rect x="212" y="168" width="118" height="76" rx="8"/>
|
||||
</g>
|
||||
<path d="M255 120 h32 M271 120 v14 M253 134 h36" stroke="#172554" stroke-width="2.5" fill="none"/>
|
||||
<path d="M255 244 h32 M271 244 v14 M253 258 h36" stroke="#172554" stroke-width="2.5" fill="none"/>
|
||||
<text x="271" y="88" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Poste 3</text>
|
||||
<text x="271" y="212" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Poste 17</text>
|
||||
<rect x="350" y="48" width="160" height="34" rx="12" fill="#fef2f2" stroke="#dc2626" stroke-width="2"/>
|
||||
<text x="430" y="70" text-anchor="middle" font-size="13" font-weight="800" fill="#991b1b">Bureau du poste 3</text>
|
||||
<path d="M330 65 h16" stroke="#dc2626" stroke-width="2.5" marker-end="url(#flr)"/>
|
||||
<text x="430" y="102" text-anchor="middle" font-size="12.5" fill="#991b1b">reste sur cette machine</text>
|
||||
<path d="M116 100 C158 84, 176 76, 207 74" stroke="#172554" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
|
||||
<path d="M116 128 C158 152, 176 186, 207 198" stroke="#172554" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
|
||||
<text x="128" y="256" font-size="12.5" fill="#667085">je peux m'asseoir</text>
|
||||
<text x="128" y="272" font-size="12.5" fill="#667085">à n'importe quel poste</text>
|
||||
<g transform="translate(560,100)">
|
||||
<ellipse cx="80" cy="14" rx="80" ry="16" fill="#eff6ff" stroke="#172554" stroke-width="2.5"/>
|
||||
<path d="M0 14 v74" stroke="#172554" stroke-width="2.5" fill="none"/>
|
||||
<path d="M160 14 v74" stroke="#172554" stroke-width="2.5" fill="none"/>
|
||||
<path d="M0 88 a80 16 0 0 0 160 0" fill="#eff6ff" stroke="#172554" stroke-width="2.5"/>
|
||||
<ellipse cx="80" cy="47" rx="80" ry="16" fill="none" stroke="#bfdbfe" stroke-width="1.5"/>
|
||||
<text x="80" y="128" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Serveur de l'école</text>
|
||||
<rect x="4" y="140" width="152" height="26" rx="13" fill="#2563eb"/>
|
||||
<text x="80" y="158" text-anchor="middle" font-size="12.5" font-weight="800" fill="#fff">mon dossier personnel</text>
|
||||
</g>
|
||||
<path d="M330 96 C420 116, 470 118, 550 118" stroke="#172554" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
|
||||
<path d="M330 206 C420 196, 470 164, 550 146" stroke="#172554" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
|
||||
<text x="352" y="256" font-size="13" font-weight="800" fill="#172554">mon dossier me suit d'un poste à l'autre</text>
|
||||
</g>
|
||||
</svg>
|
||||
<figcaption>Ce que tu enregistres sur le bureau reste sur cette machine et peut disparaître. Ce que tu enregistres dans ton dossier personnel, tu le retrouves depuis n'importe quel poste du local.</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<svg viewBox="0 0 620 290" role="img" aria-label="Le dossier FMTTN se trouve à l'intérieur du dossier personnel">
|
||||
<g font-family="Inter, system-ui, sans-serif" font-size="15">
|
||||
<g stroke="#cbd5e1" stroke-width="2" fill="none">
|
||||
<path d="M46 56 v92"/><path d="M46 100 h26"/><path d="M86 108 v92"/><path d="M86 152 h26"/>
|
||||
<path d="M126 160 v92"/><path d="M126 204 h26"/><path d="M126 246 h26"/>
|
||||
</g>
|
||||
<g transform="translate(20,32)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/><text x="48" y="26" fill="#172033" font-weight="600">Serveur de l'école</text></g>
|
||||
<g transform="translate(60,84)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/><text x="48" y="26" fill="#172033" font-weight="600">Élèves</text></g>
|
||||
<g transform="translate(100,136)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/><text x="48" y="26" fill="#172033" font-weight="800">1C_dupont_marie</text><text x="215" y="26" fill="#667085" font-size="13">ton dossier personnel</text></g>
|
||||
<g transform="translate(140,188)"><path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#2563eb" stroke="#1d4ed8" stroke-width="2"/><rect x="42" y="7" width="78" height="23" rx="11" fill="#2563eb"/><text x="52" y="25" fill="#fff" font-weight="800">FMTTN</text><text x="134" y="26" fill="#667085" font-size="13">à créer aujourd'hui</text></g>
|
||||
<g transform="translate(140,228)"><path d="M4 4 h20 l10 10 v20 a3 3 0 0 1 -3 3 h-27 a3 3 0 0 1 -3 -3 v-27 a3 3 0 0 1 3 -3 z" fill="#fff" stroke="#667085" stroke-width="2"/><path d="M24 4 v10 h10" fill="none" stroke="#667085" stroke-width="2"/><text x="48" y="28" fill="#172033" font-weight="600">test.txt</text><text x="134" y="28" fill="#667085" font-size="13">pour vérifier l'étape 5</text></g>
|
||||
</g>
|
||||
</svg>
|
||||
<figcaption>Le dossier FMTTN se crée à l'intérieur de ton dossier personnel, jamais sur le bureau. Tu écris son nom en majuscules, sans espace ni accent.</figcaption>
|
||||
</figure>
|
||||
</div></section>
|
||||
|
||||
<!-- 5 -->
|
||||
<section class="panel" id="p4"><div class="card">
|
||||
<div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">10 min</span></div>
|
||||
|
||||
<div class="row" style="margin-bottom:16px">
|
||||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
||||
<button class="btn soft" id="motReset">Tout masquer</button>
|
||||
<span class="score" id="motCompte">0 mot sur 8</span>
|
||||
</div>
|
||||
|
||||
<div class="trace" id="trace"></div>
|
||||
</div></section>
|
||||
|
||||
<!-- 6 -->
|
||||
<section class="panel" id="p5"><div class="card">
|
||||
<div class="entete"><div><h2>Avant de partir</h2><p class="muted">On fait ces trois gestes à la fin de chaque cours, toute l'année.</p></div><span class="score">5 min</span></div>
|
||||
<div class="check">
|
||||
<label><input type="checkbox"><span>Je ferme ma session. Éteindre l'écran ne suffit pas.</span></label>
|
||||
<label><input type="checkbox"><span>Je range ma chaise et je ne laisse rien sur la table.</span></label>
|
||||
<label><input type="checkbox"><span>Je remets mon livret dans mon cahier.</span></label>
|
||||
</div>
|
||||
<div class="consigne" style="margin-bottom:0"><small>Au prochain cours</small>
|
||||
On ouvre un vrai ordinateur pour voir ce qu'il y a à l'intérieur. Rien à apporter.</div>
|
||||
</div></section>
|
||||
|
||||
</main>
|
||||
<footer>Cours 1 · Formation numérique · 1re année · M. Courcelle</footer>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
var PHASES=[
|
||||
{t:"Mon réveil numérique",d:15,a:0},{t:"La charte du local",d:15,a:15},
|
||||
{t:"Ce que je sais déjà",d:25,a:30},{t:"Ma première connexion",d:30,a:55},
|
||||
{t:"Ma trace écrite",d:10,a:85},{t:"Avant de partir",d:5,a:95}];
|
||||
|
||||
var CATS=["Communiquer","S'informer","Se divertir","Se déplacer","Apprendre","Payer"];
|
||||
|
||||
var REGLES=[
|
||||
["J'utilise le poste qui m'est attribué.","Je ne change pas de place sans autorisation. En cas de problème sur une machine, on sait qui l'utilisait."],
|
||||
["Je signale tout de suite un matériel abîmé ou manquant.","Si tu le signales en arrivant, ce n'est pas de ta faute. Si on le découvre après, plus personne ne peut savoir ce qui s'est passé."],
|
||||
["Je me connecte avec mon compte, jamais avec celui d'un autre.","Tout ce qui est fait sur un compte est attribué à la personne à qui ce compte appartient. Si tu utilises le compte d'un camarade, c'est lui qui répond de ce que tu fais."],
|
||||
["Je ne donne mon mot de passe à personne.","Pas à un ami, pas à ton meilleur ami, pas à quelqu'un qui dit en avoir besoin. Un professeur ne te demandera jamais ton mot de passe."],
|
||||
["Je n'installe rien et je ne modifie pas les réglages du poste.","Le poste est partagé avec d'autres classes. Ce que tu changes, un autre le subit au cours suivant."],
|
||||
["Ni boisson ni nourriture à côté du clavier.","Un clavier reçoit un liquide une seule fois dans sa vie."],
|
||||
["J'enregistre mon travail dans mon dossier personnel.","Ce qui est enregistré sur le bureau reste sur cette machine et peut disparaître. Ce qui est dans ton dossier personnel te suit sur tous les postes du local."],
|
||||
["À la fin du cours, je ferme ma session et je range ma chaise.","Laisser une session ouverte, c'est laisser son compte à disposition de la classe suivante."]];
|
||||
|
||||
var Q=[
|
||||
{n:1,q:"Un fichier, c'est :",o:["un meuble de rangement","un document enregistré dans un ordinateur","une partie de l'écran","un câble"],r:1},
|
||||
{n:2,q:"À quoi sert un dossier ?",o:["à supprimer des fichiers","à ranger des fichiers","à allumer l'ordinateur","à écrire un texte"],r:1},
|
||||
{n:3,q:"Parmi ces éléments, lequel est un logiciel ?",o:["le clavier","l'écran","le traitement de texte","la souris"],r:2},
|
||||
{n:4,q:"À quoi sert le disque dur d'un ordinateur ?",o:["à afficher les images","à conserver les données même quand l'ordinateur est éteint","à se connecter à internet","à refroidir la machine"],r:1},
|
||||
{n:5,q:"Enregistrer un document dans le cloud, cela veut dire :",o:["l'imprimer","l'envoyer par la poste","le conserver sur un ordinateur distant, accessible par internet","le supprimer"],r:2},
|
||||
{n:6,q:"Tu fermes un document sans l'enregistrer. Que se passe-t-il ?",o:["rien, tout est toujours enregistré automatiquement","tu risques de perdre ce que tu as écrit","l'ordinateur s'éteint","le fichier change de nom"],r:1},
|
||||
{n:7,q:"Lequel de ces noms de fichier te permettra le mieux de retrouver ton travail dans six mois ?",o:["doc1.docx","sans titre.docx","2026-09-08_francais_resume-chapitre1.docx","aaaa.docx"],r:2},
|
||||
{n:8,q:"Une application installée sur un téléphone, c'est :",o:["un fichier photo","un logiciel","une carte mémoire","un réseau"],r:1},
|
||||
{n:9,q:"Lequel de ces mots de passe est le plus solide ?",o:["ton prénom","123456","ChatVertSurToit7","ta date de naissance"],r:2},
|
||||
{n:10,q:"Tu donnes ton mot de passe à un ami. Que peut-il se passer ?",o:["rien du tout","il peut agir sur ton compte à ta place, et c'est toi qui en réponds","le mot de passe change tout seul","ton compte est mieux protégé"],r:1},
|
||||
{n:11,q:"À quoi sert un logigramme ?",o:["à dessiner un personnage","à représenter les étapes d'une suite d'actions","à calculer une moyenne","à enregistrer un fichier"],r:1},
|
||||
{n:12,q:"Sur un ordinateur partagé à l'école, à la fin du cours, il faut :",o:["éteindre l'écran seulement","fermer sa session","ne rien faire","débrancher la machine"],r:1},
|
||||
{n:13,vf:true,q:"Une clé USB garde ce qu'on y a enregistré même quand elle est débranchée.",r:"Vrai",j:"La mémoire de la clé garde l'information même sans courant."},
|
||||
{n:14,vf:true,q:"Dans un même dossier, deux fichiers différents peuvent porter exactement le même nom.",r:"Faux",j:"L'ordinateur ne saurait plus lequel ouvrir."},
|
||||
{n:15,vf:true,q:"Internet et le navigateur web, c'est la même chose.",r:"Faux",j:"Le navigateur est un programme. Internet est le réseau auquel il se connecte."},
|
||||
{n:16,vf:true,q:"On peut ranger un dossier à l'intérieur d'un autre dossier.",r:"Vrai",j:"C'est ce qui permet de classer, comme des boîtes dans des boîtes."},
|
||||
{n:17,ouv:true,q:"Cite deux logiciels ou applications que tu as déjà utilisés."},
|
||||
{n:18,ouv:true,q:"Quand tu travailles sur un ordinateur à la maison, où enregistres-tu tes documents ?"},
|
||||
{n:19,ouv:true,q:"Tu as oublié le mot de passe d'un de tes comptes. Que fais-tu ?"},
|
||||
{n:20,ouv:true,q:"Dans le nom de fichier photo.jpg, à quoi servent les trois lettres après le point ?"}];
|
||||
|
||||
var ETAPES=[
|
||||
["Je me connecte","J'utilise l'identifiant que l'école m'a donné. Attention aux majuscules et au point entre le nom et le prénom."],
|
||||
["Je change mon mot de passe","Une phrase de quatre mots collés, avec un chiffre. Sur le modèle de ChatVertSurToit7, mais je n'utilise pas celui-là. Je ne l'écris nulle part."],
|
||||
["Je retrouve mon dossier personnel","Il est sur le réseau de l'école, pas sur le bureau."],
|
||||
["Je crée le dossier FMTTN","À l'intérieur de mon dossier personnel. En majuscules, sans espace ni accent. C'est mon dossier pour toute l'année."],
|
||||
["Je vérifie","J'enregistre un fichier vide nommé test.txt dans FMTTN. Je le ferme, puis je le rouvre. Si je le retrouve, c'est réussi."]];
|
||||
|
||||
var TRACE=[
|
||||
["Depuis mon réveil, j'utilise des outils numériques pour communiquer, m'informer, me divertir, me déplacer, apprendre et payer. La plupart ne sont pas des ordinateurs."],
|
||||
["Les postes du local sont partagés entre plusieurs classes. Chaque élève possède un ",1," personnel, composé d'un ",2," et d'un ",3," ."],
|
||||
["Mon identifiant peut être connu. Mon mot de passe est ",4," et ne se communique à personne."],
|
||||
["Tout ce qui est fait sur un compte est attribué à la personne à qui ce compte appartient."],
|
||||
["Le compte me suit d'un poste à l'autre, la machine ne me suit pas. Ce que j'enregistre sur le ",5," reste sur cette machine. Ce que j'enregistre dans mon ",6," , je le retrouve partout dans le local."],
|
||||
["Mon dossier de cours s'appelle ",7," ."],
|
||||
["À la fin de chaque cours, je ",8," ."]];
|
||||
var MOTS={1:"compte",2:"identifiant",3:"mot de passe",4:"secret",5:"bureau",6:"dossier personnel",7:"FMTTN",8:"ferme ma session"};
|
||||
|
||||
/* chrono */
|
||||
var t0=null,tick=null,choisie=0;
|
||||
var ecart=document.getElementById("ecart"),rail=document.getElementById("rail");
|
||||
function d2(n){return (n<10?"0":"")+n;}
|
||||
function minutes(){return t0?(Date.now()-t0)/60000:0;}
|
||||
|
||||
function dessineRail(){
|
||||
rail.innerHTML="";
|
||||
PHASES.forEach(function(p,i){
|
||||
var b=document.createElement("button");
|
||||
b.className="tab"+(i===choisie?" active":"");
|
||||
b.innerHTML=(i+1)+". "+p.t+"<span>"+p.d+" min</span>";
|
||||
b.onclick=function(){montre(i);};
|
||||
rail.appendChild(b);
|
||||
});
|
||||
document.getElementById("sPhase").textContent=(choisie+1)+" sur 6";
|
||||
ecart.textContent="Activité "+(choisie+1)+" · "+PHASES[choisie].t;
|
||||
majReste();
|
||||
}
|
||||
function montre(i){
|
||||
choisie=i;
|
||||
for(var k=0;k<PHASES.length;k++){document.getElementById("p"+k).classList.toggle("active",k===i);}
|
||||
dessineRail();
|
||||
window.scrollTo({top:0,behavior:"smooth"});
|
||||
}
|
||||
function majReste(){
|
||||
var e=document.getElementById("sReste");
|
||||
if(!t0){e.textContent="–";return;}
|
||||
var fin=PHASES[choisie].a+PHASES[choisie].d,r=Math.ceil(fin-minutes());
|
||||
e.textContent=r>0?(r+" min"):"terminé";
|
||||
}
|
||||
function rafraichit(){
|
||||
var s=Math.floor((Date.now()-t0)/1000);
|
||||
document.getElementById("sTemps").textContent=d2(Math.floor(s/60))+":"+d2(s%60);
|
||||
majReste();
|
||||
}
|
||||
document.getElementById("btnGo").onclick=function(){
|
||||
if(t0)return;t0=Date.now();this.textContent="En cours";
|
||||
tick=setInterval(rafraichit,1000);rafraichit();
|
||||
};
|
||||
document.getElementById("btnStop").onclick=function(){
|
||||
clearInterval(tick);t0=null;
|
||||
document.getElementById("sTemps").textContent="00:00";
|
||||
document.getElementById("sReste").textContent="–";
|
||||
document.getElementById("btnGo").textContent="Démarrer";
|
||||
};
|
||||
|
||||
/* 1 */
|
||||
var tableau={};CATS.forEach(function(c){tableau[c]=[];});
|
||||
var sel=document.getElementById("cat");
|
||||
CATS.forEach(function(c){var o=document.createElement("option");o.value=c;o.textContent=c;sel.appendChild(o);});
|
||||
function dessineColonnes(){
|
||||
var z=document.getElementById("colonnes");z.innerHTML="";
|
||||
CATS.forEach(function(c){
|
||||
var d=document.createElement("div");d.className="colonne";
|
||||
var items=tableau[c].map(function(x,i){
|
||||
return '<li><span>'+x+'</span><button data-c="'+c+'" data-i="'+i+'" aria-label="Retirer">×</button></li>';}).join("");
|
||||
d.innerHTML='<h3>'+c+' <em>'+tableau[c].length+'</em></h3><ul>'+items+'</ul>';
|
||||
z.appendChild(d);
|
||||
});
|
||||
z.querySelectorAll("button[data-c]").forEach(function(b){
|
||||
b.onclick=function(){tableau[b.dataset.c].splice(parseInt(b.dataset.i,10),1);dessineColonnes();};});
|
||||
}
|
||||
function ajoute(){
|
||||
var e=document.getElementById("entree"),v=e.value.trim();
|
||||
if(!v)return;
|
||||
tableau[sel.value].push(v.replace(/[<>&]/g,""));
|
||||
e.value="";e.focus();dessineColonnes();
|
||||
}
|
||||
document.getElementById("ajouter").onclick=ajoute;
|
||||
document.getElementById("entree").addEventListener("keydown",function(ev){if(ev.key==="Enter")ajoute();});
|
||||
dessineColonnes();
|
||||
|
||||
/* 2 */
|
||||
var zr=document.getElementById("regles");
|
||||
REGLES.forEach(function(r,i){
|
||||
var d=document.createElement("div");d.className="item";
|
||||
d.innerHTML='<button aria-expanded="false"><span class="n">'+(i+1)+'</span><span class="t">'+r[0]+'</span><span class="plus">pourquoi</span></button><div class="corps">'+r[1]+'</div>';
|
||||
d.querySelector("button").onclick=function(){
|
||||
var o=d.classList.toggle("ouvert");
|
||||
this.setAttribute("aria-expanded",o?"true":"false");
|
||||
this.querySelector(".plus").textContent=o?"masquer":"pourquoi";
|
||||
};
|
||||
zr.appendChild(d);
|
||||
});
|
||||
|
||||
/* 3 */
|
||||
var qi=0,qbloc=document.getElementById("qbloc");
|
||||
function dessineQ(){
|
||||
if(qi>=Q.length)qi=0;
|
||||
if(qi<0)qi=Q.length-1;
|
||||
var q=Q[qi];
|
||||
var h='<span class="qtag">Question '+q.n+' sur 20</span><div class="qtxt">'+q.q+'</div>';
|
||||
if(q.o){
|
||||
h+='<div class="answer-grid" id="choix">';
|
||||
q.o.forEach(function(o,i){h+='<div class="answer" data-i="'+i+'">'+"ABCD".charAt(i)+". "+o+'</div>';});
|
||||
h+='</div>';
|
||||
}else if(q.vf){
|
||||
h+='<div class="answer-grid" id="choix"><div class="answer" data-v="Vrai">Vrai</div><div class="answer" data-v="Faux">Faux</div></div>';
|
||||
}else{
|
||||
h+='<p class="muted" style="margin:0">Il n\'y a pas une seule bonne réponse. On lit quelques réponses de la classe et on en discute.</p>';
|
||||
}
|
||||
h+='<div class="reveal" id="rep"><div class="verdict" id="verdict"></div><div id="just" class="muted"></div></div>';
|
||||
qbloc.innerHTML=h;
|
||||
document.getElementById("qcompte").textContent=(qi+1)+" / 20";
|
||||
document.getElementById("qrev").textContent="Voir la réponse";
|
||||
}
|
||||
function revele(){
|
||||
var q=Q[qi],rep=document.getElementById("rep");
|
||||
if(rep.classList.contains("on"))return;
|
||||
rep.classList.add("on");
|
||||
var v=document.getElementById("verdict"),c;
|
||||
if(q.o){c=document.querySelector('#choix div[data-i="'+q.r+'"]');if(c)c.classList.add("ok");v.textContent="La bonne réponse est "+"ABCD".charAt(q.r)+".";}
|
||||
else if(q.vf){c=document.querySelector('#choix div[data-v="'+q.r+'"]');if(c)c.classList.add("ok");v.textContent=q.r+".";}
|
||||
else{v.textContent="On compare vos réponses.";}
|
||||
document.getElementById("just").textContent=q.j||"";
|
||||
document.getElementById("qrev").textContent="Réponse affichée";
|
||||
}
|
||||
document.getElementById("qsuiv").onclick=function(){qi++;dessineQ();};
|
||||
document.getElementById("qprec").onclick=function(){qi--;dessineQ();};
|
||||
document.getElementById("qrev").onclick=revele;
|
||||
dessineQ();
|
||||
|
||||
/* 4 */
|
||||
var ei=0,ze=document.getElementById("etapes");
|
||||
function dessineEtapes(){
|
||||
ze.innerHTML="";
|
||||
ETAPES.forEach(function(e,i){
|
||||
var d=document.createElement("div");
|
||||
d.className="step"+(i===ei?" on":"")+(i<ei?" fait":"");
|
||||
d.innerHTML='<span class="n">'+(i+1)+'</span><div><h3>'+e[0]+'</h3><p>'+(i<=ei?e[1]:"")+'</p></div>';
|
||||
ze.appendChild(d);
|
||||
});
|
||||
document.getElementById("sConn").textContent=(ei+1)+" sur 5";
|
||||
}
|
||||
document.getElementById("etsuiv").onclick=function(){if(ei<ETAPES.length-1){ei++;dessineEtapes();}};
|
||||
document.getElementById("etprec").onclick=function(){if(ei>0){ei--;dessineEtapes();}};
|
||||
dessineEtapes();
|
||||
document.getElementById("sConn").textContent="0 sur 5";
|
||||
|
||||
/* 5 */
|
||||
var reveles=0,zt=document.getElementById("trace");
|
||||
function dessineTrace(){
|
||||
zt.innerHTML="<h3>Cours 1. Ouvrir le cours</h3>"+TRACE.map(function(par){
|
||||
return "<p>"+par.map(function(x){
|
||||
if(typeof x==="number"){
|
||||
return x<=reveles
|
||||
? '<b style="color:#1d4ed8">'+MOTS[x]+'</b>'
|
||||
: '<span style="border-bottom:2px solid #93c5fd;color:#93c5fd"> </span>';
|
||||
}
|
||||
return x;
|
||||
}).join("")+"</p>";
|
||||
}).join("");
|
||||
document.getElementById("motCompte").textContent=reveles+" mot"+(reveles>1?"s":"")+" sur 8";
|
||||
}
|
||||
document.getElementById("motSuiv").onclick=function(){if(reveles<8){reveles++;dessineTrace();}};
|
||||
document.getElementById("motReset").onclick=function(){reveles=0;dessineTrace();};
|
||||
dessineTrace();
|
||||
|
||||
dessineRail();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,626 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Bloc 1 – Ouvrir le cours et savoir où l'on met les pieds</title>
|
||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
||||
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
|
||||
button,input,select{font:inherit}
|
||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
||||
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
|
||||
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
|
||||
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
|
||||
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
|
||||
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
|
||||
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
|
||||
.hero a.up:hover{color:#fff}
|
||||
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
||||
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
|
||||
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hero-chip b{font-size:14px}
|
||||
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
|
||||
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
|
||||
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
|
||||
|
||||
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
|
||||
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
|
||||
.stat strong{display:block;font-size:22px;margin-top:3px}
|
||||
.stat small{color:#64748b;font-weight:800}
|
||||
.stat.ok strong{color:var(--green)}
|
||||
|
||||
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
|
||||
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
|
||||
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
|
||||
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
|
||||
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
|
||||
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
|
||||
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
|
||||
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
|
||||
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
|
||||
|
||||
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
|
||||
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
|
||||
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
|
||||
.tab:hover{border-color:#93c5fd}
|
||||
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
|
||||
.tab.active span{color:#c7dcff}
|
||||
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
|
||||
|
||||
.panel{display:none}.panel.active{display:block}
|
||||
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
|
||||
.card h2,.card h3{margin-top:0}
|
||||
.card h2{font-size:26px;letter-spacing:-.5px}
|
||||
.muted{color:var(--muted);line-height:1.6}
|
||||
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
||||
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
|
||||
.btn:hover{filter:brightness(.97)}
|
||||
.btn.primary{background:#2563eb;color:#fff}
|
||||
.btn.soft{background:#f1f5f9;color:#334155}
|
||||
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
|
||||
.feedback{min-height:31px;margin-top:12px;font-weight:850}
|
||||
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
|
||||
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
|
||||
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
|
||||
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
|
||||
.info b{color:var(--ink)}
|
||||
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
|
||||
.info.alerte b{color:#991b1b}
|
||||
|
||||
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
|
||||
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
|
||||
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
|
||||
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
|
||||
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
|
||||
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
|
||||
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
|
||||
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
|
||||
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
|
||||
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
|
||||
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
|
||||
.colonne li button:hover{color:var(--red)}
|
||||
|
||||
.accordeon{display:grid;gap:10px}
|
||||
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
|
||||
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
|
||||
.item>button:hover{background:#f8fbff}
|
||||
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
|
||||
.item .t{font-weight:850;font-size:17px;flex:1}
|
||||
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
|
||||
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
|
||||
.item.ouvert .corps{display:block}
|
||||
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.item.ouvert .n{background:#2563eb;color:#fff}
|
||||
|
||||
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
|
||||
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
|
||||
.qtag.cle{background:#fef3c7;color:#92400e}
|
||||
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
|
||||
.answer-grid{display:grid;gap:8px}
|
||||
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
|
||||
.answer.ok{border-color:#22c55e;background:#f0fdf4}
|
||||
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
|
||||
.reveal.on{display:block}
|
||||
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
|
||||
|
||||
.steps{display:grid;gap:11px}
|
||||
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
|
||||
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.step.fait{opacity:1}
|
||||
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
|
||||
.step.on .n{background:#2563eb;color:#fff}
|
||||
.step.fait .n{background:#dcfce7;color:#15803d}
|
||||
.step h3{margin:0 0 4px;font-size:17px}
|
||||
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
|
||||
|
||||
figure{margin:0 0 18px}
|
||||
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
||||
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
|
||||
|
||||
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
|
||||
.trace h3{margin:0 0 14px;font-size:22px}
|
||||
.trace p{margin:0 0 .5em}
|
||||
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
|
||||
|
||||
.check{display:grid;gap:9px}
|
||||
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
|
||||
.check label:hover{border-color:#93c5fd}
|
||||
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
|
||||
.check input:checked+span{color:var(--green);font-weight:900}
|
||||
|
||||
table.grille{width:100%;border-collapse:collapse;font-size:15px}
|
||||
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
|
||||
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
|
||||
table.grille td.masque{color:transparent;background:#f8fafc}
|
||||
table.grille tr.on td{background:#f0fdf4}
|
||||
table.grille td b{color:#15803d}
|
||||
|
||||
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
|
||||
.module{margin-bottom:30px}
|
||||
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
|
||||
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
|
||||
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
|
||||
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
|
||||
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
|
||||
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
|
||||
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
|
||||
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
|
||||
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
|
||||
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
|
||||
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
||||
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
|
||||
.et.eval{background:#fee2e2;color:#991b1b}
|
||||
.et.fac{background:#f3e8ff;color:#6b21a8}
|
||||
.et.pret{background:#dcfce7;color:#15803d}
|
||||
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
|
||||
a.bloc .n{background:#2563eb;color:#fff}
|
||||
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
|
||||
.bloc.vide h3{font-weight:800}
|
||||
.masque{display:none!important}
|
||||
|
||||
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
|
||||
|
||||
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
|
||||
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
|
||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
||||
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<section class="hero">
|
||||
<div>
|
||||
<a class="up" href="pilotage.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu des blocs</a>
|
||||
<div class="eyebrow">Document enseignant · Module 1 · Semaine 1 · Bloc 1 sur 35</div>
|
||||
<h1>Ouvrir le cours et savoir où l'on met les pieds</h1>
|
||||
<p style="margin-bottom:10px"><a href="1TC-NUM_bloc-01_ouvrir-le-cours.html" style="color:#fff;font-weight:800">Ouvrir la version à projeter aux élèves</a></p>
|
||||
<p>Établir le cadre du local, mesurer ce que les élèves ramènent réellement du fondamental, et vérifier que chaque compte fonctionne avant que le module 1 ne démarre au bloc 2.</p>
|
||||
<div class="badges">
|
||||
<span class="badge">1TC-NUM · 1re secondaire</span>
|
||||
<span class="badge">2 périodes · 100 minutes</span>
|
||||
<span class="badge">Champ Informations et données</span>
|
||||
<span class="badge warn">Aucun attendu prescrit · non cotable</span>
|
||||
<span class="badge warn">Ne pas projeter</span>
|
||||
<span class="badge">Première rencontre : bien-être numérique (brochure)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M12 3v3M5.6 5.6l2.1 2.1M3 12h3M5.6 18.4l2.1-2.1M12 18v3M18.4 18.4l-2.1-2.1M21 12h-3M18.4 5.6l-2.1 2.1"/><circle cx="12" cy="12" r="3"/></svg><b>Accroche</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><b>Charte</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.8-.9 1.4v.6"/><circle cx="12" cy="17" r="1"/><circle cx="12" cy="12" r="9"/></svg><b>Diagnostic</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4M8.5 10.5l2 2 4.5-4.5"/></svg><b>Connexion</b></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="dashboard">
|
||||
<div class="stat"><small>Temps écoulé</small><strong id="sTemps">00:00</strong></div>
|
||||
<div class="stat"><small>Phase prévue à cet instant</small><strong id="sPhase">–</strong></div>
|
||||
<div class="stat"><small>Diagnostic corrigé</small><strong id="sDiag">0 / 20</strong></div>
|
||||
<div class="stat"><small>Étapes de connexion</small><strong id="sConn">0 / 5</strong></div>
|
||||
</section>
|
||||
|
||||
<div class="card" style="padding:16px 18px">
|
||||
<div class="row">
|
||||
<button class="btn primary" id="btnGo">Démarrer la séance</button>
|
||||
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
||||
<span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Séance non démarrée</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navtabs n6" id="rail"></nav>
|
||||
|
||||
<!-- 1. ACCROCHE -->
|
||||
<section class="panel active" id="p0"><div class="card">
|
||||
<div class="entete">
|
||||
<div><h2>Accroche débranchée</h2><p class="muted">Machines éteintes. Cinq minutes d'écriture individuelle, cinq minutes de recensement, cinq minutes de classement. Les catégories ne sont pas données, elles émergent de la classe.</p></div>
|
||||
<span class="score">15 min · de 0 à 15</span>
|
||||
</div>
|
||||
|
||||
<div class="consigne"><small>Consigne à lire telle quelle</small>
|
||||
Sur ta feuille, écris tout ce que tu as fait avec un écran depuis que tu t'es réveillé ce matin. Tout, même trente secondes. Tu as cinq minutes.</div>
|
||||
|
||||
<h3>Tableau de recensement</h3>
|
||||
<p class="muted" style="margin-top:0">À remplir en direct sous la dictée de la classe pendant la mise en commun.</p>
|
||||
<div class="saisie">
|
||||
<input id="entree" placeholder="Ce qu'un élève vient de citer" autocomplete="off">
|
||||
<select id="cat" aria-label="Catégorie"></select>
|
||||
<button class="btn primary" id="ajouter">Ajouter</button>
|
||||
</div>
|
||||
<div class="colonnes" id="colonnes"></div>
|
||||
|
||||
<div class="info"><b>Première rencontre avec un attendu, non évaluable.</b> La brochure annexée à la circulaire n°9694 du 26 mars 2026 ajoute au champ Sécurité un savoir-faire « Gérer son bien-être numérique », dont l'attendu est de repérer ses habitudes numériques et d'expliquer en quoi cette analyse peut améliorer son organisation de temps et son bien-être. Il est encadré dans la brochure, donc facultatif et hors du champ de l'évaluation sommative. Cette accroche en réalise la première moitié : l'élève repère, il n'analyse pas encore. L'analyse appartient au bloc 11. La mener ici, sans le vocabulaire de la cyberdépendance, produit un moralisme qui ferme la discussion pour le reste de l'année.</div>
|
||||
|
||||
<div class="info"><b>Le point à faire ressortir, sans le dire à leur place.</b> La plupart des usages listés ne sont pas des usages d'ordinateur, et beaucoup n'ont pas été perçus comme numériques au moment vécu. Relancer les élèves qui n'écrivent que « jeux » et « réseaux sociaux » par des questions factuelles : comment es-tu venu à l'école, as-tu payé quelque chose, quelqu'un t'a-t-il écrit. Ne pas basculer sur le temps d'écran, qui appartient au bloc 11.</div>
|
||||
</div></section>
|
||||
|
||||
<!-- 2. CHARTE -->
|
||||
<section class="panel" id="p1"><div class="card">
|
||||
<div class="entete">
|
||||
<div><h2>Charte du local</h2><p class="muted">Pour chaque règle, poser la question à la classe avant d'ouvrir la justification : à ton avis, pourquoi cette règle existe.</p></div>
|
||||
<span class="score">15 min · de 15 à 30</span>
|
||||
</div>
|
||||
<div class="accordeon" id="regles"></div>
|
||||
<div class="info"><b>Les règles 3 et 4 valent cinq des quinze minutes à elles seules.</b> C'est là que se joue tout le module 2, et la seule occasion de l'année où les élèves n'ont pas encore pris de mauvaises habitudes sur les postes de l'école. La signature est individuelle, l'exemplaire signé est collé dans le cahier et non ramassé, pour rester consultable toute l'année.</div>
|
||||
</div></section>
|
||||
|
||||
<!-- 3. DIAGNOSTIC -->
|
||||
<section class="panel" id="p2"><div class="card">
|
||||
<div class="entete">
|
||||
<div><h2>Diagnostic du déjà-là</h2><p class="muted">Quinze minutes de passation sur papier, en silence. Dix minutes de correction collective ici.</p></div>
|
||||
<span class="score">25 min · de 30 à 55</span>
|
||||
</div>
|
||||
|
||||
<div class="consigne"><small>À annoncer avant de distribuer</small>
|
||||
Ce questionnaire n'est pas coté. Il me sert à savoir ce que vous savez déjà, pour ne pas vous faire perdre du temps sur ce que vous maîtrisez. Si tu ne sais pas, écris que tu ne sais pas. C'est une réponse utile.</div>
|
||||
|
||||
<div class="row" style="margin-bottom:16px">
|
||||
<button class="btn soft" id="qprec">Précédente</button>
|
||||
<button class="btn primary" id="qsuiv">Suivante</button>
|
||||
<button class="btn" id="qrev">Afficher la réponse</button>
|
||||
<button class="btn soft" id="qcles">Ne garder que les 5 questions clés</button>
|
||||
<span class="score" id="qcompte"></span>
|
||||
</div>
|
||||
|
||||
<div class="qcard" id="qbloc"></div>
|
||||
|
||||
<div class="info alerte"><b>Si le bloc est en retard.</b> Ne corriger collectivement que les cinq questions clés, les numéros 7, 9, 11, 15 et 20, puis ramasser les copies pour dépouillement hors classe. Les questions 17 à 20 ne se corrigent pas, elles se recueillent : faire lire trois ou quatre réponses sans commenter la justesse.</div>
|
||||
</div></section>
|
||||
|
||||
<!-- 4. CONNEXION -->
|
||||
<section class="panel" id="p3"><div class="card">
|
||||
<div class="entete">
|
||||
<div><h2>Première connexion</h2><p class="muted">Cinq étapes énoncées une par une, jamais les cinq d'un coup.</p></div>
|
||||
<span class="score">30 min · de 55 à 85</span>
|
||||
</div>
|
||||
|
||||
<div class="steps" id="etapes"></div>
|
||||
<div class="row" style="margin-top:14px">
|
||||
<button class="btn soft" id="etprec">Étape précédente</button>
|
||||
<button class="btn primary" id="etsuiv">Étape suivante</button>
|
||||
</div>
|
||||
|
||||
<div class="info"><b>Ce que l'enseignant relève en circulant, sans rien dire.</b> Connexion réussie seul ou avec aide, dossier personnel retrouvé seul ou avec aide, enregistrement fait au bon endroit ou sur le bureau. Ces trois observations déterminent la composition des binômes hétérogènes du bloc 2.</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Le point conceptuel de la phase, à poser au tableau</h3>
|
||||
<figure>
|
||||
<svg viewBox="0 0 780 300" role="img" aria-label="Schéma montrant qu'un élève retrouve son dossier personnel depuis n'importe quel poste, alors que le bureau reste attaché à une seule machine">
|
||||
<defs>
|
||||
<marker id="fl" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#172554"/></marker>
|
||||
<marker id="flr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#dc2626"/></marker>
|
||||
</defs>
|
||||
<g font-family="Inter, system-ui, sans-serif">
|
||||
<circle cx="72" cy="112" r="19" fill="none" stroke="#172554" stroke-width="2.5"/>
|
||||
<path d="M42 164 a30 34 0 0 1 60 0" fill="none" stroke="#172554" stroke-width="2.5"/>
|
||||
<rect x="24" y="180" width="96" height="26" rx="13" fill="#2563eb"/>
|
||||
<text x="72" y="198" text-anchor="middle" font-size="13" font-weight="800" fill="#fff">mon compte</text>
|
||||
<text x="72" y="224" text-anchor="middle" font-size="12.5" fill="#667085">Marie, 1C</text>
|
||||
|
||||
<g stroke="#172554" stroke-width="2.5" fill="#f8fafc">
|
||||
<rect x="212" y="44" width="118" height="76" rx="8"/>
|
||||
<rect x="212" y="168" width="118" height="76" rx="8"/>
|
||||
</g>
|
||||
<path d="M255 120 h32 M271 120 v14 M253 134 h36" stroke="#172554" stroke-width="2.5" fill="none"/>
|
||||
<path d="M255 244 h32 M271 244 v14 M253 258 h36" stroke="#172554" stroke-width="2.5" fill="none"/>
|
||||
<text x="271" y="88" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Poste 3</text>
|
||||
<text x="271" y="212" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Poste 17</text>
|
||||
|
||||
<rect x="350" y="48" width="160" height="34" rx="12" fill="#fef2f2" stroke="#dc2626" stroke-width="2"/>
|
||||
<text x="430" y="70" text-anchor="middle" font-size="13" font-weight="800" fill="#991b1b">Bureau du poste 3</text>
|
||||
<path d="M330 65 h16" stroke="#dc2626" stroke-width="2.5" marker-end="url(#flr)"/>
|
||||
<text x="430" y="102" text-anchor="middle" font-size="12.5" fill="#991b1b">reste sur cette machine</text>
|
||||
|
||||
<path d="M116 100 C158 84, 176 76, 207 74" stroke="#172554" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
|
||||
<path d="M116 128 C158 152, 176 186, 207 198" stroke="#172554" stroke-width="2" fill="none" stroke-dasharray="6 5" marker-end="url(#fl)"/>
|
||||
<text x="128" y="256" font-size="12.5" fill="#667085">je peux m'asseoir</text>
|
||||
<text x="128" y="272" font-size="12.5" fill="#667085">à n'importe quel poste</text>
|
||||
|
||||
<g transform="translate(560,100)">
|
||||
<ellipse cx="80" cy="14" rx="80" ry="16" fill="#eff6ff" stroke="#172554" stroke-width="2.5"/>
|
||||
<path d="M0 14 v74" stroke="#172554" stroke-width="2.5" fill="none"/>
|
||||
<path d="M160 14 v74" stroke="#172554" stroke-width="2.5" fill="none"/>
|
||||
<path d="M0 88 a80 16 0 0 0 160 0" fill="#eff6ff" stroke="#172554" stroke-width="2.5"/>
|
||||
<ellipse cx="80" cy="47" rx="80" ry="16" fill="none" stroke="#bfdbfe" stroke-width="1.5"/>
|
||||
<text x="80" y="128" text-anchor="middle" font-size="14" font-weight="800" fill="#172554">Serveur de l'école</text>
|
||||
<rect x="4" y="140" width="152" height="26" rx="13" fill="#2563eb"/>
|
||||
<text x="80" y="158" text-anchor="middle" font-size="12.5" font-weight="800" fill="#fff">mon dossier personnel</text>
|
||||
</g>
|
||||
|
||||
<path d="M330 96 C420 116, 470 118, 550 118" stroke="#172554" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
|
||||
<path d="M330 206 C420 196, 470 164, 550 146" stroke="#172554" stroke-width="2.5" fill="none" marker-end="url(#fl)"/>
|
||||
<text x="352" y="256" font-size="13" font-weight="800" fill="#172554">mon dossier me suit d'un poste à l'autre</text>
|
||||
</g>
|
||||
</svg>
|
||||
<figcaption>Le compte suit l'élève, la machine ne le suit pas. Ce point justifie à lui seul l'étape 4 et la règle 7 de la charte. Il sera repris et approfondi au bloc 3.</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<svg viewBox="0 0 620 290" role="img" aria-label="Arborescence du dossier personnel contenant le dossier FMTTN et le fichier test point txt">
|
||||
<g font-family="Inter, system-ui, sans-serif" font-size="15">
|
||||
<g stroke="#cbd5e1" stroke-width="2" fill="none">
|
||||
<path d="M46 56 v92"/><path d="M46 100 h26"/>
|
||||
<path d="M86 108 v92"/><path d="M86 152 h26"/>
|
||||
<path d="M126 160 v92"/><path d="M126 204 h26"/><path d="M126 246 h26"/>
|
||||
</g>
|
||||
<g transform="translate(20,32)">
|
||||
<path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/>
|
||||
<text x="48" y="26" fill="#172033" font-weight="600">Serveur de l'école</text>
|
||||
</g>
|
||||
<g transform="translate(60,84)">
|
||||
<path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/>
|
||||
<text x="48" y="26" fill="#172033" font-weight="600">Élèves</text>
|
||||
</g>
|
||||
<g transform="translate(100,136)">
|
||||
<path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#eff6ff" stroke="#667085" stroke-width="2"/>
|
||||
<text x="48" y="26" fill="#172033" font-weight="800">1C_dupont_marie</text>
|
||||
<text x="215" y="26" fill="#667085" font-size="13">mon dossier personnel</text>
|
||||
</g>
|
||||
<g transform="translate(140,188)">
|
||||
<path d="M0 6 h13 l4 6 h17 a3 3 0 0 1 3 3 v14 a3 3 0 0 1 -3 3 h-34 a3 3 0 0 1 -3 -3 v-20 a3 3 0 0 1 3 -3 z" fill="#2563eb" stroke="#1d4ed8" stroke-width="2"/>
|
||||
<rect x="42" y="7" width="78" height="23" rx="11" fill="#2563eb"/>
|
||||
<text x="52" y="25" fill="#fff" font-weight="800">FMTTN</text>
|
||||
<text x="134" y="26" fill="#667085" font-size="13">à créer aujourd'hui</text>
|
||||
</g>
|
||||
<g transform="translate(140,228)">
|
||||
<path d="M4 4 h20 l10 10 v20 a3 3 0 0 1 -3 3 h-27 a3 3 0 0 1 -3 -3 v-27 a3 3 0 0 1 3 -3 z" fill="#fff" stroke="#667085" stroke-width="2"/>
|
||||
<path d="M24 4 v10 h10" fill="none" stroke="#667085" stroke-width="2"/>
|
||||
<text x="48" y="28" fill="#172033" font-weight="600">test.txt</text>
|
||||
<text x="134" y="28" fill="#667085" font-size="13">vérification de l'étape 5</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<figcaption>Le dossier FMTTN se crée à l'intérieur du dossier personnel, jamais sur le bureau. Nom en majuscules, sans espace ni accent. Ce point de nommage sera repris au bloc 7.</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="info alerte"><b>Mot de passe.</b> Exiger une phrase de quatre mots collés avec un chiffre, sur le modèle <code>ChatVertSurToit7</code>, exemple à ne pas réutiliser tel quel. Ne pas exiger de caractère spécial en 1re, le taux d'oubli au cours suivant augmente fortement et fait perdre le début du bloc 2. Ne jamais lire à voix haute l'identifiant ou le mot de passe d'un élève devant la classe, se déplacer et le faire au poste.</div>
|
||||
</div></section>
|
||||
|
||||
<!-- 5. TRACE -->
|
||||
<section class="panel" id="p4"><div class="card">
|
||||
<div class="entete">
|
||||
<div><h2>Trace écrite</h2><p class="muted">La fiche « Mon compte scolaire » et la trace écrite figurent déjà dans le livret élève. Trois minutes pour la fiche, cinq pour compléter les mots manquants de la trace.</p></div>
|
||||
<span class="score">10 min · de 85 à 95</span>
|
||||
</div>
|
||||
|
||||
<div class="trace">
|
||||
<h3>Bloc 1. Ouvrir le cours</h3>
|
||||
<p>Depuis mon réveil, j'utilise des outils numériques pour communiquer, m'informer, me divertir, me déplacer, apprendre et payer. La plupart ne sont pas des ordinateurs.</p>
|
||||
<p>Les postes du local sont partagés entre plusieurs classes. Chaque élève possède un <b>compte</b> personnel, composé d'un <b>identifiant</b> et d'un <b>mot de passe</b>.</p>
|
||||
<p>Mon identifiant peut être connu. Mon mot de passe est <b>secret</b> et ne se communique à personne.</p>
|
||||
<p>Tout ce qui est fait sur un compte est attribué à la personne à qui ce compte appartient.</p>
|
||||
<p>Le compte me suit d'un poste à l'autre, la machine ne me suit pas. Ce que j'enregistre sur le <b>bureau</b> reste sur cette machine. Ce que j'enregistre dans mon <b>dossier personnel</b>, je le retrouve partout dans le local.</p>
|
||||
<p>Mon dossier de cours s'appelle <code>FMTTN</code>.</p>
|
||||
<p>À la fin de chaque cours, je <b>ferme ma session</b>.</p>
|
||||
</div>
|
||||
|
||||
<div class="info"><b>Les huit mots en gras sont les blancs du livret élève.</b> Les faire trouver oralement plutôt que les dicter. Un élève qui bute sur « dossier personnel » n'a pas acquis l'étape 3 de la phase précédente, à noter pour le bloc 2.</div>
|
||||
</div></section>
|
||||
|
||||
<!-- 6. FERMETURE -->
|
||||
<section class="panel" id="p5"><div class="card">
|
||||
<div class="entete">
|
||||
<div><h2>Fermeture</h2><p class="muted">Ce geste se répète trente-cinq fois cette année et construit à lui seul l'attendu SF53, effacer toute trace de connexion sur un équipement partagé.</p></div>
|
||||
<span class="score">5 min · de 95 à 100</span>
|
||||
</div>
|
||||
<div class="check">
|
||||
<label><input type="checkbox"><span>Chaque élève a fermé sa session, pas seulement éteint l'écran</span></label>
|
||||
<label><input type="checkbox"><span>Vérification poste par poste avant que la rangée ne se lève</span></label>
|
||||
<label><input type="checkbox"><span>Chaises rangées, rien laissé sur les tables</span></label>
|
||||
<label><input type="checkbox"><span>Relevé des trois observations noté pour la constitution des binômes du bloc 2</span></label>
|
||||
<label><input type="checkbox"><span>Liste des élèves sans compte fonctionnel transmise à l'administration le jour même</span></label>
|
||||
</div>
|
||||
<div class="info alerte"><b>Cette phase ne se coupe jamais</b>, y compris quand la sonnerie a déjà retenti. À préparer pour le bloc 2 : une unité centrale hors service ouverte, un tournevis, un jeu de périphériques réels dont souris, casque, imprimante, webcam, clé USB et manette, ainsi que des étiquettes vierges.</div>
|
||||
</div></section>
|
||||
|
||||
</main>
|
||||
<footer>Bloc 1 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</footer>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
var PHASES=[
|
||||
{t:"Accroche",d:15,a:0},{t:"Charte",d:15,a:15},{t:"Diagnostic",d:25,a:30},
|
||||
{t:"Connexion",d:30,a:55},{t:"Trace écrite",d:10,a:85},{t:"Fermeture",d:5,a:95}];
|
||||
|
||||
var CATS=["Communiquer","S'informer","Se divertir","Se déplacer","Apprendre","Payer"];
|
||||
|
||||
var REGLES=[
|
||||
["J'utilise le poste qui m'est attribué.","Je ne change pas de place sans autorisation. Le numéro de mon poste est noté sur ma fiche. En cas de problème sur une machine, on sait qui l'utilisait."],
|
||||
["Je signale tout de suite un matériel abîmé ou manquant.","Si tu le signales en arrivant, ce n'est pas de ta faute. Si on le découvre après, plus personne ne peut savoir ce qui s'est passé."],
|
||||
["Je me connecte avec mon compte, jamais avec celui d'un autre.","Tout ce qui est fait sur un compte est attribué à la personne à qui ce compte appartient. Si tu utilises le compte d'un camarade, c'est lui qui répond de ce que tu fais."],
|
||||
["Je ne donne mon mot de passe à personne.","Pas à un ami, pas à mon meilleur ami, pas à quelqu'un qui dit en avoir besoin. Un professeur ne te demandera jamais ton mot de passe."],
|
||||
["Je n'installe rien et je ne modifie pas les réglages du poste.","Le poste est partagé avec d'autres classes. Ce que tu changes, un autre le subit au cours suivant."],
|
||||
["Ni boisson ni nourriture à côté du clavier.","Un clavier reçoit un liquide une seule fois dans sa vie."],
|
||||
["J'enregistre mon travail dans mon dossier personnel.","Ce qui est enregistré sur le bureau reste sur cette machine et peut disparaître. Ce qui est dans mon dossier personnel me suit sur tous les postes du local."],
|
||||
["À la fin du cours, je ferme ma session et je range ma chaise.","Laisser une session ouverte, c'est laisser son compte à disposition de la classe suivante."]];
|
||||
|
||||
var Q=[
|
||||
{n:1,q:"Un fichier, c'est :",o:["un meuble de rangement","un document enregistré dans un ordinateur","une partie de l'écran","un câble"],r:1,l:"Une erreur ici signifie que le mot fichier n'est pas installé. À reprendre au bloc 3."},
|
||||
{n:2,q:"À quoi sert un dossier ?",o:["à supprimer des fichiers","à ranger des fichiers","à allumer l'ordinateur","à écrire un texte"],r:1,l:"Rare à ce niveau. Une erreur annonce une difficulté sérieuse à la tâche intégratrice du bloc 7."},
|
||||
{n:3,q:"Parmi ces éléments, lequel est un logiciel ?",o:["le clavier","l'écran","le traitement de texte","la souris"],r:2,l:"Confusion matériel et logiciel. C'est exactement l'objet du bloc 2, ne pas s'en inquiéter aujourd'hui."},
|
||||
{n:4,q:"À quoi sert le disque dur d'un ordinateur ?",o:["à afficher les images","à conserver les données même quand l'ordinateur est éteint","à se connecter à internet","à refroidir la machine"],r:1,l:"Confusion entre stockage et affichage. À reprendre au bloc 3."},
|
||||
{n:5,q:"Enregistrer un document dans le cloud, cela veut dire :",o:["l'imprimer","l'envoyer par la poste","le conserver sur un ordinateur distant, accessible par internet","le supprimer"],r:2,l:"Le cloud est souvent perçu comme un lieu sans machine derrière. À reprendre au bloc 3."},
|
||||
{n:6,q:"Tu fermes un document sans l'enregistrer. Que se passe-t-il ?",o:["rien, tout est toujours enregistré automatiquement","tu risques de perdre ce que tu as écrit","l'ordinateur s'éteint","le fichier change de nom"],r:1,l:"Les élèves habitués aux outils en ligne, qui enregistrent seuls, répondent A. Réponse fréquente et significative pour le module 4."},
|
||||
{n:7,cle:true,q:"Lequel de ces noms de fichier te permettra le mieux de retrouver ton travail dans six mois ?",o:["doc1.docx","sans titre.docx","2026-09-08_francais_resume-chapitre1.docx","aaaa.docx"],r:2,l:"Question clé. Prépare le critère de nommage explicite évalué à la tâche intégratrice du bloc 7."},
|
||||
{n:8,q:"Une application installée sur un téléphone, c'est :",o:["un fichier photo","un logiciel","une carte mémoire","un réseau"],r:1,l:"Prolonge la question 3. Le téléphone est rarement perçu comme un ordinateur."},
|
||||
{n:9,cle:true,q:"Lequel de ces mots de passe est le plus solide ?",o:["ton prénom","123456","ChatVertSurToit7","ta date de naissance"],r:2,l:"Question clé. Prépare le bloc 10 et sert immédiatement, à la phase 4 de ce bloc."},
|
||||
{n:10,q:"Tu donnes ton mot de passe à un ami. Que peut-il se passer ?",o:["rien du tout","il peut agir sur ton compte à ta place, et c'est toi qui en réponds","le mot de passe change tout seul","ton compte est mieux protégé"],r:1,l:"La responsabilité attachée au compte est le point le plus souvent absent. Lien direct avec la règle 3 de la charte."},
|
||||
{n:11,cle:true,q:"À quoi sert un logigramme ?",o:["à dessiner un personnage","à représenter les étapes d'une suite d'actions","à calculer une moyenne","à enregistrer un fichier"],r:1,l:"Question clé. Prépare le bloc 30. Beaucoup d'élèves n'ont jamais rencontré le mot, ce n'est pas un problème."},
|
||||
{n:12,q:"Sur un ordinateur partagé à l'école, à la fin du cours, il faut :",o:["éteindre l'écran seulement","fermer sa session","ne rien faire","débrancher la machine"],r:1,l:"Prépare SF53, travaillé trente-cinq fois dans l'année à la phase de fermeture."},
|
||||
{n:13,vf:true,q:"Une clé USB garde ce qu'on y a enregistré même quand elle est débranchée.",r:"Vrai",l:"Justification attendue : la mémoire de la clé garde l'information sans courant. Une réponse du type « parce qu'elle est solide » est incomplète mais pas fausse."},
|
||||
{n:14,vf:true,q:"Dans un même dossier, deux fichiers différents peuvent porter exactement le même nom.",r:"Faux",l:"Justification attendue : l'ordinateur ne saurait plus lequel ouvrir. Prépare directement la tâche du bloc 7."},
|
||||
{n:15,cle:true,vf:true,q:"Internet et le navigateur web, c'est la même chose.",r:"Faux",l:"Question clé. Le navigateur est un programme, internet est le réseau auquel il se connecte. C'est l'indicateur explicite du bloc 4, un relevé du niveau de départ est utile."},
|
||||
{n:16,vf:true,q:"On peut ranger un dossier à l'intérieur d'un autre dossier.",r:"Vrai",l:"Justification attendue : c'est ce qui permet de classer, comme des boîtes dans des boîtes. Prépare la conception d'arborescence du bloc 7."},
|
||||
{n:17,ouv:true,q:"Cite deux logiciels ou applications que tu as déjà utilisés.",l:"Ne se corrige pas. Compter combien d'élèves citent un logiciel de bureautique. Un chiffre bas signifie que le bloc 21 devra consacrer plus de temps à la prise de repères."},
|
||||
{n:18,ouv:true,q:"Quand tu travailles sur un ordinateur à la maison, où enregistres-tu tes documents ?",l:"Ne se corrige pas. Trois réponses typiques : le bureau, un dossier nommé, un service en ligne. La proportion de « sur le bureau » donne la mesure du travail à faire au bloc 7."},
|
||||
{n:19,ouv:true,q:"Tu as oublié le mot de passe d'un de tes comptes. Que fais-tu ?",l:"Ne se corrige pas. Repérer les élèves qui répondent « je demande à quelqu'un » plutôt que « j'utilise mot de passe oublié ». Prépare le bloc 10."},
|
||||
{n:20,cle:true,ouv:true,q:"Dans le nom de fichier photo.jpg, à quoi servent les trois lettres après le point ?",l:"Question clé. Le mot attendu est extension, rarement connu à ce stade. Une réponse du type « ça dit que c'est une photo » est correcte sur le fond. Prépare S16 au bloc 5."}];
|
||||
|
||||
var ETAPES=[
|
||||
["Se connecter","Identifiant fourni par l'école, saisi tel quel. Attention aux majuscules et au point entre le nom et le prénom."],
|
||||
["Changer le mot de passe initial","Une phrase de quatre mots collés avec un chiffre. Pas de caractère spécial en 1re. Le mot de passe ne s'écrit nulle part."],
|
||||
["Retrouver son dossier personnel","Sur le réseau de l'école, pas sur le bureau. Faire lire à voix haute le chemin complet par un élève."],
|
||||
["Créer le dossier FMTTN","À l'intérieur du dossier personnel. Majuscules, sans espace ni accent. C'est le dossier de toute l'année."],
|
||||
["Vérifier","Enregistrer un fichier vide nommé test.txt dans FMTTN, le fermer, puis le rouvrir. Si l'élève le retrouve, l'étape 3 est acquise."]];
|
||||
|
||||
/* chrono */
|
||||
var t0=null,tick=null,choisie=0,corrigees=0;
|
||||
var ecart=document.getElementById("ecart"),rail=document.getElementById("rail");
|
||||
function phasePrevue(m){for(var i=PHASES.length-1;i>=0;i--){if(m>=PHASES[i].a)return i;}return 0;}
|
||||
function d2(n){return (n<10?"0":"")+n;}
|
||||
function minutes(){return t0?(Date.now()-t0)/60000:0;}
|
||||
|
||||
function dessineRail(){
|
||||
var pv=t0?phasePrevue(minutes()):-1;
|
||||
rail.innerHTML="";
|
||||
PHASES.forEach(function(p,i){
|
||||
var b=document.createElement("button");
|
||||
b.className="tab"+(i===choisie?" active":"")+(i===pv?" prevue":"");
|
||||
b.innerHTML=(i+1)+". "+p.t+"<span>"+p.a+" à "+(p.a+p.d)+" min</span>";
|
||||
b.onclick=function(){montre(i);};
|
||||
rail.appendChild(b);
|
||||
});
|
||||
document.getElementById("sPhase").textContent=pv<0?"–":PHASES[pv].t;
|
||||
}
|
||||
function montre(i){
|
||||
choisie=i;
|
||||
for(var k=0;k<PHASES.length;k++){document.getElementById("p"+k).classList.toggle("active",k===i);}
|
||||
dessineRail();
|
||||
window.scrollTo({top:0,behavior:"smooth"});
|
||||
}
|
||||
function rafraichit(){
|
||||
var s=Math.floor((Date.now()-t0)/1000);
|
||||
document.getElementById("sTemps").textContent=d2(Math.floor(s/60))+":"+d2(s%60);
|
||||
var m=minutes(),pv=phasePrevue(m),d=Math.round(m-PHASES[choisie].a);
|
||||
ecart.className="ecart";ecart.removeAttribute("style");
|
||||
if(m>100){ecart.classList.add("retard");ecart.textContent="Dépassement de "+Math.round(m-100)+" min sur le bloc";}
|
||||
else if(pv===choisie){ecart.textContent="Dans les temps · phase "+(choisie+1)+" sur 6";}
|
||||
else if(d>0){ecart.classList.add("retard");ecart.textContent="Retard de "+d+" min · phase prévue : "+PHASES[pv].t;}
|
||||
else{ecart.classList.add("avance");ecart.textContent="Avance de "+(-d)+" min · phase prévue : "+PHASES[pv].t;}
|
||||
dessineRail();
|
||||
}
|
||||
document.getElementById("btnGo").onclick=function(){
|
||||
if(t0)return;t0=Date.now();this.textContent="Séance en cours";
|
||||
tick=setInterval(rafraichit,1000);rafraichit();
|
||||
};
|
||||
document.getElementById("btnStop").onclick=function(){
|
||||
clearInterval(tick);t0=null;
|
||||
document.getElementById("sTemps").textContent="00:00";
|
||||
ecart.className="ecart";ecart.setAttribute("style","background:#f1f5f9;border:1px solid var(--line);color:#475569");
|
||||
ecart.textContent="Séance non démarrée";
|
||||
document.getElementById("btnGo").textContent="Démarrer la séance";
|
||||
dessineRail();
|
||||
};
|
||||
|
||||
/* phase 1 */
|
||||
var tableau={};CATS.forEach(function(c){tableau[c]=[];});
|
||||
var sel=document.getElementById("cat");
|
||||
CATS.forEach(function(c){var o=document.createElement("option");o.value=c;o.textContent=c;sel.appendChild(o);});
|
||||
function dessineColonnes(){
|
||||
var z=document.getElementById("colonnes");z.innerHTML="";
|
||||
CATS.forEach(function(c){
|
||||
var d=document.createElement("div");d.className="colonne";
|
||||
var items=tableau[c].map(function(x,i){
|
||||
return '<li><span>'+x+'</span><button data-c="'+c+'" data-i="'+i+'" aria-label="Retirer">×</button></li>';}).join("");
|
||||
d.innerHTML='<h3>'+c+' <em>'+tableau[c].length+'</em></h3><ul>'+items+'</ul>';
|
||||
z.appendChild(d);
|
||||
});
|
||||
z.querySelectorAll("button[data-c]").forEach(function(b){
|
||||
b.onclick=function(){tableau[b.dataset.c].splice(parseInt(b.dataset.i,10),1);dessineColonnes();};});
|
||||
}
|
||||
function ajoute(){
|
||||
var e=document.getElementById("entree"),v=e.value.trim();
|
||||
if(!v)return;
|
||||
tableau[sel.value].push(v.replace(/[<>&]/g,""));
|
||||
e.value="";e.focus();dessineColonnes();
|
||||
}
|
||||
document.getElementById("ajouter").onclick=ajoute;
|
||||
document.getElementById("entree").addEventListener("keydown",function(ev){if(ev.key==="Enter")ajoute();});
|
||||
dessineColonnes();
|
||||
|
||||
/* phase 2 */
|
||||
var zr=document.getElementById("regles");
|
||||
REGLES.forEach(function(r,i){
|
||||
var d=document.createElement("div");d.className="item";
|
||||
d.innerHTML='<button aria-expanded="false"><span class="n">'+(i+1)+'</span><span class="t">'+r[0]+'</span><span class="plus">pourquoi</span></button><div class="corps">'+r[1]+'</div>';
|
||||
d.querySelector("button").onclick=function(){
|
||||
var o=d.classList.toggle("ouvert");
|
||||
this.setAttribute("aria-expanded",o?"true":"false");
|
||||
this.querySelector(".plus").textContent=o?"masquer":"pourquoi";
|
||||
};
|
||||
zr.appendChild(d);
|
||||
});
|
||||
|
||||
/* phase 3 */
|
||||
var qi=0,seulesCles=false,vues={};
|
||||
var qbloc=document.getElementById("qbloc");
|
||||
function liste(){return seulesCles?Q.filter(function(x){return x.cle;}):Q;}
|
||||
function dessineQ(){
|
||||
var L=liste();
|
||||
if(qi>=L.length)qi=0;
|
||||
if(qi<0)qi=L.length-1;
|
||||
var q=L[qi];
|
||||
var h='<span class="qtag'+(q.cle?" cle":"")+'">Question '+q.n+' sur 20'+(q.cle?" · à conserver si le temps manque":"")+'</span>';
|
||||
h+='<div class="qtxt">'+q.q+'</div>';
|
||||
if(q.o){
|
||||
h+='<div class="answer-grid" id="choix">';
|
||||
q.o.forEach(function(o,i){h+='<div class="answer" data-i="'+i+'">'+"ABCD".charAt(i)+". "+o+'</div>';});
|
||||
h+='</div>';
|
||||
}else if(q.vf){
|
||||
h+='<div class="answer-grid" id="choix"><div class="answer" data-v="Vrai">Vrai</div><div class="answer" data-v="Faux">Faux</div></div>';
|
||||
}else{
|
||||
h+='<p class="muted" style="margin:0">Réponse ouverte. Ne se corrige pas, se recueille : faire lire trois ou quatre réponses sans commenter la justesse.</p>';
|
||||
}
|
||||
h+='<div class="reveal" id="rep"><div class="verdict" id="verdict"></div><div class="info" style="margin-top:0"><b>Lecture du relevé.</b> '+q.l+'</div></div>';
|
||||
qbloc.innerHTML=h;
|
||||
document.getElementById("qcompte").textContent=(qi+1)+" / "+L.length+(seulesCles?" (clés)":"");
|
||||
document.getElementById("qrev").textContent="Afficher la réponse";
|
||||
}
|
||||
function revele(){
|
||||
var q=liste()[qi],rep=document.getElementById("rep");
|
||||
if(rep.classList.contains("on"))return;
|
||||
rep.classList.add("on");
|
||||
var v=document.getElementById("verdict"),c;
|
||||
if(q.o){c=document.querySelector('#choix div[data-i="'+q.r+'"]');if(c)c.classList.add("ok");v.textContent="Réponse : "+"ABCD".charAt(q.r);}
|
||||
else if(q.vf){c=document.querySelector('#choix div[data-v="'+q.r+'"]');if(c)c.classList.add("ok");v.textContent="Réponse : "+q.r;}
|
||||
else{v.textContent="Aucune réponse attendue";}
|
||||
if(!vues[q.n]){vues[q.n]=1;corrigees++;document.getElementById("sDiag").textContent=corrigees+" / 20";}
|
||||
document.getElementById("qrev").textContent="Réponse affichée";
|
||||
}
|
||||
document.getElementById("qsuiv").onclick=function(){qi++;dessineQ();};
|
||||
document.getElementById("qprec").onclick=function(){qi--;dessineQ();};
|
||||
document.getElementById("qrev").onclick=revele;
|
||||
document.getElementById("qcles").onclick=function(){
|
||||
seulesCles=!seulesCles;qi=0;dessineQ();
|
||||
this.textContent=seulesCles?"Revenir aux 20 questions":"Ne garder que les 5 questions clés";
|
||||
};
|
||||
dessineQ();
|
||||
|
||||
/* phase 4 */
|
||||
var ei=0,ze=document.getElementById("etapes");
|
||||
function dessineEtapes(){
|
||||
ze.innerHTML="";
|
||||
ETAPES.forEach(function(e,i){
|
||||
var d=document.createElement("div");
|
||||
d.className="step"+(i===ei?" on":"")+(i<ei?" fait":"");
|
||||
d.innerHTML='<span class="n">'+(i+1)+'</span><div><h3>'+e[0]+'</h3><p>'+(i<=ei?e[1]:"")+'</p></div>';
|
||||
ze.appendChild(d);
|
||||
});
|
||||
document.getElementById("sConn").textContent=(ei+1)+" / 5";
|
||||
}
|
||||
document.getElementById("etsuiv").onclick=function(){if(ei<ETAPES.length-1){ei++;dessineEtapes();}};
|
||||
document.getElementById("etprec").onclick=function(){if(ei>0){ei--;dessineEtapes();}};
|
||||
dessineEtapes();
|
||||
document.getElementById("sConn").textContent="0 / 5";
|
||||
|
||||
dessineRail();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,792 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Cours 2 – Ce qu'il y a dans la boite</title>
|
||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
||||
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
|
||||
button,input,select{font:inherit}
|
||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
||||
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
|
||||
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
|
||||
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
|
||||
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
|
||||
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
|
||||
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
|
||||
.hero a.up:hover{color:#fff}
|
||||
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
||||
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
|
||||
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hero-chip b{font-size:14px}
|
||||
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
|
||||
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
|
||||
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
|
||||
|
||||
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
|
||||
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
|
||||
.stat strong{display:block;font-size:22px;margin-top:3px}
|
||||
.stat small{color:#64748b;font-weight:800}
|
||||
.stat.ok strong{color:var(--green)}
|
||||
|
||||
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
|
||||
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
|
||||
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
|
||||
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
|
||||
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
|
||||
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
|
||||
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
|
||||
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
|
||||
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
|
||||
|
||||
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
|
||||
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
|
||||
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
|
||||
.tab:hover{border-color:#93c5fd}
|
||||
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
|
||||
.tab.active span{color:#c7dcff}
|
||||
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
|
||||
|
||||
.panel{display:none}.panel.active{display:block}
|
||||
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
|
||||
.card h2,.card h3{margin-top:0}
|
||||
.card h2{font-size:26px;letter-spacing:-.5px}
|
||||
.muted{color:var(--muted);line-height:1.6}
|
||||
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
||||
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
|
||||
.btn:hover{filter:brightness(.97)}
|
||||
.btn.primary{background:#2563eb;color:#fff}
|
||||
.btn.soft{background:#f1f5f9;color:#334155}
|
||||
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
|
||||
.feedback{min-height:31px;margin-top:12px;font-weight:850}
|
||||
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
|
||||
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
|
||||
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
|
||||
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
|
||||
.info b{color:var(--ink)}
|
||||
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
|
||||
.info.alerte b{color:#991b1b}
|
||||
|
||||
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
|
||||
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
|
||||
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
|
||||
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
|
||||
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
|
||||
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
|
||||
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
|
||||
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
|
||||
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
|
||||
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
|
||||
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
|
||||
.colonne li button:hover{color:var(--red)}
|
||||
|
||||
.accordeon{display:grid;gap:10px}
|
||||
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
|
||||
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
|
||||
.item>button:hover{background:#f8fbff}
|
||||
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
|
||||
.item .t{font-weight:850;font-size:17px;flex:1}
|
||||
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
|
||||
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
|
||||
.item.ouvert .corps{display:block}
|
||||
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.item.ouvert .n{background:#2563eb;color:#fff}
|
||||
|
||||
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
|
||||
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
|
||||
.qtag.cle{background:#fef3c7;color:#92400e}
|
||||
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
|
||||
.answer-grid{display:grid;gap:8px}
|
||||
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
|
||||
.answer.ok{border-color:#22c55e;background:#f0fdf4}
|
||||
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
|
||||
.reveal.on{display:block}
|
||||
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
|
||||
|
||||
.steps{display:grid;gap:11px}
|
||||
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
|
||||
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.step.fait{opacity:1}
|
||||
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
|
||||
.step.on .n{background:#2563eb;color:#fff}
|
||||
.step.fait .n{background:#dcfce7;color:#15803d}
|
||||
.step h3{margin:0 0 4px;font-size:17px}
|
||||
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
|
||||
|
||||
figure{margin:0 0 18px}
|
||||
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
||||
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
|
||||
|
||||
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
|
||||
.trace h3{margin:0 0 14px;font-size:22px}
|
||||
.trace p{margin:0 0 .5em}
|
||||
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
|
||||
|
||||
.check{display:grid;gap:9px}
|
||||
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
|
||||
.check label:hover{border-color:#93c5fd}
|
||||
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
|
||||
.check input:checked+span{color:var(--green);font-weight:900}
|
||||
|
||||
table.grille{width:100%;border-collapse:collapse;font-size:15px}
|
||||
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
|
||||
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
|
||||
table.grille td.masque{color:transparent;background:#f8fafc}
|
||||
table.grille tr.on td{background:#f0fdf4}
|
||||
table.grille td b{color:#15803d}
|
||||
|
||||
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
|
||||
.module{margin-bottom:30px}
|
||||
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
|
||||
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
|
||||
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
|
||||
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
|
||||
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
|
||||
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
|
||||
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
|
||||
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
|
||||
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
|
||||
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
|
||||
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
||||
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
|
||||
.et.eval{background:#fee2e2;color:#991b1b}
|
||||
.et.fac{background:#f3e8ff;color:#6b21a8}
|
||||
.et.pret{background:#dcfce7;color:#15803d}
|
||||
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
|
||||
a.bloc .n{background:#2563eb;color:#fff}
|
||||
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
|
||||
.bloc.vide h3{font-weight:800}
|
||||
.masque{display:none!important}
|
||||
|
||||
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
|
||||
|
||||
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
|
||||
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
|
||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
||||
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
|
||||
|
||||
.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
|
||||
.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
|
||||
.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
|
||||
.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
|
||||
.q.bon{border-color:#22c55e;background:#f2fdf6}
|
||||
.q.faux{border-color:#f59e0b;background:#fffbeb}
|
||||
.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
|
||||
.q .opts{display:flex;gap:8px;flex-wrap:wrap}
|
||||
.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
|
||||
.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
|
||||
.q .opts button:disabled{cursor:default;opacity:.55}
|
||||
.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
|
||||
.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
|
||||
.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
|
||||
.q.done .expl{display:block}
|
||||
.figpetit{max-width:560px;margin:0 auto 14px}
|
||||
#bilan{display:none}
|
||||
#bilan.on{display:block}
|
||||
.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
|
||||
textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<section class="hero">
|
||||
<div>
|
||||
<a class="up" href="index.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
|
||||
<div class="eyebrow">Cours 2 · Formation numérique · 1re année</div>
|
||||
<h1>Ce qu'il y a dans la boite</h1>
|
||||
<p>Aujourd'hui, on ouvre un vrai ordinateur. Tu vas apprendre à nommer ce qu'il y a dedans, à faire la différence entre le matériel et le logiciel, et à dire dans quel sens l'information circule quand on branche un appareil.</p>
|
||||
<div class="badges">
|
||||
<span class="badge">2 périodes</span>
|
||||
<span class="badge">Cours débranché</span>
|
||||
<span class="badge">Livret pages 1 à 6</span>
|
||||
</div>
|
||||
<div class="badges" style="display:none">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"/><circle cx="12" cy="10" r="3.5"/><path d="M8 17h8"/></svg><b>La boite</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M3 5h8v14H3zM13 5h8v14h-8"/><path d="M6 9h2M16 9h2"/></svg><b>Le tri</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 8h11l-3-3M20 16H9l3 3"/></svg><b>Entrée, sortie</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><b>Ma trace</b></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="dashboard">
|
||||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
||||
<div class="stat"><small>Temps depuis le début</small><strong id="sTemps">00:00</strong></div>
|
||||
<div class="stat"><small>Il reste pour cette activité</small><strong id="sReste">–</strong></div>
|
||||
<div class="stat"><small>Cartes triées</small><strong id="sComp">0 sur 17</strong></div>
|
||||
</section>
|
||||
|
||||
<div class="card" style="padding:16px 18px">
|
||||
<div class="row">
|
||||
<button class="btn primary" id="btnGo">Démarrer</button>
|
||||
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
||||
<span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1 · La question du jour</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navtabs n6" id="rail"></nav>
|
||||
|
||||
<!-- 1 -->
|
||||
<section class="panel active" id="p0"><div class="card">
|
||||
<div class="entete"><div><h2>On s'installe</h2><p class="muted">Pendant que le professeur distribue les ordinateurs et les codes.</p></div><span class="score">20 min</span></div>
|
||||
|
||||
<div class="consigne"><small>À faire tout de suite, seul et en silence</small>
|
||||
Ouvre ton livret à la page 1.<br><br>
|
||||
Quand tu dis que ton téléphone ou ton ordinateur est lent, qu'est-ce qui est lent ? L'objet lui-même, ou ce qu'il y a dedans ?<br><br>
|
||||
Écris ta réponse, puis un exemple précis d'un moment où ça t'est arrivé.</div>
|
||||
|
||||
<div class="consigne" style="margin-bottom:0"><small>Si tu n'as pas encore ton code</small>
|
||||
Ne bouge pas de ta place et lève la main. Le professeur passe te le donner. Tu n'en as pas besoin avant la fin du cours.</div>
|
||||
</div></section>
|
||||
|
||||
<!-- 2 -->
|
||||
<section class="panel" id="p1"><div class="card">
|
||||
<div class="entete"><div><h2>La question du jour</h2><p class="muted">Ton livret, page 1.</p></div><span class="score">10 min</span></div>
|
||||
|
||||
<h3>Les réponses de la classe</h3>
|
||||
<div class="saisie">
|
||||
<input id="entree" placeholder="Une réponse donnée par la classe" autocomplete="off">
|
||||
<select id="cat" aria-label="Colonne"></select>
|
||||
<button class="btn primary" id="ajouter">Ajouter</button>
|
||||
</div>
|
||||
<div class="colonnes" id="colonnes"></div>
|
||||
<p class="muted">On ne corrige rien pour l'instant. On reviendra sur ces réponses à la fin du cours.</p>
|
||||
</div></section>
|
||||
|
||||
<!-- 3 -->
|
||||
<section class="panel" id="p2">
|
||||
<div class="card">
|
||||
<h2>Je comprends. Le matériel, le logiciel et la donnée</h2>
|
||||
<p class="muted">On lit cette page ensemble. Elle est dans ton livret, tu la reliras pour réviser.</p>
|
||||
|
||||
<h3>Un ordinateur seul ne fait rien</h3>
|
||||
<p>Un ordinateur qui sort de son carton affiche un écran noir et attend. Toutes les pièces fonctionnent, mais <b>personne ne leur a dit quoi faire</b>. Un ordinateur, ce n'est pas une chose : c'est trois choses qui travaillent ensemble.</p>
|
||||
|
||||
<h3>1. Le matériel <span class="muted" style="font-weight:600">· hardware</span></h3>
|
||||
<p>Ce sont <b>les pièces</b>. L'écran, le clavier, la souris, les câbles, la boite, les cartes électroniques à l'intérieur.</p>
|
||||
<p>Il se fabrique dans une usine, il pèse quelque chose, il chauffe, il s'use, il se casse. Attention : le matériel n'est pas seulement la grosse boite. Un câble est du matériel. Une clé USB aussi.</p>
|
||||
|
||||
<h3>2. Le logiciel <span class="muted" style="font-weight:600">· software</span></h3>
|
||||
<p>C'est <b>une suite d'instructions</b> écrites par des personnes, que la machine exécute l'une après l'autre.</p>
|
||||
<p>Une instruction, c'est un ordre simple : <i>affiche cette lettre ici, compare ces deux nombres, si le premier est plus grand va à l'étape 12.</i> Un logiciel, c'est des millions d'instructions de ce genre.</p>
|
||||
<p><b>Deux familles.</b> Le <b>système d'exploitation</b> démarre en premier et commande tous les autres : Windows, macOS, Linux, Android, iOS. Les <b>applications</b> sont tous les autres logiciels, ceux qu'on lance soi-même.</p>
|
||||
<p>Un logiciel ne se fabrique pas, il s'écrit. Il ne pèse rien, il ne s'use pas. On peut le remplacer sans changer une seule pièce.</p>
|
||||
|
||||
<h3>3. La donnée</h3>
|
||||
<p>C'est une <b>information enregistrée</b>. Ta photo de profil, ton devoir, une chanson, une vidéo.</p>
|
||||
<p>Un logiciel <b>s'exécute</b> : il agit. Une donnée <b>ne fait rien</b> : on l'ouvre, on la lit, on la modifie. Une photo ne peut pas se lancer toute seule, il faut un logiciel pour l'ouvrir.</p>
|
||||
|
||||
<div class="consigne"><small>L'image qui aide : la cuisine</small>
|
||||
Le four, la casserole, le couteau, c'est le <b>matériel</b>.<br>
|
||||
La recette, c'est le <b>logiciel</b> : une suite d'étapes dans l'ordre. Avec le même four, mille plats différents.<br>
|
||||
Les ingrédients et le gâteau, ce sont les <b>données</b> : ce qui se fait transformer.</div>
|
||||
|
||||
<h3>Le raccourci, et là où il casse</h3>
|
||||
<p>On dit souvent : le matériel se touche, le logiciel ne se touche pas. Ça marche pour trier vite. Mais une photo sur une clé USB ne se touche pas non plus, et ce n'est pas un logiciel.</p>
|
||||
<p>Le raccourci sépare bien le matériel du reste. Pour distinguer logiciel et donnée, une seule question : <b>est-ce que ça s'exécute, ou est-ce que ça se fait ouvrir ?</b></p>
|
||||
|
||||
<h3>Les trois questions, dans l'ordre</h3>
|
||||
<p><b>1.</b> Est-ce que je peux le toucher ? Oui → matériel.<br>
|
||||
<b>2.</b> Sinon, est-ce que ça s'exécute, est-ce que ça agit ? Oui → logiciel.<br>
|
||||
<b>3.</b> Sinon → donnée.</p>
|
||||
|
||||
<p class="muted">En anglais, <i>ware</i> veut dire article. <i>Hard</i>, dur, ce sont les pièces. <i>Soft</i>, mou, c'est ce qu'on change sans toucher à la machine. Le mot français « logiciel » a été inventé en 1969 à partir de « logique » et de la fin de « matériel ».</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Matériel et logiciel</h2><p class="muted">On lit d'abord la page « Je comprends » du livret, puis on trie.</p></div><span class="score">20 min</span></div>
|
||||
|
||||
<div class="consigne"><small>Consigne</small>
|
||||
Range chaque mot dans une des deux colonnes : ce que je peux toucher, ce que je ne peux pas toucher.<br><br>
|
||||
Les colonnes n'ont pas encore de nom. On leur en donnera un à la fin.</div>
|
||||
|
||||
<div class="row" style="margin-bottom:16px">
|
||||
<button class="btn primary" id="triSuiv">Ranger la carte suivante</button>
|
||||
<button class="btn soft" id="triReset">Tout remettre</button>
|
||||
<button class="btn" id="triNom">Donner un nom aux colonnes</button>
|
||||
<span class="score" id="triCompte"></span>
|
||||
</div>
|
||||
|
||||
<div id="tirage" style="margin-bottom:16px"></div>
|
||||
<div class="colonnes" id="deuxcol" style="grid-template-columns:1fr 1fr"></div>
|
||||
<div id="apresNom"></div>
|
||||
</div></section>
|
||||
|
||||
<!-- 4 -->
|
||||
<section class="panel" id="p3">
|
||||
<div class="card">
|
||||
<h2>Je comprends. Les périphériques</h2>
|
||||
<p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p>
|
||||
|
||||
<h3>D'où vient le mot</h3>
|
||||
<p><b>Périphérie</b> veut dire : ce qui est autour. Un <b>périphérique</b> est un appareil qui se trouve autour de la partie qui calcule, et qui est relié à elle.</p>
|
||||
|
||||
<h3>Deux idées fausses</h3>
|
||||
<p><b>Ce n'est pas le câble.</b> Une souris sans fil est un périphérique. Une imprimante en wifi aussi.</p>
|
||||
<p><b>Ce n'est pas la position.</b> L'écran et le clavier d'un ordinateur portable sont des périphériques, même intégrés dans le châssis.</p>
|
||||
<p>Le vrai critère : un périphérique <b>échange de l'information</b> avec la partie qui calcule.</p>
|
||||
|
||||
<h3>Le sens de circulation</h3>
|
||||
<p>C'est le cœur du cours. Puisqu'un périphérique fait circuler de l'information, la seule question est : <b>dans quel sens ?</b> Et on se place <b>toujours du point de vue de l'ordinateur</b>, jamais du sien.</p>
|
||||
<p><b>Entrée</b> : l'ordinateur <b>reçoit</b>. La souris lui envoie tes clics, le clavier tes lettres, la webcam une image, le scanner une feuille, le micro ta voix.</p>
|
||||
<p><b>Sortie</b> : l'ordinateur <b>envoie</b>. L'écran reçoit une image et l'affiche, l'imprimante reçoit un document et l'imprime, le haut-parleur reçoit un son et le diffuse.</p>
|
||||
<p><b>Les deux</b> : ce ne sont pas des exceptions, ce sont deux fonctions dans un seul objet. Le casque avec micro diffuse et capte. L'écran tactile affiche et détecte ton doigt. Sur une clé USB, on écrit et on lit.</p>
|
||||
|
||||
<div class="consigne"><small>Le piège classique, et la méthode qui marche</small>
|
||||
Presque tous les élèves se disent une fois : « l'écran, l'image entre dans mes yeux, donc c'est une entrée ». Le raisonnement est logique, mais il est centré sur la mauvaise personne.<br><br>
|
||||
Quand tu hésites, pose la question à voix haute en commençant par le mot ordinateur :<br>
|
||||
<b>« Est-ce que l'ordinateur reçoit quelque chose, ou est-ce qu'il envoie quelque chose ? »</b></div>
|
||||
|
||||
<h3>Pourquoi ce n'est pas une liste à apprendre</h3>
|
||||
<p>Il existe des milliers de périphériques et il s'en invente chaque année. Ce que tu dois savoir faire, ce n'est pas réciter dix appareils : c'est en classer un que tu n'as jamais vu.</p>
|
||||
|
||||
<h3>Le lien avec la page précédente</h3>
|
||||
<p>Un périphérique est <b>toujours du matériel</b>. Mais tout le matériel n'est pas un périphérique : la carte mère, le processeur et la mémoire vive ne sont pas autour, ils sont au centre.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Les périphériques</h2><p class="muted">On lit la page « Je comprends » du livret, puis on complète la table en binôme.</p></div><span class="score">25 min</span></div>
|
||||
|
||||
<div class="consigne"><small>Attention au sens</small>
|
||||
On se demande toujours si l'information <b>entre dans l'ordinateur</b> ou si elle <b>sort de l'ordinateur</b>.<br>
|
||||
Pas si elle entre dans tes yeux ou dans tes oreilles.</div>
|
||||
|
||||
<figure>
|
||||
<svg viewBox="0 0 700 210" role="img" aria-label="L'information entre dans l'ordinateur par les périphériques d'entrée et en sort par les périphériques de sortie">
|
||||
<g font-family="Inter, system-ui, sans-serif">
|
||||
<rect x="270" y="60" width="160" height="100" rx="14" fill="#dbeafe" stroke="#172554" stroke-width="3"/>
|
||||
<text x="350" y="105" text-anchor="middle" font-size="17" font-weight="800" fill="#172554">ORDINATEUR</text>
|
||||
<text x="350" y="130" text-anchor="middle" font-size="13" fill="#475569">il traite l'information</text>
|
||||
<path d="M60 110h190" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#av)"/>
|
||||
<path d="M450 110h190" stroke="#7c3aed" stroke-width="4" fill="none" marker-end="url(#am)"/>
|
||||
<defs>
|
||||
<marker id="av" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#16a34a"/></marker>
|
||||
<marker id="am" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#7c3aed"/></marker>
|
||||
</defs>
|
||||
<text x="155" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#15803d">ENTRÉE</text>
|
||||
<text x="155" y="140" text-anchor="middle" font-size="13.5" fill="#475569">souris, clavier, webcam</text>
|
||||
<text x="545" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#6d28d9">SORTIE</text>
|
||||
<text x="545" y="140" text-anchor="middle" font-size="13.5" fill="#475569">écran, imprimante, haut-parleur</text>
|
||||
<path d="M270 175 h-60 a10 10 0 0 1 -10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
|
||||
<path d="M430 175 h60 a10 10 0 0 0 10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
|
||||
<text x="350" y="196" text-anchor="middle" font-size="14.5" font-weight="800" fill="#0369a1">LES DEUX : écran tactile, casque avec micro, clé USB</text>
|
||||
</g>
|
||||
</svg>
|
||||
<figcaption>La question à se poser est toujours la même : dans quel sens l'information circule-t-elle ?</figcaption>
|
||||
</figure>
|
||||
</div></section>
|
||||
|
||||
<!-- 5 -->
|
||||
<section class="panel" id="p4"><div class="card">
|
||||
<div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Trois exercices, 24 questions. Tu réponds, la correction s'affiche tout de suite avec l'explication.</p></div><span class="score">20 min</span></div>
|
||||
|
||||
<div class="consigne"><small>Avant de commencer</small>
|
||||
Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br><br>
|
||||
À la fin, tu recopieras deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
|
||||
|
||||
<div class="progres">
|
||||
<input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid #cbd5e1;border-radius:11px;min-width:220px;flex:1">
|
||||
<div class="barre"><i id="jauge"></i></div>
|
||||
<span class="score" id="avancement">0 / 24</span>
|
||||
</div>
|
||||
|
||||
<h3>Exercice 1. Matériel, logiciel, ou donnée ?</h3>
|
||||
<p class="muted" style="margin-top:0">Attention : tout ce qu'on ne peut pas toucher n'est pas forcément un logiciel.</p>
|
||||
<div id="ex2"></div>
|
||||
|
||||
<h3 style="margin-top:26px">Exercice 2. Entrée, sortie, ou les deux ?</h3>
|
||||
<p class="muted" style="margin-top:0">Demande-toi si l'ordinateur <b>reçoit</b> ou s'il <b>envoie</b>.</p>
|
||||
<div id="ex3"></div>
|
||||
|
||||
<h3 style="margin-top:26px">Exercice 3. Le défi</h3>
|
||||
<p class="muted" style="margin-top:0">Ces quatre appareils n'ont pas été vus en classe. Si tu y arrives, c'est que tu as compris la règle et pas seulement retenu la liste.</p>
|
||||
<div id="ex4"></div>
|
||||
|
||||
<div class="row" style="margin-top:22px"><button class="btn primary" id="voir">Voir mon résultat</button><button class="btn soft" id="reset">Tout recommencer</button></div>
|
||||
|
||||
<div id="bilan" style="margin-top:20px">
|
||||
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
||||
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 24</span></div>
|
||||
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
||||
</div>
|
||||
<div id="gDetail" style="margin-bottom:16px"></div>
|
||||
<p class="muted"><b>Recopie ces deux lignes dans ton livret.</b></p>
|
||||
<textarea id="recap" readonly></textarea>
|
||||
<div class="row" style="margin-top:10px"><button class="btn" id="copier">Copier</button><span class="muted" id="copie"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>La correction de la table des périphériques</h3>
|
||||
<p class="muted" style="margin-top:0">Si on la fait ensemble, au tableau.</p>
|
||||
<div class="row" style="margin-bottom:16px">
|
||||
<button class="btn primary" id="ligSuiv">Corriger la ligne suivante</button>
|
||||
<button class="btn soft" id="ligReset">Tout masquer</button>
|
||||
<span class="score" id="ligCompte">0 ligne sur 10</span>
|
||||
</div>
|
||||
<table class="grille" id="tableP"></table>
|
||||
<p class="muted" id="noteAmbigu" style="margin-top:16px"></p>
|
||||
</div></section>
|
||||
|
||||
<!-- 6 -->
|
||||
<section class="panel" id="p5"><div class="card">
|
||||
<div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
|
||||
|
||||
<div class="row" style="margin-bottom:16px">
|
||||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
||||
<button class="btn soft" id="motReset">Tout masquer</button>
|
||||
<span class="score" id="motCompte">0 mot sur 8</span>
|
||||
</div>
|
||||
|
||||
<div class="trace" id="trace"></div>
|
||||
|
||||
<div class="consigne" style="margin-top:18px;margin-bottom:0"><small>Avant de partir</small>
|
||||
Relis ta réponse de l'activité 1. Avec les mots que tu connais maintenant, comment répondrais-tu ? Écris-la au bas de ton livret.<br><br>
|
||||
Puis ferme ta session, même si tu n'as pas utilisé l'ordinateur aujourd'hui.</div>
|
||||
</div></section>
|
||||
|
||||
<div class="card">
|
||||
<h3>Mon lexique du cours 2</h3>
|
||||
<p class="muted" style="margin-top:0">Les mêmes définitions que dans ton livret, par ordre alphabétique. Clique sur un mot pour l'ouvrir.</p>
|
||||
<div class="accordeon" id="lexique"></div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<footer>Cours 2 · Formation numérique · 1re année · M. Courcelle</footer>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
var PHASES=[
|
||||
{t:"On s'installe",d:20,a:0},{t:"La question du jour",d:10,a:20},
|
||||
{t:"Matériel et logiciel",d:20,a:30},{t:"Les périphériques",d:25,a:50},
|
||||
{t:"Les exercices",d:20,a:75},{t:"Ma trace écrite",d:5,a:95}];
|
||||
|
||||
var CATS=["L'objet lui-même","Ce qu'il y a dedans","Autre réponse"];
|
||||
|
||||
var CARTES=[
|
||||
["écran",0],["Windows",1],["souris",0],["un navigateur web",1],
|
||||
["clavier",0],["un traitement de texte",1],["disque dur",0],["un jeu vidéo",1],
|
||||
["processeur",0],["un antivirus",1],["imprimante",0],["une application de messagerie",1],
|
||||
["câble HDMI",0],["une application photo",1],["webcam",0],["un lecteur de musique",1],
|
||||
["une photo de vacances",1]];
|
||||
|
||||
var PERIPH=[
|
||||
["Souris","Entrée","Déplacer le pointeur, cliquer"],
|
||||
["Clavier","Entrée","Saisir du texte et des commandes"],
|
||||
["Écran","Sortie","Afficher l'image"],
|
||||
["Imprimante","Sortie","Mettre un document sur papier"],
|
||||
["Webcam","Entrée","Capter l'image et la voix"],
|
||||
["Haut-parleur","Sortie","Diffuser le son"],
|
||||
["Scanner","Entrée","Transformer un document papier en fichier"],
|
||||
["Casque avec micro","Les deux","Diffuser le son, capter la voix"],
|
||||
["Clé USB","Les deux","Conserver des fichiers, les relire ailleurs"],
|
||||
["Écran tactile","Les deux","Afficher l'image, recevoir le doigt"]];
|
||||
|
||||
var TRACE=[
|
||||
["Un ordinateur, c'est trois choses. Le ",1," , en anglais hardware, ce sont les pièces : je peux les toucher. Le ",2," , en anglais software, est une suite d'",3," que la machine exécute. La ",4," est une information enregistrée : elle ne s'exécute pas, on l'ouvre."],
|
||||
["Un ",5," est un appareil relié à l'ordinateur, qui échange de l'information avec lui. Il n'a besoin ni de câble, ni d'être à l'extérieur. Il est toujours du matériel."],
|
||||
["Je me demande toujours dans quel sens circule l'information, du point de vue de l'ordinateur. Un périphérique d'",6," fait entrer de l'information : la souris, le clavier, la webcam. Un périphérique de ",7," fait sortir de l'information : l'écran, l'imprimante, le haut-parleur. Certains font ",8," : l'écran tactile, le casque avec micro, la clé USB."]];
|
||||
var MOTS={1:"matériel",2:"logiciel",3:"instructions",4:"donnée",5:"périphérique",6:"entrée",7:"sortie",8:"les deux"};
|
||||
|
||||
/* chrono */
|
||||
var t0=null,tick=null,choisie=0;
|
||||
var ecart=document.getElementById("ecart"),rail=document.getElementById("rail");
|
||||
function d2(n){return (n<10?"0":"")+n;}
|
||||
function minutes(){return t0?(Date.now()-t0)/60000:0;}
|
||||
function dessineRail(){
|
||||
rail.innerHTML="";
|
||||
PHASES.forEach(function(p,i){
|
||||
var b=document.createElement("button");
|
||||
b.className="tab"+(i===choisie?" active":"");
|
||||
b.innerHTML=(i+1)+". "+p.t+"<span>"+p.d+" min</span>";
|
||||
b.onclick=function(){montre(i);};
|
||||
rail.appendChild(b);
|
||||
});
|
||||
document.getElementById("sPhase").textContent=(choisie+1)+" sur 6";
|
||||
ecart.textContent="Activité "+(choisie+1)+" · "+PHASES[choisie].t;
|
||||
majReste();
|
||||
}
|
||||
function montre(i){
|
||||
choisie=i;
|
||||
for(var k=0;k<PHASES.length;k++){document.getElementById("p"+k).classList.toggle("active",k===i);}
|
||||
dessineRail();window.scrollTo({top:0,behavior:"smooth"});
|
||||
}
|
||||
function majReste(){
|
||||
var e=document.getElementById("sReste");
|
||||
if(!t0){e.textContent="–";return;}
|
||||
var r=Math.ceil(PHASES[choisie].a+PHASES[choisie].d-minutes());
|
||||
e.textContent=r>0?(r+" min"):"terminé";
|
||||
}
|
||||
function rafraichit(){
|
||||
var s=Math.floor((Date.now()-t0)/1000);
|
||||
document.getElementById("sTemps").textContent=d2(Math.floor(s/60))+":"+d2(s%60);
|
||||
majReste();
|
||||
}
|
||||
document.getElementById("btnGo").onclick=function(){
|
||||
if(t0)return;t0=Date.now();this.textContent="En cours";
|
||||
tick=setInterval(rafraichit,1000);rafraichit();
|
||||
};
|
||||
document.getElementById("btnStop").onclick=function(){
|
||||
clearInterval(tick);t0=null;
|
||||
document.getElementById("sTemps").textContent="00:00";
|
||||
document.getElementById("sReste").textContent="–";
|
||||
document.getElementById("btnGo").textContent="Démarrer";
|
||||
};
|
||||
|
||||
/* 1 */
|
||||
var tableau={};CATS.forEach(function(c){tableau[c]=[];});
|
||||
var sel=document.getElementById("cat");
|
||||
CATS.forEach(function(c){var o=document.createElement("option");o.value=c;o.textContent=c;sel.appendChild(o);});
|
||||
function dessineColonnes(){
|
||||
var z=document.getElementById("colonnes");z.innerHTML="";
|
||||
CATS.forEach(function(c){
|
||||
var d=document.createElement("div");d.className="colonne";
|
||||
var items=tableau[c].map(function(x,i){
|
||||
return '<li><span>'+x+'</span><button data-c="'+c+'" data-i="'+i+'" aria-label="Retirer">×</button></li>';}).join("");
|
||||
d.innerHTML='<h3>'+c+' <em>'+tableau[c].length+'</em></h3><ul>'+items+'</ul>';
|
||||
z.appendChild(d);
|
||||
});
|
||||
z.querySelectorAll("button[data-c]").forEach(function(b){
|
||||
b.onclick=function(){tableau[b.dataset.c].splice(parseInt(b.dataset.i,10),1);dessineColonnes();};});
|
||||
}
|
||||
function ajoute(){
|
||||
var e=document.getElementById("entree"),v=e.value.trim();
|
||||
if(!v)return;
|
||||
tableau[sel.value].push(v.replace(/[<>&]/g,""));
|
||||
e.value="";e.focus();dessineColonnes();
|
||||
}
|
||||
document.getElementById("ajouter").onclick=ajoute;
|
||||
document.getElementById("entree").addEventListener("keydown",function(ev){if(ev.key==="Enter")ajoute();});
|
||||
dessineColonnes();
|
||||
|
||||
/* 3 */
|
||||
var ti=0,nomme=false;
|
||||
var col=[[],[]];
|
||||
function dessineTri(){
|
||||
var z=document.getElementById("deuxcol");
|
||||
var titres=nomme?["Le matériel · hardware","Le logiciel · software"]:["Ce que je peux toucher","Ce que je ne peux pas toucher"];
|
||||
z.innerHTML="";
|
||||
[0,1].forEach(function(k){
|
||||
var d=document.createElement("div");d.className="colonne";
|
||||
d.innerHTML='<h3>'+titres[k]+' <em>'+col[k].length+'</em></h3><ul>'
|
||||
+col[k].map(function(x){
|
||||
var pieg=(x==="une photo de vacances"&&nomme);
|
||||
return '<li'+(pieg?' style="border-color:#dc2626;background:#fef2f2;color:#991b1b"':'')+'><span>'+x+'</span></li>';
|
||||
}).join("")+'</ul>';
|
||||
z.appendChild(d);
|
||||
});
|
||||
var t=document.getElementById("tirage");
|
||||
t.innerHTML=ti<CARTES.length
|
||||
? '<div class="qcard" style="padding:18px 22px"><span class="qtag">Carte '+(ti+1)+' sur '+CARTES.length+'</span><div class="qtxt" style="margin:0">'+CARTES[ti][0]+'</div></div>'
|
||||
: '<div class="qcard" style="padding:18px 22px"><div class="qtxt" style="margin:0">Toutes les cartes sont rangées.</div></div>';
|
||||
document.getElementById("triCompte").textContent=ti+" / "+CARTES.length;
|
||||
document.getElementById("sComp").textContent=ti+" sur "+CARTES.length;
|
||||
document.getElementById("apresNom").innerHTML=nomme
|
||||
? '<div class="consigne" style="margin-bottom:0"><small>La carte qui ne va nulle part</small>Une photo de vacances n\'est pas un logiciel. Ce n\'est pas un programme, c\'est une information qu\'on a rangée. Tout ce qu\'on ne peut pas toucher n\'est donc pas un logiciel. On verra le nom que ça porte au prochain cours.</div>'
|
||||
: "";
|
||||
}
|
||||
document.getElementById("triSuiv").onclick=function(){
|
||||
if(ti<CARTES.length){col[CARTES[ti][1]].push(CARTES[ti][0]);ti++;dessineTri();}};
|
||||
document.getElementById("triReset").onclick=function(){ti=0;col=[[],[]];nomme=false;dessineTri();};
|
||||
document.getElementById("triNom").onclick=function(){
|
||||
nomme=!nomme;this.textContent=nomme?"Retirer les noms":"Donner un nom aux colonnes";dessineTri();};
|
||||
dessineTri();
|
||||
|
||||
/* 5 */
|
||||
var li=0,zt2=document.getElementById("tableP");
|
||||
function dessineTable(){
|
||||
var h="<tr><th>Périphérique</th><th>Entrée, sortie ou les deux</th><th>À quoi il sert</th></tr>";
|
||||
PERIPH.forEach(function(p,i){
|
||||
var vu=i<li;
|
||||
h+="<tr"+(vu?' class="on"':'')+"><td><b style='color:#172033'>"+p[0]+"</b></td>"
|
||||
+(vu?"<td><b>"+p[1]+"</b></td><td>"+p[2]+"</td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";
|
||||
});
|
||||
zt2.innerHTML=h;
|
||||
document.getElementById("ligCompte").textContent=li+" ligne"+(li>1?"s":"")+" sur "+PERIPH.length;
|
||||
document.getElementById("noteAmbigu").textContent=li>=PERIPH.length
|
||||
? "Les trois dernières lignes font les deux. Ce ne sont pas des exceptions à retenir par cœur : ce sont deux fonctions dans un seul objet. Il suffit de se demander, à chaque fois, dans quel sens l'information circule."
|
||||
: "";
|
||||
}
|
||||
document.getElementById("ligSuiv").onclick=function(){if(li<PERIPH.length){li++;dessineTable();}};
|
||||
document.getElementById("ligReset").onclick=function(){li=0;dessineTable();};
|
||||
dessineTable();
|
||||
|
||||
/* 6 */
|
||||
var reveles=0,zt=document.getElementById("trace");
|
||||
function dessineTrace(){
|
||||
zt.innerHTML="<h3>Cours 2. Ce qu'il y a dans la boite</h3>"+TRACE.map(function(par){
|
||||
return "<p>"+par.map(function(x){
|
||||
if(typeof x==="number"){
|
||||
return x<=reveles?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>'
|
||||
:'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd"> </span>';
|
||||
}
|
||||
return x;
|
||||
}).join("")+"</p>";
|
||||
}).join("");
|
||||
document.getElementById("motCompte").textContent=reveles+" mot"+(reveles>1?"s":"")+" sur 8";
|
||||
}
|
||||
document.getElementById("motSuiv").onclick=function(){if(reveles<8){reveles++;dessineTrace();}};
|
||||
document.getElementById("motReset").onclick=function(){reveles=0;dessineTrace();};
|
||||
dessineTrace();
|
||||
|
||||
/* ===== exerciseur ===== */
|
||||
var OPT2=["Matériel","Logiciel","Donnée"];
|
||||
var EX2=[
|
||||
["Un écran",0,"Je peux le toucher, c'est une pièce. C'est du matériel, en anglais hardware."],
|
||||
["Le système Windows",1,"C'est une suite d'instructions que la machine exécute. Un logiciel, en anglais software."],
|
||||
["Une souris",0,"Je peux la toucher. C'est du matériel, et c'est aussi un périphérique."],
|
||||
["Un navigateur web",1,"C'est un programme qui sert à consulter des pages. Un logiciel."],
|
||||
["Une barrette de mémoire",0,"C'est une pièce électronique qu'on tient dans la main. Du matériel."],
|
||||
["Un jeu vidéo",1,"C'est un programme, donc un logiciel. La manette, elle, est du matériel."],
|
||||
["Un câble USB",0,"Un câble se touche. C'est du matériel, même si ce n'est pas dans la boite."],
|
||||
["Un antivirus",1,"C'est un programme qui surveille la machine. Un logiciel."],
|
||||
["Une photo de vacances",2,"Je ne peux pas la toucher, mais ce n'est pas un programme : elle ne s'exécute pas. C'est une donnée, une information enregistrée."],
|
||||
["Un texte que j'ai écrit",2,"Même chose. Ce n'est ni une pièce ni une suite d'instructions. C'est une donnée."]];
|
||||
|
||||
var OPT3=["Entrée","Sortie","Les deux"];
|
||||
var EX3=[
|
||||
["Une souris",0,"Elle envoie tes mouvements et tes clics vers l'ordinateur. L'information entre."],
|
||||
["Un écran",1,"L'ordinateur lui envoie une image à afficher. L'information sort de l'ordinateur."],
|
||||
["Un clavier",0,"Il envoie les lettres que tu tapes vers l'ordinateur."],
|
||||
["Une imprimante",1,"L'ordinateur lui envoie un document. Elle ne lui renvoie rien."],
|
||||
["Une webcam",0,"Elle capte l'image et la voix, et les envoie à l'ordinateur."],
|
||||
["Un haut-parleur",1,"L'ordinateur lui envoie du son. L'information sort."],
|
||||
["Un scanner",0,"Il transforme une feuille de papier en fichier et l'envoie à l'ordinateur."],
|
||||
["Un casque avec micro",2,"Le casque diffuse le son, ça sort. Le micro capte ta voix, ça entre. Donc les deux."],
|
||||
["Une clé USB",2,"Tu y écris des fichiers, et tu les relis ensuite. L'information circule dans les deux sens."],
|
||||
["Un écran tactile",2,"Il affiche l'image, ça sort. Il reçoit ton doigt, ça entre. Les deux."]];
|
||||
|
||||
var EX4=[
|
||||
["Un micro",0,"Il capte le son et l'envoie à l'ordinateur. C'est une entrée, comme la webcam."],
|
||||
["Un projecteur",1,"L'ordinateur lui envoie une image à projeter. C'est une sortie, comme un écran."],
|
||||
["Un lecteur de carte bancaire",2,"Il lit la puce de la carte, ça entre. Il affiche le montant à valider, ça sort. Les deux."],
|
||||
["Une imprimante 3D",1,"L'ordinateur lui envoie un modèle, elle fabrique l'objet. Elle ne renvoie rien. C'est une sortie."]];
|
||||
|
||||
var TOTAL=EX2.length+EX3.length+EX4.length;
|
||||
var rep={},just=0;
|
||||
|
||||
function poser(zone,cle,txt,opts,bon,expl,onPick){
|
||||
var d=document.createElement("div");
|
||||
d.className="q";
|
||||
d.innerHTML='<div class="txt">'+txt+'</div><div class="opts"></div><div class="expl">'+expl+'</div>';
|
||||
var z=d.querySelector(".opts");
|
||||
opts.forEach(function(o,i){
|
||||
var b=document.createElement("button");
|
||||
b.textContent=o;
|
||||
b.onclick=function(){
|
||||
if(rep[cle]!==undefined) return;
|
||||
rep[cle]=i;
|
||||
var ok=(i===bon);
|
||||
if(ok) just++;
|
||||
d.classList.add("done",ok?"bon":"faux");
|
||||
z.querySelectorAll("button").forEach(function(x,j){
|
||||
x.disabled=true;
|
||||
if(j===bon) x.classList.add("pick");
|
||||
else if(j===i) x.classList.add("rate");
|
||||
});
|
||||
maj();
|
||||
if(onPick) onPick();
|
||||
};
|
||||
z.appendChild(b);
|
||||
});
|
||||
zone.appendChild(d);
|
||||
}
|
||||
|
||||
function maj(){
|
||||
var n=Object.keys(rep).length;
|
||||
document.getElementById("avancement").textContent=n+" / "+TOTAL;
|
||||
document.getElementById("jauge").style.width=(n/TOTAL*100)+"%";
|
||||
}
|
||||
|
||||
var z2=document.getElementById("ex2");
|
||||
EX2.forEach(function(q,i){poser(z2,"b"+i,q[0],OPT2,q[1],q[2]);});
|
||||
var z3=document.getElementById("ex3");
|
||||
EX3.forEach(function(q,i){poser(z3,"c"+i,q[0],OPT3,q[1],q[2]);});
|
||||
var z4=document.getElementById("ex4");
|
||||
EX4.forEach(function(q,i){poser(z4,"d"+i,q[0],OPT3,q[1],q[2]);});
|
||||
|
||||
/* bilan */
|
||||
function compte(pref,src){
|
||||
var n=0;
|
||||
src.forEach(function(q,i){ if(rep[pref+i]===q[1]) n++; });
|
||||
return n;
|
||||
}
|
||||
document.getElementById("voir").onclick=function(){
|
||||
var s2=compte("b",EX2),s3=compte("c",EX3),s4=compte("d",EX4);
|
||||
var t=s2+s3+s4;
|
||||
document.getElementById("gTotal").textContent=t;
|
||||
var mot = t>=22 ? "Très bien. Tu peux passer aux exercices écrits de ton livret."
|
||||
: t>=17 ? "C'est acquis dans l'ensemble. Relis ton mémo pour les points ratés."
|
||||
: t>=12 ? "La base est là. Reprends le mémo du livret, puis recommence l'exercice 2."
|
||||
: "Il faut reprendre. Relis les deux pages « Je comprends » du livret, puis recommence.";
|
||||
document.getElementById("gMot").textContent=mot;
|
||||
document.getElementById("gDetail").innerHTML=
|
||||
'<table class="grille"><tr><th>Exercice</th><th>Résultat</th></tr>'
|
||||
+'<tr><td>1. Matériel, logiciel ou donnée</td><td><b>'+s2+' / '+EX2.length+'</b></td></tr>'
|
||||
+'<tr><td>2. Entrée, sortie ou les deux</td><td><b>'+s3+' / '+EX3.length+'</b></td></tr>'
|
||||
+'<tr><td>3. Le défi</td><td><b>'+s4+' / '+EX4.length+'</b></td></tr></table>';
|
||||
var nom=(document.getElementById("nom").value||"").trim()||"...................";
|
||||
document.getElementById("recap").value=
|
||||
"Cours 2 – exercices – "+nom+"\n"
|
||||
+"Matériel-logiciel-donnée "+s2+"/"+EX2.length
|
||||
+" · Entrée-sortie "+s3+"/"+EX3.length+" · Défi "+s4+"/"+EX4.length
|
||||
+" · Total "+t+"/"+TOTAL;
|
||||
document.getElementById("bilan").classList.add("on");
|
||||
try{ document.getElementById("bilan").scrollIntoView({behavior:"smooth"}); }catch(e){}
|
||||
};
|
||||
document.getElementById("copier").onclick=function(){
|
||||
var t=document.getElementById("recap");
|
||||
t.select();
|
||||
var ok=false;
|
||||
try{ ok=document.execCommand("copy"); }catch(e){ ok=false; }
|
||||
document.getElementById("copie").textContent = ok ? "Copié." : "Sélectionne le texte et copie-le à la main.";
|
||||
};
|
||||
document.getElementById("reset").onclick=function(){ location.reload(); };
|
||||
|
||||
maj();
|
||||
|
||||
/* lexique */
|
||||
var LEXIQUE=[
|
||||
["Application","Un logiciel qu'on lance soi-même quand on en a besoin. On dit plutôt « application » sur un téléphone et « logiciel » sur un ordinateur, mais c'est la même chose."],
|
||||
["Composant","Un élément de matériel qui se trouve à l'intérieur de l'unité centrale. La carte mère, le processeur, la carte graphique sont des composants. Un composant n'est pas un périphérique : il est au centre, pas autour."],
|
||||
["Disque dur","Le composant qui conserve les fichiers, même quand l'ordinateur est éteint. On en reparle au cours 3."],
|
||||
["Donnée","Une information enregistrée quelque part. Une photo, un texte, une chanson, une vidéo. Une donnée ne s'exécute pas : on l'ouvre avec un logiciel."],
|
||||
["Entrée (périphérique d')","Un périphérique qui fait entrer de l'information dans l'ordinateur. La souris, le clavier, la webcam, le scanner, le micro."],
|
||||
["Exécuter","Faire ce que les instructions demandent, l'une après l'autre. Un logiciel s'exécute. Une donnée ne s'exécute pas : on l'ouvre."],
|
||||
["Hardware","Le mot anglais pour matériel. De hard, dur, et ware, article."],
|
||||
["Instruction","Un ordre simple et précis donné à la machine. Un logiciel est une suite de milliers d'instructions."],
|
||||
["Logiciel","Une suite d'instructions que la machine exécute dans l'ordre. Windows, un navigateur, un jeu, un antivirus."],
|
||||
["Matériel","Les pièces physiques. Elles se fabriquent, se transportent, s'usent et se cassent."],
|
||||
["Mémoire vive","Le composant qui garde ce sur quoi tu travailles en ce moment. Tout ce qu'elle contient disparait quand la machine s'éteint. On en reparle au cours 3."],
|
||||
["Périphérie","Ce qui est autour. La périphérie d'une ville, ce sont les quartiers autour du centre. C'est de ce mot que vient « périphérique »."],
|
||||
["Périphérique","Un appareil relié à l'ordinateur, autour de la partie qui calcule, qui échange de l'information avec elle. Toujours du matériel."],
|
||||
["Programme","Autre mot pour logiciel. Les deux se disent."],
|
||||
["Software","Le mot anglais pour logiciel. De soft, mou, et ware, article."],
|
||||
["Sortie (périphérique de)","Un périphérique qui fait sortir de l'information de l'ordinateur. L'écran, l'imprimante, le haut-parleur, le projecteur."],
|
||||
["Système d'exploitation","Le logiciel qui démarre en premier et qui commande tous les autres. Windows, macOS, Linux, Android, iOS."],
|
||||
["Unité centrale","La boite qui contient les composants qui calculent. Elle n'est pas un périphérique."]];
|
||||
|
||||
var zl=document.getElementById("lexique");
|
||||
LEXIQUE.forEach(function(e,i){
|
||||
var d=document.createElement("div");d.className="item";
|
||||
d.innerHTML='<button aria-expanded="false"><span class="n">'+e[0].charAt(0)+'</span><span class="t">'+e[0]+'</span><span class="plus">définition</span></button><div class="corps">'+e[1]+'</div>';
|
||||
d.querySelector("button").onclick=function(){
|
||||
var o=d.classList.toggle("ouvert");
|
||||
this.setAttribute("aria-expanded",o?"true":"false");
|
||||
this.querySelector(".plus").textContent=o?"masquer":"définition";
|
||||
};
|
||||
zl.appendChild(d);
|
||||
});
|
||||
|
||||
dessineRail();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,832 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Bloc 2 – pilotage</title>
|
||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
||||
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
|
||||
button,input,select{font:inherit}
|
||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
||||
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
|
||||
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
|
||||
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
|
||||
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
|
||||
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
|
||||
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
|
||||
.hero a.up:hover{color:#fff}
|
||||
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
||||
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
|
||||
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hero-chip b{font-size:14px}
|
||||
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
|
||||
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
|
||||
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
|
||||
|
||||
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
|
||||
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
|
||||
.stat strong{display:block;font-size:22px;margin-top:3px}
|
||||
.stat small{color:#64748b;font-weight:800}
|
||||
.stat.ok strong{color:var(--green)}
|
||||
|
||||
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
|
||||
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
|
||||
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
|
||||
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
|
||||
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
|
||||
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
|
||||
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
|
||||
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
|
||||
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
|
||||
|
||||
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
|
||||
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
|
||||
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
|
||||
.tab:hover{border-color:#93c5fd}
|
||||
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
|
||||
.tab.active span{color:#c7dcff}
|
||||
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
|
||||
|
||||
.panel{display:none}.panel.active{display:block}
|
||||
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
|
||||
.card h2,.card h3{margin-top:0}
|
||||
.card h2{font-size:26px;letter-spacing:-.5px}
|
||||
.muted{color:var(--muted);line-height:1.6}
|
||||
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
||||
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
|
||||
.btn:hover{filter:brightness(.97)}
|
||||
.btn.primary{background:#2563eb;color:#fff}
|
||||
.btn.soft{background:#f1f5f9;color:#334155}
|
||||
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
|
||||
.feedback{min-height:31px;margin-top:12px;font-weight:850}
|
||||
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
|
||||
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
|
||||
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
|
||||
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
|
||||
.info b{color:var(--ink)}
|
||||
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
|
||||
.info.alerte b{color:#991b1b}
|
||||
|
||||
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
|
||||
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
|
||||
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
|
||||
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
|
||||
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
|
||||
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
|
||||
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
|
||||
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
|
||||
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
|
||||
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
|
||||
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
|
||||
.colonne li button:hover{color:var(--red)}
|
||||
|
||||
.accordeon{display:grid;gap:10px}
|
||||
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
|
||||
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
|
||||
.item>button:hover{background:#f8fbff}
|
||||
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
|
||||
.item .t{font-weight:850;font-size:17px;flex:1}
|
||||
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
|
||||
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
|
||||
.item.ouvert .corps{display:block}
|
||||
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.item.ouvert .n{background:#2563eb;color:#fff}
|
||||
|
||||
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
|
||||
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
|
||||
.qtag.cle{background:#fef3c7;color:#92400e}
|
||||
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
|
||||
.answer-grid{display:grid;gap:8px}
|
||||
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
|
||||
.answer.ok{border-color:#22c55e;background:#f0fdf4}
|
||||
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
|
||||
.reveal.on{display:block}
|
||||
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
|
||||
|
||||
.steps{display:grid;gap:11px}
|
||||
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
|
||||
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.step.fait{opacity:1}
|
||||
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
|
||||
.step.on .n{background:#2563eb;color:#fff}
|
||||
.step.fait .n{background:#dcfce7;color:#15803d}
|
||||
.step h3{margin:0 0 4px;font-size:17px}
|
||||
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
|
||||
|
||||
figure{margin:0 0 18px}
|
||||
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
||||
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
|
||||
|
||||
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
|
||||
.trace h3{margin:0 0 14px;font-size:22px}
|
||||
.trace p{margin:0 0 .5em}
|
||||
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
|
||||
|
||||
.check{display:grid;gap:9px}
|
||||
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
|
||||
.check label:hover{border-color:#93c5fd}
|
||||
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
|
||||
.check input:checked+span{color:var(--green);font-weight:900}
|
||||
|
||||
table.grille{width:100%;border-collapse:collapse;font-size:15px}
|
||||
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
|
||||
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
|
||||
table.grille td.masque{color:transparent;background:#f8fafc}
|
||||
table.grille tr.on td{background:#f0fdf4}
|
||||
table.grille td b{color:#15803d}
|
||||
|
||||
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
|
||||
.module{margin-bottom:30px}
|
||||
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
|
||||
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
|
||||
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
|
||||
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
|
||||
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
|
||||
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
|
||||
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
|
||||
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
|
||||
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
|
||||
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
|
||||
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
||||
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
|
||||
.et.eval{background:#fee2e2;color:#991b1b}
|
||||
.et.fac{background:#f3e8ff;color:#6b21a8}
|
||||
.et.pret{background:#dcfce7;color:#15803d}
|
||||
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
|
||||
a.bloc .n{background:#2563eb;color:#fff}
|
||||
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
|
||||
.bloc.vide h3{font-weight:800}
|
||||
.masque{display:none!important}
|
||||
|
||||
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
|
||||
|
||||
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
|
||||
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
|
||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
||||
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
|
||||
|
||||
.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
|
||||
.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
|
||||
.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
|
||||
.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
|
||||
.q.bon{border-color:#22c55e;background:#f2fdf6}
|
||||
.q.faux{border-color:#f59e0b;background:#fffbeb}
|
||||
.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
|
||||
.q .opts{display:flex;gap:8px;flex-wrap:wrap}
|
||||
.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
|
||||
.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
|
||||
.q .opts button:disabled{cursor:default;opacity:.55}
|
||||
.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
|
||||
.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
|
||||
.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
|
||||
.q.done .expl{display:block}
|
||||
.figpetit{max-width:560px;margin:0 auto 14px}
|
||||
#bilan{display:none}
|
||||
#bilan.on{display:block}
|
||||
.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
|
||||
textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<section class="hero">
|
||||
<div>
|
||||
<a class="up" href="pilotage.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
|
||||
<div class="eyebrow">Document enseignant · Module 1 · Semaine 2 · Bloc 2 sur 35</div>
|
||||
<h1>Ce qu'il y a dans la boite</h1>
|
||||
<p style="margin-bottom:10px"><a href="1TC-NUM_bloc-02_ce-quil-y-a-dans-la-boite.html" style="color:#fff;font-weight:800">Ouvrir la version à projeter aux élèves</a></p>
|
||||
<p>80 minutes de contenu, 20 de logistique absorbée. Les exercices sont dans l'onglet 5 de cette même page, il n'y a plus de second fichier.</p>
|
||||
<div class="badges">
|
||||
<span class="badge">80 min de contenu + 20 de logistique</span>
|
||||
<span class="badge">S21 · hardware et software</span>
|
||||
<span class="badge">S21 · terme périphérique</span>
|
||||
<span class="badge warn">Ne pas projeter</span>
|
||||
</div>
|
||||
<div class="badges" style="display:none">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"/><circle cx="12" cy="10" r="3.5"/><path d="M8 17h8"/></svg><b>La boite</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M3 5h8v14H3zM13 5h8v14h-8"/><path d="M6 9h2M16 9h2"/></svg><b>Le tri</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 8h11l-3-3M20 16H9l3 3"/></svg><b>Entrée, sortie</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><b>Ma trace</b></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="dashboard">
|
||||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
||||
<div class="stat"><small>Temps depuis le début</small><strong id="sTemps">00:00</strong></div>
|
||||
<div class="stat"><small>Il reste pour cette activité</small><strong id="sReste">–</strong></div>
|
||||
<div class="stat"><small>Cartes triées</small><strong id="sComp">0 sur 17</strong></div>
|
||||
</section>
|
||||
|
||||
<div class="card" style="padding:16px 18px">
|
||||
<div class="row">
|
||||
<button class="btn primary" id="btnGo">Démarrer</button>
|
||||
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
||||
<span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1 · La question du jour</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navtabs n6" id="rail"></nav>
|
||||
|
||||
<!-- 1 -->
|
||||
<section class="panel active" id="p0"><div class="card">
|
||||
<div class="entete"><div><h2>On s'installe</h2><p class="muted">Pendant que le professeur distribue les ordinateurs et les codes.</p></div><span class="score">20 min</span></div>
|
||||
|
||||
<div class="consigne"><small>À faire tout de suite, seul et en silence</small>
|
||||
Ouvre ton livret à la page 1.<br><br>
|
||||
Quand tu dis que ton téléphone ou ton ordinateur est lent, qu'est-ce qui est lent ? L'objet lui-même, ou ce qu'il y a dedans ?<br><br>
|
||||
Écris ta réponse, puis un exemple précis d'un moment où ça t'est arrivé.</div>
|
||||
|
||||
<div class="consigne" style="margin-bottom:0"><small>Si tu n'as pas encore ton code</small>
|
||||
Ne bouge pas de ta place et lève la main. Le professeur passe te le donner.</div>
|
||||
|
||||
<div class="info alerte"><b>Le point critique de tout le déroulement.</b> Écris la consigne au tableau AVANT de commencer à distribuer quoi que ce soit. Vingt minutes de logistique sans tâche, en septembre, avec des premières, ne coûtent pas vingt minutes : elles coûtent aussi le temps de reprise en main qui suit.</div>
|
||||
|
||||
<div class="info"><b>Codes de connexion.</b> Un papier par élève, remis au poste en te déplaçant. Ne jamais lire un identifiant à voix haute. Note qui n'a pas de compte : ces élèves feront la phase 5 en binôme, et la liste part à l'administration le jour même.</div>
|
||||
|
||||
</div></section>
|
||||
|
||||
<!-- 2 -->
|
||||
<section class="panel" id="p1"><div class="card">
|
||||
<div class="entete"><div><h2>La question du jour</h2><p class="muted">Ton livret, page 1.</p></div><span class="score">10 min</span></div>
|
||||
|
||||
<h3>Les réponses de la classe</h3>
|
||||
<div class="saisie">
|
||||
<input id="entree" placeholder="Une réponse donnée par la classe" autocomplete="off">
|
||||
<select id="cat" aria-label="Colonne"></select>
|
||||
<button class="btn primary" id="ajouter">Ajouter</button>
|
||||
</div>
|
||||
<div class="colonnes" id="colonnes"></div>
|
||||
<div class="info"><b>Aucune correction pendant cette phase.</b> Note les réponses telles quelles, y compris les fausses et les contradictoires, et laisse-les au tableau tout le cours. Trois familles reviennent : la machine est vieille, trop d'applications ouvertes, le wifi est mauvais. Les trois sont partiellement justes. On y revient en fin de phase 3.</div>
|
||||
|
||||
</div></section>
|
||||
|
||||
<!-- 3 -->
|
||||
<section class="panel" id="p2">
|
||||
<div class="card">
|
||||
<h2>Je comprends. Le matériel, le logiciel et la donnée</h2>
|
||||
<p class="muted">On lit cette page ensemble. Elle est dans ton livret, tu la reliras pour réviser.</p>
|
||||
|
||||
<div class="info"><b>Huit minutes, et tu n'es pas obligé de tout lire.</b> Les points « un ordinateur seul ne fait rien », « la donnée », « la cuisine » et « les trois questions » gagnent à être dits ensemble. Le matériel, le logiciel, le raccourci et l'étymologie se lisent très bien seuls. La page est longue parce qu'elle doit tenir devant un élève qui révise le soir, pas parce qu'il faut tout dire en classe.</div>
|
||||
|
||||
<div class="info"><b>La comparaison de la cuisine est le morceau qui reste.</b> Une minute, et fais-la reformuler par un élève. Elle est la seule des trois analogies courantes qui fonctionne à trois termes : le four, la recette, les ingrédients.</div>
|
||||
|
||||
|
||||
|
||||
<h3>Un ordinateur seul ne fait rien</h3>
|
||||
<p>Un ordinateur qui sort de son carton affiche un écran noir et attend. Toutes les pièces fonctionnent, mais <b>personne ne leur a dit quoi faire</b>. Un ordinateur, ce n'est pas une chose : c'est trois choses qui travaillent ensemble.</p>
|
||||
|
||||
<h3>1. Le matériel <span class="muted" style="font-weight:600">· hardware</span></h3>
|
||||
<p>Ce sont <b>les pièces</b>. L'écran, le clavier, la souris, les câbles, la boite, les cartes électroniques à l'intérieur.</p>
|
||||
<p>Il se fabrique dans une usine, il pèse quelque chose, il chauffe, il s'use, il se casse. Attention : le matériel n'est pas seulement la grosse boite. Un câble est du matériel. Une clé USB aussi.</p>
|
||||
|
||||
<h3>2. Le logiciel <span class="muted" style="font-weight:600">· software</span></h3>
|
||||
<p>C'est <b>une suite d'instructions</b> écrites par des personnes, que la machine exécute l'une après l'autre.</p>
|
||||
<p>Une instruction, c'est un ordre simple : <i>affiche cette lettre ici, compare ces deux nombres, si le premier est plus grand va à l'étape 12.</i> Un logiciel, c'est des millions d'instructions de ce genre.</p>
|
||||
<p><b>Deux familles.</b> Le <b>système d'exploitation</b> démarre en premier et commande tous les autres : Windows, macOS, Linux, Android, iOS. Les <b>applications</b> sont tous les autres logiciels, ceux qu'on lance soi-même.</p>
|
||||
<p>Un logiciel ne se fabrique pas, il s'écrit. Il ne pèse rien, il ne s'use pas. On peut le remplacer sans changer une seule pièce.</p>
|
||||
|
||||
<h3>3. La donnée</h3>
|
||||
<p>C'est une <b>information enregistrée</b>. Ta photo de profil, ton devoir, une chanson, une vidéo.</p>
|
||||
<p>Un logiciel <b>s'exécute</b> : il agit. Une donnée <b>ne fait rien</b> : on l'ouvre, on la lit, on la modifie. Une photo ne peut pas se lancer toute seule, il faut un logiciel pour l'ouvrir.</p>
|
||||
|
||||
<div class="consigne"><small>L'image qui aide : la cuisine</small>
|
||||
Le four, la casserole, le couteau, c'est le <b>matériel</b>.<br>
|
||||
La recette, c'est le <b>logiciel</b> : une suite d'étapes dans l'ordre. Avec le même four, mille plats différents.<br>
|
||||
Les ingrédients et le gâteau, ce sont les <b>données</b> : ce qui se fait transformer.</div>
|
||||
|
||||
<h3>Le raccourci, et là où il casse</h3>
|
||||
<p>On dit souvent : le matériel se touche, le logiciel ne se touche pas. Ça marche pour trier vite. Mais une photo sur une clé USB ne se touche pas non plus, et ce n'est pas un logiciel.</p>
|
||||
<p>Le raccourci sépare bien le matériel du reste. Pour distinguer logiciel et donnée, une seule question : <b>est-ce que ça s'exécute, ou est-ce que ça se fait ouvrir ?</b></p>
|
||||
|
||||
<h3>Les trois questions, dans l'ordre</h3>
|
||||
<p><b>1.</b> Est-ce que je peux le toucher ? Oui → matériel.<br>
|
||||
<b>2.</b> Sinon, est-ce que ça s'exécute, est-ce que ça agit ? Oui → logiciel.<br>
|
||||
<b>3.</b> Sinon → donnée.</p>
|
||||
|
||||
<p class="muted">En anglais, <i>ware</i> veut dire article. <i>Hard</i>, dur, ce sont les pièces. <i>Soft</i>, mou, c'est ce qu'on change sans toucher à la machine. Le mot français « logiciel » a été inventé en 1969 à partir de « logique » et de la fin de « matériel ».</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Matériel et logiciel</h2><p class="muted">On lit d'abord la page « Je comprends » du livret, puis on trie.</p></div><span class="score">20 min</span></div>
|
||||
|
||||
<div class="consigne"><small>Consigne</small>
|
||||
Range chaque mot dans une des deux colonnes : ce que je peux toucher, ce que je ne peux pas toucher.<br><br>
|
||||
Les colonnes n'ont pas encore de nom. On leur en donnera un à la fin.</div>
|
||||
|
||||
<div class="row" style="margin-bottom:16px">
|
||||
<button class="btn primary" id="triSuiv">Ranger la carte suivante</button>
|
||||
<button class="btn soft" id="triReset">Tout remettre</button>
|
||||
<button class="btn" id="triNom">Donner un nom aux colonnes</button>
|
||||
<span class="score" id="triCompte"></span>
|
||||
</div>
|
||||
|
||||
<div id="tirage" style="margin-bottom:16px"></div>
|
||||
<div class="colonnes" id="deuxcol" style="grid-template-columns:1fr 1fr"></div>
|
||||
<div id="apresNom"></div>
|
||||
|
||||
<div class="info"><b>Les mots hardware et software n'apparaissent qu'au bouton de nomination.</b> Les colonnes s'appellent « ce que je peux toucher » et « ce que je ne peux pas toucher » pendant tout le tri. C'est le moment le plus important du bloc.</div>
|
||||
|
||||
<div class="info"><b>Retour au tableau.</b> « Alors, quand l'ordinateur est lent, qu'est-ce qui est lent ? » Ne donne pas la réponse, fais reformuler les réponses du début.</div>
|
||||
|
||||
<div class="info"><b>Liste des termes.</b> Recueil FWB « Informations et données », thématique 3, support 1.1, page 25, corrigé page 26. À photocopier ou projeter telle quelle : la licence CC BY-NC-ND interdit les œuvres dérivées.</div>
|
||||
|
||||
</div></section>
|
||||
|
||||
<!-- 4 -->
|
||||
<section class="panel" id="p3">
|
||||
<div class="card">
|
||||
<h2>Je comprends. Les périphériques</h2>
|
||||
<p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p>
|
||||
|
||||
<div class="info alerte"><b>Le point qui fait échouer un tiers d'une classe.</b> Sans repère écrit au tableau, l'élève prend son propre corps comme référence et conclut que l'écran est une entrée. Le raisonnement est cohérent, il est centré sur le mauvais objet. Écris en grand : L'ORDINATEUR REÇOIT, OU L'ORDINATEUR ENVOIE. Laisse-le jusqu'à la fin de la phase.</div>
|
||||
|
||||
|
||||
|
||||
<h3>D'où vient le mot</h3>
|
||||
<p><b>Périphérie</b> veut dire : ce qui est autour. Un <b>périphérique</b> est un appareil qui se trouve autour de la partie qui calcule, et qui est relié à elle.</p>
|
||||
|
||||
<h3>Deux idées fausses</h3>
|
||||
<p><b>Ce n'est pas le câble.</b> Une souris sans fil est un périphérique. Une imprimante en wifi aussi.</p>
|
||||
<p><b>Ce n'est pas la position.</b> L'écran et le clavier d'un ordinateur portable sont des périphériques, même intégrés dans le châssis.</p>
|
||||
<p>Le vrai critère : un périphérique <b>échange de l'information</b> avec la partie qui calcule.</p>
|
||||
|
||||
<h3>Le sens de circulation</h3>
|
||||
<p>C'est le cœur du cours. Puisqu'un périphérique fait circuler de l'information, la seule question est : <b>dans quel sens ?</b> Et on se place <b>toujours du point de vue de l'ordinateur</b>, jamais du sien.</p>
|
||||
<p><b>Entrée</b> : l'ordinateur <b>reçoit</b>. La souris lui envoie tes clics, le clavier tes lettres, la webcam une image, le scanner une feuille, le micro ta voix.</p>
|
||||
<p><b>Sortie</b> : l'ordinateur <b>envoie</b>. L'écran reçoit une image et l'affiche, l'imprimante reçoit un document et l'imprime, le haut-parleur reçoit un son et le diffuse.</p>
|
||||
<p><b>Les deux</b> : ce ne sont pas des exceptions, ce sont deux fonctions dans un seul objet. Le casque avec micro diffuse et capte. L'écran tactile affiche et détecte ton doigt. Sur une clé USB, on écrit et on lit.</p>
|
||||
|
||||
<div class="consigne"><small>Le piège classique, et la méthode qui marche</small>
|
||||
Presque tous les élèves se disent une fois : « l'écran, l'image entre dans mes yeux, donc c'est une entrée ». Le raisonnement est logique, mais il est centré sur la mauvaise personne.<br><br>
|
||||
Quand tu hésites, pose la question à voix haute en commençant par le mot ordinateur :<br>
|
||||
<b>« Est-ce que l'ordinateur reçoit quelque chose, ou est-ce qu'il envoie quelque chose ? »</b></div>
|
||||
|
||||
<h3>Pourquoi ce n'est pas une liste à apprendre</h3>
|
||||
<p>Il existe des milliers de périphériques et il s'en invente chaque année. Ce que tu dois savoir faire, ce n'est pas réciter dix appareils : c'est en classer un que tu n'as jamais vu.</p>
|
||||
|
||||
<h3>Le lien avec la page précédente</h3>
|
||||
<p>Un périphérique est <b>toujours du matériel</b>. Mais tout le matériel n'est pas un périphérique : la carte mère, le processeur et la mémoire vive ne sont pas autour, ils sont au centre.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Les périphériques</h2><p class="muted">On lit la page « Je comprends » du livret, puis on complète la table en binôme.</p></div><span class="score">25 min</span></div>
|
||||
|
||||
<div class="consigne"><small>Attention au sens</small>
|
||||
On se demande toujours si l'information <b>entre dans l'ordinateur</b> ou si elle <b>sort de l'ordinateur</b>.<br>
|
||||
Pas si elle entre dans tes yeux ou dans tes oreilles.</div>
|
||||
|
||||
<figure>
|
||||
<svg viewBox="0 0 700 210" role="img" aria-label="L'information entre dans l'ordinateur par les périphériques d'entrée et en sort par les périphériques de sortie">
|
||||
<g font-family="Inter, system-ui, sans-serif">
|
||||
<rect x="270" y="60" width="160" height="100" rx="14" fill="#dbeafe" stroke="#172554" stroke-width="3"/>
|
||||
<text x="350" y="105" text-anchor="middle" font-size="17" font-weight="800" fill="#172554">ORDINATEUR</text>
|
||||
<text x="350" y="130" text-anchor="middle" font-size="13" fill="#475569">il traite l'information</text>
|
||||
<path d="M60 110h190" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#av)"/>
|
||||
<path d="M450 110h190" stroke="#7c3aed" stroke-width="4" fill="none" marker-end="url(#am)"/>
|
||||
<defs>
|
||||
<marker id="av" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#16a34a"/></marker>
|
||||
<marker id="am" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#7c3aed"/></marker>
|
||||
</defs>
|
||||
<text x="155" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#15803d">ENTRÉE</text>
|
||||
<text x="155" y="140" text-anchor="middle" font-size="13.5" fill="#475569">souris, clavier, webcam</text>
|
||||
<text x="545" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#6d28d9">SORTIE</text>
|
||||
<text x="545" y="140" text-anchor="middle" font-size="13.5" fill="#475569">écran, imprimante, haut-parleur</text>
|
||||
<path d="M270 175 h-60 a10 10 0 0 1 -10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
|
||||
<path d="M430 175 h60 a10 10 0 0 0 10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
|
||||
<text x="350" y="196" text-anchor="middle" font-size="14.5" font-weight="800" fill="#0369a1">LES DEUX : écran tactile, casque avec micro, clé USB</text>
|
||||
</g>
|
||||
</svg>
|
||||
<figcaption>À projeter et à recopier au tableau avant de lancer le travail en binôme.</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="info"><b>Différenciation.</b> Version A à compléter, version B à choix multiples, sur deux pages distinctes du livret. Annonce à voix haute quelle version chaque binôme complète.</div>
|
||||
|
||||
<div class="info"><b>Ce que tu relèves en circulant.</b> L'élève emploie « périphérique » sans y être invité. Il classe un mot jamais vu. Il distingue donnée et logiciel. Il justifie par le sens de circulation. Les quatre se relèvent à l'oral, pas sur une copie.</div>
|
||||
|
||||
</div></section>
|
||||
|
||||
<!-- 5 -->
|
||||
<section class="panel" id="p4"><div class="card">
|
||||
<div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Trois exercices, 24 questions. Tu réponds, la correction s'affiche tout de suite avec l'explication.</p></div><span class="score">20 min</span></div>
|
||||
|
||||
<div class="consigne"><small>Avant de commencer</small>
|
||||
Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br><br>
|
||||
À la fin, tu recopieras deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
|
||||
|
||||
<div class="progres">
|
||||
<input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid #cbd5e1;border-radius:11px;min-width:220px;flex:1">
|
||||
<div class="barre"><i id="jauge"></i></div>
|
||||
<span class="score" id="avancement">0 / 24</span>
|
||||
</div>
|
||||
|
||||
<h3>Exercice 1. Matériel, logiciel, ou donnée ?</h3>
|
||||
<p class="muted" style="margin-top:0">Attention : tout ce qu'on ne peut pas toucher n'est pas forcément un logiciel.</p>
|
||||
<div id="ex2"></div>
|
||||
|
||||
<h3 style="margin-top:26px">Exercice 2. Entrée, sortie, ou les deux ?</h3>
|
||||
<p class="muted" style="margin-top:0">Demande-toi si l'ordinateur <b>reçoit</b> ou s'il <b>envoie</b>.</p>
|
||||
<div id="ex3"></div>
|
||||
|
||||
<h3 style="margin-top:26px">Exercice 3. Le défi</h3>
|
||||
<p class="muted" style="margin-top:0">Ces quatre appareils n'ont pas été vus en classe. Si tu y arrives, c'est que tu as compris la règle et pas seulement retenu la liste.</p>
|
||||
<div id="ex4"></div>
|
||||
|
||||
<div class="row" style="margin-top:22px"><button class="btn primary" id="voir">Voir mon résultat</button><button class="btn soft" id="reset">Tout recommencer</button></div>
|
||||
|
||||
<div id="bilan" style="margin-top:20px">
|
||||
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
||||
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 24</span></div>
|
||||
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
||||
</div>
|
||||
<div id="gDetail" style="margin-bottom:16px"></div>
|
||||
<p class="muted"><b>Recopie ces deux lignes dans ton livret.</b></p>
|
||||
<textarea id="recap" readonly></textarea>
|
||||
<div class="row" style="margin-top:10px"><button class="btn" id="copier">Copier</button><span class="muted" id="copie"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>La correction de la table des périphériques</h3>
|
||||
<p class="muted" style="margin-top:0">Si on la fait ensemble, au tableau.</p>
|
||||
<div class="row" style="margin-bottom:16px">
|
||||
<button class="btn primary" id="ligSuiv">Corriger la ligne suivante</button>
|
||||
<button class="btn soft" id="ligReset">Tout masquer</button>
|
||||
<span class="score" id="ligCompte">0 ligne sur 10</span>
|
||||
</div>
|
||||
<table class="grille" id="tableP"></table>
|
||||
<p class="muted" id="noteAmbigu" style="margin-top:16px"></p>
|
||||
|
||||
<div class="info"><b>Le chiffre à regarder n'est pas le total.</b> C'est l'exercice 3, le défi : quatre appareils jamais vus. Un élève à 20 sur 24 avec 1 sur 4 au défi a mémorisé la liste sans comprendre le critère. C'est l'erreur la moins visible du bloc, puisque les réponses sont justes partout ailleurs.</div>
|
||||
|
||||
<div class="info"><b>Variable d'ajustement.</b> Si la distribution a débordé, cette phase passe de vingt à dix minutes : elle est reprenable à la maison, la page fonctionne hors ligne. Ce qui ne se coupe pas : les deux lectures théoriques et la fermeture des sessions.</div>
|
||||
|
||||
</div></section>
|
||||
|
||||
<!-- 6 -->
|
||||
<section class="panel" id="p5"><div class="card">
|
||||
<div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
|
||||
|
||||
<div class="row" style="margin-bottom:16px">
|
||||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
||||
<button class="btn soft" id="motReset">Tout masquer</button>
|
||||
<span class="score" id="motCompte">0 mot sur 8</span>
|
||||
</div>
|
||||
|
||||
<div class="trace" id="trace"></div>
|
||||
|
||||
<div class="info"><b>Les huit mots, dans l'ordre.</b> matériel, logiciel, instructions, donnée, périphérique, entrée, sortie, les deux. Fais-les trouver oralement plutôt que de les dicter.</div>
|
||||
|
||||
<div class="info alerte"><b>La fermeture ne se négocie jamais.</b> Y compris quand la sonnerie a retenti, y compris pour les élèves qui n'ont pas utilisé leur poste. Attendu SF53, travaillé trente-cinq fois dans l'année.</div>
|
||||
|
||||
<div class="info"><b>À préparer pour le bloc 3.</b> Huit fichiers de tailles très différentes sur un poste de démonstration, plus une clé USB. Du recueil FWB : thématique 1, support 2.1 pages 11 à 13, tableau des cinq stockages page 14, support 1.2 pages 7 et 8. Le mot « donnée », posé aujourd'hui, en est le point d'entrée.</div>
|
||||
|
||||
|
||||
</div></section>
|
||||
|
||||
<div class="card">
|
||||
<h3>Mon lexique du cours 2</h3>
|
||||
<p class="muted" style="margin-top:0">Les mêmes définitions que dans ton livret, par ordre alphabétique. Clique sur un mot pour l'ouvrir.</p>
|
||||
<div class="accordeon" id="lexique"></div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<footer>Bloc 2 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</footer>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
var PHASES=[
|
||||
{t:"On s'installe",d:20,a:0},{t:"La question du jour",d:10,a:20},
|
||||
{t:"Matériel et logiciel",d:20,a:30},{t:"Les périphériques",d:25,a:50},
|
||||
{t:"Les exercices",d:20,a:75},{t:"Ma trace écrite",d:5,a:95}];
|
||||
|
||||
var CATS=["L'objet lui-même","Ce qu'il y a dedans","Autre réponse"];
|
||||
|
||||
var CARTES=[
|
||||
["écran",0],["Windows",1],["souris",0],["un navigateur web",1],
|
||||
["clavier",0],["un traitement de texte",1],["disque dur",0],["un jeu vidéo",1],
|
||||
["processeur",0],["un antivirus",1],["imprimante",0],["une application de messagerie",1],
|
||||
["câble HDMI",0],["une application photo",1],["webcam",0],["un lecteur de musique",1],
|
||||
["une photo de vacances",1]];
|
||||
|
||||
var PERIPH=[
|
||||
["Souris","Entrée","Déplacer le pointeur, cliquer"],
|
||||
["Clavier","Entrée","Saisir du texte et des commandes"],
|
||||
["Écran","Sortie","Afficher l'image"],
|
||||
["Imprimante","Sortie","Mettre un document sur papier"],
|
||||
["Webcam","Entrée","Capter l'image et la voix"],
|
||||
["Haut-parleur","Sortie","Diffuser le son"],
|
||||
["Scanner","Entrée","Transformer un document papier en fichier"],
|
||||
["Casque avec micro","Les deux","Diffuser le son, capter la voix"],
|
||||
["Clé USB","Les deux","Conserver des fichiers, les relire ailleurs"],
|
||||
["Écran tactile","Les deux","Afficher l'image, recevoir le doigt"]];
|
||||
|
||||
var TRACE=[
|
||||
["Un ordinateur est fait de deux choses. Le ",1," , en anglais hardware, ce sont les pièces : je peux les toucher. Le ",2," , en anglais software, est une suite d'",3," que la machine exécute."],
|
||||
["Une photo ou un texte enregistré ne sont ni l'un ni l'autre. Ce sont des ",4," ."],
|
||||
["Un ",5," est un appareil relié à l'ordinateur. Il n'a pas besoin de câble, ni d'être à l'extérieur."],
|
||||
["On se demande toujours dans quel sens circule l'information, du point de vue de l'ordinateur. Un périphérique d'",6," fait entrer de l'information : la souris, le clavier, la webcam. Un périphérique de ",7," fait sortir de l'information : l'écran, l'imprimante, le haut-parleur. Certains font ",8," : l'écran tactile, le casque avec micro, la clé USB."]];
|
||||
var MOTS={1:"matériel",2:"logiciel",3:"instructions",4:"données",5:"périphérique",6:"entrée",7:"sortie",8:"les deux"};
|
||||
|
||||
/* chrono */
|
||||
var t0=null,tick=null,choisie=0;
|
||||
var ecart=document.getElementById("ecart"),rail=document.getElementById("rail");
|
||||
function d2(n){return (n<10?"0":"")+n;}
|
||||
function minutes(){return t0?(Date.now()-t0)/60000:0;}
|
||||
function dessineRail(){
|
||||
rail.innerHTML="";
|
||||
PHASES.forEach(function(p,i){
|
||||
var b=document.createElement("button");
|
||||
b.className="tab"+(i===choisie?" active":"");
|
||||
b.innerHTML=(i+1)+". "+p.t+"<span>"+p.d+" min</span>";
|
||||
b.onclick=function(){montre(i);};
|
||||
rail.appendChild(b);
|
||||
});
|
||||
document.getElementById("sPhase").textContent=(choisie+1)+" sur 6";
|
||||
ecart.textContent="Activité "+(choisie+1)+" · "+PHASES[choisie].t;
|
||||
majReste();
|
||||
}
|
||||
function montre(i){
|
||||
choisie=i;
|
||||
for(var k=0;k<PHASES.length;k++){document.getElementById("p"+k).classList.toggle("active",k===i);}
|
||||
dessineRail();window.scrollTo({top:0,behavior:"smooth"});
|
||||
}
|
||||
function majReste(){
|
||||
var e=document.getElementById("sReste");
|
||||
if(!t0){e.textContent="–";return;}
|
||||
var r=Math.ceil(PHASES[choisie].a+PHASES[choisie].d-minutes());
|
||||
e.textContent=r>0?(r+" min"):"terminé";
|
||||
}
|
||||
function rafraichit(){
|
||||
var s=Math.floor((Date.now()-t0)/1000);
|
||||
document.getElementById("sTemps").textContent=d2(Math.floor(s/60))+":"+d2(s%60);
|
||||
majReste();
|
||||
}
|
||||
document.getElementById("btnGo").onclick=function(){
|
||||
if(t0)return;t0=Date.now();this.textContent="En cours";
|
||||
tick=setInterval(rafraichit,1000);rafraichit();
|
||||
};
|
||||
document.getElementById("btnStop").onclick=function(){
|
||||
clearInterval(tick);t0=null;
|
||||
document.getElementById("sTemps").textContent="00:00";
|
||||
document.getElementById("sReste").textContent="–";
|
||||
document.getElementById("btnGo").textContent="Démarrer";
|
||||
};
|
||||
|
||||
/* 1 */
|
||||
var tableau={};CATS.forEach(function(c){tableau[c]=[];});
|
||||
var sel=document.getElementById("cat");
|
||||
CATS.forEach(function(c){var o=document.createElement("option");o.value=c;o.textContent=c;sel.appendChild(o);});
|
||||
function dessineColonnes(){
|
||||
var z=document.getElementById("colonnes");z.innerHTML="";
|
||||
CATS.forEach(function(c){
|
||||
var d=document.createElement("div");d.className="colonne";
|
||||
var items=tableau[c].map(function(x,i){
|
||||
return '<li><span>'+x+'</span><button data-c="'+c+'" data-i="'+i+'" aria-label="Retirer">×</button></li>';}).join("");
|
||||
d.innerHTML='<h3>'+c+' <em>'+tableau[c].length+'</em></h3><ul>'+items+'</ul>';
|
||||
z.appendChild(d);
|
||||
});
|
||||
z.querySelectorAll("button[data-c]").forEach(function(b){
|
||||
b.onclick=function(){tableau[b.dataset.c].splice(parseInt(b.dataset.i,10),1);dessineColonnes();};});
|
||||
}
|
||||
function ajoute(){
|
||||
var e=document.getElementById("entree"),v=e.value.trim();
|
||||
if(!v)return;
|
||||
tableau[sel.value].push(v.replace(/[<>&]/g,""));
|
||||
e.value="";e.focus();dessineColonnes();
|
||||
}
|
||||
document.getElementById("ajouter").onclick=ajoute;
|
||||
document.getElementById("entree").addEventListener("keydown",function(ev){if(ev.key==="Enter")ajoute();});
|
||||
dessineColonnes();
|
||||
|
||||
/* 3 */
|
||||
var ti=0,nomme=false;
|
||||
var col=[[],[]];
|
||||
function dessineTri(){
|
||||
var z=document.getElementById("deuxcol");
|
||||
var titres=nomme?["Le matériel · hardware","Le logiciel · software"]:["Ce que je peux toucher","Ce que je ne peux pas toucher"];
|
||||
z.innerHTML="";
|
||||
[0,1].forEach(function(k){
|
||||
var d=document.createElement("div");d.className="colonne";
|
||||
d.innerHTML='<h3>'+titres[k]+' <em>'+col[k].length+'</em></h3><ul>'
|
||||
+col[k].map(function(x){
|
||||
var pieg=(x==="une photo de vacances"&&nomme);
|
||||
return '<li'+(pieg?' style="border-color:#dc2626;background:#fef2f2;color:#991b1b"':'')+'><span>'+x+'</span></li>';
|
||||
}).join("")+'</ul>';
|
||||
z.appendChild(d);
|
||||
});
|
||||
var t=document.getElementById("tirage");
|
||||
t.innerHTML=ti<CARTES.length
|
||||
? '<div class="qcard" style="padding:18px 22px"><span class="qtag">Carte '+(ti+1)+' sur '+CARTES.length+'</span><div class="qtxt" style="margin:0">'+CARTES[ti][0]+'</div></div>'
|
||||
: '<div class="qcard" style="padding:18px 22px"><div class="qtxt" style="margin:0">Toutes les cartes sont rangées.</div></div>';
|
||||
document.getElementById("triCompte").textContent=ti+" / "+CARTES.length;
|
||||
document.getElementById("sComp").textContent=ti+" sur "+CARTES.length;
|
||||
document.getElementById("apresNom").innerHTML=nomme
|
||||
? '<div class="consigne" style="margin-bottom:0"><small>La carte qui ne va nulle part</small>Une photo de vacances n\'est pas un logiciel. Ce n\'est pas un programme, c\'est une information qu\'on a rangée. Tout ce qu\'on ne peut pas toucher n\'est donc pas un logiciel. On verra le nom que ça porte au prochain cours.</div>'
|
||||
: "";
|
||||
}
|
||||
document.getElementById("triSuiv").onclick=function(){
|
||||
if(ti<CARTES.length){col[CARTES[ti][1]].push(CARTES[ti][0]);ti++;dessineTri();}};
|
||||
document.getElementById("triReset").onclick=function(){ti=0;col=[[],[]];nomme=false;dessineTri();};
|
||||
document.getElementById("triNom").onclick=function(){
|
||||
nomme=!nomme;this.textContent=nomme?"Retirer les noms":"Donner un nom aux colonnes";dessineTri();};
|
||||
dessineTri();
|
||||
|
||||
/* 5 */
|
||||
var li=0,zt2=document.getElementById("tableP");
|
||||
function dessineTable(){
|
||||
var h="<tr><th>Périphérique</th><th>Entrée, sortie ou les deux</th><th>À quoi il sert</th></tr>";
|
||||
PERIPH.forEach(function(p,i){
|
||||
var vu=i<li;
|
||||
h+="<tr"+(vu?' class="on"':'')+"><td><b style='color:#172033'>"+p[0]+"</b></td>"
|
||||
+(vu?"<td><b>"+p[1]+"</b></td><td>"+p[2]+"</td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";
|
||||
});
|
||||
zt2.innerHTML=h;
|
||||
document.getElementById("ligCompte").textContent=li+" ligne"+(li>1?"s":"")+" sur "+PERIPH.length;
|
||||
document.getElementById("noteAmbigu").textContent=li>=PERIPH.length
|
||||
? "Les trois dernières lignes font les deux. Ce ne sont pas des exceptions à retenir par cœur : ce sont deux fonctions dans un seul objet. Il suffit de se demander, à chaque fois, dans quel sens l'information circule."
|
||||
: "";
|
||||
}
|
||||
document.getElementById("ligSuiv").onclick=function(){if(li<PERIPH.length){li++;dessineTable();}};
|
||||
document.getElementById("ligReset").onclick=function(){li=0;dessineTable();};
|
||||
dessineTable();
|
||||
|
||||
/* 6 */
|
||||
var reveles=0,zt=document.getElementById("trace");
|
||||
function dessineTrace(){
|
||||
zt.innerHTML="<h3>Cours 2. Ce qu'il y a dans la boite</h3>"+TRACE.map(function(par){
|
||||
return "<p>"+par.map(function(x){
|
||||
if(typeof x==="number"){
|
||||
return x<=reveles?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>'
|
||||
:'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd"> </span>';
|
||||
}
|
||||
return x;
|
||||
}).join("")+"</p>";
|
||||
}).join("");
|
||||
document.getElementById("motCompte").textContent=reveles+" mot"+(reveles>1?"s":"")+" sur 8";
|
||||
}
|
||||
document.getElementById("motSuiv").onclick=function(){if(reveles<8){reveles++;dessineTrace();}};
|
||||
document.getElementById("motReset").onclick=function(){reveles=0;dessineTrace();};
|
||||
dessineTrace();
|
||||
|
||||
/* ===== exerciseur ===== */
|
||||
var OPT2=["Matériel","Logiciel","Donnée"];
|
||||
var EX2=[
|
||||
["Un écran",0,"Je peux le toucher, c'est une pièce. C'est du matériel, en anglais hardware."],
|
||||
["Le système Windows",1,"C'est une suite d'instructions que la machine exécute. Un logiciel, en anglais software."],
|
||||
["Une souris",0,"Je peux la toucher. C'est du matériel, et c'est aussi un périphérique."],
|
||||
["Un navigateur web",1,"C'est un programme qui sert à consulter des pages. Un logiciel."],
|
||||
["Une barrette de mémoire",0,"C'est une pièce électronique qu'on tient dans la main. Du matériel."],
|
||||
["Un jeu vidéo",1,"C'est un programme, donc un logiciel. La manette, elle, est du matériel."],
|
||||
["Un câble USB",0,"Un câble se touche. C'est du matériel, même si ce n'est pas dans la boite."],
|
||||
["Un antivirus",1,"C'est un programme qui surveille la machine. Un logiciel."],
|
||||
["Une photo de vacances",2,"Je ne peux pas la toucher, mais ce n'est pas un programme : elle ne s'exécute pas. C'est une donnée, une information enregistrée."],
|
||||
["Un texte que j'ai écrit",2,"Même chose. Ce n'est ni une pièce ni une suite d'instructions. C'est une donnée."]];
|
||||
|
||||
var OPT3=["Entrée","Sortie","Les deux"];
|
||||
var EX3=[
|
||||
["Une souris",0,"Elle envoie tes mouvements et tes clics vers l'ordinateur. L'information entre."],
|
||||
["Un écran",1,"L'ordinateur lui envoie une image à afficher. L'information sort de l'ordinateur."],
|
||||
["Un clavier",0,"Il envoie les lettres que tu tapes vers l'ordinateur."],
|
||||
["Une imprimante",1,"L'ordinateur lui envoie un document. Elle ne lui renvoie rien."],
|
||||
["Une webcam",0,"Elle capte l'image et la voix, et les envoie à l'ordinateur."],
|
||||
["Un haut-parleur",1,"L'ordinateur lui envoie du son. L'information sort."],
|
||||
["Un scanner",0,"Il transforme une feuille de papier en fichier et l'envoie à l'ordinateur."],
|
||||
["Un casque avec micro",2,"Le casque diffuse le son, ça sort. Le micro capte ta voix, ça entre. Donc les deux."],
|
||||
["Une clé USB",2,"Tu y écris des fichiers, et tu les relis ensuite. L'information circule dans les deux sens."],
|
||||
["Un écran tactile",2,"Il affiche l'image, ça sort. Il reçoit ton doigt, ça entre. Les deux."]];
|
||||
|
||||
var EX4=[
|
||||
["Un micro",0,"Il capte le son et l'envoie à l'ordinateur. C'est une entrée, comme la webcam."],
|
||||
["Un projecteur",1,"L'ordinateur lui envoie une image à projeter. C'est une sortie, comme un écran."],
|
||||
["Un lecteur de carte bancaire",2,"Il lit la puce de la carte, ça entre. Il affiche le montant à valider, ça sort. Les deux."],
|
||||
["Une imprimante 3D",1,"L'ordinateur lui envoie un modèle, elle fabrique l'objet. Elle ne renvoie rien. C'est une sortie."]];
|
||||
|
||||
var TOTAL=EX2.length+EX3.length+EX4.length;
|
||||
var rep={},just=0;
|
||||
|
||||
function poser(zone,cle,txt,opts,bon,expl,onPick){
|
||||
var d=document.createElement("div");
|
||||
d.className="q";
|
||||
d.innerHTML='<div class="txt">'+txt+'</div><div class="opts"></div><div class="expl">'+expl+'</div>';
|
||||
var z=d.querySelector(".opts");
|
||||
opts.forEach(function(o,i){
|
||||
var b=document.createElement("button");
|
||||
b.textContent=o;
|
||||
b.onclick=function(){
|
||||
if(rep[cle]!==undefined) return;
|
||||
rep[cle]=i;
|
||||
var ok=(i===bon);
|
||||
if(ok) just++;
|
||||
d.classList.add("done",ok?"bon":"faux");
|
||||
z.querySelectorAll("button").forEach(function(x,j){
|
||||
x.disabled=true;
|
||||
if(j===bon) x.classList.add("pick");
|
||||
else if(j===i) x.classList.add("rate");
|
||||
});
|
||||
maj();
|
||||
if(onPick) onPick();
|
||||
};
|
||||
z.appendChild(b);
|
||||
});
|
||||
zone.appendChild(d);
|
||||
}
|
||||
|
||||
function maj(){
|
||||
var n=Object.keys(rep).length;
|
||||
document.getElementById("avancement").textContent=n+" / "+TOTAL;
|
||||
document.getElementById("jauge").style.width=(n/TOTAL*100)+"%";
|
||||
}
|
||||
|
||||
var z2=document.getElementById("ex2");
|
||||
EX2.forEach(function(q,i){poser(z2,"b"+i,q[0],OPT2,q[1],q[2]);});
|
||||
var z3=document.getElementById("ex3");
|
||||
EX3.forEach(function(q,i){poser(z3,"c"+i,q[0],OPT3,q[1],q[2]);});
|
||||
var z4=document.getElementById("ex4");
|
||||
EX4.forEach(function(q,i){poser(z4,"d"+i,q[0],OPT3,q[1],q[2]);});
|
||||
|
||||
/* bilan */
|
||||
function compte(pref,src){
|
||||
var n=0;
|
||||
src.forEach(function(q,i){ if(rep[pref+i]===q[1]) n++; });
|
||||
return n;
|
||||
}
|
||||
document.getElementById("voir").onclick=function(){
|
||||
var s2=compte("b",EX2),s3=compte("c",EX3),s4=compte("d",EX4);
|
||||
var t=s2+s3+s4;
|
||||
document.getElementById("gTotal").textContent=t;
|
||||
var mot = t>=22 ? "Très bien. Tu peux passer aux exercices du livret."
|
||||
: t>=17 ? "C'est acquis dans l'ensemble. Relis ton mémo pour les points ratés."
|
||||
: t>=12 ? "La base est là. Reprends le mémo du livret, puis recommence l'exercice 2."
|
||||
: "Il faut reprendre. Relis les deux pages « Je comprends » du livret, puis recommence.";
|
||||
document.getElementById("gMot").textContent=mot;
|
||||
document.getElementById("gDetail").innerHTML=
|
||||
'<table class="grille"><tr><th>Exercice</th><th>Résultat</th></tr>'
|
||||
+'<tr><td>1. Matériel, logiciel ou donnée</td><td><b>'+s2+' / '+EX2.length+'</b></td></tr>'
|
||||
+'<tr><td>2. Entrée, sortie ou les deux</td><td><b>'+s3+' / '+EX3.length+'</b></td></tr>'
|
||||
+'<tr><td>3. Le défi</td><td><b>'+s4+' / '+EX4.length+'</b></td></tr></table>';
|
||||
var nom=(document.getElementById("nom").value||"").trim()||"...................";
|
||||
document.getElementById("recap").value=
|
||||
"Cours 2 – exercices – "+nom+"\n"
|
||||
+"Matériel-logiciel-donnée "+s2+"/"+EX2.length
|
||||
+" · Entrée-sortie "+s3+"/"+EX3.length+" · Défi "+s4+"/"+EX4.length
|
||||
+" · Total "+t+"/"+TOTAL;
|
||||
document.getElementById("bilan").classList.add("on");
|
||||
try{ document.getElementById("bilan").scrollIntoView({behavior:"smooth"}); }catch(e){}
|
||||
};
|
||||
document.getElementById("copier").onclick=function(){
|
||||
var t=document.getElementById("recap");
|
||||
t.select();
|
||||
var ok=false;
|
||||
try{ ok=document.execCommand("copy"); }catch(e){ ok=false; }
|
||||
document.getElementById("copie").textContent = ok ? "Copié." : "Sélectionne le texte et copie-le à la main.";
|
||||
};
|
||||
document.getElementById("reset").onclick=function(){ location.reload(); };
|
||||
|
||||
maj();
|
||||
|
||||
/* lexique */
|
||||
var LEXIQUE=[
|
||||
["Application","Un logiciel qu'on lance soi-même quand on en a besoin. On dit plutôt « application » sur un téléphone et « logiciel » sur un ordinateur, mais c'est la même chose."],
|
||||
["Composant","Un élément de matériel qui se trouve à l'intérieur de l'unité centrale. La carte mère, le processeur, la carte graphique sont des composants. Un composant n'est pas un périphérique : il est au centre, pas autour."],
|
||||
["Disque dur","Le composant qui conserve les fichiers, même quand l'ordinateur est éteint. On en reparle au cours 3."],
|
||||
["Donnée","Une information enregistrée quelque part. Une photo, un texte, une chanson, une vidéo. Une donnée ne s'exécute pas : on l'ouvre avec un logiciel."],
|
||||
["Entrée (périphérique d')","Un périphérique qui fait entrer de l'information dans l'ordinateur. La souris, le clavier, la webcam, le scanner, le micro."],
|
||||
["Exécuter","Faire ce que les instructions demandent, l'une après l'autre. Un logiciel s'exécute. Une donnée ne s'exécute pas : on l'ouvre."],
|
||||
["Hardware","Le mot anglais pour matériel. De hard, dur, et ware, article."],
|
||||
["Instruction","Un ordre simple et précis donné à la machine. Un logiciel est une suite de milliers d'instructions."],
|
||||
["Logiciel","Une suite d'instructions que la machine exécute dans l'ordre. Windows, un navigateur, un jeu, un antivirus."],
|
||||
["Matériel","Les pièces physiques. Elles se fabriquent, se transportent, s'usent et se cassent."],
|
||||
["Mémoire vive","Le composant qui garde ce sur quoi tu travailles en ce moment. Tout ce qu'elle contient disparait quand la machine s'éteint. On en reparle au cours 3."],
|
||||
["Périphérie","Ce qui est autour. La périphérie d'une ville, ce sont les quartiers autour du centre. C'est de ce mot que vient « périphérique »."],
|
||||
["Périphérique","Un appareil relié à l'ordinateur, autour de la partie qui calcule, qui échange de l'information avec elle. Toujours du matériel."],
|
||||
["Programme","Autre mot pour logiciel. Les deux se disent."],
|
||||
["Software","Le mot anglais pour logiciel. De soft, mou, et ware, article."],
|
||||
["Sortie (périphérique de)","Un périphérique qui fait sortir de l'information de l'ordinateur. L'écran, l'imprimante, le haut-parleur, le projecteur."],
|
||||
["Système d'exploitation","Le logiciel qui démarre en premier et qui commande tous les autres. Windows, macOS, Linux, Android, iOS."],
|
||||
["Unité centrale","La boite qui contient les composants qui calculent. Elle n'est pas un périphérique."]];
|
||||
|
||||
var zl=document.getElementById("lexique");
|
||||
LEXIQUE.forEach(function(e,i){
|
||||
var d=document.createElement("div");d.className="item";
|
||||
d.innerHTML='<button aria-expanded="false"><span class="n">'+e[0].charAt(0)+'</span><span class="t">'+e[0]+'</span><span class="plus">définition</span></button><div class="corps">'+e[1]+'</div>';
|
||||
d.querySelector("button").onclick=function(){
|
||||
var o=d.classList.toggle("ouvert");
|
||||
this.setAttribute("aria-expanded",o?"true":"false");
|
||||
this.querySelector(".plus").textContent=o?"masquer":"définition";
|
||||
};
|
||||
zl.appendChild(d);
|
||||
});
|
||||
|
||||
dessineRail();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,798 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Cours 3 – Où va ce que j'enregistre</title>
|
||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
||||
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
|
||||
button,input,select{font:inherit}
|
||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
||||
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
|
||||
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
|
||||
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
|
||||
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
|
||||
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
|
||||
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
|
||||
.hero a.up:hover{color:#fff}
|
||||
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
||||
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
|
||||
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hero-chip b{font-size:14px}
|
||||
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
|
||||
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
|
||||
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
|
||||
|
||||
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
|
||||
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
|
||||
.stat strong{display:block;font-size:22px;margin-top:3px}
|
||||
.stat small{color:#64748b;font-weight:800}
|
||||
.stat.ok strong{color:var(--green)}
|
||||
|
||||
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
|
||||
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
|
||||
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
|
||||
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
|
||||
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
|
||||
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
|
||||
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
|
||||
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
|
||||
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
|
||||
|
||||
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
|
||||
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
|
||||
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
|
||||
.tab:hover{border-color:#93c5fd}
|
||||
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
|
||||
.tab.active span{color:#c7dcff}
|
||||
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
|
||||
|
||||
.panel{display:none}.panel.active{display:block}
|
||||
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
|
||||
.card h2,.card h3{margin-top:0}
|
||||
.card h2{font-size:26px;letter-spacing:-.5px}
|
||||
.muted{color:var(--muted);line-height:1.6}
|
||||
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
||||
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
|
||||
.btn:hover{filter:brightness(.97)}
|
||||
.btn.primary{background:#2563eb;color:#fff}
|
||||
.btn.soft{background:#f1f5f9;color:#334155}
|
||||
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
|
||||
.feedback{min-height:31px;margin-top:12px;font-weight:850}
|
||||
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
|
||||
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
|
||||
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
|
||||
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
|
||||
.info b{color:var(--ink)}
|
||||
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
|
||||
.info.alerte b{color:#991b1b}
|
||||
|
||||
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
|
||||
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
|
||||
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
|
||||
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
|
||||
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
|
||||
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
|
||||
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
|
||||
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
|
||||
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
|
||||
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
|
||||
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
|
||||
.colonne li button:hover{color:var(--red)}
|
||||
|
||||
.accordeon{display:grid;gap:10px}
|
||||
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
|
||||
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
|
||||
.item>button:hover{background:#f8fbff}
|
||||
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
|
||||
.item .t{font-weight:850;font-size:17px;flex:1}
|
||||
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
|
||||
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
|
||||
.item.ouvert .corps{display:block}
|
||||
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.item.ouvert .n{background:#2563eb;color:#fff}
|
||||
|
||||
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
|
||||
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
|
||||
.qtag.cle{background:#fef3c7;color:#92400e}
|
||||
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
|
||||
.answer-grid{display:grid;gap:8px}
|
||||
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
|
||||
.answer.ok{border-color:#22c55e;background:#f0fdf4}
|
||||
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
|
||||
.reveal.on{display:block}
|
||||
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
|
||||
|
||||
.steps{display:grid;gap:11px}
|
||||
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
|
||||
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.step.fait{opacity:1}
|
||||
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
|
||||
.step.on .n{background:#2563eb;color:#fff}
|
||||
.step.fait .n{background:#dcfce7;color:#15803d}
|
||||
.step h3{margin:0 0 4px;font-size:17px}
|
||||
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
|
||||
|
||||
figure{margin:0 0 18px}
|
||||
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
||||
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
|
||||
|
||||
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
|
||||
.trace h3{margin:0 0 14px;font-size:22px}
|
||||
.trace p{margin:0 0 .5em}
|
||||
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
|
||||
|
||||
.check{display:grid;gap:9px}
|
||||
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
|
||||
.check label:hover{border-color:#93c5fd}
|
||||
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
|
||||
.check input:checked+span{color:var(--green);font-weight:900}
|
||||
|
||||
table.grille{width:100%;border-collapse:collapse;font-size:15px}
|
||||
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
|
||||
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
|
||||
table.grille td.masque{color:transparent;background:#f8fafc}
|
||||
table.grille tr.on td{background:#f0fdf4}
|
||||
table.grille td b{color:#15803d}
|
||||
|
||||
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
|
||||
.module{margin-bottom:30px}
|
||||
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
|
||||
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
|
||||
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
|
||||
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
|
||||
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
|
||||
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
|
||||
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
|
||||
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
|
||||
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
|
||||
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
|
||||
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
||||
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
|
||||
.et.eval{background:#fee2e2;color:#991b1b}
|
||||
.et.fac{background:#f3e8ff;color:#6b21a8}
|
||||
.et.pret{background:#dcfce7;color:#15803d}
|
||||
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
|
||||
a.bloc .n{background:#2563eb;color:#fff}
|
||||
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
|
||||
.bloc.vide h3{font-weight:800}
|
||||
.masque{display:none!important}
|
||||
|
||||
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
|
||||
|
||||
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
|
||||
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
|
||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
||||
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
|
||||
|
||||
.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
|
||||
.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
|
||||
.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
|
||||
.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
|
||||
.q.bon{border-color:#22c55e;background:#f2fdf6}
|
||||
.q.faux{border-color:#f59e0b;background:#fffbeb}
|
||||
.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
|
||||
.q .opts{display:flex;gap:8px;flex-wrap:wrap}
|
||||
.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
|
||||
.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
|
||||
.q .opts button:disabled{cursor:default;opacity:.55}
|
||||
.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
|
||||
.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
|
||||
.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
|
||||
.q.done .expl{display:block}
|
||||
.figpetit{max-width:560px;margin:0 auto 14px}
|
||||
#bilan{display:none}
|
||||
#bilan.on{display:block}
|
||||
.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
|
||||
textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}
|
||||
.fichiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:14px 0}
|
||||
.fic{border:2px solid #dbe3ef;background:#fff;border-radius:14px;padding:12px 14px;text-align:left;cursor:pointer;font-weight:800;font-size:14.5px;overflow-wrap:anywhere;min-width:0}
|
||||
.fic small{display:block;font-weight:700;color:#64748b;margin-top:3px;font-size:13px}
|
||||
.fic b{display:block;font-size:20px;color:#172554;margin-bottom:2px}
|
||||
.fic:hover{border-color:#2563eb}
|
||||
.fic.pris{opacity:.25;cursor:default}
|
||||
.fic.rate{border-color:#f59e0b;background:#fffbeb}
|
||||
.rangee{display:flex;gap:6px;flex-wrap:wrap;min-height:54px;border:2px dashed #cbd5e1;border-radius:14px;padding:8px;align-items:center}
|
||||
.rangee .pas{background:#dcfce7;color:#15803d;border-radius:10px;padding:7px 10px;font-weight:900;font-size:14px}
|
||||
.etape3{display:none}.etape3.on{display:block}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<section class="hero">
|
||||
<div>
|
||||
<a class="up" href="index.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
|
||||
<div class="eyebrow">Cours 3 · Formation numérique · 1re année</div>
|
||||
<h1>Où va ce que j'enregistre</h1>
|
||||
<p>Pourquoi un travail non enregistré disparait, où l'ordinateur range vraiment tes fichiers, et comment lire la taille d'un fichier.</p>
|
||||
<div class="badges">
|
||||
<span class="badge">2 périodes</span>
|
||||
<span class="badge">Livret du cours 3</span>
|
||||
<span class="badge">Exercices dans l'onglet 4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><b>La coupure</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7v10M11 7v10M15 7v10"/></svg><b>Les mémoires</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="8" y="3" width="8" height="12" rx="2"/><path d="M10 15v4h4v-4M12 7v3"/></svg><b>Trois endroits</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><b>Les tailles</b></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="dashboard">
|
||||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
||||
<div class="stat"><small>Temps depuis le début</small><strong id="sTemps">00:00</strong></div>
|
||||
<div class="stat"><small>Il reste pour cette activité</small><strong id="sReste">–</strong></div>
|
||||
<div class="stat"><small>Exercices répondus</small><strong id="sEx">0 sur 25</strong></div>
|
||||
</section>
|
||||
|
||||
<div class="card" style="padding:16px 18px">
|
||||
<div class="row">
|
||||
<button class="btn primary" id="btnGo">Démarrer</button>
|
||||
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
||||
<span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navtabs n6" id="rail"></nav>
|
||||
|
||||
<!-- 1 -->
|
||||
<section class="panel active" id="p0"><div class="card">
|
||||
<div class="entete"><div><h2>La démonstration</h2><p class="muted">Regarde bien. Ensuite, livret page 1.</p></div><span class="score">10 min</span></div>
|
||||
|
||||
<div class="consigne"><small>Ce qui va se passer</small>
|
||||
Le professeur tape un texte, puis il coupe brutalement l'ordinateur, sans enregistrer. Il le rallume.</div>
|
||||
|
||||
<div class="consigne"><small>Ensuite, dans ton livret, seul</small>
|
||||
Qu'est-ce qui s'est passé ? Pourquoi, à ton avis ? Écris ton hypothèse, même si tu n'es pas sûr.</div>
|
||||
|
||||
<h3>Les hypothèses de la classe</h3>
|
||||
<div class="saisie">
|
||||
<input id="entree" placeholder="Une hypothèse proposée par la classe" autocomplete="off">
|
||||
<button class="btn primary" id="ajouter">Ajouter</button>
|
||||
</div>
|
||||
<div class="colonnes" id="colonnes" style="grid-template-columns:1fr"></div>
|
||||
<p class="muted">On ne corrige rien pour l'instant. On reviendra sur ces hypothèses tout à l'heure.</p>
|
||||
</div></section>
|
||||
|
||||
<!-- 2 -->
|
||||
<section class="panel" id="p1">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Je comprends. Les deux mémoires et le stockage</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">20 min</span></div>
|
||||
|
||||
<h3>Ce qui s'est passé</h3>
|
||||
<p>Le texte existait bien, tu l'as vu à l'écran. Mais il se trouvait dans une mémoire qui <b>se vide dès que le courant s'arrête</b>. Un ordinateur possède plusieurs endroits pour garder des informations, et ils n'ont pas le même travail.</p>
|
||||
|
||||
<h3>Retour dans la cuisine</h3>
|
||||
<p>Au cours 2, le four était le matériel, la recette le logiciel, les ingrédients les données. On continue avec la même cuisine.</p>
|
||||
<p><b>Le plan de travail</b> : on y pose ce qu'on prépare, tout est à portée de main. Mais à la fin du service, on nettoie : ce qui y est resté part à la poubelle.</p>
|
||||
<p><b>Les placards</b> : on y range pour garder. Ce qui y est y sera encore demain.</p>
|
||||
<p><b>La notice d'ouverture</b>, collée derrière la porte : elle dit comment tout allumer le matin. Personne ne la modifie.</p>
|
||||
<p><b>Le cuisinier</b>, c'est le processeur. Il travaille sur le plan de travail.</p>
|
||||
|
||||
<figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 380">
|
||||
|
||||
<defs>
|
||||
<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#172554"/></marker>
|
||||
<marker id="v" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker>
|
||||
</defs>
|
||||
<g font-family="Arial, Helvetica, sans-serif">
|
||||
<rect x="20" y="20" width="760" height="340" rx="18" fill="#f8fafc" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="6 6"/>
|
||||
<text x="40" y="50" font-size="15" font-weight="bold" fill="#64748b">DANS L'ORDINATEUR</text>
|
||||
<rect x="40" y="80" width="200" height="110" rx="14" fill="#fef3c7" stroke="#b45309" stroke-width="3"/>
|
||||
<text x="140" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#92400e">Mémoire vive</text>
|
||||
<text x="140" y="142" text-anchor="middle" font-size="14" fill="#92400e">le plan de travail</text>
|
||||
<text x="140" y="170" text-anchor="middle" font-size="13" fill="#b45309">s'efface à l'extinction</text>
|
||||
<rect x="300" y="80" width="180" height="110" rx="14" fill="#e0e7ff" stroke="#3730a3" stroke-width="3"/>
|
||||
<text x="390" y="125" text-anchor="middle" font-size="19" font-weight="bold" fill="#3730a3">Processeur</text>
|
||||
<text x="390" y="150" text-anchor="middle" font-size="14" fill="#3730a3">le cuisinier</text>
|
||||
<path d="M240 125 H292" stroke="#172554" stroke-width="3" marker-end="url(#a)"/>
|
||||
<path d="M300 150 H248" stroke="#172554" stroke-width="3" marker-end="url(#a)"/>
|
||||
<rect x="540" y="80" width="220" height="110" rx="14" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
||||
<text x="650" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#166534">Stockage</text>
|
||||
<text x="650" y="142" text-anchor="middle" font-size="14" fill="#166534">les placards</text>
|
||||
<text x="650" y="170" text-anchor="middle" font-size="13" fill="#15803d">reste quand on éteint</text>
|
||||
<path d="M140 195 C140 260, 600 260, 640 198" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#v)"/>
|
||||
<rect x="318" y="228" width="160" height="34" rx="17" fill="#16a34a"/>
|
||||
<text x="398" y="251" text-anchor="middle" font-size="16" font-weight="bold" fill="#ffffff">ENREGISTRER</text>
|
||||
<rect x="40" y="285" width="200" height="60" rx="12" fill="#f1f5f9" stroke="#475569" stroke-width="2.5"/>
|
||||
<text x="140" y="311" text-anchor="middle" font-size="17" font-weight="bold" fill="#334155">Mémoire morte</text>
|
||||
<text x="140" y="332" text-anchor="middle" font-size="13" fill="#475569">la notice d'ouverture, gravée</text>
|
||||
<text x="262" y="321" font-size="14" fill="#475569">sert uniquement au démarrage de la machine</text>
|
||||
</g></svg>
|
||||
</figure>
|
||||
|
||||
<h3>La mémoire vive, en anglais RAM : le plan de travail</h3>
|
||||
<p>Elle garde <b>ce sur quoi tu travailles en ce moment</b>. Elle est très rapide. Mais elle est <b>temporaire</b> : quand on éteint, <b>tout ce qu'elle contient disparait</b>. C'est ce qui est arrivé au texte. Elle est aussi limitée : trop de logiciels ouverts, et l'ordinateur ralentit.</p>
|
||||
|
||||
<h3>Le stockage : les placards</h3>
|
||||
<p>C'est là que les fichiers <b>restent</b>, même éteint : le <b>disque dur</b> ou le <b>SSD</b>. Tes documents y sont, et aussi tous les logiciels installés, Windows compris.</p>
|
||||
|
||||
<div class="consigne"><small>Enregistrer, c'est ranger dans le placard</small>
|
||||
Cliquer sur « Enregistrer », c'est <b>copier</b> ton travail de la mémoire vive vers le stockage. Tant que tu ne l'as pas fait, il n'existe que sur le plan de travail.<br><br>
|
||||
Certains logiciels enregistrent tout seuls, justement parce que la mémoire vive est fragile. Mais pas tous, et pas toujours. <b>La seule habitude sûre : enregistrer toi-même, souvent.</b></div>
|
||||
|
||||
<h3>La mémoire morte, en anglais ROM : la notice d'ouverture</h3>
|
||||
<p>Une petite mémoire gravée qui contient <b>le programme qui démarre la machine</b>. Elle se réveille en premier, puis va chercher Windows dans le stockage. Son contenu ne disparait pas, et on ne la modifie pas. <b>Ce n'est pas là que sont tes fichiers.</b></p>
|
||||
|
||||
<h3>Attention au mot « mémoire » dans les publicités</h3>
|
||||
<p>« Smartphone avec 128 Go de mémoire » : ces 128 Go sont le <b>stockage</b>. La mémoire vive du même téléphone fait plutôt 6 ou 8 Go.</p>
|
||||
|
||||
<table class="grille">
|
||||
<tr><th></th><th>Mémoire vive</th><th>Stockage</th><th>Mémoire morte</th></tr>
|
||||
<tr><td><b>Dans la cuisine</b></td><td>Le plan de travail</td><td>Les placards</td><td>La notice d'ouverture</td></tr>
|
||||
<tr><td><b>Ce qu'elle garde</b></td><td>Ce sur quoi je travaille</td><td>Mes fichiers, les logiciels</td><td>Le programme de démarrage</td></tr>
|
||||
<tr><td><b>Quand on éteint</b></td><td>Tout disparait</td><td>Tout reste</td><td>Tout reste</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Je m'entraine tout de suite</h3>
|
||||
<p class="muted" style="margin-top:0">Mémoire vive, stockage ou mémoire morte ? On répond ensemble.</p>
|
||||
<div id="ex0"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3 -->
|
||||
<section class="panel" id="p2">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Je comprends. Stockage interne et externe</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
|
||||
|
||||
<p>Tous les stockages gardent les fichiers quand on éteint. Ce qui les différencie, c'est <b>où ils se trouvent</b>.</p>
|
||||
<figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 330">
|
||||
|
||||
<g font-family="Arial, Helvetica, sans-serif">
|
||||
<rect x="30" y="40" width="250" height="250" rx="18" fill="#eff6ff" stroke="#172554" stroke-width="3"/>
|
||||
<text x="155" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="#172554">L'ORDINATEUR</text>
|
||||
<rect x="80" y="130" width="150" height="80" rx="10" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
||||
<text x="155" y="165" text-anchor="middle" font-size="16" font-weight="bold" fill="#166534">Disque dur</text>
|
||||
<text x="155" y="187" text-anchor="middle" font-size="14" fill="#166534">ou SSD</text>
|
||||
<text x="155" y="250" text-anchor="middle" font-size="16" font-weight="bold" fill="#15803d">STOCKAGE INTERNE</text>
|
||||
<text x="155" y="272" text-anchor="middle" font-size="13" fill="#475569">dedans, reste sur cette machine</text>
|
||||
<line x1="310" y1="30" x2="310" y2="300" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="6 6"/>
|
||||
<text x="555" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="#7c2d12">STOCKAGE EXTERNE : en dehors de l'appareil</text>
|
||||
<rect x="340" y="60" width="200" height="150" rx="16" fill="#fff7ed" stroke="#c2410c" stroke-width="3"/>
|
||||
<rect x="400" y="95" width="80" height="34" rx="6" fill="#fed7aa" stroke="#c2410c" stroke-width="2.5"/>
|
||||
<rect x="480" y="104" width="22" height="16" rx="2" fill="#94a3b8"/>
|
||||
<text x="440" y="160" text-anchor="middle" font-size="15" font-weight="bold" fill="#9a3412">Clé USB</text>
|
||||
<text x="440" y="182" text-anchor="middle" font-size="13" fill="#9a3412">disque externe, carte SD</text>
|
||||
<text x="440" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#c2410c">je l'emporte</text>
|
||||
<text x="440" y="260" text-anchor="middle" font-size="13" fill="#475569">pas besoin d'internet</text>
|
||||
<rect x="570" y="60" width="200" height="150" rx="16" fill="#f5f3ff" stroke="#6d28d9" stroke-width="3"/>
|
||||
<path d="M620 130 a22 22 0 0 1 20 -30 a30 30 0 0 1 56 8 a20 20 0 0 1 4 40 h-72 a18 18 0 0 1 -8 -18z" fill="#ddd6fe" stroke="#6d28d9" stroke-width="2.5"/>
|
||||
<text x="670" y="175" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">En ligne (cloud)</text>
|
||||
<text x="670" y="195" text-anchor="middle" font-size="13" fill="#5b21b6">sur un serveur, ailleurs</text>
|
||||
<text x="670" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#6d28d9">accessible partout</text>
|
||||
<text x="670" y="260" text-anchor="middle" font-size="13" fill="#475569">avec internet</text>
|
||||
</g></svg>
|
||||
</figure>
|
||||
|
||||
<h3>Le stockage interne</h3>
|
||||
<p><b>À l'intérieur de l'appareil</b> : le disque dur ou le SSD. Rapide, toujours là, pas besoin d'internet. Mais <b>tes fichiers restent sur cette machine-là</b>. Sur un autre ordinateur, ils ne te suivent pas.</p>
|
||||
|
||||
<h3>Le stockage externe, deux familles</h3>
|
||||
<p><b>Celui qu'on emporte</b> : clé USB, disque dur externe, carte mémoire. On emmène ses fichiers partout, sans internet. Mais on peut le perdre ou l'oublier.</p>
|
||||
<p><b>Le stockage en ligne, ou cloud</b> : un espace sur un <b>serveur</b>, un ordinateur allumé en permanence, quelque part. OneDrive, Google Drive, iCloud. On retrouve ses fichiers partout, on peut les partager. Mais il faut internet. Et le cloud n'est pas un nuage : ce sont des disques durs dans un bâtiment, souvent très loin.</p>
|
||||
|
||||
<div class="consigne"><small>Le lien avec le cours 1</small>
|
||||
« Le compte me suit d'un poste à l'autre, la machine ne me suit pas. »<br><br>
|
||||
Ton dossier FMTTN n'est pas dans l'ordinateur devant toi. Il est sur un <b>serveur</b> de l'école. C'est un <b>stockage externe</b>, et c'est pour ça que tu le retrouves sur n'importe quel poste.</div>
|
||||
|
||||
<table class="grille">
|
||||
<tr><th>Je me demande</th><th>Interne</th><th>Clé USB</th><th>En ligne</th></tr>
|
||||
<tr><td>Retrouver mon fichier sur un autre appareil ?</td><td>Non</td><td>Si je l'ai sur moi</td><td>Oui</td></tr>
|
||||
<tr><td>Aurai-je internet là où je vais ?</td><td>Pas besoin</td><td>Pas besoin</td><td>Obligatoire</td></tr>
|
||||
<tr><td>Travailler à plusieurs ?</td><td>Non</td><td>Difficile</td><td>Oui</td></tr>
|
||||
</table>
|
||||
<p style="margin-top:14px"><b>Une vraie sauvegarde, c'est deux endroits</b> : une copie de sécurité rangée ailleurs que l'original.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Un fichier, trois endroits</h3>
|
||||
<p class="muted" style="margin-top:0">Avec ton binôme. Une étape à la fois.</p>
|
||||
<div class="steps" id="etapes"></div>
|
||||
<div class="row" style="margin-top:14px">
|
||||
<button class="btn soft" id="etprec">Étape précédente</button>
|
||||
<button class="btn primary" id="etsuiv">Étape suivante</button>
|
||||
</div>
|
||||
|
||||
<h3 style="margin-top:24px">Ce qu'on a constaté</h3>
|
||||
<div class="row" style="margin-bottom:12px">
|
||||
<button class="btn primary" id="obsSuiv">Révéler la ligne suivante</button>
|
||||
<button class="btn soft" id="obsReset">Tout masquer</button>
|
||||
</div>
|
||||
<table class="grille" id="tableObs"></table>
|
||||
<p class="muted" id="noteObs" style="margin-top:14px"></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4 -->
|
||||
<section class="panel" id="p3">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Je comprends. La taille des fichiers</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
|
||||
|
||||
<p>Un stockage n'est pas infini, comme un placard a un nombre d'étagères. La taille d'un fichier se mesure en <b>octets</b>. Une lettre tapée au clavier occupe environ un octet.</p>
|
||||
<p>Pour éviter les nombres immenses, on utilise des préfixes, comme pour les mètres : <b>kilo</b> veut dire mille, comme dans kilomètre.</p>
|
||||
<figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 250">
|
||||
|
||||
<g font-family="Arial, Helvetica, sans-serif" text-anchor="middle">
|
||||
<g font-size="22" font-weight="bold">
|
||||
<rect x="20" y="60" width="120" height="70" rx="12" fill="#f1f5f9" stroke="#475569" stroke-width="2.5"/><text x="80" y="104" fill="#334155">octet</text>
|
||||
<rect x="180" y="60" width="120" height="70" rx="12" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5"/><text x="240" y="104" fill="#1d4ed8">Ko</text>
|
||||
<rect x="340" y="60" width="120" height="70" rx="12" fill="#dcfce7" stroke="#15803d" stroke-width="2.5"/><text x="400" y="104" fill="#15803d">Mo</text>
|
||||
<rect x="500" y="60" width="120" height="70" rx="12" fill="#fef3c7" stroke="#b45309" stroke-width="2.5"/><text x="560" y="104" fill="#b45309">Go</text>
|
||||
<rect x="660" y="60" width="120" height="70" rx="12" fill="#fee2e2" stroke="#b91c1c" stroke-width="2.5"/><text x="720" y="104" fill="#b91c1c">To</text>
|
||||
</g>
|
||||
<g font-size="15" font-weight="bold" fill="#172554">
|
||||
<text x="160" y="45">× 1000</text><text x="320" y="45">× 1000</text><text x="480" y="45">× 1000</text><text x="640" y="45">× 1000</text>
|
||||
</g>
|
||||
<g stroke="#172554" stroke-width="2.5" fill="none">
|
||||
<path d="M142 95 H176"/><path d="M302 95 H336"/><path d="M462 95 H496"/><path d="M622 95 H656"/>
|
||||
</g>
|
||||
<g font-size="13" fill="#475569">
|
||||
<text x="80" y="160">une lettre</text>
|
||||
<text x="240" y="160">un texte court</text>
|
||||
<text x="400" y="160">une photo,</text><text x="400" y="178">une chanson</text>
|
||||
<text x="560" y="160">un film,</text><text x="560" y="178">une clé USB</text>
|
||||
<text x="720" y="160">un gros disque</text><text x="720" y="178">de sauvegarde</text>
|
||||
</g>
|
||||
<text x="400" y="225" font-size="15" font-weight="bold" fill="#172554">Plus petit ←————————————————————→ Plus grand</text>
|
||||
</g></svg>
|
||||
</figure>
|
||||
|
||||
<div class="consigne"><small>Le piège des nombres</small>
|
||||
Pour comparer deux tailles, <b>regarde d'abord l'unité, ensuite seulement le nombre</b>.<br><br>
|
||||
850 Ko, c'est plus petit que 2 Mo, même si 850 est un plus grand nombre : 2 Mo, c'est environ 2000 Ko.</div>
|
||||
|
||||
<p><b>Pourquoi une vidéo est si lourde ?</b> Un texte, ce sont des lettres. Une photo, des millions de points de couleur. Une vidéo, des dizaines de photos par seconde, plus le son.</p>
|
||||
<p><b>Où lire la taille ?</b> Dans l'explorateur de fichiers, affichage « Détails », colonne « Taille ».</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Du plus petit au plus grand</h3>
|
||||
<p class="muted" style="margin-top:0">Clique sur les fichiers dans l'ordre, du plus petit au plus grand.</p>
|
||||
<div class="fichiers" id="fichiers"></div>
|
||||
<div class="rangee" id="rangee"></div>
|
||||
<div class="row" style="margin-top:12px"><button class="btn soft" id="triReset">Recommencer</button><span class="score" id="triInfo">0 sur 8 · 0 erreur</span></div>
|
||||
<p class="feedback" id="triMsg"></p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 25 questions. La correction s'affiche tout de suite avec l'explication.</p></div></div>
|
||||
<div class="consigne"><small>Avant de commencer</small>
|
||||
Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br>À la fin, recopie tes deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
|
||||
|
||||
<div class="progres">
|
||||
<input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid #cbd5e1;border-radius:11px;min-width:220px;flex:1">
|
||||
<div class="barre"><i id="jauge"></i></div>
|
||||
<span class="score" id="avancement">0 / 25</span>
|
||||
</div>
|
||||
|
||||
<h3>Exercice 1. Mémoire vive, stockage ou mémoire morte ?</h3>
|
||||
<div id="ex1"></div>
|
||||
<h3 style="margin-top:26px">Exercice 2. Interne ou externe ?</h3>
|
||||
<div id="ex2"></div>
|
||||
<h3 style="margin-top:26px">Exercice 3. Le bon stockage</h3>
|
||||
<p class="muted" style="margin-top:0">Pour chaque situation, le stockage le plus adapté.</p>
|
||||
<div id="ex3"></div>
|
||||
<h3 style="margin-top:26px">Exercice 4. Les tailles</h3>
|
||||
<p class="muted" style="margin-top:0">L'unité d'abord, le nombre ensuite.</p>
|
||||
<div id="ex4"></div>
|
||||
|
||||
<div class="row" style="margin-top:22px"><button class="btn primary" id="voir">Voir mon résultat</button><button class="btn soft" id="reset">Tout recommencer</button></div>
|
||||
<div id="bilan" style="margin-top:20px">
|
||||
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
||||
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 25</span></div>
|
||||
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
||||
</div>
|
||||
<div id="gDetail" style="margin-bottom:16px"></div>
|
||||
<p class="muted"><b>Recopie ces deux lignes dans ton livret.</b></p>
|
||||
<textarea id="recap" readonly></textarea>
|
||||
<div class="row" style="margin-top:10px"><button class="btn" id="copier">Copier</button><span class="muted" id="copie"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5 -->
|
||||
<section class="panel" id="p4">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>La correction du classement</h2><p class="muted">On corrige ensemble.</p></div><span class="score">15 min</span></div>
|
||||
<div class="row" style="margin-bottom:12px">
|
||||
<button class="btn primary" id="corSuiv">Révéler le fichier suivant</button>
|
||||
<button class="btn soft" id="corReset">Tout masquer</button>
|
||||
</div>
|
||||
<table class="grille" id="tableCor"></table>
|
||||
<p class="muted" id="noteCor" style="margin-top:14px"></p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Combien de photos dans une clé de 16 Go ?</h3>
|
||||
<p class="muted" style="margin-top:0">Une photo de téléphone fait environ 4 Mo. On raisonne ensemble, étape par étape.</p>
|
||||
<div class="row" style="margin-bottom:12px"><button class="btn primary" id="estSuiv">Étape suivante</button><button class="btn soft" id="estReset">Recommencer</button></div>
|
||||
<div class="consigne etape3" id="est1"><small>Étape 1</small>16 Go, c'est environ <b>16 000 Mo</b>. À chaque marche, on multiplie par environ mille.</div>
|
||||
<div class="consigne etape3" id="est2"><small>Étape 2</small>16 000 Mo, divisé par 4 Mo par photo : environ <b>4 000 photos</b>.</div>
|
||||
<div class="consigne etape3" id="est3"><small>Étape 3</small>Et avec des vidéos de 450 Mo ? 16 000 divisé par 450 : environ <b>35 vidéos</b>. Des milliers de photos, quelques dizaines de vidéos.</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6 -->
|
||||
<section class="panel" id="p5">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Dans ton livret. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
|
||||
<div class="row" style="margin-bottom:16px">
|
||||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
||||
<button class="btn soft" id="motReset">Tout masquer</button>
|
||||
<span class="score" id="motCompte">0 mot sur 8</span>
|
||||
</div>
|
||||
<div class="trace" id="trace"></div>
|
||||
<div class="consigne" style="margin-top:18px;margin-bottom:0"><small>Avant de partir</small>
|
||||
Rends la clé USB. Ferme ta session.</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Mon lexique du cours 3</h3>
|
||||
<p class="muted" style="margin-top:0">Les mêmes définitions que dans ton livret. Clique sur un mot pour l'ouvrir.</p>
|
||||
<div class="accordeon" id="lexique"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<footer>Cours 3 · Formation numérique · 1re année · M. Courcelle</footer>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
var PHASES=[{t:"La démonstration",d:10,a:0},{t:"Les mémoires",d:20,a:10},{t:"Trois endroits",d:25,a:30},
|
||||
{t:"Les tailles",d:25,a:55},{t:"La correction",d:15,a:80},{t:"Ma trace écrite",d:5,a:95}];
|
||||
|
||||
/* ---------- chrono et onglets ---------- */
|
||||
var t0=null,tick=null,choisie=0,ecart=document.getElementById("ecart"),rail=document.getElementById("rail");
|
||||
function d2(n){return (n<10?"0":"")+n;}
|
||||
function minutes(){return t0?(Date.now()-t0)/60000:0;}
|
||||
function dessineRail(){
|
||||
rail.innerHTML="";
|
||||
PHASES.forEach(function(p,i){
|
||||
var b=document.createElement("button");
|
||||
b.className="tab"+(i===choisie?" active":"");
|
||||
b.innerHTML=(i+1)+". "+p.t+"<span>"+p.d+" min</span>";
|
||||
b.onclick=function(){montre(i);};
|
||||
rail.appendChild(b);
|
||||
});
|
||||
document.getElementById("sPhase").textContent=(choisie+1)+" sur 6";
|
||||
ecart.textContent="Activité "+(choisie+1)+" · "+PHASES[choisie].t;
|
||||
majReste();
|
||||
}
|
||||
function montre(i){choisie=i;for(var k=0;k<PHASES.length;k++){document.getElementById("p"+k).classList.toggle("active",k===i);}dessineRail();try{window.scrollTo({top:0,behavior:"smooth"});}catch(e){}}
|
||||
function majReste(){var e=document.getElementById("sReste");if(!t0){e.textContent="–";return;}var r=Math.ceil(PHASES[choisie].a+PHASES[choisie].d-minutes());e.textContent=r>0?(r+" min"):"terminé";}
|
||||
function rafraichit(){var s=Math.floor((Date.now()-t0)/1000);document.getElementById("sTemps").textContent=d2(Math.floor(s/60))+":"+d2(s%60);majReste();}
|
||||
document.getElementById("btnGo").onclick=function(){if(t0)return;t0=Date.now();this.textContent="En cours";tick=setInterval(rafraichit,1000);rafraichit();};
|
||||
document.getElementById("btnStop").onclick=function(){clearInterval(tick);t0=null;document.getElementById("sTemps").textContent="00:00";document.getElementById("sReste").textContent="–";document.getElementById("btnGo").textContent="Démarrer";};
|
||||
|
||||
/* ---------- 1. hypotheses ---------- */
|
||||
var hyp=[];
|
||||
function dessineHyp(){
|
||||
var z=document.getElementById("colonnes");
|
||||
z.innerHTML='<div class="colonne"><h3>Hypothèses <em>'+hyp.length+'</em></h3><ul>'+hyp.map(function(x,i){
|
||||
return '<li><span>'+x+'</span><button data-i="'+i+'" aria-label="Retirer">×</button></li>';}).join("")+'</ul></div>';
|
||||
z.querySelectorAll("button[data-i]").forEach(function(b){b.onclick=function(){hyp.splice(parseInt(b.dataset.i,10),1);dessineHyp();};});
|
||||
}
|
||||
function ajoute(){var e=document.getElementById("entree"),v=e.value.trim();if(!v)return;hyp.push(v.replace(/[<>&]/g,""));e.value="";e.focus();dessineHyp();}
|
||||
document.getElementById("ajouter").onclick=ajoute;
|
||||
document.getElementById("entree").addEventListener("keydown",function(ev){if(ev.key==="Enter")ajoute();});
|
||||
dessineHyp();
|
||||
|
||||
/* ---------- moteur de questions ---------- */
|
||||
var rep={},TOTAL=25;
|
||||
function poser(zone,cle,txt,opts,bon,expl,compte){
|
||||
var d=document.createElement("div");d.className="q";
|
||||
d.innerHTML='<div class="txt">'+txt+'</div><div class="opts"></div><div class="expl">'+expl+'</div>';
|
||||
var z=d.querySelector(".opts");
|
||||
opts.forEach(function(o,i){
|
||||
var b=document.createElement("button");b.textContent=o;
|
||||
b.onclick=function(){
|
||||
if(rep[cle]!==undefined)return;
|
||||
rep[cle]=i;
|
||||
d.classList.add("done",i===bon?"bon":"faux");
|
||||
z.querySelectorAll("button").forEach(function(x,j){x.disabled=true;if(j===bon)x.classList.add("pick");else if(j===i)x.classList.add("rate");});
|
||||
if(compte)maj();
|
||||
};
|
||||
z.appendChild(b);
|
||||
});
|
||||
zone.appendChild(d);
|
||||
}
|
||||
function maj(){
|
||||
var n=Object.keys(rep).filter(function(k){return k.charAt(0)!=="z";}).length;
|
||||
document.getElementById("avancement").textContent=n+" / "+TOTAL;
|
||||
document.getElementById("jauge").style.width=(n/TOTAL*100)+"%";
|
||||
document.getElementById("sEx").textContent=n+" sur "+TOTAL;
|
||||
}
|
||||
|
||||
/* exercice rapide de la phase 2, hors score */
|
||||
var OPTM=["Mémoire vive","Stockage","Mémoire morte"];
|
||||
var EX0=[
|
||||
["Tu tapes un message, pas encore envoyé ni enregistré.",0,"Il n'existe que sur le plan de travail. Une coupure, et il est perdu."],
|
||||
["Ta photo prise le mois dernier, dans ta galerie.",1,"Elle a été enregistrée : elle est dans les placards."],
|
||||
["Le programme qui se lance quand tu appuies sur le bouton, avant Windows.",2,"C'est la notice d'ouverture, gravée dans la mémoire morte."],
|
||||
["Windows lui-même, installé dans l'ordinateur.",1,"Windows est installé dans le stockage. Pendant qu'il tourne, il est aussi chargé en mémoire vive, mais c'est dans le stockage qu'il est rangé."]];
|
||||
EX0.forEach(function(q,i){poser(document.getElementById("ex0"),"z"+i,q[0],OPTM,q[1],q[2],false);});
|
||||
|
||||
var EX1=[
|
||||
["Un onglet ouvert dans ton navigateur.",0,"Il est ouvert en ce moment : il occupe la mémoire vive. Fermé, il disparait."],
|
||||
["Une chanson que tu as téléchargée.",1,"Elle a été enregistrée : elle est dans le stockage, même quand l'appareil est éteint."],
|
||||
["Le programme de démarrage de l'ordinateur.",2,"La mémoire morte ne contient que ça : le programme qui démarre la machine."],
|
||||
["Le texte que tu es en train de taper.",0,"Tant que tu ne l'as pas enregistré, il n'est que sur le plan de travail."],
|
||||
["Un logiciel installé sur l'ordinateur.",1,"Les logiciels installés sont rangés dans le stockage, comme les fichiers."],
|
||||
["Une mémoire que tu ne peux pas modifier en utilisant l'ordinateur.",2,"C'est la mémoire morte : la notice d'ouverture, que personne ne touche."],
|
||||
["L'endroit où va ton texte quand tu cliques sur « Enregistrer ».",1,"Enregistrer, c'est copier de la mémoire vive vers le stockage."],
|
||||
["La mémoire qui se vide quand on éteint.",0,"C'est la mémoire vive. C'est pour ça qu'il faut enregistrer."]];
|
||||
var OPTI=["Interne","Externe"];
|
||||
var EX2=[
|
||||
["Le disque dur à l'intérieur de ton ordinateur.",0,"Il est dans l'appareil : stockage interne."],
|
||||
["Une clé USB.",1,"Elle est en dehors de l'appareil, on l'emporte : stockage externe."],
|
||||
["Google Drive ou OneDrive.",1,"C'est du stockage en ligne, sur un serveur ailleurs : stockage externe."],
|
||||
["Le SSD de ton ordinateur portable.",0,"Il est à l'intérieur de la machine : interne."],
|
||||
["Une carte mémoire qu'on retire de l'appareil photo.",1,"Elle se retire et s'emporte : externe."],
|
||||
["Ton dossier FMTTN sur le serveur de l'école.",1,"Piège : tu le vois à l'écran, mais il n'est pas dans ce poste. Il est sur un serveur, sinon tu ne le retrouverais pas sur un autre poste."],
|
||||
["Le stockage de ton téléphone.",0,"Il est dans le téléphone : interne. C'est lui que les publicités appellent « mémoire »."],
|
||||
["Un disque dur branché par un câble USB.",1,"Il est en dehors de l'ordinateur : externe."]];
|
||||
var OPTS=["Stockage interne","Clé USB","En ligne"];
|
||||
var EX3=[
|
||||
["Vous êtes trois à préparer un exposé, chacun chez soi.",2,"Chacun y accède de chez lui et vous travaillez sur le même document."],
|
||||
["Tu présentes ton travail dans une classe sans internet.",1,"Sans internet, le cloud est inaccessible. La clé, tu l'emportes."],
|
||||
["Tu veux retrouver tes fichiers sur n'importe quel poste de l'école.",2,"Ton espace de l'école est sur un serveur : accessible de partout, comme le cloud."],
|
||||
["Tu veux le logiciel qui s'ouvre le plus vite, sur ton propre ordinateur.",0,"Le stockage interne est le plus rapide, et il est toujours là."],
|
||||
["Tu pars sans internet et tu veux continuer ton travail sur ton portable.",0,"Le fichier doit être dans le portable lui-même. Pas besoin de réseau."]];
|
||||
var EX4=[
|
||||
["Lequel est le plus grand : 800 Mo ou 1 Go ?",["800 Mo","1 Go"],1,"1 Go, c'est environ 1000 Mo. Donc plus que 800 Mo."],
|
||||
["Lequel est le plus grand : 1500 Ko ou 1 Mo ?",["1500 Ko","1 Mo"],0,"1 Mo, c'est environ 1000 Ko. Donc 1500 Ko est plus grand."],
|
||||
["Environ combien de Mo dans 1 Go ?",["10","100","1000"],2,"À chaque marche, on multiplie par environ mille."],
|
||||
["Une photo de 4 Mo passe-t-elle dans une pièce jointe limitée à 25 Mo ?",["Oui","Non"],0,"4 Mo, c'est plus petit que 25 Mo. Même unité, on compare les nombres."]];
|
||||
|
||||
EX1.forEach(function(q,i){poser(document.getElementById("ex1"),"a"+i,q[0],OPTM,q[1],q[2],true);});
|
||||
EX2.forEach(function(q,i){poser(document.getElementById("ex2"),"b"+i,q[0],OPTI,q[1],q[2],true);});
|
||||
EX3.forEach(function(q,i){poser(document.getElementById("ex3"),"c"+i,q[0],OPTS,q[1],q[2],true);});
|
||||
EX4.forEach(function(q,i){poser(document.getElementById("ex4"),"d"+i,q[0],q[1],q[2],q[3],true);});
|
||||
|
||||
function compte(pref,src,idx){var n=0;src.forEach(function(q,i){if(rep[pref+i]===q[idx])n++;});return n;}
|
||||
document.getElementById("voir").onclick=function(){
|
||||
var s1=compte("a",EX1,1),s2=compte("b",EX2,1),s3=compte("c",EX3,1),s4=compte("d",EX4,2),t=s1+s2+s3+s4;
|
||||
document.getElementById("gTotal").textContent=t;
|
||||
document.getElementById("gMot").textContent= t>=22?"Très bien. Tu peux passer aux exercices écrits de ton livret."
|
||||
: t>=17?"C'est acquis dans l'ensemble. Relis ton mémo pour les points ratés."
|
||||
: t>=12?"La base est là. Relis la page sur les deux mémoires, puis recommence l'exercice 1."
|
||||
: "Il faut reprendre. Relis les pages « Je comprends » de ton livret, puis recommence.";
|
||||
document.getElementById("gDetail").innerHTML='<table class="grille"><tr><th>Exercice</th><th>Résultat</th></tr>'
|
||||
+'<tr><td>1. Mémoire vive, stockage ou mémoire morte</td><td><b>'+s1+' / 8</b></td></tr>'
|
||||
+'<tr><td>2. Interne ou externe</td><td><b>'+s2+' / 8</b></td></tr>'
|
||||
+'<tr><td>3. Le bon stockage</td><td><b>'+s3+' / 5</b></td></tr>'
|
||||
+'<tr><td>4. Les tailles</td><td><b>'+s4+' / 4</b></td></tr></table>';
|
||||
var nom=(document.getElementById("nom").value||"").trim()||"...................";
|
||||
document.getElementById("recap").value="Cours 3 – exercices – "+nom+"\nMémoires "+s1+"/8 · Interne-externe "+s2+"/8 · Bon stockage "+s3+"/5 · Tailles "+s4+"/4 · Total "+t+"/25";
|
||||
document.getElementById("bilan").classList.add("on");
|
||||
try{document.getElementById("bilan").scrollIntoView({behavior:"smooth"});}catch(e){}
|
||||
};
|
||||
document.getElementById("copier").onclick=function(){var t=document.getElementById("recap");t.select();var ok=false;try{ok=document.execCommand("copy");}catch(e){}document.getElementById("copie").textContent=ok?"Copié.":"Sélectionne le texte et copie-le à la main.";};
|
||||
document.getElementById("reset").onclick=function(){location.reload();};
|
||||
|
||||
/* ---------- 3. etapes et observations ---------- */
|
||||
var ETAPES=[
|
||||
["Ouvre le Bloc-notes","Tape une phrase : ton prénom, suivi de « test du cours 3 »."],
|
||||
["Enregistre sur le poste","Nom : cours3_test.txt, dans le dossier du poste que le professeur t'indique. Il est sur cette machine uniquement."],
|
||||
["Enregistre sur la clé USB","Le même texte, le même nom."],
|
||||
["Enregistre dans ton dossier FMTTN","Sur l'espace de l'école."],
|
||||
["Change de poste","Ferme ta session. Change de place avec ton binôme. Ouvre ta session sur son poste. Emporte la clé."],
|
||||
["Cherche tes trois fichiers","Et complète le tableau de ton livret."]];
|
||||
var ei=0,ze=document.getElementById("etapes");
|
||||
function dessineEtapes(){ze.innerHTML="";ETAPES.forEach(function(e,i){var d=document.createElement("div");d.className="step"+(i===ei?" on":"")+(i<ei?" fait":"");d.innerHTML='<span class="n">'+(i+1)+'</span><div><h3>'+e[0]+'</h3><p>'+(i<=ei?e[1]:"")+'</p></div>';ze.appendChild(d);});}
|
||||
document.getElementById("etsuiv").onclick=function(){if(ei<ETAPES.length-1){ei++;dessineEtapes();}};
|
||||
document.getElementById("etprec").onclick=function(){if(ei>0){ei--;dessineEtapes();}};
|
||||
dessineEtapes();
|
||||
var OBS=[["Le dossier du poste","Interne","Non","Non"],["La clé USB","Externe","Oui, je l'ai emportée","Non"],["Mon dossier FMTTN","Externe","Oui","Oui, le réseau de l'école"]];
|
||||
var oi=0;
|
||||
function dessineObs(){
|
||||
var h="<tr><th>Où j'ai enregistré</th><th>Interne ou externe</th><th>Sur l'autre poste ?</th><th>Réseau ou internet ?</th></tr>";
|
||||
OBS.forEach(function(o,i){var v=i<oi;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:#172033'>"+o[0]+"</b></td>"+(v?"<td><b>"+o[1]+"</b></td><td><b>"+o[2]+"</b></td><td><b>"+o[3]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
|
||||
document.getElementById("tableObs").innerHTML=h;
|
||||
document.getElementById("noteObs").textContent=oi>=OBS.length?"Les trois fichiers existent toujours : ils sont tous dans un stockage. Ce qui change, c'est seulement l'endroit. Celui du poste n'est pas perdu, il est resté sur l'autre machine.":"";
|
||||
}
|
||||
document.getElementById("obsSuiv").onclick=function(){if(oi<OBS.length){oi++;dessineObs();}};
|
||||
document.getElementById("obsReset").onclick=function(){oi=0;dessineObs();};
|
||||
dessineObs();
|
||||
|
||||
/* ---------- 4. tri interactif ---------- */
|
||||
var FICH=[["A","video_anniversaire.mp4","450 Mo",450e6],["B","liste_courses.txt","2 Ko",2e3],["C","sauvegarde_telephone.zip","64 Go",64e9],
|
||||
["D","photo_classe.jpg","3,2 Mo",3.2e6],["E","affiche_spectacle.png","850 Ko",850e3],["F","film_vacances.mp4","2,4 Go",2.4e9],
|
||||
["G","devoir_francais.docx","45 Ko",45e3],["H","expose_sciences.pptx","18 Mo",18e6]];
|
||||
var ORDRE=FICH.slice().sort(function(a,b){return a[3]-b[3];});
|
||||
var pos=0,err=0;
|
||||
function dessineTri(){
|
||||
var z=document.getElementById("fichiers");z.innerHTML="";
|
||||
FICH.forEach(function(f){
|
||||
var pris=ORDRE.slice(0,pos).some(function(o){return o[0]===f[0];});
|
||||
var b=document.createElement("button");b.className="fic"+(pris?" pris":"");
|
||||
b.innerHTML="<b>"+f[0]+"</b> "+f[1]+"<small>"+f[2]+"</small>";
|
||||
b.onclick=function(){
|
||||
if(pris||pos>=ORDRE.length)return;
|
||||
if(f[0]===ORDRE[pos][0]){pos++;document.getElementById("triMsg").textContent=pos===ORDRE.length?"Bravo, le classement est complet.":"";dessineTri();}
|
||||
else{err++;b.classList.add("rate");document.getElementById("triMsg").textContent="Pas encore. Regarde d'abord l'unité, puis le nombre.";majTri();}
|
||||
};
|
||||
z.appendChild(b);
|
||||
});
|
||||
document.getElementById("rangee").innerHTML=ORDRE.slice(0,pos).map(function(o){return '<span class="pas">'+o[0]+' · '+o[2]+'</span>';}).join('<span style="color:#94a3b8;font-weight:900">→</span>');
|
||||
majTri();
|
||||
}
|
||||
function majTri(){document.getElementById("triInfo").textContent=pos+" sur 8 · "+err+" erreur"+(err>1?"s":"");}
|
||||
document.getElementById("triReset").onclick=function(){pos=0;err=0;document.getElementById("triMsg").textContent="";dessineTri();};
|
||||
dessineTri();
|
||||
|
||||
/* ---------- 5. correction et estimation ---------- */
|
||||
var ci=0;
|
||||
function dessineCor(){
|
||||
var h="<tr><th>Rang</th><th>Fichier</th><th>Taille</th></tr>";
|
||||
ORDRE.forEach(function(o,i){var v=i<ci;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:#172033'>"+(i+1)+"</b></td>"+(v?"<td><b>"+o[0]+"</b> · "+o[1]+"</td><td><b>"+o[2]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
|
||||
document.getElementById("tableCor").innerHTML=h;
|
||||
document.getElementById("noteCor").textContent=ci>=ORDRE.length?"Les deux pièges : 850 Ko est plus petit que 3,2 Mo, et 450 Mo est plus petit que 2,4 Go. Dans les deux cas, le plus grand nombre est le plus petit fichier. L'unité d'abord.":"";
|
||||
}
|
||||
document.getElementById("corSuiv").onclick=function(){if(ci<ORDRE.length){ci++;dessineCor();}};
|
||||
document.getElementById("corReset").onclick=function(){ci=0;dessineCor();};
|
||||
dessineCor();
|
||||
var es=0;
|
||||
document.getElementById("estSuiv").onclick=function(){if(es<3){es++;document.getElementById("est"+es).classList.add("on");}};
|
||||
document.getElementById("estReset").onclick=function(){es=0;[1,2,3].forEach(function(k){document.getElementById("est"+k).classList.remove("on");});};
|
||||
|
||||
/* ---------- 6. trace ---------- */
|
||||
var TRACE=[
|
||||
["L'ordinateur garde les informations à plusieurs endroits. La mémoire ",1," garde ce sur quoi je travaille en ce moment : elle est rapide, mais tout disparait quand on éteint. Le ",2," garde mes fichiers, même quand l'appareil est éteint."],
|
||||
[3,", c'est copier mon travail de la mémoire vive vers le stockage. Tant que je ne l'ai pas fait, mon travail peut disparaitre."],
|
||||
["La mémoire ",4," contient le programme qui démarre la machine. On ne la modifie pas, et ce n'est pas là que sont mes fichiers."],
|
||||
["Le stockage ",5," est à l'intérieur de l'appareil : mes fichiers y restent, mais seulement sur cette machine. Le stockage ",6," est en dehors : une clé USB que j'emporte, ou le cloud, accessible partout avec internet."],
|
||||
["Ko, Mo, Go, To : à chaque marche, on multiplie par environ ",7,". Pour comparer deux tailles, je regarde d'abord l'",8,"."]];
|
||||
var MOTS={1:"vive",2:"stockage",3:"Enregistrer",4:"morte",5:"interne",6:"externe",7:"mille",8:"unité"};
|
||||
var rv=0,zt=document.getElementById("trace");
|
||||
function dessineTrace(){
|
||||
zt.innerHTML="<h3>Cours 3. Où va ce que j'enregistre</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){
|
||||
if(typeof x==="number")return x<=rv?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd"> </span>';
|
||||
return x;}).join("")+"</p>";}).join("");
|
||||
document.getElementById("motCompte").textContent=rv+" mot"+(rv>1?"s":"")+" sur 8";
|
||||
}
|
||||
document.getElementById("motSuiv").onclick=function(){if(rv<8){rv++;dessineTrace();}};
|
||||
document.getElementById("motReset").onclick=function(){rv=0;dessineTrace();};
|
||||
dessineTrace();
|
||||
|
||||
/* ---------- lexique, genere par lexique/build.py ---------- */
|
||||
var LEXIQUE=[
|
||||
["Cloud","Un espace de stockage en ligne, sur des serveurs situés ailleurs, accessible par internet. OneDrive, Google Drive, iCloud. En français : stockage en ligne. C'est un stockage externe."],
|
||||
["Disque dur","Le composant qui conserve les fichiers, même quand l'ordinateur est éteint."],
|
||||
["Enregistrer","Copier ce qui se trouve dans la mémoire vive vers un stockage, pour le conserver. Tant qu'on n'a pas enregistré, le travail peut disparaitre."],
|
||||
["Fichier","Une donnée enregistrée qui porte un nom. Un texte, une photo, une chanson deviennent des fichiers quand on les enregistre."],
|
||||
["Gigaoctet (Go)","Environ mille mégaoctets. L'unité des vidéos, des films, et de la capacité des clés USB et des téléphones."],
|
||||
["Kilooctet (Ko)","Environ mille octets. L'unité des petits fichiers : un texte court, un document sans image."],
|
||||
["Mégaoctet (Mo)","Environ mille kilooctets. L'unité des photos et des chansons."],
|
||||
["Mémoire morte","Une petite mémoire gravée dans l'ordinateur, qu'on ne modifie pas. Elle contient le programme qui démarre la machine. Son contenu ne disparait pas quand on éteint. En anglais : ROM."],
|
||||
["Mémoire vive","Le composant qui garde ce sur quoi tu travailles en ce moment. Tout ce qu'elle contient disparait quand la machine s'éteint."],
|
||||
["Octet","La plus petite unité utilisée pour mesurer la taille d'un fichier. Une lettre tapée au clavier occupe environ un octet."],
|
||||
["RAM","Le nom anglais de la mémoire vive."],
|
||||
["ROM","Le nom anglais de la mémoire morte."],
|
||||
["Sauvegarde","Une copie de sécurité d'un fichier, rangée à un autre endroit que l'original. Si l'un est perdu, l'autre reste."],
|
||||
["Serveur","Un ordinateur qui reste allumé en permanence pour conserver des fichiers et les fournir à d'autres appareils. On en reparle au cours 4."],
|
||||
["SSD","Un stockage interne sans pièce qui tourne, plus rapide qu'un disque dur classique. On le trouve dans la plupart des ordinateurs récents."],
|
||||
["Stockage","L'endroit où les fichiers restent enregistrés, même quand l'appareil est éteint."],
|
||||
["Stockage externe","Un stockage qui se trouve en dehors de l'appareil. Soit un objet qu'on branche et qu'on emporte, comme une clé USB, soit un espace en ligne, comme le cloud."],
|
||||
["Stockage interne","Un stockage qui se trouve à l'intérieur de l'appareil, comme le disque dur ou le SSD. Les fichiers y restent, mais seulement sur cette machine."],
|
||||
["Téraoctet (To)","Environ mille gigaoctets. L'unité des gros disques durs de sauvegarde."]];
|
||||
var zl=document.getElementById("lexique");
|
||||
LEXIQUE.forEach(function(e){
|
||||
var d=document.createElement("div");d.className="item";
|
||||
d.innerHTML='<button aria-expanded="false"><span class="n">'+e[0].charAt(0)+'</span><span class="t">'+e[0]+'</span><span class="plus">définition</span></button><div class="corps">'+e[1]+'</div>';
|
||||
d.querySelector("button").onclick=function(){var o=d.classList.toggle("ouvert");this.setAttribute("aria-expanded",o?"true":"false");this.querySelector(".plus").textContent=o?"masquer":"définition";};
|
||||
zl.appendChild(d);
|
||||
});
|
||||
|
||||
dessineRail();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,819 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Bloc 3 – pilotage</title>
|
||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
||||
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
|
||||
button,input,select{font:inherit}
|
||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
||||
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
|
||||
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
|
||||
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
|
||||
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
|
||||
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
|
||||
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
|
||||
.hero a.up:hover{color:#fff}
|
||||
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
||||
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
|
||||
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hero-chip b{font-size:14px}
|
||||
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
|
||||
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
|
||||
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
|
||||
|
||||
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
|
||||
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
|
||||
.stat strong{display:block;font-size:22px;margin-top:3px}
|
||||
.stat small{color:#64748b;font-weight:800}
|
||||
.stat.ok strong{color:var(--green)}
|
||||
|
||||
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
|
||||
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
|
||||
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
|
||||
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
|
||||
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
|
||||
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
|
||||
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
|
||||
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
|
||||
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
|
||||
|
||||
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
|
||||
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
|
||||
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
|
||||
.tab:hover{border-color:#93c5fd}
|
||||
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
|
||||
.tab.active span{color:#c7dcff}
|
||||
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
|
||||
|
||||
.panel{display:none}.panel.active{display:block}
|
||||
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
|
||||
.card h2,.card h3{margin-top:0}
|
||||
.card h2{font-size:26px;letter-spacing:-.5px}
|
||||
.muted{color:var(--muted);line-height:1.6}
|
||||
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
||||
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
|
||||
.btn:hover{filter:brightness(.97)}
|
||||
.btn.primary{background:#2563eb;color:#fff}
|
||||
.btn.soft{background:#f1f5f9;color:#334155}
|
||||
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
|
||||
.feedback{min-height:31px;margin-top:12px;font-weight:850}
|
||||
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
|
||||
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
|
||||
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
|
||||
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
|
||||
.info b{color:var(--ink)}
|
||||
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
|
||||
.info.alerte b{color:#991b1b}
|
||||
|
||||
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
|
||||
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
|
||||
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
|
||||
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
|
||||
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
|
||||
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
|
||||
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
|
||||
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
|
||||
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
|
||||
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
|
||||
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
|
||||
.colonne li button:hover{color:var(--red)}
|
||||
|
||||
.accordeon{display:grid;gap:10px}
|
||||
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
|
||||
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
|
||||
.item>button:hover{background:#f8fbff}
|
||||
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
|
||||
.item .t{font-weight:850;font-size:17px;flex:1}
|
||||
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
|
||||
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
|
||||
.item.ouvert .corps{display:block}
|
||||
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.item.ouvert .n{background:#2563eb;color:#fff}
|
||||
|
||||
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
|
||||
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
|
||||
.qtag.cle{background:#fef3c7;color:#92400e}
|
||||
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
|
||||
.answer-grid{display:grid;gap:8px}
|
||||
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
|
||||
.answer.ok{border-color:#22c55e;background:#f0fdf4}
|
||||
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
|
||||
.reveal.on{display:block}
|
||||
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
|
||||
|
||||
.steps{display:grid;gap:11px}
|
||||
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
|
||||
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.step.fait{opacity:1}
|
||||
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
|
||||
.step.on .n{background:#2563eb;color:#fff}
|
||||
.step.fait .n{background:#dcfce7;color:#15803d}
|
||||
.step h3{margin:0 0 4px;font-size:17px}
|
||||
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
|
||||
|
||||
figure{margin:0 0 18px}
|
||||
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
||||
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
|
||||
|
||||
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
|
||||
.trace h3{margin:0 0 14px;font-size:22px}
|
||||
.trace p{margin:0 0 .5em}
|
||||
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
|
||||
|
||||
.check{display:grid;gap:9px}
|
||||
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
|
||||
.check label:hover{border-color:#93c5fd}
|
||||
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
|
||||
.check input:checked+span{color:var(--green);font-weight:900}
|
||||
|
||||
table.grille{width:100%;border-collapse:collapse;font-size:15px}
|
||||
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
|
||||
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
|
||||
table.grille td.masque{color:transparent;background:#f8fafc}
|
||||
table.grille tr.on td{background:#f0fdf4}
|
||||
table.grille td b{color:#15803d}
|
||||
|
||||
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
|
||||
.module{margin-bottom:30px}
|
||||
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
|
||||
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
|
||||
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
|
||||
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
|
||||
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
|
||||
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
|
||||
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
|
||||
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
|
||||
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
|
||||
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
|
||||
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
||||
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
|
||||
.et.eval{background:#fee2e2;color:#991b1b}
|
||||
.et.fac{background:#f3e8ff;color:#6b21a8}
|
||||
.et.pret{background:#dcfce7;color:#15803d}
|
||||
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
|
||||
a.bloc .n{background:#2563eb;color:#fff}
|
||||
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
|
||||
.bloc.vide h3{font-weight:800}
|
||||
.masque{display:none!important}
|
||||
|
||||
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
|
||||
|
||||
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
|
||||
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
|
||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
||||
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
|
||||
|
||||
.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
|
||||
.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
|
||||
.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
|
||||
.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
|
||||
.q.bon{border-color:#22c55e;background:#f2fdf6}
|
||||
.q.faux{border-color:#f59e0b;background:#fffbeb}
|
||||
.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
|
||||
.q .opts{display:flex;gap:8px;flex-wrap:wrap}
|
||||
.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
|
||||
.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
|
||||
.q .opts button:disabled{cursor:default;opacity:.55}
|
||||
.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
|
||||
.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
|
||||
.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
|
||||
.q.done .expl{display:block}
|
||||
.figpetit{max-width:560px;margin:0 auto 14px}
|
||||
#bilan{display:none}
|
||||
#bilan.on{display:block}
|
||||
.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
|
||||
textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}
|
||||
.fichiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:14px 0}
|
||||
.fic{border:2px solid #dbe3ef;background:#fff;border-radius:14px;padding:12px 14px;text-align:left;cursor:pointer;font-weight:800;font-size:14.5px;overflow-wrap:anywhere;min-width:0}
|
||||
.fic small{display:block;font-weight:700;color:#64748b;margin-top:3px;font-size:13px}
|
||||
.fic b{display:block;font-size:20px;color:#172554;margin-bottom:2px}
|
||||
.fic:hover{border-color:#2563eb}
|
||||
.fic.pris{opacity:.25;cursor:default}
|
||||
.fic.rate{border-color:#f59e0b;background:#fffbeb}
|
||||
.rangee{display:flex;gap:6px;flex-wrap:wrap;min-height:54px;border:2px dashed #cbd5e1;border-radius:14px;padding:8px;align-items:center}
|
||||
.rangee .pas{background:#dcfce7;color:#15803d;border-radius:10px;padding:7px 10px;font-weight:900;font-size:14px}
|
||||
.etape3{display:none}.etape3.on{display:block}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<section class="hero">
|
||||
<div>
|
||||
<a class="up" href="pilotage.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
|
||||
<div class="eyebrow">Document enseignant · Module 1 · Semaine 3 · Bloc 3 sur 35</div>
|
||||
<h1>Où va ce que j'enregistre</h1>
|
||||
<p style="margin-bottom:10px"><a href="1TC-NUM_bloc-03_ou-va-ce-que-j-enregistre.html" style="color:#fff;font-weight:800">Ouvrir la version à projeter aux élèves</a></p><p>Termine S21 : mémoire vive et morte, stockage interne et externe. Les tailles Ko à To sont un complément facultatif, non évaluable : c'est lui qu'on coupe en premier.</p>
|
||||
<div class="badges">
|
||||
<span class="badge">S21 · mémoire vive et morte</span>
|
||||
<span class="badge">S21 · stockage interne et externe</span>
|
||||
<span class="badge">Ko à To · facultatif, non cotable</span>
|
||||
<span class="badge warn">Ne pas projeter</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><b>La coupure</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7v10M11 7v10M15 7v10"/></svg><b>Les mémoires</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="8" y="3" width="8" height="12" rx="2"/><path d="M10 15v4h4v-4M12 7v3"/></svg><b>Trois endroits</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><b>Les tailles</b></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="dashboard">
|
||||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
||||
<div class="stat"><small>Temps depuis le début</small><strong id="sTemps">00:00</strong></div>
|
||||
<div class="stat"><small>Il reste pour cette activité</small><strong id="sReste">–</strong></div>
|
||||
<div class="stat"><small>Exercices répondus</small><strong id="sEx">0 sur 25</strong></div>
|
||||
</section>
|
||||
|
||||
<div class="card" style="padding:16px 18px">
|
||||
<div class="row">
|
||||
<button class="btn primary" id="btnGo">Démarrer</button>
|
||||
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
||||
<span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navtabs n6" id="rail"></nav>
|
||||
|
||||
<!-- 1 -->
|
||||
<section class="panel active" id="p0"><div class="card">
|
||||
<div class="entete"><div><h2>La démonstration</h2><p class="muted">Regarde bien. Ensuite, livret page 1.</p></div><span class="score">10 min</span></div>
|
||||
|
||||
<div class="consigne"><small>Ce qui va se passer</small>
|
||||
Le professeur tape un texte, puis il coupe brutalement l'ordinateur, sans enregistrer. Il le rallume.</div>
|
||||
|
||||
<div class="consigne"><small>Ensuite, dans ton livret, seul</small>
|
||||
Qu'est-ce qui s'est passé ? Pourquoi, à ton avis ? Écris ton hypothèse, même si tu n'es pas sûr.</div>
|
||||
|
||||
<h3>Les hypothèses de la classe</h3>
|
||||
<div class="saisie">
|
||||
<input id="entree" placeholder="Une hypothèse proposée par la classe" autocomplete="off">
|
||||
<button class="btn primary" id="ajouter">Ajouter</button>
|
||||
</div>
|
||||
<div class="colonnes" id="colonnes" style="grid-template-columns:1fr"></div>
|
||||
<p class="muted">On ne corrige rien pour l'instant.</p>
|
||||
<div class="info alerte"><b>Tester la démonstration la veille.</b> Le Bloc-notes de Windows 11 restaure par défaut le texte non enregistré de la session précédente : désactive ce réglage dans ses paramètres. Word a la récupération automatique, Google Docs et Word en ligne enregistrent en continu : démonstration impossible avec eux. Sur un portable, débrancher ne coupe rien : arrêt forcé, bouton maintenu dix secondes.</div>
|
||||
<div class="info"><b>Sur un poste élève projeté, jamais sur le PC du TBI.</b> Un arrêt forcé pendant le cours ne se tente pas sur la machine dont dépend toute la séance.</div>
|
||||
<div class="info"><b>Si la démonstration échoue malgré tout.</b> C'est une occasion : le texte revient parce que le logiciel l'avait recopié dans le stockage sans le dire, justement parce que la mémoire vive est fragile. Le point 5 de la première page théorique du livret est écrit pour ce cas.</div>
|
||||
<div class="info"><b>Le moment du bloc.</b> Tape le texte à voix haute en demandant aux élèves quoi écrire, pour qu'ils y tiennent. Quand l'écran revient vide, laisse durer le silence quelques secondes. Si tu dois distribuer les postes, fais la démonstration machines éteintes, puis distribue pendant que les élèves écrivent leur hypothèse.</div>
|
||||
</div></section>
|
||||
|
||||
<!-- 2 -->
|
||||
<section class="panel" id="p1">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Je comprends. Les deux mémoires et le stockage</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">20 min</span></div>
|
||||
<div class="info alerte"><b>Correction de notre propre séquence.</b> La séquence associait la mémoire morte au placard. C'est une confusion : le placard est le stockage. La mémoire morte ne contient que le micrologiciel de démarrage, BIOS ou UEFI. L'attendu sépare d'ailleurs deux couples distincts, vive contre morte et interne contre externe. D'où la troisième image : la notice d'ouverture.</div>
|
||||
<div class="info alerte"><b>Le recueil FWB se trompe page 13.</b> Il place le système d'exploitation en mémoire morte. Faux : Windows est dans le stockage interne, la ROM se contente d'aller l'y chercher. Sa propre infographie page 14 est correcte. Ne distribue pas la page 13 telle quelle.</div>
|
||||
<div class="info"><b>Ce qui se dit ensemble.</b> Ce qui s'est passé, la cuisine, la mémoire vive, et « enregistrer ». Le reste se lit seul. Fais reformuler ce qui est arrivé au texte avec les mots de la cuisine : c'est la vérification qui compte. Puis reviens aux hypothèses du tableau et dis à l'élève qui a écrit « ça n'a pas eu le temps de se sauvegarder » qu'il avait raison.</div>
|
||||
|
||||
<h3>Ce qui s'est passé</h3>
|
||||
<p>Le texte existait bien, tu l'as vu à l'écran. Mais il se trouvait dans une mémoire qui <b>se vide dès que le courant s'arrête</b>. Un ordinateur possède plusieurs endroits pour garder des informations, et ils n'ont pas le même travail.</p>
|
||||
|
||||
<h3>Retour dans la cuisine</h3>
|
||||
<p>Au cours 2, le four était le matériel, la recette le logiciel, les ingrédients les données. On continue avec la même cuisine.</p>
|
||||
<p><b>Le plan de travail</b> : on y pose ce qu'on prépare, tout est à portée de main. Mais à la fin du service, on nettoie : ce qui y est resté part à la poubelle.</p>
|
||||
<p><b>Les placards</b> : on y range pour garder. Ce qui y est y sera encore demain.</p>
|
||||
<p><b>La notice d'ouverture</b>, collée derrière la porte : elle dit comment tout allumer le matin. Personne ne la modifie.</p>
|
||||
<p><b>Le cuisinier</b>, c'est le processeur. Il travaille sur le plan de travail.</p>
|
||||
|
||||
<figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 380">
|
||||
|
||||
<defs>
|
||||
<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#172554"/></marker>
|
||||
<marker id="v" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker>
|
||||
</defs>
|
||||
<g font-family="Arial, Helvetica, sans-serif">
|
||||
<rect x="20" y="20" width="760" height="340" rx="18" fill="#f8fafc" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="6 6"/>
|
||||
<text x="40" y="50" font-size="15" font-weight="bold" fill="#64748b">DANS L'ORDINATEUR</text>
|
||||
<rect x="40" y="80" width="200" height="110" rx="14" fill="#fef3c7" stroke="#b45309" stroke-width="3"/>
|
||||
<text x="140" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#92400e">Mémoire vive</text>
|
||||
<text x="140" y="142" text-anchor="middle" font-size="14" fill="#92400e">le plan de travail</text>
|
||||
<text x="140" y="170" text-anchor="middle" font-size="13" fill="#b45309">s'efface à l'extinction</text>
|
||||
<rect x="300" y="80" width="180" height="110" rx="14" fill="#e0e7ff" stroke="#3730a3" stroke-width="3"/>
|
||||
<text x="390" y="125" text-anchor="middle" font-size="19" font-weight="bold" fill="#3730a3">Processeur</text>
|
||||
<text x="390" y="150" text-anchor="middle" font-size="14" fill="#3730a3">le cuisinier</text>
|
||||
<path d="M240 125 H292" stroke="#172554" stroke-width="3" marker-end="url(#a)"/>
|
||||
<path d="M300 150 H248" stroke="#172554" stroke-width="3" marker-end="url(#a)"/>
|
||||
<rect x="540" y="80" width="220" height="110" rx="14" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
||||
<text x="650" y="118" text-anchor="middle" font-size="19" font-weight="bold" fill="#166534">Stockage</text>
|
||||
<text x="650" y="142" text-anchor="middle" font-size="14" fill="#166534">les placards</text>
|
||||
<text x="650" y="170" text-anchor="middle" font-size="13" fill="#15803d">reste quand on éteint</text>
|
||||
<path d="M140 195 C140 260, 600 260, 640 198" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#v)"/>
|
||||
<rect x="318" y="228" width="160" height="34" rx="17" fill="#16a34a"/>
|
||||
<text x="398" y="251" text-anchor="middle" font-size="16" font-weight="bold" fill="#ffffff">ENREGISTRER</text>
|
||||
<rect x="40" y="285" width="200" height="60" rx="12" fill="#f1f5f9" stroke="#475569" stroke-width="2.5"/>
|
||||
<text x="140" y="311" text-anchor="middle" font-size="17" font-weight="bold" fill="#334155">Mémoire morte</text>
|
||||
<text x="140" y="332" text-anchor="middle" font-size="13" fill="#475569">la notice d'ouverture, gravée</text>
|
||||
<text x="262" y="321" font-size="14" fill="#475569">sert uniquement au démarrage de la machine</text>
|
||||
</g></svg>
|
||||
</figure>
|
||||
|
||||
<h3>La mémoire vive, en anglais RAM : le plan de travail</h3>
|
||||
<p>Elle garde <b>ce sur quoi tu travailles en ce moment</b>. Elle est très rapide. Mais elle est <b>temporaire</b> : quand on éteint, <b>tout ce qu'elle contient disparait</b>. C'est ce qui est arrivé au texte. Elle est aussi limitée : trop de logiciels ouverts, et l'ordinateur ralentit.</p>
|
||||
|
||||
<h3>Le stockage : les placards</h3>
|
||||
<p>C'est là que les fichiers <b>restent</b>, même éteint : le <b>disque dur</b> ou le <b>SSD</b>. Tes documents y sont, et aussi tous les logiciels installés, Windows compris.</p>
|
||||
|
||||
<div class="consigne"><small>Enregistrer, c'est ranger dans le placard</small>
|
||||
Cliquer sur « Enregistrer », c'est <b>copier</b> ton travail de la mémoire vive vers le stockage. Tant que tu ne l'as pas fait, il n'existe que sur le plan de travail.<br><br>
|
||||
Certains logiciels enregistrent tout seuls, justement parce que la mémoire vive est fragile. Mais pas tous, et pas toujours. <b>La seule habitude sûre : enregistrer toi-même, souvent.</b></div>
|
||||
|
||||
<h3>La mémoire morte, en anglais ROM : la notice d'ouverture</h3>
|
||||
<p>Une petite mémoire gravée qui contient <b>le programme qui démarre la machine</b>. Elle se réveille en premier, puis va chercher Windows dans le stockage. Son contenu ne disparait pas, et on ne la modifie pas. <b>Ce n'est pas là que sont tes fichiers.</b></p>
|
||||
|
||||
<h3>Attention au mot « mémoire » dans les publicités</h3>
|
||||
<p>« Smartphone avec 128 Go de mémoire » : ces 128 Go sont le <b>stockage</b>. La mémoire vive du même téléphone fait plutôt 6 ou 8 Go.</p>
|
||||
|
||||
<table class="grille">
|
||||
<tr><th></th><th>Mémoire vive</th><th>Stockage</th><th>Mémoire morte</th></tr>
|
||||
<tr><td><b>Dans la cuisine</b></td><td>Le plan de travail</td><td>Les placards</td><td>La notice d'ouverture</td></tr>
|
||||
<tr><td><b>Ce qu'elle garde</b></td><td>Ce sur quoi je travaille</td><td>Mes fichiers, les logiciels</td><td>Le programme de démarrage</td></tr>
|
||||
<tr><td><b>Quand on éteint</b></td><td>Tout disparait</td><td>Tout reste</td><td>Tout reste</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Je m'entraine tout de suite</h3>
|
||||
<p class="muted" style="margin-top:0">Mémoire vive, stockage ou mémoire morte ? On répond ensemble.</p>
|
||||
<div id="ex0"></div>
|
||||
<div class="info"><b>Windows, la plus fine des quatre.</b> Installé dans le stockage, chargé en mémoire vive quand il tourne. La réponse attendue est « stockage », mais accepte « mémoire vive » justifiée par « il tourne en ce moment ». Nuance non exigée par l'attendu.</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3 -->
|
||||
<section class="panel" id="p2">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Je comprends. Stockage interne et externe</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
|
||||
|
||||
<p>Tous les stockages gardent les fichiers quand on éteint. Ce qui les différencie, c'est <b>où ils se trouvent</b>.</p>
|
||||
<figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 330">
|
||||
|
||||
<g font-family="Arial, Helvetica, sans-serif">
|
||||
<rect x="30" y="40" width="250" height="250" rx="18" fill="#eff6ff" stroke="#172554" stroke-width="3"/>
|
||||
<text x="155" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="#172554">L'ORDINATEUR</text>
|
||||
<rect x="80" y="130" width="150" height="80" rx="10" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
||||
<text x="155" y="165" text-anchor="middle" font-size="16" font-weight="bold" fill="#166534">Disque dur</text>
|
||||
<text x="155" y="187" text-anchor="middle" font-size="14" fill="#166534">ou SSD</text>
|
||||
<text x="155" y="250" text-anchor="middle" font-size="16" font-weight="bold" fill="#15803d">STOCKAGE INTERNE</text>
|
||||
<text x="155" y="272" text-anchor="middle" font-size="13" fill="#475569">dedans, reste sur cette machine</text>
|
||||
<line x1="310" y1="30" x2="310" y2="300" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="6 6"/>
|
||||
<text x="555" y="30" text-anchor="middle" font-size="15" font-weight="bold" fill="#7c2d12">STOCKAGE EXTERNE : en dehors de l'appareil</text>
|
||||
<rect x="340" y="60" width="200" height="150" rx="16" fill="#fff7ed" stroke="#c2410c" stroke-width="3"/>
|
||||
<rect x="400" y="95" width="80" height="34" rx="6" fill="#fed7aa" stroke="#c2410c" stroke-width="2.5"/>
|
||||
<rect x="480" y="104" width="22" height="16" rx="2" fill="#94a3b8"/>
|
||||
<text x="440" y="160" text-anchor="middle" font-size="15" font-weight="bold" fill="#9a3412">Clé USB</text>
|
||||
<text x="440" y="182" text-anchor="middle" font-size="13" fill="#9a3412">disque externe, carte SD</text>
|
||||
<text x="440" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#c2410c">je l'emporte</text>
|
||||
<text x="440" y="260" text-anchor="middle" font-size="13" fill="#475569">pas besoin d'internet</text>
|
||||
<rect x="570" y="60" width="200" height="150" rx="16" fill="#f5f3ff" stroke="#6d28d9" stroke-width="3"/>
|
||||
<path d="M620 130 a22 22 0 0 1 20 -30 a30 30 0 0 1 56 8 a20 20 0 0 1 4 40 h-72 a18 18 0 0 1 -8 -18z" fill="#ddd6fe" stroke="#6d28d9" stroke-width="2.5"/>
|
||||
<text x="670" y="175" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">En ligne (cloud)</text>
|
||||
<text x="670" y="195" text-anchor="middle" font-size="13" fill="#5b21b6">sur un serveur, ailleurs</text>
|
||||
<text x="670" y="240" text-anchor="middle" font-size="14" font-weight="bold" fill="#6d28d9">accessible partout</text>
|
||||
<text x="670" y="260" text-anchor="middle" font-size="13" fill="#475569">avec internet</text>
|
||||
</g></svg>
|
||||
</figure>
|
||||
|
||||
<h3>Le stockage interne</h3>
|
||||
<p><b>À l'intérieur de l'appareil</b> : le disque dur ou le SSD. Rapide, toujours là, pas besoin d'internet. Mais <b>tes fichiers restent sur cette machine-là</b>. Sur un autre ordinateur, ils ne te suivent pas.</p>
|
||||
|
||||
<h3>Le stockage externe, deux familles</h3>
|
||||
<p><b>Celui qu'on emporte</b> : clé USB, disque dur externe, carte mémoire. On emmène ses fichiers partout, sans internet. Mais on peut le perdre ou l'oublier.</p>
|
||||
<p><b>Le stockage en ligne, ou cloud</b> : un espace sur un <b>serveur</b>, un ordinateur allumé en permanence, quelque part. OneDrive, Google Drive, iCloud. On retrouve ses fichiers partout, on peut les partager. Mais il faut internet. Et le cloud n'est pas un nuage : ce sont des disques durs dans un bâtiment, souvent très loin.</p>
|
||||
|
||||
<div class="consigne"><small>Le lien avec le cours 1</small>
|
||||
« Le compte me suit d'un poste à l'autre, la machine ne me suit pas. »<br><br>
|
||||
Ton dossier FMTTN n'est pas dans l'ordinateur devant toi. Il est sur un <b>serveur</b> de l'école. C'est un <b>stockage externe</b>, et c'est pour ça que tu le retrouves sur n'importe quel poste.</div>
|
||||
|
||||
<table class="grille">
|
||||
<tr><th>Je me demande</th><th>Interne</th><th>Clé USB</th><th>En ligne</th></tr>
|
||||
<tr><td>Retrouver mon fichier sur un autre appareil ?</td><td>Non</td><td>Si je l'ai sur moi</td><td>Oui</td></tr>
|
||||
<tr><td>Aurai-je internet là où je vais ?</td><td>Pas besoin</td><td>Pas besoin</td><td>Obligatoire</td></tr>
|
||||
<tr><td>Travailler à plusieurs ?</td><td>Non</td><td>Difficile</td><td>Oui</td></tr>
|
||||
</table>
|
||||
<p style="margin-top:14px"><b>Une vraie sauvegarde, c'est deux endroits</b> : une copie de sécurité rangée ailleurs que l'original.</p>
|
||||
<div class="info"><b>Insiste sur le lien avec le cours 1.</b> C'est lui qui donne son sens à la phrase « le compte me suit, la machine ne me suit pas ». Et c'est l'annonce du mot serveur, qu'on ne développe pas : il appartient au bloc 4.</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Un fichier, trois endroits</h3>
|
||||
<p class="muted" style="margin-top:0">Avec ton binôme. Une étape à la fois.</p>
|
||||
<div class="steps" id="etapes"></div>
|
||||
<div class="row" style="margin-top:14px">
|
||||
<button class="btn soft" id="etprec">Étape précédente</button>
|
||||
<button class="btn primary" id="etsuiv">Étape suivante</button>
|
||||
</div>
|
||||
|
||||
<h3 style="margin-top:24px">Ce qu'on a constaté</h3>
|
||||
<div class="row" style="margin-bottom:12px">
|
||||
<button class="btn primary" id="obsSuiv">Révéler la ligne suivante</button>
|
||||
<button class="btn soft" id="obsReset">Tout masquer</button>
|
||||
</div>
|
||||
<table class="grille" id="tableObs"></table>
|
||||
<p class="muted" id="noteObs" style="margin-top:14px"></p>
|
||||
<div class="info alerte"><b>Vérifie avec l'informaticien où est vraiment « le dossier du poste ».</b> Dans beaucoup d'écoles, le Bureau et les Documents sont redirigés vers le serveur. Si c'est le cas chez toi, un fichier du Bureau suit l'élève, et l'activité produit la conclusion inverse. Utilise un dossier garanti local, par exemple C:\\Temp ou un lecteur D:. Et dans ce cas, la trace écrite du bloc 1 est fausse dans ton école : il faudra la rectifier en une phrase.</div>
|
||||
<div class="info"><b>Ports USB et clés.</b> Vérifie qu'une clé est reconnue sur un poste élève, avec un compte élève : beaucoup d'écoles bloquent le stockage USB. Une clé par binôme. Sinon, l'étape 3 se fait en démonstration.</div>
|
||||
<div class="info"><b>Le constat que les élèves oublient.</b> Tous regardent le fichier qui ne suit pas. Personne ne remarque qu'aucun n'a disparu. Les trois sont dans un stockage, seul l'endroit change. L'étape 5, avec les reconnexions, prend trois à quatre minutes : c'est prévu.</div>
|
||||
<div class="info"><b>Indicateur central du bloc.</b> L'élève justifie le choix d'un stockage par la situation, et non par l'habitude. À relever à l'oral pendant cette phase.</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4 -->
|
||||
<section class="panel" id="p3">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Je comprends. La taille des fichiers</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">25 min</span></div>
|
||||
|
||||
<p>Un stockage n'est pas infini, comme un placard a un nombre d'étagères. La taille d'un fichier se mesure en <b>octets</b>. Une lettre tapée au clavier occupe environ un octet.</p>
|
||||
<p>Pour éviter les nombres immenses, on utilise des préfixes, comme pour les mètres : <b>kilo</b> veut dire mille, comme dans kilomètre.</p>
|
||||
<figure><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 800 250">
|
||||
|
||||
<g font-family="Arial, Helvetica, sans-serif" text-anchor="middle">
|
||||
<g font-size="22" font-weight="bold">
|
||||
<rect x="20" y="60" width="120" height="70" rx="12" fill="#f1f5f9" stroke="#475569" stroke-width="2.5"/><text x="80" y="104" fill="#334155">octet</text>
|
||||
<rect x="180" y="60" width="120" height="70" rx="12" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5"/><text x="240" y="104" fill="#1d4ed8">Ko</text>
|
||||
<rect x="340" y="60" width="120" height="70" rx="12" fill="#dcfce7" stroke="#15803d" stroke-width="2.5"/><text x="400" y="104" fill="#15803d">Mo</text>
|
||||
<rect x="500" y="60" width="120" height="70" rx="12" fill="#fef3c7" stroke="#b45309" stroke-width="2.5"/><text x="560" y="104" fill="#b45309">Go</text>
|
||||
<rect x="660" y="60" width="120" height="70" rx="12" fill="#fee2e2" stroke="#b91c1c" stroke-width="2.5"/><text x="720" y="104" fill="#b91c1c">To</text>
|
||||
</g>
|
||||
<g font-size="15" font-weight="bold" fill="#172554">
|
||||
<text x="160" y="45">× 1000</text><text x="320" y="45">× 1000</text><text x="480" y="45">× 1000</text><text x="640" y="45">× 1000</text>
|
||||
</g>
|
||||
<g stroke="#172554" stroke-width="2.5" fill="none">
|
||||
<path d="M142 95 H176"/><path d="M302 95 H336"/><path d="M462 95 H496"/><path d="M622 95 H656"/>
|
||||
</g>
|
||||
<g font-size="13" fill="#475569">
|
||||
<text x="80" y="160">une lettre</text>
|
||||
<text x="240" y="160">un texte court</text>
|
||||
<text x="400" y="160">une photo,</text><text x="400" y="178">une chanson</text>
|
||||
<text x="560" y="160">un film,</text><text x="560" y="178">une clé USB</text>
|
||||
<text x="720" y="160">un gros disque</text><text x="720" y="178">de sauvegarde</text>
|
||||
</g>
|
||||
<text x="400" y="225" font-size="15" font-weight="bold" fill="#172554">Plus petit ←————————————————————→ Plus grand</text>
|
||||
</g></svg>
|
||||
</figure>
|
||||
|
||||
<div class="consigne"><small>Le piège des nombres</small>
|
||||
Pour comparer deux tailles, <b>regarde d'abord l'unité, ensuite seulement le nombre</b>.<br><br>
|
||||
850 Ko, c'est plus petit que 2 Mo, même si 850 est un plus grand nombre : 2 Mo, c'est environ 2000 Ko.</div>
|
||||
|
||||
<p><b>Pourquoi une vidéo est si lourde ?</b> Un texte, ce sont des lettres. Une photo, des millions de points de couleur. Une vidéo, des dizaines de photos par seconde, plus le son.</p>
|
||||
<p><b>Où lire la taille ?</b> Dans l'explorateur de fichiers, affichage « Détails », colonne « Taille ».</p>
|
||||
<div class="info"><b>Complément facultatif, non évaluable.</b> Encadré dans la brochure. S'il faut couper, c'est ici : classement sur papier seulement, exercices à la maison. On récupère dix minutes sans toucher aux attendus obligatoires.</div>
|
||||
<div class="info"><b>Ne parle pas de 1024.</b> L'attendu dit « environ mille ». Windows compte en base 1024 tout en écrivant Ko, d'où la clé de 16 Go affichée 14,9 Go. Si un élève le remarque : l'ordinateur compte un peu différemment du fabricant, et une partie de la place sert à organiser la clé.</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Du plus petit au plus grand</h3>
|
||||
<p class="muted" style="margin-top:0">Clique sur les fichiers dans l'ordre, du plus petit au plus grand.</p>
|
||||
<div class="fichiers" id="fichiers"></div>
|
||||
<div class="rangee" id="rangee"></div>
|
||||
<div class="row" style="margin-top:12px"><button class="btn soft" id="triReset">Recommencer</button><span class="score" id="triInfo">0 sur 8 · 0 erreur</span></div>
|
||||
<p class="feedback" id="triMsg"></p>
|
||||
<div class="info"><b>Différenciation.</b> La version B du livret guide en trois étapes : ordonner les unités, répartir par unité, classer dans chaque unité. Elle ne demande jamais de conversion chiffrée. Un élève qui réussit la version B a l'attendu facultatif.</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 25 questions. La correction s'affiche tout de suite avec l'explication.</p></div></div>
|
||||
<div class="consigne"><small>Avant de commencer</small>
|
||||
Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br>À la fin, recopie tes deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
|
||||
|
||||
<div class="progres">
|
||||
<input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid #cbd5e1;border-radius:11px;min-width:220px;flex:1">
|
||||
<div class="barre"><i id="jauge"></i></div>
|
||||
<span class="score" id="avancement">0 / 25</span>
|
||||
</div>
|
||||
|
||||
<h3>Exercice 1. Mémoire vive, stockage ou mémoire morte ?</h3>
|
||||
<div id="ex1"></div>
|
||||
<h3 style="margin-top:26px">Exercice 2. Interne ou externe ?</h3>
|
||||
<div id="ex2"></div>
|
||||
<h3 style="margin-top:26px">Exercice 3. Le bon stockage</h3>
|
||||
<p class="muted" style="margin-top:0">Pour chaque situation, le stockage le plus adapté.</p>
|
||||
<div id="ex3"></div>
|
||||
<h3 style="margin-top:26px">Exercice 4. Les tailles</h3>
|
||||
<p class="muted" style="margin-top:0">L'unité d'abord, le nombre ensuite.</p>
|
||||
<div id="ex4"></div>
|
||||
|
||||
<div class="row" style="margin-top:22px"><button class="btn primary" id="voir">Voir mon résultat</button><button class="btn soft" id="reset">Tout recommencer</button></div>
|
||||
<div id="bilan" style="margin-top:20px">
|
||||
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
||||
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 25</span></div>
|
||||
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
||||
</div>
|
||||
<div id="gDetail" style="margin-bottom:16px"></div>
|
||||
<p class="muted"><b>Recopie ces deux lignes dans ton livret.</b></p>
|
||||
<textarea id="recap" readonly></textarea>
|
||||
<div class="row" style="margin-top:10px"><button class="btn" id="copier">Copier</button><span class="muted" id="copie"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5 -->
|
||||
<section class="panel" id="p4">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>La correction du classement</h2><p class="muted">On corrige ensemble.</p></div><span class="score">15 min</span></div>
|
||||
<div class="row" style="margin-bottom:12px">
|
||||
<button class="btn primary" id="corSuiv">Révéler le fichier suivant</button>
|
||||
<button class="btn soft" id="corReset">Tout masquer</button>
|
||||
</div>
|
||||
<table class="grille" id="tableCor"></table>
|
||||
<p class="muted" id="noteCor" style="margin-top:14px"></p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Combien de photos dans une clé de 16 Go ?</h3>
|
||||
<p class="muted" style="margin-top:0">Une photo de téléphone fait environ 4 Mo. On raisonne ensemble, étape par étape.</p>
|
||||
<div class="row" style="margin-bottom:12px"><button class="btn primary" id="estSuiv">Étape suivante</button><button class="btn soft" id="estReset">Recommencer</button></div>
|
||||
<div class="consigne etape3" id="est1"><small>Étape 1</small>16 Go, c'est environ <b>16 000 Mo</b>. À chaque marche, on multiplie par environ mille.</div>
|
||||
<div class="consigne etape3" id="est2"><small>Étape 2</small>16 000 Mo, divisé par 4 Mo par photo : environ <b>4 000 photos</b>.</div>
|
||||
<div class="consigne etape3" id="est3"><small>Étape 3</small>Et avec des vidéos de 450 Mo ? 16 000 divisé par 450 : environ <b>35 vidéos</b>. Des milliers de photos, quelques dizaines de vidéos.</div>
|
||||
<div class="info"><b>Ne pas exiger le calcul.</b> L'attendu facultatif demande d'ordonner, pas de convertir. Le calcul se fait au tableau avec les élèves à l'aise. Les autres retiennent l'ordre de grandeur. S'il faut gagner du temps, une seule étape suffit.</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6 -->
|
||||
<section class="panel" id="p5">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Dans ton livret. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
|
||||
<div class="row" style="margin-bottom:16px">
|
||||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
||||
<button class="btn soft" id="motReset">Tout masquer</button>
|
||||
<span class="score" id="motCompte">0 mot sur 8</span>
|
||||
</div>
|
||||
<div class="trace" id="trace"></div>
|
||||
<div class="info"><b>Les huit mots, dans l'ordre.</b> vive, stockage, enregistrer, morte, interne, externe, mille, unité. Un élève qui hésite entre « vive » et « morte » au premier blanc n'a pas retenu la démonstration.</div>
|
||||
<div class="info alerte"><b>Fermeture.</b> Clés USB récupérées et comptées à voix haute avant la sortie. Sessions fermées et vérifiées poste par poste.</div>
|
||||
<div class="info"><b>À préparer pour le bloc 4.</b> Enveloppes et étiquettes numérotées pour le jeu du courrier, plan de la classe. Recueil FWB : thématique 3, support 1.2 page 27, et support 1.3 page 28. Le mot serveur, annoncé aujourd'hui, en est le point d'entrée.</div>
|
||||
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Mon lexique du cours 3</h3>
|
||||
<p class="muted" style="margin-top:0">Les mêmes définitions que dans ton livret. Clique sur un mot pour l'ouvrir.</p>
|
||||
<div class="accordeon" id="lexique"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<footer>Bloc 3 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</footer>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
var PHASES=[{t:"La démonstration",d:10,a:0},{t:"Les mémoires",d:20,a:10},{t:"Trois endroits",d:25,a:30},
|
||||
{t:"Les tailles",d:25,a:55},{t:"La correction",d:15,a:80},{t:"Ma trace écrite",d:5,a:95}];
|
||||
|
||||
/* ---------- chrono et onglets ---------- */
|
||||
var t0=null,tick=null,choisie=0,ecart=document.getElementById("ecart"),rail=document.getElementById("rail");
|
||||
function d2(n){return (n<10?"0":"")+n;}
|
||||
function minutes(){return t0?(Date.now()-t0)/60000:0;}
|
||||
function dessineRail(){
|
||||
rail.innerHTML="";
|
||||
PHASES.forEach(function(p,i){
|
||||
var b=document.createElement("button");
|
||||
b.className="tab"+(i===choisie?" active":"");
|
||||
b.innerHTML=(i+1)+". "+p.t+"<span>"+p.d+" min</span>";
|
||||
b.onclick=function(){montre(i);};
|
||||
rail.appendChild(b);
|
||||
});
|
||||
document.getElementById("sPhase").textContent=(choisie+1)+" sur 6";
|
||||
ecart.textContent="Activité "+(choisie+1)+" · "+PHASES[choisie].t;
|
||||
majReste();
|
||||
}
|
||||
function montre(i){choisie=i;for(var k=0;k<PHASES.length;k++){document.getElementById("p"+k).classList.toggle("active",k===i);}dessineRail();try{window.scrollTo({top:0,behavior:"smooth"});}catch(e){}}
|
||||
function majReste(){var e=document.getElementById("sReste");if(!t0){e.textContent="–";return;}var r=Math.ceil(PHASES[choisie].a+PHASES[choisie].d-minutes());e.textContent=r>0?(r+" min"):"terminé";}
|
||||
function rafraichit(){var s=Math.floor((Date.now()-t0)/1000);document.getElementById("sTemps").textContent=d2(Math.floor(s/60))+":"+d2(s%60);majReste();}
|
||||
document.getElementById("btnGo").onclick=function(){if(t0)return;t0=Date.now();this.textContent="En cours";tick=setInterval(rafraichit,1000);rafraichit();};
|
||||
document.getElementById("btnStop").onclick=function(){clearInterval(tick);t0=null;document.getElementById("sTemps").textContent="00:00";document.getElementById("sReste").textContent="–";document.getElementById("btnGo").textContent="Démarrer";};
|
||||
|
||||
/* ---------- 1. hypotheses ---------- */
|
||||
var hyp=[];
|
||||
function dessineHyp(){
|
||||
var z=document.getElementById("colonnes");
|
||||
z.innerHTML='<div class="colonne"><h3>Hypothèses <em>'+hyp.length+'</em></h3><ul>'+hyp.map(function(x,i){
|
||||
return '<li><span>'+x+'</span><button data-i="'+i+'" aria-label="Retirer">×</button></li>';}).join("")+'</ul></div>';
|
||||
z.querySelectorAll("button[data-i]").forEach(function(b){b.onclick=function(){hyp.splice(parseInt(b.dataset.i,10),1);dessineHyp();};});
|
||||
}
|
||||
function ajoute(){var e=document.getElementById("entree"),v=e.value.trim();if(!v)return;hyp.push(v.replace(/[<>&]/g,""));e.value="";e.focus();dessineHyp();}
|
||||
document.getElementById("ajouter").onclick=ajoute;
|
||||
document.getElementById("entree").addEventListener("keydown",function(ev){if(ev.key==="Enter")ajoute();});
|
||||
dessineHyp();
|
||||
|
||||
/* ---------- moteur de questions ---------- */
|
||||
var rep={},TOTAL=25;
|
||||
function poser(zone,cle,txt,opts,bon,expl,compte){
|
||||
var d=document.createElement("div");d.className="q";
|
||||
d.innerHTML='<div class="txt">'+txt+'</div><div class="opts"></div><div class="expl">'+expl+'</div>';
|
||||
var z=d.querySelector(".opts");
|
||||
opts.forEach(function(o,i){
|
||||
var b=document.createElement("button");b.textContent=o;
|
||||
b.onclick=function(){
|
||||
if(rep[cle]!==undefined)return;
|
||||
rep[cle]=i;
|
||||
d.classList.add("done",i===bon?"bon":"faux");
|
||||
z.querySelectorAll("button").forEach(function(x,j){x.disabled=true;if(j===bon)x.classList.add("pick");else if(j===i)x.classList.add("rate");});
|
||||
if(compte)maj();
|
||||
};
|
||||
z.appendChild(b);
|
||||
});
|
||||
zone.appendChild(d);
|
||||
}
|
||||
function maj(){
|
||||
var n=Object.keys(rep).filter(function(k){return k.charAt(0)!=="z";}).length;
|
||||
document.getElementById("avancement").textContent=n+" / "+TOTAL;
|
||||
document.getElementById("jauge").style.width=(n/TOTAL*100)+"%";
|
||||
document.getElementById("sEx").textContent=n+" sur "+TOTAL;
|
||||
}
|
||||
|
||||
/* exercice rapide de la phase 2, hors score */
|
||||
var OPTM=["Mémoire vive","Stockage","Mémoire morte"];
|
||||
var EX0=[
|
||||
["Tu tapes un message, pas encore envoyé ni enregistré.",0,"Il n'existe que sur le plan de travail. Une coupure, et il est perdu."],
|
||||
["Ta photo prise le mois dernier, dans ta galerie.",1,"Elle a été enregistrée : elle est dans les placards."],
|
||||
["Le programme qui se lance quand tu appuies sur le bouton, avant Windows.",2,"C'est la notice d'ouverture, gravée dans la mémoire morte."],
|
||||
["Windows lui-même, installé dans l'ordinateur.",1,"Windows est installé dans le stockage. Pendant qu'il tourne, il est aussi chargé en mémoire vive, mais c'est dans le stockage qu'il est rangé."]];
|
||||
EX0.forEach(function(q,i){poser(document.getElementById("ex0"),"z"+i,q[0],OPTM,q[1],q[2],false);});
|
||||
|
||||
var EX1=[
|
||||
["Un onglet ouvert dans ton navigateur.",0,"Il est ouvert en ce moment : il occupe la mémoire vive. Fermé, il disparait."],
|
||||
["Une chanson que tu as téléchargée.",1,"Elle a été enregistrée : elle est dans le stockage, même quand l'appareil est éteint."],
|
||||
["Le programme de démarrage de l'ordinateur.",2,"La mémoire morte ne contient que ça : le programme qui démarre la machine."],
|
||||
["Le texte que tu es en train de taper.",0,"Tant que tu ne l'as pas enregistré, il n'est que sur le plan de travail."],
|
||||
["Un logiciel installé sur l'ordinateur.",1,"Les logiciels installés sont rangés dans le stockage, comme les fichiers."],
|
||||
["Une mémoire que tu ne peux pas modifier en utilisant l'ordinateur.",2,"C'est la mémoire morte : la notice d'ouverture, que personne ne touche."],
|
||||
["L'endroit où va ton texte quand tu cliques sur « Enregistrer ».",1,"Enregistrer, c'est copier de la mémoire vive vers le stockage."],
|
||||
["La mémoire qui se vide quand on éteint.",0,"C'est la mémoire vive. C'est pour ça qu'il faut enregistrer."]];
|
||||
var OPTI=["Interne","Externe"];
|
||||
var EX2=[
|
||||
["Le disque dur à l'intérieur de ton ordinateur.",0,"Il est dans l'appareil : stockage interne."],
|
||||
["Une clé USB.",1,"Elle est en dehors de l'appareil, on l'emporte : stockage externe."],
|
||||
["Google Drive ou OneDrive.",1,"C'est du stockage en ligne, sur un serveur ailleurs : stockage externe."],
|
||||
["Le SSD de ton ordinateur portable.",0,"Il est à l'intérieur de la machine : interne."],
|
||||
["Une carte mémoire qu'on retire de l'appareil photo.",1,"Elle se retire et s'emporte : externe."],
|
||||
["Ton dossier FMTTN sur le serveur de l'école.",1,"Piège : tu le vois à l'écran, mais il n'est pas dans ce poste. Il est sur un serveur, sinon tu ne le retrouverais pas sur un autre poste."],
|
||||
["Le stockage de ton téléphone.",0,"Il est dans le téléphone : interne. C'est lui que les publicités appellent « mémoire »."],
|
||||
["Un disque dur branché par un câble USB.",1,"Il est en dehors de l'ordinateur : externe."]];
|
||||
var OPTS=["Stockage interne","Clé USB","En ligne"];
|
||||
var EX3=[
|
||||
["Vous êtes trois à préparer un exposé, chacun chez soi.",2,"Chacun y accède de chez lui et vous travaillez sur le même document."],
|
||||
["Tu présentes ton travail dans une classe sans internet.",1,"Sans internet, le cloud est inaccessible. La clé, tu l'emportes."],
|
||||
["Tu veux retrouver tes fichiers sur n'importe quel poste de l'école.",2,"Ton espace de l'école est sur un serveur : accessible de partout, comme le cloud."],
|
||||
["Tu veux le logiciel qui s'ouvre le plus vite, sur ton propre ordinateur.",0,"Le stockage interne est le plus rapide, et il est toujours là."],
|
||||
["Tu pars sans internet et tu veux continuer ton travail sur ton portable.",0,"Le fichier doit être dans le portable lui-même. Pas besoin de réseau."]];
|
||||
var EX4=[
|
||||
["Lequel est le plus grand : 800 Mo ou 1 Go ?",["800 Mo","1 Go"],1,"1 Go, c'est environ 1000 Mo. Donc plus que 800 Mo."],
|
||||
["Lequel est le plus grand : 1500 Ko ou 1 Mo ?",["1500 Ko","1 Mo"],0,"1 Mo, c'est environ 1000 Ko. Donc 1500 Ko est plus grand."],
|
||||
["Environ combien de Mo dans 1 Go ?",["10","100","1000"],2,"À chaque marche, on multiplie par environ mille."],
|
||||
["Une photo de 4 Mo passe-t-elle dans une pièce jointe limitée à 25 Mo ?",["Oui","Non"],0,"4 Mo, c'est plus petit que 25 Mo. Même unité, on compare les nombres."]];
|
||||
|
||||
EX1.forEach(function(q,i){poser(document.getElementById("ex1"),"a"+i,q[0],OPTM,q[1],q[2],true);});
|
||||
EX2.forEach(function(q,i){poser(document.getElementById("ex2"),"b"+i,q[0],OPTI,q[1],q[2],true);});
|
||||
EX3.forEach(function(q,i){poser(document.getElementById("ex3"),"c"+i,q[0],OPTS,q[1],q[2],true);});
|
||||
EX4.forEach(function(q,i){poser(document.getElementById("ex4"),"d"+i,q[0],q[1],q[2],q[3],true);});
|
||||
|
||||
function compte(pref,src,idx){var n=0;src.forEach(function(q,i){if(rep[pref+i]===q[idx])n++;});return n;}
|
||||
document.getElementById("voir").onclick=function(){
|
||||
var s1=compte("a",EX1,1),s2=compte("b",EX2,1),s3=compte("c",EX3,1),s4=compte("d",EX4,2),t=s1+s2+s3+s4;
|
||||
document.getElementById("gTotal").textContent=t;
|
||||
document.getElementById("gMot").textContent= t>=22?"Très bien. Tu peux passer aux exercices écrits de ton livret."
|
||||
: t>=17?"C'est acquis dans l'ensemble. Relis ton mémo pour les points ratés."
|
||||
: t>=12?"La base est là. Relis la page sur les deux mémoires, puis recommence l'exercice 1."
|
||||
: "Il faut reprendre. Relis les pages « Je comprends » de ton livret, puis recommence.";
|
||||
document.getElementById("gDetail").innerHTML='<table class="grille"><tr><th>Exercice</th><th>Résultat</th></tr>'
|
||||
+'<tr><td>1. Mémoire vive, stockage ou mémoire morte</td><td><b>'+s1+' / 8</b></td></tr>'
|
||||
+'<tr><td>2. Interne ou externe</td><td><b>'+s2+' / 8</b></td></tr>'
|
||||
+'<tr><td>3. Le bon stockage</td><td><b>'+s3+' / 5</b></td></tr>'
|
||||
+'<tr><td>4. Les tailles</td><td><b>'+s4+' / 4</b></td></tr></table>';
|
||||
var nom=(document.getElementById("nom").value||"").trim()||"...................";
|
||||
document.getElementById("recap").value="Cours 3 – exercices – "+nom+"\nMémoires "+s1+"/8 · Interne-externe "+s2+"/8 · Bon stockage "+s3+"/5 · Tailles "+s4+"/4 · Total "+t+"/25";
|
||||
document.getElementById("bilan").classList.add("on");
|
||||
try{document.getElementById("bilan").scrollIntoView({behavior:"smooth"});}catch(e){}
|
||||
};
|
||||
document.getElementById("copier").onclick=function(){var t=document.getElementById("recap");t.select();var ok=false;try{ok=document.execCommand("copy");}catch(e){}document.getElementById("copie").textContent=ok?"Copié.":"Sélectionne le texte et copie-le à la main.";};
|
||||
document.getElementById("reset").onclick=function(){location.reload();};
|
||||
|
||||
/* ---------- 3. etapes et observations ---------- */
|
||||
var ETAPES=[
|
||||
["Ouvre le Bloc-notes","Tape une phrase : ton prénom, suivi de « test du cours 3 »."],
|
||||
["Enregistre sur le poste","Nom : cours3_test.txt, dans le dossier du poste que le professeur t'indique. Il est sur cette machine uniquement."],
|
||||
["Enregistre sur la clé USB","Le même texte, le même nom."],
|
||||
["Enregistre dans ton dossier FMTTN","Sur l'espace de l'école."],
|
||||
["Change de poste","Ferme ta session. Change de place avec ton binôme. Ouvre ta session sur son poste. Emporte la clé."],
|
||||
["Cherche tes trois fichiers","Et complète le tableau de ton livret."]];
|
||||
var ei=0,ze=document.getElementById("etapes");
|
||||
function dessineEtapes(){ze.innerHTML="";ETAPES.forEach(function(e,i){var d=document.createElement("div");d.className="step"+(i===ei?" on":"")+(i<ei?" fait":"");d.innerHTML='<span class="n">'+(i+1)+'</span><div><h3>'+e[0]+'</h3><p>'+(i<=ei?e[1]:"")+'</p></div>';ze.appendChild(d);});}
|
||||
document.getElementById("etsuiv").onclick=function(){if(ei<ETAPES.length-1){ei++;dessineEtapes();}};
|
||||
document.getElementById("etprec").onclick=function(){if(ei>0){ei--;dessineEtapes();}};
|
||||
dessineEtapes();
|
||||
var OBS=[["Le dossier du poste","Interne","Non","Non"],["La clé USB","Externe","Oui, je l'ai emportée","Non"],["Mon dossier FMTTN","Externe","Oui","Oui, le réseau de l'école"]];
|
||||
var oi=0;
|
||||
function dessineObs(){
|
||||
var h="<tr><th>Où j'ai enregistré</th><th>Interne ou externe</th><th>Sur l'autre poste ?</th><th>Réseau ou internet ?</th></tr>";
|
||||
OBS.forEach(function(o,i){var v=i<oi;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:#172033'>"+o[0]+"</b></td>"+(v?"<td><b>"+o[1]+"</b></td><td><b>"+o[2]+"</b></td><td><b>"+o[3]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
|
||||
document.getElementById("tableObs").innerHTML=h;
|
||||
document.getElementById("noteObs").textContent=oi>=OBS.length?"Les trois fichiers existent toujours : ils sont tous dans un stockage. Ce qui change, c'est seulement l'endroit. Celui du poste n'est pas perdu, il est resté sur l'autre machine.":"";
|
||||
}
|
||||
document.getElementById("obsSuiv").onclick=function(){if(oi<OBS.length){oi++;dessineObs();}};
|
||||
document.getElementById("obsReset").onclick=function(){oi=0;dessineObs();};
|
||||
dessineObs();
|
||||
|
||||
/* ---------- 4. tri interactif ---------- */
|
||||
var FICH=[["A","video_anniversaire.mp4","450 Mo",450e6],["B","liste_courses.txt","2 Ko",2e3],["C","sauvegarde_telephone.zip","64 Go",64e9],
|
||||
["D","photo_classe.jpg","3,2 Mo",3.2e6],["E","affiche_spectacle.png","850 Ko",850e3],["F","film_vacances.mp4","2,4 Go",2.4e9],
|
||||
["G","devoir_francais.docx","45 Ko",45e3],["H","expose_sciences.pptx","18 Mo",18e6]];
|
||||
var ORDRE=FICH.slice().sort(function(a,b){return a[3]-b[3];});
|
||||
var pos=0,err=0;
|
||||
function dessineTri(){
|
||||
var z=document.getElementById("fichiers");z.innerHTML="";
|
||||
FICH.forEach(function(f){
|
||||
var pris=ORDRE.slice(0,pos).some(function(o){return o[0]===f[0];});
|
||||
var b=document.createElement("button");b.className="fic"+(pris?" pris":"");
|
||||
b.innerHTML="<b>"+f[0]+"</b> "+f[1]+"<small>"+f[2]+"</small>";
|
||||
b.onclick=function(){
|
||||
if(pris||pos>=ORDRE.length)return;
|
||||
if(f[0]===ORDRE[pos][0]){pos++;document.getElementById("triMsg").textContent=pos===ORDRE.length?"Bravo, le classement est complet.":"";dessineTri();}
|
||||
else{err++;b.classList.add("rate");document.getElementById("triMsg").textContent="Pas encore. Regarde d'abord l'unité, puis le nombre.";majTri();}
|
||||
};
|
||||
z.appendChild(b);
|
||||
});
|
||||
document.getElementById("rangee").innerHTML=ORDRE.slice(0,pos).map(function(o){return '<span class="pas">'+o[0]+' · '+o[2]+'</span>';}).join('<span style="color:#94a3b8;font-weight:900">→</span>');
|
||||
majTri();
|
||||
}
|
||||
function majTri(){document.getElementById("triInfo").textContent=pos+" sur 8 · "+err+" erreur"+(err>1?"s":"");}
|
||||
document.getElementById("triReset").onclick=function(){pos=0;err=0;document.getElementById("triMsg").textContent="";dessineTri();};
|
||||
dessineTri();
|
||||
|
||||
/* ---------- 5. correction et estimation ---------- */
|
||||
var ci=0;
|
||||
function dessineCor(){
|
||||
var h="<tr><th>Rang</th><th>Fichier</th><th>Taille</th></tr>";
|
||||
ORDRE.forEach(function(o,i){var v=i<ci;h+="<tr"+(v?' class="on"':"")+"><td><b style='color:#172033'>"+(i+1)+"</b></td>"+(v?"<td><b>"+o[0]+"</b> · "+o[1]+"</td><td><b>"+o[2]+"</b></td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";});
|
||||
document.getElementById("tableCor").innerHTML=h;
|
||||
document.getElementById("noteCor").textContent=ci>=ORDRE.length?"Les deux pièges : 850 Ko est plus petit que 3,2 Mo, et 450 Mo est plus petit que 2,4 Go. Dans les deux cas, le plus grand nombre est le plus petit fichier. L'unité d'abord.":"";
|
||||
}
|
||||
document.getElementById("corSuiv").onclick=function(){if(ci<ORDRE.length){ci++;dessineCor();}};
|
||||
document.getElementById("corReset").onclick=function(){ci=0;dessineCor();};
|
||||
dessineCor();
|
||||
var es=0;
|
||||
document.getElementById("estSuiv").onclick=function(){if(es<3){es++;document.getElementById("est"+es).classList.add("on");}};
|
||||
document.getElementById("estReset").onclick=function(){es=0;[1,2,3].forEach(function(k){document.getElementById("est"+k).classList.remove("on");});};
|
||||
|
||||
/* ---------- 6. trace ---------- */
|
||||
var TRACE=[
|
||||
["L'ordinateur garde les informations à plusieurs endroits. La mémoire ",1," garde ce sur quoi je travaille en ce moment : elle est rapide, mais tout disparait quand on éteint. Le ",2," garde mes fichiers, même quand l'appareil est éteint."],
|
||||
[3,", c'est copier mon travail de la mémoire vive vers le stockage. Tant que je ne l'ai pas fait, mon travail peut disparaitre."],
|
||||
["La mémoire ",4," contient le programme qui démarre la machine. On ne la modifie pas, et ce n'est pas là que sont mes fichiers."],
|
||||
["Le stockage ",5," est à l'intérieur de l'appareil : mes fichiers y restent, mais seulement sur cette machine. Le stockage ",6," est en dehors : une clé USB que j'emporte, ou le cloud, accessible partout avec internet."],
|
||||
["Ko, Mo, Go, To : à chaque marche, on multiplie par environ ",7,". Pour comparer deux tailles, je regarde d'abord l'",8,"."]];
|
||||
var MOTS={1:"vive",2:"stockage",3:"Enregistrer",4:"morte",5:"interne",6:"externe",7:"mille",8:"unité"};
|
||||
var rv=0,zt=document.getElementById("trace");
|
||||
function dessineTrace(){
|
||||
zt.innerHTML="<h3>Cours 3. Où va ce que j'enregistre</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){
|
||||
if(typeof x==="number")return x<=rv?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd"> </span>';
|
||||
return x;}).join("")+"</p>";}).join("");
|
||||
document.getElementById("motCompte").textContent=rv+" mot"+(rv>1?"s":"")+" sur 8";
|
||||
}
|
||||
document.getElementById("motSuiv").onclick=function(){if(rv<8){rv++;dessineTrace();}};
|
||||
document.getElementById("motReset").onclick=function(){rv=0;dessineTrace();};
|
||||
dessineTrace();
|
||||
|
||||
/* ---------- lexique, genere par lexique/build.py ---------- */
|
||||
var LEXIQUE=[
|
||||
["Cloud","Un espace de stockage en ligne, sur des serveurs situés ailleurs, accessible par internet. OneDrive, Google Drive, iCloud. En français : stockage en ligne. C'est un stockage externe."],
|
||||
["Disque dur","Le composant qui conserve les fichiers, même quand l'ordinateur est éteint."],
|
||||
["Enregistrer","Copier ce qui se trouve dans la mémoire vive vers un stockage, pour le conserver. Tant qu'on n'a pas enregistré, le travail peut disparaitre."],
|
||||
["Fichier","Une donnée enregistrée qui porte un nom. Un texte, une photo, une chanson deviennent des fichiers quand on les enregistre."],
|
||||
["Gigaoctet (Go)","Environ mille mégaoctets. L'unité des vidéos, des films, et de la capacité des clés USB et des téléphones."],
|
||||
["Kilooctet (Ko)","Environ mille octets. L'unité des petits fichiers : un texte court, un document sans image."],
|
||||
["Mégaoctet (Mo)","Environ mille kilooctets. L'unité des photos et des chansons."],
|
||||
["Mémoire morte","Une petite mémoire gravée dans l'ordinateur, qu'on ne modifie pas. Elle contient le programme qui démarre la machine. Son contenu ne disparait pas quand on éteint. En anglais : ROM."],
|
||||
["Mémoire vive","Le composant qui garde ce sur quoi tu travailles en ce moment. Tout ce qu'elle contient disparait quand la machine s'éteint."],
|
||||
["Octet","La plus petite unité utilisée pour mesurer la taille d'un fichier. Une lettre tapée au clavier occupe environ un octet."],
|
||||
["RAM","Le nom anglais de la mémoire vive."],
|
||||
["ROM","Le nom anglais de la mémoire morte."],
|
||||
["Sauvegarde","Une copie de sécurité d'un fichier, rangée à un autre endroit que l'original. Si l'un est perdu, l'autre reste."],
|
||||
["Serveur","Un ordinateur qui reste allumé en permanence pour conserver des fichiers et les fournir à d'autres appareils. On en reparle au cours 4."],
|
||||
["SSD","Un stockage interne sans pièce qui tourne, plus rapide qu'un disque dur classique. On le trouve dans la plupart des ordinateurs récents."],
|
||||
["Stockage","L'endroit où les fichiers restent enregistrés, même quand l'appareil est éteint."],
|
||||
["Stockage externe","Un stockage qui se trouve en dehors de l'appareil. Soit un objet qu'on branche et qu'on emporte, comme une clé USB, soit un espace en ligne, comme le cloud."],
|
||||
["Stockage interne","Un stockage qui se trouve à l'intérieur de l'appareil, comme le disque dur ou le SSD. Les fichiers y restent, mais seulement sur cette machine."],
|
||||
["Téraoctet (To)","Environ mille gigaoctets. L'unité des gros disques durs de sauvegarde."]];
|
||||
var zl=document.getElementById("lexique");
|
||||
LEXIQUE.forEach(function(e){
|
||||
var d=document.createElement("div");d.className="item";
|
||||
d.innerHTML='<button aria-expanded="false"><span class="n">'+e[0].charAt(0)+'</span><span class="t">'+e[0]+'</span><span class="plus">définition</span></button><div class="corps">'+e[1]+'</div>';
|
||||
d.querySelector("button").onclick=function(){var o=d.classList.toggle("ouvert");this.setAttribute("aria-expanded",o?"true":"false");this.querySelector(".plus").textContent=o?"masquer":"définition";};
|
||||
zl.appendChild(d);
|
||||
});
|
||||
|
||||
dessineRail();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,751 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Cours 4 – Comment ça circule</title>
|
||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
||||
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
|
||||
button,input,select{font:inherit}
|
||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
||||
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
|
||||
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
|
||||
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
|
||||
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
|
||||
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
|
||||
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
|
||||
.hero a.up:hover{color:#fff}
|
||||
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
||||
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
|
||||
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hero-chip b{font-size:14px}
|
||||
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
|
||||
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
|
||||
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
|
||||
|
||||
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
|
||||
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
|
||||
.stat strong{display:block;font-size:22px;margin-top:3px}
|
||||
.stat small{color:#64748b;font-weight:800}
|
||||
.stat.ok strong{color:var(--green)}
|
||||
|
||||
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
|
||||
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
|
||||
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
|
||||
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
|
||||
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
|
||||
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
|
||||
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
|
||||
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
|
||||
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
|
||||
|
||||
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
|
||||
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
|
||||
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
|
||||
.tab:hover{border-color:#93c5fd}
|
||||
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
|
||||
.tab.active span{color:#c7dcff}
|
||||
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
|
||||
|
||||
.panel{display:none}.panel.active{display:block}
|
||||
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
|
||||
.card h2,.card h3{margin-top:0}
|
||||
.card h2{font-size:26px;letter-spacing:-.5px}
|
||||
.muted{color:var(--muted);line-height:1.6}
|
||||
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
||||
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
|
||||
.btn:hover{filter:brightness(.97)}
|
||||
.btn.primary{background:#2563eb;color:#fff}
|
||||
.btn.soft{background:#f1f5f9;color:#334155}
|
||||
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
|
||||
.feedback{min-height:31px;margin-top:12px;font-weight:850}
|
||||
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
|
||||
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
|
||||
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
|
||||
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
|
||||
.info b{color:var(--ink)}
|
||||
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
|
||||
.info.alerte b{color:#991b1b}
|
||||
|
||||
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
|
||||
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
|
||||
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
|
||||
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
|
||||
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
|
||||
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
|
||||
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
|
||||
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
|
||||
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
|
||||
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
|
||||
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
|
||||
.colonne li button:hover{color:var(--red)}
|
||||
|
||||
.accordeon{display:grid;gap:10px}
|
||||
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
|
||||
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
|
||||
.item>button:hover{background:#f8fbff}
|
||||
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
|
||||
.item .t{font-weight:850;font-size:17px;flex:1}
|
||||
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
|
||||
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
|
||||
.item.ouvert .corps{display:block}
|
||||
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.item.ouvert .n{background:#2563eb;color:#fff}
|
||||
|
||||
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
|
||||
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
|
||||
.qtag.cle{background:#fef3c7;color:#92400e}
|
||||
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
|
||||
.answer-grid{display:grid;gap:8px}
|
||||
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
|
||||
.answer.ok{border-color:#22c55e;background:#f0fdf4}
|
||||
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
|
||||
.reveal.on{display:block}
|
||||
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
|
||||
|
||||
.steps{display:grid;gap:11px}
|
||||
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
|
||||
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.step.fait{opacity:1}
|
||||
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
|
||||
.step.on .n{background:#2563eb;color:#fff}
|
||||
.step.fait .n{background:#dcfce7;color:#15803d}
|
||||
.step h3{margin:0 0 4px;font-size:17px}
|
||||
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
|
||||
|
||||
figure{margin:0 0 18px}
|
||||
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
||||
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
|
||||
|
||||
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
|
||||
.trace h3{margin:0 0 14px;font-size:22px}
|
||||
.trace p{margin:0 0 .5em}
|
||||
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
|
||||
|
||||
.check{display:grid;gap:9px}
|
||||
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
|
||||
.check label:hover{border-color:#93c5fd}
|
||||
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
|
||||
.check input:checked+span{color:var(--green);font-weight:900}
|
||||
|
||||
table.grille{width:100%;border-collapse:collapse;font-size:15px}
|
||||
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
|
||||
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
|
||||
table.grille td.masque{color:transparent;background:#f8fafc}
|
||||
table.grille tr.on td{background:#f0fdf4}
|
||||
table.grille td b{color:#15803d}
|
||||
|
||||
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
|
||||
.module{margin-bottom:30px}
|
||||
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
|
||||
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
|
||||
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
|
||||
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
|
||||
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
|
||||
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
|
||||
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
|
||||
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
|
||||
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
|
||||
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
|
||||
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
||||
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
|
||||
.et.eval{background:#fee2e2;color:#991b1b}
|
||||
.et.fac{background:#f3e8ff;color:#6b21a8}
|
||||
.et.pret{background:#dcfce7;color:#15803d}
|
||||
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
|
||||
a.bloc .n{background:#2563eb;color:#fff}
|
||||
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
|
||||
.bloc.vide h3{font-weight:800}
|
||||
.masque{display:none!important}
|
||||
|
||||
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
|
||||
|
||||
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
|
||||
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
|
||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
||||
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
|
||||
|
||||
.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
|
||||
.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
|
||||
.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
|
||||
.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
|
||||
.q.bon{border-color:#22c55e;background:#f2fdf6}
|
||||
.q.faux{border-color:#f59e0b;background:#fffbeb}
|
||||
.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
|
||||
.q .opts{display:flex;gap:8px;flex-wrap:wrap}
|
||||
.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
|
||||
.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
|
||||
.q .opts button:disabled{cursor:default;opacity:.55}
|
||||
.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
|
||||
.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
|
||||
.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
|
||||
.q.done .expl{display:block}
|
||||
.figpetit{max-width:560px;margin:0 auto 14px}
|
||||
#bilan{display:none}
|
||||
#bilan.on{display:block}
|
||||
.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
|
||||
textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}
|
||||
#plan svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
||||
#plan .allume rect,#plan rect.allume{stroke:#dc2626!important;stroke-width:5!important}
|
||||
#plan line.allume{stroke:#dc2626!important;stroke-width:7!important}
|
||||
#plan .panne rect{fill:#fee2e2!important;stroke:#991b1b!important;stroke-dasharray:6 4}
|
||||
.envoi{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}
|
||||
.envoi select{padding:10px 12px;border:2px solid #cbd5e1;border-radius:11px;font-weight:800}
|
||||
.journal{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
|
||||
.journal li{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:9px 13px;font-weight:700}
|
||||
.journal li.stop{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
|
||||
.journal li b{color:#1d4ed8}
|
||||
.cases{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
|
||||
.cases label{font-weight:900;font-size:13px;color:#475569;display:grid;gap:5px}
|
||||
.cases select{padding:9px;border:2px solid #cbd5e1;border-radius:10px;font-weight:800}
|
||||
.cases select.ok{border-color:#22c55e;background:#f0fdf4}
|
||||
.cases select.ko{border-color:#f59e0b;background:#fffbeb}
|
||||
.cache{display:none}.cache.on{display:block}
|
||||
@media(max-width:700px){.cases{grid-template-columns:1fr 1fr}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<section class="hero">
|
||||
<div>
|
||||
<a class="up" href="index.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
|
||||
<div class="eyebrow">Cours 4 · Formation numérique · 1re année</div>
|
||||
<h1>Comment ça circule</h1>
|
||||
<p>Le trajet d'une demande, depuis ton ordinateur jusqu'à un site web, et retour. Et la différence entre Internet, le web et le navigateur.</p>
|
||||
<div class="badges">
|
||||
<span class="badge">2 périodes</span>
|
||||
<span class="badge">Livret du cours 4</span>
|
||||
<span class="badge">Exercices dans l'onglet 4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 7l9 6 9-6"/></svg><b>Le courrier</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="12" width="18" height="7" rx="2"/><path d="M7 12V8M17 12V8M7 16h.01M11 16h.01"/></svg><b>Le routeur</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 7h4M4 12h7M4 17h5M14 7h6M14 12h6M14 17h6"/></svg><b>L'adresse IP</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg><b>Internet</b></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="dashboard">
|
||||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
||||
<div class="stat"><small>Temps depuis le début</small><strong id="sTemps">00:00</strong></div>
|
||||
<div class="stat"><small>Il reste pour cette activité</small><strong id="sReste">–</strong></div>
|
||||
<div class="stat"><small>Exercices répondus</small><strong id="sEx">0 sur 20</strong></div>
|
||||
</section>
|
||||
|
||||
<div class="card" style="padding:16px 18px">
|
||||
<div class="row">
|
||||
<button class="btn primary" id="btnGo">Démarrer</button>
|
||||
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
||||
<span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navtabs n6" id="rail"></nav>
|
||||
|
||||
<!-- 1 -->
|
||||
<section class="panel active" id="p0"><div class="card">
|
||||
<div class="entete"><div><h2>Le jeu du courrier</h2><p class="muted">Ordinateurs éteints. La classe devient un réseau.</p></div><span class="score">15 min</span></div>
|
||||
<figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" role="img" aria-label="Plan du jeu du courrier : trois réseaux locaux reliés par Internet, et un serveur">
|
||||
|
||||
<g font-family="Arial, Helvetica, sans-serif">
|
||||
<rect x="15" y="20" width="230" height="215" rx="16" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5" opacity=".55"/>
|
||||
<text x="130" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#1d4ed8">RÉSEAU 1</text>
|
||||
<line x1="60" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line x1="130" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line x1="200" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<g><rect x="29" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M49 102 h22 M60 102 v6 M45 108 h30" stroke="#172554" stroke-width="2.2"/><text x="60" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.2</text></g>
|
||||
<g><rect x="99" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M119 102 h22 M130 102 v6 M115 108 h30" stroke="#172554" stroke-width="2.2"/><text x="130" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.3</text></g>
|
||||
<g><rect x="169" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M189 102 h22 M200 102 v6 M185 108 h30" stroke="#172554" stroke-width="2.2"/><text x="200" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.4</text></g>
|
||||
<g><rect x="75" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="3"/><text x="130" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#1d4ed8">Routeur</text><text x="130" y="195" text-anchor="middle" font-size="11.5" fill="#1d4ed8">10.0.1.1</text></g>
|
||||
<line x1="130" y1="204" x2="130" y2="262" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="285" y="20" width="230" height="215" rx="16" fill="#dcfce7" stroke="#15803d" stroke-width="2.5" opacity=".55"/>
|
||||
<text x="400" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">RÉSEAU 2</text>
|
||||
<line x1="330" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line x1="400" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line x1="470" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<g><rect x="299" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M319 102 h22 M330 102 v6 M315 108 h30" stroke="#172554" stroke-width="2.2"/><text x="330" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.2</text></g>
|
||||
<g><rect x="369" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M389 102 h22 M400 102 v6 M385 108 h30" stroke="#172554" stroke-width="2.2"/><text x="400" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.3</text></g>
|
||||
<g><rect x="439" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M459 102 h22 M470 102 v6 M455 108 h30" stroke="#172554" stroke-width="2.2"/><text x="470" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.4</text></g>
|
||||
<g><rect x="345" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#15803d" stroke-width="3"/><text x="400" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#15803d">Routeur</text><text x="400" y="195" text-anchor="middle" font-size="11.5" fill="#15803d">10.0.2.1</text></g>
|
||||
<line x1="400" y1="204" x2="400" y2="262" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="555" y="20" width="230" height="215" rx="16" fill="#fef3c7" stroke="#b45309" stroke-width="2.5" opacity=".55"/>
|
||||
<text x="670" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#b45309">RÉSEAU 3</text>
|
||||
<line x1="600" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line x1="670" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line x1="740" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<g><rect x="569" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M589 102 h22 M600 102 v6 M585 108 h30" stroke="#172554" stroke-width="2.2"/><text x="600" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.2</text></g>
|
||||
<g><rect x="639" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M659 102 h22 M670 102 v6 M655 108 h30" stroke="#172554" stroke-width="2.2"/><text x="670" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.3</text></g>
|
||||
<g><rect x="709" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M729 102 h22 M740 102 v6 M725 108 h30" stroke="#172554" stroke-width="2.2"/><text x="740" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.4</text></g>
|
||||
<g><rect x="615" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#b45309" stroke-width="3"/><text x="670" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#b45309">Routeur</text><text x="670" y="195" text-anchor="middle" font-size="11.5" fill="#b45309">10.0.3.1</text></g>
|
||||
<line x1="670" y1="204" x2="670" y2="262" stroke="#94a3b8" stroke-width="4"/>
|
||||
<g><rect x="20" y="262" width="760" height="44" rx="22" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/><text x="400" y="290" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">INTERNET · l'allée centrale, qui relie les routeurs entre eux</text></g>
|
||||
<line x1="400" y1="306" x2="400" y2="332" stroke="#94a3b8" stroke-width="4"/>
|
||||
<g><rect x="320" y="332" width="160" height="54" rx="10" fill="#172554"/><text x="400" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="#ffffff">Serveur</text><text x="400" y="374" text-anchor="middle" font-size="12" fill="#c7d2fe">10.0.9.1 · bureau du prof</text></g>
|
||||
</g></svg></figure>
|
||||
<div class="accordeon" id="regles"></div>
|
||||
<h3 style="margin-top:22px">Les trois manches</h3>
|
||||
<div class="steps" id="manches"></div>
|
||||
<div class="row" style="margin-top:12px"><button class="btn soft" id="maPrec">Manche précédente</button><button class="btn primary" id="maSuiv">Manche suivante</button></div>
|
||||
</div></section>
|
||||
|
||||
<!-- 2 -->
|
||||
<section class="panel" id="p1">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>On rejoue le jeu, avec les vrais mots</h2><p class="muted">Choisis qui envoie et à qui. Le trajet s'allume étape par étape.</p></div><span class="score">20 min</span></div>
|
||||
<div class="envoi">
|
||||
<label>De <select id="de"></select></label>
|
||||
<label>vers <select id="vers"></select></label>
|
||||
<button class="btn primary" id="envoyer">Envoyer</button>
|
||||
<button class="btn soft" id="panne">Mettre le routeur 2 en panne</button>
|
||||
</div>
|
||||
<div id="plan"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" role="img" aria-label="Plan du jeu du courrier : trois réseaux locaux reliés par Internet, et un serveur">
|
||||
|
||||
<g font-family="Arial, Helvetica, sans-serif">
|
||||
<rect x="15" y="20" width="230" height="215" rx="16" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5" opacity=".55"/>
|
||||
<text x="130" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#1d4ed8">RÉSEAU 1</text>
|
||||
<line id="l_p10" x1="60" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line id="l_p11" x1="130" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line id="l_p12" x1="200" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<g id="p10"><rect x="29" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M49 102 h22 M60 102 v6 M45 108 h30" stroke="#172554" stroke-width="2.2"/><text x="60" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.2</text></g>
|
||||
<g id="p11"><rect x="99" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M119 102 h22 M130 102 v6 M115 108 h30" stroke="#172554" stroke-width="2.2"/><text x="130" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.3</text></g>
|
||||
<g id="p12"><rect x="169" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M189 102 h22 M200 102 v6 M185 108 h30" stroke="#172554" stroke-width="2.2"/><text x="200" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.4</text></g>
|
||||
<g id="r1"><rect x="75" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="3"/><text x="130" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#1d4ed8">Routeur</text><text x="130" y="195" text-anchor="middle" font-size="11.5" fill="#1d4ed8">10.0.1.1</text></g>
|
||||
<line id="l_r1" x1="130" y1="204" x2="130" y2="262" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="285" y="20" width="230" height="215" rx="16" fill="#dcfce7" stroke="#15803d" stroke-width="2.5" opacity=".55"/>
|
||||
<text x="400" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">RÉSEAU 2</text>
|
||||
<line id="l_p20" x1="330" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line id="l_p21" x1="400" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line id="l_p22" x1="470" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<g id="p20"><rect x="299" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M319 102 h22 M330 102 v6 M315 108 h30" stroke="#172554" stroke-width="2.2"/><text x="330" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.2</text></g>
|
||||
<g id="p21"><rect x="369" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M389 102 h22 M400 102 v6 M385 108 h30" stroke="#172554" stroke-width="2.2"/><text x="400" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.3</text></g>
|
||||
<g id="p22"><rect x="439" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M459 102 h22 M470 102 v6 M455 108 h30" stroke="#172554" stroke-width="2.2"/><text x="470" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.4</text></g>
|
||||
<g id="r2"><rect x="345" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#15803d" stroke-width="3"/><text x="400" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#15803d">Routeur</text><text x="400" y="195" text-anchor="middle" font-size="11.5" fill="#15803d">10.0.2.1</text></g>
|
||||
<line id="l_r2" x1="400" y1="204" x2="400" y2="262" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="555" y="20" width="230" height="215" rx="16" fill="#fef3c7" stroke="#b45309" stroke-width="2.5" opacity=".55"/>
|
||||
<text x="670" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#b45309">RÉSEAU 3</text>
|
||||
<line id="l_p30" x1="600" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line id="l_p31" x1="670" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line id="l_p32" x1="740" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<g id="p30"><rect x="569" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M589 102 h22 M600 102 v6 M585 108 h30" stroke="#172554" stroke-width="2.2"/><text x="600" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.2</text></g>
|
||||
<g id="p31"><rect x="639" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M659 102 h22 M670 102 v6 M655 108 h30" stroke="#172554" stroke-width="2.2"/><text x="670" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.3</text></g>
|
||||
<g id="p32"><rect x="709" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M729 102 h22 M740 102 v6 M725 108 h30" stroke="#172554" stroke-width="2.2"/><text x="740" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.4</text></g>
|
||||
<g id="r3"><rect x="615" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#b45309" stroke-width="3"/><text x="670" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#b45309">Routeur</text><text x="670" y="195" text-anchor="middle" font-size="11.5" fill="#b45309">10.0.3.1</text></g>
|
||||
<line id="l_r3" x1="670" y1="204" x2="670" y2="262" stroke="#94a3b8" stroke-width="4"/>
|
||||
<g id="net"><rect x="20" y="262" width="760" height="44" rx="22" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/><text x="400" y="290" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">INTERNET · l'allée centrale, qui relie les routeurs entre eux</text></g>
|
||||
<line id="l_srv" x1="400" y1="306" x2="400" y2="332" stroke="#94a3b8" stroke-width="4"/>
|
||||
<g id="srv"><rect x="320" y="332" width="160" height="54" rx="10" fill="#172554"/><text x="400" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="#ffffff">Serveur</text><text x="400" y="374" text-anchor="middle" font-size="12" fill="#c7d2fe">10.0.9.1 · bureau du prof</text></g>
|
||||
</g></svg></div>
|
||||
<ol class="journal" id="journal"></ol>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Je comprends. Le réseau et le trajet d'un message</h2>
|
||||
<p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p>
|
||||
|
||||
<h3>Le réseau</h3>
|
||||
<p>Un <b>réseau</b>, ce sont des appareils reliés entre eux pour échanger des informations. Le réseau d'un seul lieu, une maison, une école, s'appelle un <b>réseau local</b>. Dans le jeu, chaque groupe de tables.</p>
|
||||
|
||||
<h3>La connexion</h3>
|
||||
<p>La <b>connexion</b> relie un appareil au réseau : par un <b>câble réseau</b>, ou par le <b>wifi</b>, sans fil. La connexion, c'est la route. Mais une route ne sert à rien si on ne sait pas où aller.</p>
|
||||
|
||||
<h3>L'adresse IP</h3>
|
||||
<p>Chaque appareil connecté a une <b>adresse IP</b> : <b>quatre nombres séparés par des points</b>, comme 10.0.2.3. <b>Sans adresse, un message ne sait pas où aller, et une réponse ne sait pas où revenir.</b> C'est pour ça qu'il fallait écrire l'adresse du destinataire et la sienne.</p>
|
||||
<p>Les premiers nombres indiquent <b>le réseau</b>, le dernier désigne <b>l'appareil</b>. L'adresse de ton poste lui est donnée par le réseau quand il se connecte.</p>
|
||||
|
||||
<h3>Le routeur</h3>
|
||||
<p>Le <b>routeur</b> relie un réseau local aux autres réseaux. Il lit l'adresse de chaque message et l'envoie dans la bonne direction, sans lire le message lui-même. À la maison, il est caché dans la <b>box</b> du <b>fournisseur d'accès</b>.</p>
|
||||
<p><b>Si le routeur tombe en panne</b>, les appareils restent reliés entre eux, mais plus rien ne sort ni n'entre. C'est ce qui est arrivé au réseau 2.</p>
|
||||
|
||||
<h3>Internet et le serveur</h3>
|
||||
<p><b>Internet, c'est le réseau des réseaux</b> : des millions de réseaux reliés par des routeurs. Dans le jeu, l'allée centrale. Un <b>serveur</b> est un ordinateur toujours allumé qui conserve des fichiers et des sites. Dans le jeu, le bureau du professeur.</p>
|
||||
|
||||
<div class="consigne"><small>Le trajet complet, en cinq étapes</small>
|
||||
<b>1.</b> Je me connecte au réseau local, par câble ou par wifi.<br>
|
||||
<b>2.</b> Je reçois une adresse IP, donnée par le routeur.<br>
|
||||
<b>3.</b> Ma demande part sur Internet, de routeur en routeur.<br>
|
||||
<b>4.</b> Elle arrive au serveur qui conserve le site.<br>
|
||||
<b>5.</b> Le serveur renvoie la page par le même chemin, jusqu'à mon adresse.</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Je m'entraine tout de suite</h3>
|
||||
<p class="muted" style="margin-top:0">Quel est le vrai mot pour chaque rôle du jeu ?</p>
|
||||
<table class="grille" id="tabRoles"></table>
|
||||
<div class="row" style="margin-top:12px"><button class="btn primary" id="roleSuiv">Révéler le mot suivant</button><button class="btn soft" id="roleReset">Tout masquer</button></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3 -->
|
||||
<section class="panel" id="p2"><div class="card">
|
||||
<div class="entete"><div><h2>L'adresse de mon poste</h2><p class="muted">Ton livret, activité 3. En binôme.</p></div><span class="score">20 min</span></div>
|
||||
<div class="steps" id="etapes"></div>
|
||||
<div class="row" style="margin-top:14px"><button class="btn soft" id="etprec">Étape précédente</button><button class="btn primary" id="etsuiv">Étape suivante</button></div>
|
||||
<div class="consigne" style="margin-top:20px"><small>Attention</small>
|
||||
Lis ton adresse dans les <b>paramètres</b> de ton poste, jamais sur un site web. Et ignore la ligne IPv6, longue, avec des lettres : c'est une autre façon d'écrire les adresses.</div>
|
||||
<div class="row"><button class="btn" id="constat">Ce qu'on constate</button></div>
|
||||
<div class="consigne cache" id="constatTxt" style="margin-top:14px"><small>Ce qu'on constate</small>
|
||||
Les deux adresses commencent de la même façon et finissent différemment. Le <b>début</b> désigne le <b>réseau</b>, le même pour les deux postes. La <b>fin</b> désigne l'<b>appareil</b>, différent pour chacun.</div>
|
||||
</div></section>
|
||||
|
||||
<!-- 4 -->
|
||||
<section class="panel" id="p3">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Du poste jusqu'au site</h2><p class="muted">Place les cinq mots dans les cases, puis vérifie.</p></div><span class="score">25 min</span></div>
|
||||
<figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 315" role="img" aria-label="Trajet d'une demande depuis mon poste jusqu'au serveur d'un site">
|
||||
|
||||
<defs><marker id="f" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#172554"/></marker><marker id="g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker></defs>
|
||||
<g font-family="Arial, Helvetica, sans-serif">
|
||||
<rect x="20" y="70" width="130" height="86" rx="10" fill="#f8fafc" stroke="#172554" stroke-width="3"/><path d="M60 156 h50 M85 156 v14 M62 170 h46" stroke="#172554" stroke-width="3"/>
|
||||
<text x="85" y="110" text-anchor="middle" font-size="15" font-weight="bold" fill="#172554">Mon poste</text><text x="85" y="132" text-anchor="middle" font-size="12" fill="#475569">et son navigateur</text>
|
||||
<rect x="20" y="195" width="130" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="36" y="215" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">1</text>
|
||||
<path d="M152 110 H232" stroke="#172554" stroke-width="3" stroke-dasharray="8 5" marker-end="url(#f)"/>
|
||||
<rect x="132" y="42" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="148" y="62" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">2</text>
|
||||
<rect x="238" y="82" width="120" height="60" rx="10" fill="#fff" stroke="#1d4ed8" stroke-width="3"/><path d="M262 82 v-16 M334 82 v-16" stroke="#1d4ed8" stroke-width="3"/>
|
||||
<rect x="238" y="158" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="254" y="178" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">3</text>
|
||||
<text x="298" y="118" text-anchor="middle" font-size="22" fill="#1d4ed8">⇄</text>
|
||||
<path d="M360 112 H408" stroke="#172554" stroke-width="3" marker-end="url(#f)"/>
|
||||
<ellipse cx="490" cy="112" rx="78" ry="48" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/>
|
||||
<text x="490" y="108" text-anchor="middle" font-size="12" fill="#5b21b6">des milliers</text><text x="490" y="124" text-anchor="middle" font-size="12" fill="#5b21b6">de réseaux</text>
|
||||
<rect x="430" y="176" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="446" y="196" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">4</text>
|
||||
<path d="M570 112 H626" stroke="#172554" stroke-width="3" marker-end="url(#f)"/>
|
||||
<rect x="630" y="62" width="140" height="100" rx="10" fill="#172554"/><path d="M650 88 h100 M650 108 h100 M650 128 h100" stroke="#6366f1" stroke-width="3"/>
|
||||
<rect x="640" y="176" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="656" y="196" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">5</text>
|
||||
<path d="M700 230 C700 305, 90 305, 85 250" stroke="#16a34a" stroke-width="3.5" fill="none" marker-end="url(#g)"/>
|
||||
<text x="400" y="252" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">le serveur renvoie la page web par le même chemin</text>
|
||||
</g></svg></figure>
|
||||
<div class="cases" id="cases"></div>
|
||||
<div class="row" style="margin-top:14px"><button class="btn primary" id="verifier">Vérifier</button><button class="btn soft" id="casesReset">Recommencer</button></div>
|
||||
<p class="feedback" id="casesMsg"></p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 20 questions. La correction s'affiche tout de suite.</p></div></div>
|
||||
<div class="consigne"><small>Avant de commencer</small>
|
||||
Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br>À la fin, recopie tes deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
|
||||
<div class="progres">
|
||||
<input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid #cbd5e1;border-radius:11px;min-width:220px;flex:1">
|
||||
<div class="barre"><i id="jauge"></i></div>
|
||||
<span class="score" id="avancement">0 / 20</span>
|
||||
</div>
|
||||
<h3>Exercice 1. Le bon mot</h3><div id="ex1"></div>
|
||||
<h3 style="margin-top:26px">Exercice 2. Le trajet</h3><div id="ex2"></div>
|
||||
<h3 style="margin-top:26px">Exercice 3. Vrai ou faux</h3><div id="ex3"></div>
|
||||
<h3 style="margin-top:26px">Exercice 4. Le défi</h3>
|
||||
<p class="muted" style="margin-top:0">Des situations que tu n'as pas vues. Sers-toi des règles du jeu.</p>
|
||||
<div id="ex4"></div>
|
||||
<div class="row" style="margin-top:22px"><button class="btn primary" id="voir">Voir mon résultat</button><button class="btn soft" id="reset">Tout recommencer</button></div>
|
||||
<div id="bilan" style="margin-top:20px">
|
||||
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
||||
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 20</span></div>
|
||||
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
||||
</div>
|
||||
<div id="gDetail" style="margin-bottom:16px"></div>
|
||||
<p class="muted"><b>Recopie ces deux lignes dans ton livret.</b></p>
|
||||
<textarea id="recap" readonly></textarea>
|
||||
<div class="row" style="margin-top:10px"><button class="btn" id="copier">Copier</button><span class="muted" id="copie"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5 -->
|
||||
<section class="panel" id="p4">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Je comprends. Internet, le web et le navigateur</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">15 min</span></div>
|
||||
<p>« Je vais sur Internet », « je cherche sur le web », « j'ouvre Google » : on emploie ces expressions comme si elles voulaient dire la même chose. Ce n'est pas le cas.</p>
|
||||
<div class="consigne"><small>Les routes, les magasins et le vélo</small>
|
||||
<b>Internet, ce sont les routes</b> : un immense réseau qui relie tout.<br>
|
||||
<b>Le web, ce sont les magasins</b> le long des routes : les sites, avec leurs pages reliées par des liens.<br>
|
||||
<b>Le navigateur, c'est ton vélo</b> : le moyen d'aller de magasin en magasin. Chrome, Firefox, Edge, Safari.</div>
|
||||
<p>Sur les mêmes routes circulent aussi d'autres choses : les <b>courriels</b>, les <b>jeux en ligne</b>, la <b>messagerie</b> comme WhatsApp ou Snapchat, la <b>musique</b> et les <b>vidéos</b> dans leurs applications. Tous utilisent Internet. Aucun n'a besoin d'un navigateur. Ce n'est pas le web.</p>
|
||||
<figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 260" role="img" aria-label="Internet est le réseau ; le web, le courriel, les jeux en ligne et la messagerie sont des services qui l'utilisent">
|
||||
<g font-family="Arial, Helvetica, sans-serif" text-anchor="middle">
|
||||
<text x="400" y="26" font-size="14" font-weight="bold" fill="#475569">DES SERVICES QUI UTILISENT INTERNET</text>
|
||||
<rect x="25" y="44" width="170" height="92" rx="14" fill="#dbeafe" stroke="#2563eb" stroke-width="3"/>
|
||||
<text x="110" y="76" font-size="18" font-weight="bold" fill="#2563eb">Le web</text>
|
||||
<text x="110" y="98" font-size="13" fill="#334155">pages et liens</text>
|
||||
<text x="110" y="120" font-size="12" fill="#64748b">avec : navigateur</text>
|
||||
<line x1="110" y1="138" x2="110" y2="176" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="218" y="44" width="170" height="92" rx="14" fill="#fef3c7" stroke="#b45309" stroke-width="3"/>
|
||||
<text x="303" y="76" font-size="18" font-weight="bold" fill="#b45309">Le courriel</text>
|
||||
<text x="303" y="98" font-size="13" fill="#334155">messages</text>
|
||||
<text x="303" y="120" font-size="12" fill="#64748b">avec : application mail</text>
|
||||
<line x1="303" y1="138" x2="303" y2="176" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="411" y="44" width="170" height="92" rx="14" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
||||
<text x="496" y="76" font-size="18" font-weight="bold" fill="#15803d">Jeux en ligne</text>
|
||||
<text x="496" y="98" font-size="13" fill="#334155">parties</text>
|
||||
<text x="496" y="120" font-size="12" fill="#64748b">avec : le jeu lui-même</text>
|
||||
<line x1="496" y1="138" x2="496" y2="176" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="604" y="44" width="170" height="92" rx="14" fill="#fce7f3" stroke="#be185d" stroke-width="3"/>
|
||||
<text x="689" y="76" font-size="18" font-weight="bold" fill="#be185d">Messagerie</text>
|
||||
<text x="689" y="98" font-size="13" fill="#334155">discussions</text>
|
||||
<text x="689" y="120" font-size="12" fill="#64748b">avec : application</text>
|
||||
<line x1="689" y1="138" x2="689" y2="176" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="20" y="176" width="760" height="62" rx="18" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/>
|
||||
<text x="400" y="204" font-size="19" font-weight="bold" fill="#5b21b6">INTERNET</text>
|
||||
<text x="400" y="226" font-size="13" fill="#5b21b6">le réseau des réseaux, qui transporte tout le reste</text>
|
||||
</g></svg></figure>
|
||||
<div class="consigne"><small>Le test</small><b>Est-ce que j'utilise un navigateur pour afficher des pages ?</b> Si oui, c'est le web. Si c'est une application, un jeu ou une console, c'est Internet, mais pas le web.</div>
|
||||
<p><b>Et Google ?</b> Ce n'est ni Internet, ni le web, ni un navigateur : c'est un site web qui sert à chercher d'autres sites. Chrome est le navigateur fabriqué par la même entreprise, d'où la confusion.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Web ou pas web ?</h3>
|
||||
<p class="muted" style="margin-top:0">On répond ensemble.</p>
|
||||
<div id="ex5"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6 -->
|
||||
<section class="panel" id="p5">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Dans ton livret. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
|
||||
<div class="row" style="margin-bottom:16px">
|
||||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
||||
<button class="btn soft" id="motReset">Tout masquer</button>
|
||||
<span class="score" id="motCompte">0 mot sur 8</span>
|
||||
</div>
|
||||
<div class="trace" id="trace"></div>
|
||||
<div class="consigne" style="margin-top:18px;margin-bottom:0"><small>Avant de partir</small>Rends ton badge. Ferme ta session.</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Mon lexique du cours 4</h3>
|
||||
<p class="muted" style="margin-top:0">Les mêmes définitions que dans ton livret. Clique sur un mot pour l'ouvrir.</p>
|
||||
<div class="accordeon" id="lexique"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<footer>Cours 4 · Formation numérique · 1re année · M. Courcelle</footer>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
var PHASES=[{t:"Le jeu du courrier",d:15,a:0},{t:"Les vrais mots",d:20,a:15},{t:"Mon adresse",d:20,a:35},
|
||||
{t:"Le trajet",d:25,a:55},{t:"Internet et le web",d:15,a:80},{t:"Ma trace écrite",d:5,a:95}];
|
||||
|
||||
/* ---------- chrono et onglets ---------- */
|
||||
var t0=null,tick=null,choisie=0,ecart=document.getElementById("ecart"),rail=document.getElementById("rail");
|
||||
function d2(n){return (n<10?"0":"")+n;}
|
||||
function minutes(){return t0?(Date.now()-t0)/60000:0;}
|
||||
function dessineRail(){rail.innerHTML="";PHASES.forEach(function(p,i){var b=document.createElement("button");b.className="tab"+(i===choisie?" active":"");b.innerHTML=(i+1)+". "+p.t+"<span>"+p.d+" min</span>";b.onclick=function(){montre(i);};rail.appendChild(b);});document.getElementById("sPhase").textContent=(choisie+1)+" sur 6";ecart.textContent="Activité "+(choisie+1)+" · "+PHASES[choisie].t;majReste();}
|
||||
function montre(i){choisie=i;for(var k=0;k<PHASES.length;k++){document.getElementById("p"+k).classList.toggle("active",k===i);}dessineRail();try{window.scrollTo({top:0,behavior:"smooth"});}catch(e){}}
|
||||
function majReste(){var e=document.getElementById("sReste");if(!t0){e.textContent="–";return;}var r=Math.ceil(PHASES[choisie].a+PHASES[choisie].d-minutes());e.textContent=r>0?(r+" min"):"terminé";}
|
||||
function rafraichit(){var s=Math.floor((Date.now()-t0)/1000);document.getElementById("sTemps").textContent=d2(Math.floor(s/60))+":"+d2(s%60);majReste();}
|
||||
document.getElementById("btnGo").onclick=function(){if(t0)return;t0=Date.now();this.textContent="En cours";tick=setInterval(rafraichit,1000);rafraichit();};
|
||||
document.getElementById("btnStop").onclick=function(){clearInterval(tick);t0=null;document.getElementById("sTemps").textContent="00:00";document.getElementById("sReste").textContent="–";document.getElementById("btnGo").textContent="Démarrer";};
|
||||
|
||||
function accordeon(zone,liste,plus){
|
||||
liste.forEach(function(e,i){
|
||||
var d=document.createElement("div");d.className="item";
|
||||
d.innerHTML='<button aria-expanded="false"><span class="n">'+(plus==="règle"?(i+1):e[0].charAt(0))+'</span><span class="t">'+e[0]+'</span><span class="plus">'+plus+'</span></button><div class="corps">'+e[1]+'</div>';
|
||||
d.querySelector("button").onclick=function(){var o=d.classList.toggle("ouvert");this.setAttribute("aria-expanded",o?"true":"false");this.querySelector(".plus").textContent=o?"masquer":plus;};
|
||||
zone.appendChild(d);
|
||||
});
|
||||
}
|
||||
function etapesPasAPas(zoneId,precId,suivId,data){
|
||||
var i=0,z=document.getElementById(zoneId);
|
||||
function dessine(){z.innerHTML="";data.forEach(function(e,k){var d=document.createElement("div");d.className="step"+(k===i?" on":"")+(k<i?" fait":"");d.innerHTML='<span class="n">'+(k+1)+'</span><div><h3>'+e[0]+'</h3><p>'+(k<=i?e[1]:"")+'</p></div>';z.appendChild(d);});}
|
||||
document.getElementById(suivId).onclick=function(){if(i<data.length-1){i++;dessine();}};
|
||||
document.getElementById(precId).onclick=function(){if(i>0){i--;dessine();}};
|
||||
dessine();
|
||||
}
|
||||
|
||||
/* ---------- 1. le jeu ---------- */
|
||||
accordeon(document.getElementById("regles"),[
|
||||
["Tu ne remets ton message qu'au routeur de ton réseau","Jamais directement à un camarade, même s'il est à côté de toi."],
|
||||
["Tu écris deux adresses","Celle du destinataire, et la tienne : celle de l'expéditeur."],
|
||||
["Le routeur ne lit que le troisième nombre","Si c'est son réseau, il livre. Sinon, il passe le message au routeur du bon réseau, par l'allée centrale."],
|
||||
["Une adresse incomplète ou inconnue finit à la corbeille","Le routeur ne devine pas."]],"règle");
|
||||
etapesPasAPas("manches","maPrec","maSuiv",[
|
||||
["Manche 1. Envoyer entre réseaux","Écris un message de cinq mots maximum à un camarade d'un autre réseau. N'oublie pas les deux adresses."],
|
||||
["Manche 2. Demander une page au serveur","Trois élèves demandent une page au serveur : la météo, une blague, un horaire. Le serveur répond."],
|
||||
["Manche 3. La panne","Le routeur du réseau 2 s'arrête. Que deviennent les messages ?"],
|
||||
["On fait le point","Retour à ta place. Livret, activité 1 : les deux questions."]]);
|
||||
|
||||
/* ---------- 2. le reseau anime ---------- */
|
||||
var NOEUDS=[];
|
||||
[1,2,3].forEach(function(n){[0,1,2].forEach(function(k){NOEUDS.push({id:"p"+n+k,res:n,adr:"10.0."+n+"."+(k+2),nom:"Poste 10.0."+n+"."+(k+2)});});});
|
||||
var selDe=document.getElementById("de"),selVers=document.getElementById("vers");
|
||||
NOEUDS.forEach(function(o,i){selDe.add(new Option(o.adr,o.id));selVers.add(new Option(o.adr,o.id));});
|
||||
selVers.add(new Option("Serveur 10.0.9.1","srv"));
|
||||
selDe.value="p10";selVers.value="p32";
|
||||
var enPanne=false,anim=[];
|
||||
var plan=document.getElementById("plan");
|
||||
function el(id){return plan.querySelector("#"+id);}
|
||||
function efface(){plan.querySelectorAll(".allume").forEach(function(x){x.classList.remove("allume");});anim.forEach(clearTimeout);anim=[];document.getElementById("journal").innerHTML="";}
|
||||
function noeud(id){return NOEUDS.filter(function(o){return o.id===id;})[0];}
|
||||
function trajet(a,b){
|
||||
var A=noeud(a),P=[],T=[];
|
||||
P.push([a,"Le "+A.nom.toLowerCase()+" écrit les deux adresses et remet le message à son routeur."]);
|
||||
P.push(["l_"+a,null]);
|
||||
P.push(["r"+A.res,"Le <b>routeur</b> du réseau "+A.res+" lit l'<b>adresse IP</b> du destinataire."]);
|
||||
if(b==="srv"){
|
||||
P.push(["l_r"+A.res,null]);P.push(["net","Le message sort du réseau local et voyage sur <b>Internet</b>."]);
|
||||
P.push(["l_srv",null]);P.push(["srv","Le <b>serveur</b> reçoit la demande et renvoie la page à l'adresse de l'expéditeur, par le même chemin."]);
|
||||
return P;
|
||||
}
|
||||
var B=noeud(b);
|
||||
if(A.res===B.res){P.push(["l_"+b,null]);P.push([b,"Même réseau : le routeur livre directement au "+B.nom.toLowerCase()+"."]);return P;}
|
||||
P.push(["l_r"+A.res,null]);P.push(["net","Autre réseau : le message passe sur <b>Internet</b>, l'allée centrale."]);
|
||||
P.push(["l_r"+B.res,null]);P.push(["r"+B.res,"Le <b>routeur</b> du réseau "+B.res+" reçoit le message et lit l'adresse."]);
|
||||
P.push(["l_"+b,null]);P.push([b,"Il le livre au "+B.nom.toLowerCase()+". Arrivé."]);
|
||||
return P;
|
||||
}
|
||||
document.getElementById("envoyer").onclick=function(){
|
||||
efface();
|
||||
var a=selDe.value,b=selVers.value;
|
||||
if(a===b){document.getElementById("journal").innerHTML='<li class="stop">Choisis deux postes différents.</li>';return;}
|
||||
var P=trajet(a,b),j=document.getElementById("journal"),t=0,bloque=false;
|
||||
P.forEach(function(p){
|
||||
if(bloque)return;
|
||||
var estPanne=enPanne&&p[0]==="r2";
|
||||
anim.push(setTimeout(function(){
|
||||
var e=el(p[0]); if(e&&!estPanne)e.classList.add("allume");
|
||||
if(estPanne){j.insertAdjacentHTML("beforeend",'<li class="stop">Le routeur du réseau 2 est en panne. Le message reste bloqué : rien n\'entre, rien ne sort du réseau 2.</li>');}
|
||||
else if(p[1]){j.insertAdjacentHTML("beforeend","<li>"+p[1]+"</li>");}
|
||||
},t));
|
||||
t+=p[1]?850:350;
|
||||
if(estPanne)bloque=true;
|
||||
});
|
||||
};
|
||||
document.getElementById("panne").onclick=function(){
|
||||
enPanne=!enPanne;el("r2").classList.toggle("panne",enPanne);
|
||||
this.textContent=enPanne?"Réparer le routeur 2":"Mettre le routeur 2 en panne";efface();
|
||||
};
|
||||
|
||||
var ROLES=[["Le badge avec quatre nombres","Adresse IP"],["L'élève qui lit l'adresse et oriente les messages","Routeur"],["L'allée centrale","Internet"],["Le bureau du professeur, qui fournit les pages","Serveur"],["Un groupe de tables","Réseau local"]];
|
||||
var ri=0;
|
||||
function dessineRoles(){var h="<tr><th>Dans le jeu</th><th>Le vrai mot</th></tr>";ROLES.forEach(function(r,i){h+="<tr"+(i<ri?' class="on"':"")+"><td>"+r[0]+"</td>"+(i<ri?"<td><b>"+r[1]+"</b></td>":'<td class="masque">.</td>')+"</tr>";});document.getElementById("tabRoles").innerHTML=h;}
|
||||
document.getElementById("roleSuiv").onclick=function(){if(ri<ROLES.length){ri++;dessineRoles();}};
|
||||
document.getElementById("roleReset").onclick=function(){ri=0;dessineRoles();};
|
||||
dessineRoles();
|
||||
|
||||
/* ---------- 3. adresse du poste ---------- */
|
||||
etapesPasAPas("etapes","etprec","etsuiv",[
|
||||
["Ouvre les Paramètres","La roue dentée, puis « Réseau et Internet »."],
|
||||
["Ouvre ta connexion","Wi-Fi ou Ethernet, puis ses propriétés."],
|
||||
["Cherche la ligne « Adresse IPv4 »","C'est ton adresse IP. Note-la dans ton livret."],
|
||||
["Compare avec ton voisin","Quels nombres sont identiques ? Lesquels changent ?"]]);
|
||||
document.getElementById("constat").onclick=function(){document.getElementById("constatTxt").classList.toggle("on");};
|
||||
|
||||
/* ---------- 4. schema a completer ---------- */
|
||||
var MOTS5=["adresse IP","connexion","routeur","Internet","serveur"];
|
||||
var zc=document.getElementById("cases");
|
||||
MOTS5.forEach(function(m,i){
|
||||
var l=document.createElement("label");l.textContent="Case "+(i+1);
|
||||
var s=document.createElement("select");s.add(new Option("choisir…",""));
|
||||
["adresse IP","connexion","Internet","routeur","serveur"].forEach(function(o){s.add(new Option(o,o));});
|
||||
l.appendChild(s);zc.appendChild(l);
|
||||
});
|
||||
document.getElementById("verifier").onclick=function(){
|
||||
var ok=0;zc.querySelectorAll("select").forEach(function(s,i){var b=s.value===MOTS5[i];s.classList.remove("ok","ko");if(s.value)s.classList.add(b?"ok":"ko");if(b)ok++;});
|
||||
document.getElementById("casesMsg").textContent=ok===5?"Bravo, le trajet est complet.":ok+" case"+(ok>1?"s":"")+" sur 5. Suis le trajet dans l'ordre : le poste, le lien, l'appareil qui oriente, le réseau des réseaux, puis le serveur.";
|
||||
};
|
||||
document.getElementById("casesReset").onclick=function(){zc.querySelectorAll("select").forEach(function(s){s.value="";s.classList.remove("ok","ko");});document.getElementById("casesMsg").textContent="";};
|
||||
|
||||
/* ---------- moteur de questions ---------- */
|
||||
var rep={},TOTAL=20;
|
||||
function poser(zone,cle,txt,opts,bon,expl,compte){
|
||||
var d=document.createElement("div");d.className="q";
|
||||
d.innerHTML='<div class="txt">'+txt+'</div><div class="opts"></div><div class="expl">'+expl+'</div>';
|
||||
var z=d.querySelector(".opts");
|
||||
opts.forEach(function(o,i){var b=document.createElement("button");b.textContent=o;
|
||||
b.onclick=function(){if(rep[cle]!==undefined)return;rep[cle]=i;d.classList.add("done",i===bon?"bon":"faux");
|
||||
z.querySelectorAll("button").forEach(function(x,j){x.disabled=true;if(j===bon)x.classList.add("pick");else if(j===i)x.classList.add("rate");});
|
||||
if(compte)maj();};
|
||||
z.appendChild(b);});
|
||||
zone.appendChild(d);
|
||||
}
|
||||
function maj(){var n=Object.keys(rep).filter(function(k){return k.charAt(0)!=="z";}).length;document.getElementById("avancement").textContent=n+" / "+TOTAL;document.getElementById("jauge").style.width=(n/TOTAL*100)+"%";document.getElementById("sEx").textContent=n+" sur "+TOTAL;}
|
||||
|
||||
var OPT1=["Réseau","Connexion","Adresse IP","Routeur"];
|
||||
var EX1=[["Des appareils reliés entre eux pour échanger des informations.",0,"C'est un réseau. Celui d'un seul lieu s'appelle un réseau local."],
|
||||
["Le lien entre un appareil et le réseau, par câble ou par wifi.",1,"C'est la connexion : la route qui mène au réseau."],
|
||||
["Quatre nombres qui identifient un appareil.",2,"C'est l'adresse IP, comme 10.0.2.3."],
|
||||
["L'appareil qui relie le réseau local aux autres réseaux.",3,"C'est le routeur. Il lit l'adresse et oriente le message."],
|
||||
["Chez toi, il est caché dans la box du fournisseur d'accès.",3,"La box contient un routeur, et aussi une borne wifi."],
|
||||
["Sans elle, la réponse ne sait pas où revenir.",2,"L'adresse IP de l'expéditeur. C'est pour ça qu'il fallait l'écrire dans le jeu."]];
|
||||
var EX2=[["Juste après « je me connecte au réseau », que se passe-t-il ?",["Je reçois une adresse IP","La demande arrive au serveur","Le serveur renvoie la page"],0,"Le routeur donne une adresse à l'appareil qui se connecte. Ensuite seulement, la demande peut partir."],
|
||||
["Qui envoie ma demande hors du réseau local ?",["Le navigateur","Le routeur","Le serveur"],1,"Le routeur relie le réseau local aux autres réseaux."],
|
||||
["Où se trouve le site que je demande ?",["Dans mon routeur","Sur un serveur","Dans mon navigateur"],1,"Les sites sont rangés sur des serveurs, quelque part dans le monde."],
|
||||
["Par où revient la page ?",["Directement dans mon écran","Par le même chemin, jusqu'à mon adresse","Par le wifi du voisin"],1,"Elle refait le trajet à l'envers, grâce à l'adresse de l'expéditeur."]];
|
||||
var VF=["Vrai","Faux"];
|
||||
var EX3=[["Deux postes de la même classe ont exactement la même adresse IP.",1,"Faux. Chaque appareil a sa propre adresse : le début est le même, la fin change."],
|
||||
["Le wifi est une connexion sans fil.",0,"Vrai. Une connexion peut passer par un câble ou par le wifi."],
|
||||
["Si le routeur tombe en panne, le réseau local est coupé des autres réseaux.",0,"Vrai. Les appareils restent reliés entre eux, mais plus rien ne sort ni n'entre."],
|
||||
["Une adresse IP, c'est comme un mot de passe.",1,"Faux. Une adresse sert à trouver un appareil, pas à prouver qui on est."],
|
||||
["Le routeur lit le contenu de tous les messages.",1,"Faux. Il lit seulement l'adresse, comme le routeur du jeu ne lisait que le troisième nombre."],
|
||||
["Pour trouver l'adresse IP de mon poste, je la lis dans ses paramètres.",0,"Vrai. Un site web te donnerait l'adresse de toute l'école, la même pour tout le monde."]];
|
||||
var EX4=[["Ton téléphone affiche « connecté, sans Internet ». Qu'est-ce qui fonctionne ?",["Rien du tout","La connexion au réseau local","Internet, mais pas le wifi"],1,"Le téléphone est bien relié à la borne, donc au réseau local. C'est la sortie vers Internet qui ne marche pas, souvent à cause de la box."],
|
||||
["Dans le jeu, 10.0.2.5 et 10.0.2.9 sont-ils dans le même réseau ?",["Oui","Non"],0,"Le troisième nombre est le même : 2. Même réseau, appareils différents."],
|
||||
["Dans le jeu, 10.0.1.4 et 10.0.3.4 sont-ils dans le même réseau ?",["Oui","Non"],1,"Le troisième nombre change : 1 et 3. Deux réseaux différents, même si la fin est pareille."],
|
||||
["Un message part de 10.0.1.2 vers 10.0.3.5. Combien de routeurs traverse-t-il ?",["Un","Deux","Trois"],1,"Le routeur du réseau 1, qui l'envoie sur Internet, puis celui du réseau 3, qui le livre."]];
|
||||
EX1.forEach(function(q,i){poser(document.getElementById("ex1"),"a"+i,q[0],OPT1,q[1],q[2],true);});
|
||||
EX2.forEach(function(q,i){poser(document.getElementById("ex2"),"b"+i,q[0],q[1],q[2],q[3],true);});
|
||||
EX3.forEach(function(q,i){poser(document.getElementById("ex3"),"c"+i,q[0],VF,q[1],q[2],true);});
|
||||
EX4.forEach(function(q,i){poser(document.getElementById("ex4"),"d"+i,q[0],q[1],q[2],q[3],true);});
|
||||
|
||||
var OPT5=["Le web","Internet sans le web","Ni l'un ni l'autre"];
|
||||
[["Tu lis un article de Wikipédia dans Chrome.",0,"Un navigateur affiche des pages : c'est le web."],
|
||||
["Tu envoies un message sur WhatsApp.",1,"L'application utilise Internet, sans navigateur : ce n'est pas le web."],
|
||||
["Tu joues en ligne sur une console.",1,"Le jeu passe par Internet, mais pas par le web."],
|
||||
["Tu cherches un horaire de bus sur un site, dans ton navigateur.",0,"Un site, dans un navigateur : le web."],
|
||||
["Tu regardes une vidéo sur youtube.com, dans ton navigateur.",0,"Le site youtube.com dans un navigateur : le web."],
|
||||
["Tu reçois une notification Snapchat.",1,"L'application utilise Internet, sans navigateur."],
|
||||
["Tu imprimes un document sur l'imprimante de la classe.",2,"L'imprimante est dans le réseau local. Le document ne sort jamais de l'école : ni Internet, ni le web. Un réseau n'est pas forcément Internet."]
|
||||
].forEach(function(q,i){poser(document.getElementById("ex5"),"z"+i,q[0],OPT5,q[1],q[2],false);});
|
||||
|
||||
function compte(pref,src,idx){var n=0;src.forEach(function(q,i){if(rep[pref+i]===q[idx])n++;});return n;}
|
||||
document.getElementById("voir").onclick=function(){
|
||||
var s1=compte("a",EX1,1),s2=compte("b",EX2,2),s3=compte("c",EX3,1),s4=compte("d",EX4,2),t=s1+s2+s3+s4;
|
||||
document.getElementById("gTotal").textContent=t;
|
||||
document.getElementById("gMot").textContent=t>=18?"Très bien. Tu peux passer aux exercices écrits de ton livret.":t>=14?"C'est acquis dans l'ensemble. Relis ton mémo pour les points ratés.":t>=10?"La base est là. Relis la page sur le réseau et le trajet, puis recommence.":"Il faut reprendre. Relis les pages « Je comprends » de ton livret, puis recommence.";
|
||||
document.getElementById("gDetail").innerHTML='<table class="grille"><tr><th>Exercice</th><th>Résultat</th></tr><tr><td>1. Le bon mot</td><td><b>'+s1+' / 6</b></td></tr><tr><td>2. Le trajet</td><td><b>'+s2+' / 4</b></td></tr><tr><td>3. Vrai ou faux</td><td><b>'+s3+' / 6</b></td></tr><tr><td>4. Le défi</td><td><b>'+s4+' / 4</b></td></tr></table>';
|
||||
var nom=(document.getElementById("nom").value||"").trim()||"...................";
|
||||
document.getElementById("recap").value="Cours 4 – exercices – "+nom+"\nBon mot "+s1+"/6 · Trajet "+s2+"/4 · Vrai-faux "+s3+"/6 · Défi "+s4+"/4 · Total "+t+"/20";
|
||||
document.getElementById("bilan").classList.add("on");
|
||||
try{document.getElementById("bilan").scrollIntoView({behavior:"smooth"});}catch(e){}
|
||||
};
|
||||
document.getElementById("copier").onclick=function(){var t=document.getElementById("recap");t.select();var ok=false;try{ok=document.execCommand("copy");}catch(e){}document.getElementById("copie").textContent=ok?"Copié.":"Sélectionne le texte et copie-le à la main.";};
|
||||
document.getElementById("reset").onclick=function(){location.reload();};
|
||||
|
||||
/* ---------- 6. trace ---------- */
|
||||
var TRACE=[["Un ",1,", ce sont des appareils reliés entre eux pour échanger des informations. Chaque appareil y est relié par une ",2," : un câble ou le wifi."],
|
||||
["Chaque appareil possède une ",3,", quatre nombres qui permettent de le retrouver. Le ",4," lit l'adresse de chaque message et l'envoie dans la bonne direction."],
|
||||
[5," est le réseau des réseaux. Quand je demande une page, ma demande voyage jusqu'au ",6," qui la conserve, puis la page revient par le même chemin."],
|
||||
["Le ",7," est le logiciel qui affiche les pages. Le ",8," est un service qui utilise Internet, mais ce n'est pas Internet."]];
|
||||
var MOTS={1:"réseau",2:"connexion",3:"adresse IP",4:"routeur",5:"Internet",6:"serveur",7:"navigateur",8:"web"};
|
||||
var rv=0,zt=document.getElementById("trace");
|
||||
function dessineTrace(){zt.innerHTML="<h3>Cours 4. Comment ça circule</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){if(typeof x==="number")return x<=rv?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd"> </span>';return x;}).join("")+"</p>";}).join("");document.getElementById("motCompte").textContent=rv+" mot"+(rv>1?"s":"")+" sur 8";}
|
||||
document.getElementById("motSuiv").onclick=function(){if(rv<8){rv++;dessineTrace();}};
|
||||
document.getElementById("motReset").onclick=function(){rv=0;dessineTrace();};
|
||||
dessineTrace();
|
||||
|
||||
/* ---------- lexique, genere par lexique/build.py ---------- */
|
||||
var LEXIQUE=[
|
||||
["Adresse IP","Le numéro qui identifie un appareil sur un réseau, écrit en quatre nombres séparés par des points, par exemple 10.0.1.12. Sans adresse, un message ne sait pas où aller."],
|
||||
["Box","L'appareil installé à la maison par le fournisseur d'accès. Il contient un routeur et une borne wifi, et relie le réseau de la maison à Internet."],
|
||||
["Connexion","Le lien qui relie un appareil à un réseau, par un câble ou sans fil, par le wifi."],
|
||||
["Favori","Une page web enregistrée dans le navigateur pour la retrouver en un clic. On en reparle au cours 5."],
|
||||
["Fournisseur d'accès","L'entreprise qui relie une maison ou une école à Internet, contre un abonnement."],
|
||||
["Internet","Le réseau mondial qui relie entre eux des millions de réseaux. C'est le réseau des réseaux."],
|
||||
["Navigateur","Le logiciel qui permet d'afficher les pages du web. Chrome, Firefox, Edge, Safari. Ce n'est pas Internet : c'est un logiciel qui l'utilise."],
|
||||
["Page web","Un document affiché par le navigateur, qui peut contenir du texte, des images et des liens vers d'autres pages."],
|
||||
["Réseau","Des appareils reliés entre eux pour échanger des informations."],
|
||||
["Réseau local","Le réseau d'un seul lieu : une maison, une école, une classe. Ses appareils sont reliés au même routeur."],
|
||||
["Routeur","L'appareil qui relie un réseau local à d'autres réseaux. Il lit l'adresse de chaque message et l'envoie dans la bonne direction."],
|
||||
["Serveur","Un ordinateur qui reste allumé en permanence pour conserver des fichiers et les fournir à d'autres appareils."],
|
||||
["Site web","Un ensemble de pages web qui se trouvent sur un même serveur, sous une même adresse."],
|
||||
["Web","Le service qui permet de consulter des pages reliées entre elles par des liens. Il utilise Internet, mais ce n'est pas Internet : les courriels et les jeux en ligne passent aussi par Internet sans être le web."],
|
||||
["Wifi","Une connexion sans fil, par ondes radio, entre un appareil et une borne reliée au réseau."]];
|
||||
accordeon(document.getElementById("lexique"),LEXIQUE,"définition");
|
||||
|
||||
dessineRail();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,772 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Bloc 4 – pilotage</title>
|
||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
||||
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
|
||||
button,input,select{font:inherit}
|
||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
||||
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
|
||||
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
|
||||
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
|
||||
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
|
||||
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
|
||||
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
|
||||
.hero a.up:hover{color:#fff}
|
||||
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
||||
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
|
||||
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hero-chip b{font-size:14px}
|
||||
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
|
||||
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
|
||||
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
|
||||
|
||||
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
|
||||
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
|
||||
.stat strong{display:block;font-size:22px;margin-top:3px}
|
||||
.stat small{color:#64748b;font-weight:800}
|
||||
.stat.ok strong{color:var(--green)}
|
||||
|
||||
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
|
||||
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
|
||||
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
|
||||
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
|
||||
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
|
||||
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
|
||||
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
|
||||
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
|
||||
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
|
||||
|
||||
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
|
||||
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
|
||||
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
|
||||
.tab:hover{border-color:#93c5fd}
|
||||
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
|
||||
.tab.active span{color:#c7dcff}
|
||||
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
|
||||
|
||||
.panel{display:none}.panel.active{display:block}
|
||||
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
|
||||
.card h2,.card h3{margin-top:0}
|
||||
.card h2{font-size:26px;letter-spacing:-.5px}
|
||||
.muted{color:var(--muted);line-height:1.6}
|
||||
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
||||
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
|
||||
.btn:hover{filter:brightness(.97)}
|
||||
.btn.primary{background:#2563eb;color:#fff}
|
||||
.btn.soft{background:#f1f5f9;color:#334155}
|
||||
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
|
||||
.feedback{min-height:31px;margin-top:12px;font-weight:850}
|
||||
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
|
||||
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
|
||||
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
|
||||
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
|
||||
.info b{color:var(--ink)}
|
||||
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
|
||||
.info.alerte b{color:#991b1b}
|
||||
|
||||
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
|
||||
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
|
||||
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
|
||||
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
|
||||
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
|
||||
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
|
||||
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
|
||||
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
|
||||
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
|
||||
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
|
||||
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
|
||||
.colonne li button:hover{color:var(--red)}
|
||||
|
||||
.accordeon{display:grid;gap:10px}
|
||||
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
|
||||
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
|
||||
.item>button:hover{background:#f8fbff}
|
||||
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
|
||||
.item .t{font-weight:850;font-size:17px;flex:1}
|
||||
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
|
||||
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
|
||||
.item.ouvert .corps{display:block}
|
||||
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.item.ouvert .n{background:#2563eb;color:#fff}
|
||||
|
||||
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
|
||||
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
|
||||
.qtag.cle{background:#fef3c7;color:#92400e}
|
||||
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
|
||||
.answer-grid{display:grid;gap:8px}
|
||||
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
|
||||
.answer.ok{border-color:#22c55e;background:#f0fdf4}
|
||||
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
|
||||
.reveal.on{display:block}
|
||||
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
|
||||
|
||||
.steps{display:grid;gap:11px}
|
||||
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
|
||||
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.step.fait{opacity:1}
|
||||
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
|
||||
.step.on .n{background:#2563eb;color:#fff}
|
||||
.step.fait .n{background:#dcfce7;color:#15803d}
|
||||
.step h3{margin:0 0 4px;font-size:17px}
|
||||
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
|
||||
|
||||
figure{margin:0 0 18px}
|
||||
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
||||
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
|
||||
|
||||
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
|
||||
.trace h3{margin:0 0 14px;font-size:22px}
|
||||
.trace p{margin:0 0 .5em}
|
||||
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
|
||||
|
||||
.check{display:grid;gap:9px}
|
||||
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
|
||||
.check label:hover{border-color:#93c5fd}
|
||||
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
|
||||
.check input:checked+span{color:var(--green);font-weight:900}
|
||||
|
||||
table.grille{width:100%;border-collapse:collapse;font-size:15px}
|
||||
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
|
||||
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
|
||||
table.grille td.masque{color:transparent;background:#f8fafc}
|
||||
table.grille tr.on td{background:#f0fdf4}
|
||||
table.grille td b{color:#15803d}
|
||||
|
||||
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
|
||||
.module{margin-bottom:30px}
|
||||
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
|
||||
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
|
||||
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
|
||||
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
|
||||
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
|
||||
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
|
||||
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
|
||||
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
|
||||
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
|
||||
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
|
||||
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
||||
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
|
||||
.et.eval{background:#fee2e2;color:#991b1b}
|
||||
.et.fac{background:#f3e8ff;color:#6b21a8}
|
||||
.et.pret{background:#dcfce7;color:#15803d}
|
||||
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
|
||||
a.bloc .n{background:#2563eb;color:#fff}
|
||||
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
|
||||
.bloc.vide h3{font-weight:800}
|
||||
.masque{display:none!important}
|
||||
|
||||
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
|
||||
|
||||
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
|
||||
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
|
||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
||||
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
|
||||
|
||||
.progres{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:0 0 20px 20px;padding:12px 18px;box-shadow:0 6px 20px #0f172a12;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
|
||||
.barre{flex:1;min-width:180px;height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}
|
||||
.barre i{display:block;height:100%;width:0;background:#2563eb;border-radius:99px;transition:width .25s}
|
||||
.q{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-bottom:10px}
|
||||
.q.bon{border-color:#22c55e;background:#f2fdf6}
|
||||
.q.faux{border-color:#f59e0b;background:#fffbeb}
|
||||
.q .txt{font-weight:800;margin-bottom:10px;font-size:17px}
|
||||
.q .opts{display:flex;gap:8px;flex-wrap:wrap}
|
||||
.q .opts button{border:2px solid #dbe3ef;background:#fff;border-radius:11px;padding:9px 14px;font-weight:800;cursor:pointer;color:#334155}
|
||||
.q .opts button:hover:not(:disabled){border-color:#2563eb;color:#1d4ed8}
|
||||
.q .opts button:disabled{cursor:default;opacity:.55}
|
||||
.q .opts button.pick{border-color:#22c55e;background:#dcfce7;color:#15803d;opacity:1}
|
||||
.q .opts button.rate{border-color:#f59e0b;background:#fef3c7;color:#92400e;opacity:1}
|
||||
.q .expl{display:none;margin-top:10px;font-size:15px;color:#475569;line-height:1.55;border-left:3px solid #cbd5e1;padding-left:12px}
|
||||
.q.done .expl{display:block}
|
||||
.figpetit{max-width:560px;margin:0 auto 14px}
|
||||
#bilan{display:none}
|
||||
#bilan.on{display:block}
|
||||
.gros{font-size:44px;font-weight:950;line-height:1;color:#2563eb}
|
||||
textarea{width:100%;min-height:110px;border:2px solid #cbd5e1;border-radius:12px;padding:12px;font:inherit;font-size:14px;resize:vertical}
|
||||
#plan svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
||||
#plan .allume rect,#plan rect.allume{stroke:#dc2626!important;stroke-width:5!important}
|
||||
#plan line.allume{stroke:#dc2626!important;stroke-width:7!important}
|
||||
#plan .panne rect{fill:#fee2e2!important;stroke:#991b1b!important;stroke-dasharray:6 4}
|
||||
.envoi{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}
|
||||
.envoi select{padding:10px 12px;border:2px solid #cbd5e1;border-radius:11px;font-weight:800}
|
||||
.journal{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
|
||||
.journal li{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:9px 13px;font-weight:700}
|
||||
.journal li.stop{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
|
||||
.journal li b{color:#1d4ed8}
|
||||
.cases{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
|
||||
.cases label{font-weight:900;font-size:13px;color:#475569;display:grid;gap:5px}
|
||||
.cases select{padding:9px;border:2px solid #cbd5e1;border-radius:10px;font-weight:800}
|
||||
.cases select.ok{border-color:#22c55e;background:#f0fdf4}
|
||||
.cases select.ko{border-color:#f59e0b;background:#fffbeb}
|
||||
.cache{display:none}.cache.on{display:block}
|
||||
@media(max-width:700px){.cases{grid-template-columns:1fr 1fr}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<section class="hero">
|
||||
<div>
|
||||
<a class="up" href="pilotage.html"><svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg> Retour au menu</a>
|
||||
<div class="eyebrow">Document enseignant · Module 1 · Semaine 4 · Bloc 4 sur 35</div>
|
||||
<h1>Comment ça circule</h1>
|
||||
<p style="margin-bottom:10px"><a href="1TC-NUM_bloc-04_comment-ca-circule.html" style="color:#fff;font-weight:800">Ouvrir la version à projeter aux élèves</a></p><p>Obligatoires : connexion, routeur, réseau, adresse IP. Facultatifs, non cotables : serveur, web, Internet. Le mot que les élèves emploient le plus est justement celui qui n'est pas exigible.</p>
|
||||
<div class="badges">
|
||||
<span class="badge">S17 · connexion, routeur, réseau, adresse IP</span>
|
||||
<span class="badge">serveur, web, Internet · facultatifs</span>
|
||||
<span class="badge warn">Ne pas projeter</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 7l9 6 9-6"/></svg><b>Le courrier</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="12" width="18" height="7" rx="2"/><path d="M7 12V8M17 12V8M7 16h.01M11 16h.01"/></svg><b>Le routeur</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 7h4M4 12h7M4 17h5M14 7h6M14 12h6M14 17h6"/></svg><b>L'adresse IP</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg><b>Internet</b></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="dashboard">
|
||||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
||||
<div class="stat"><small>Temps depuis le début</small><strong id="sTemps">00:00</strong></div>
|
||||
<div class="stat"><small>Il reste pour cette activité</small><strong id="sReste">–</strong></div>
|
||||
<div class="stat"><small>Exercices répondus</small><strong id="sEx">0 sur 20</strong></div>
|
||||
</section>
|
||||
|
||||
<div class="card" style="padding:16px 18px">
|
||||
<div class="row">
|
||||
<button class="btn primary" id="btnGo">Démarrer</button>
|
||||
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
||||
<span class="ecart" id="ecart" style="background:#f1f5f9;border:1px solid var(--line);color:#475569">Activité 1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navtabs n6" id="rail"></nav>
|
||||
|
||||
<!-- 1 -->
|
||||
<section class="panel active" id="p0"><div class="card">
|
||||
<div class="entete"><div><h2>Le jeu du courrier</h2><p class="muted">Ordinateurs éteints. La classe devient un réseau.</p></div><span class="score">15 min</span></div>
|
||||
<figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" role="img" aria-label="Plan du jeu du courrier : trois réseaux locaux reliés par Internet, et un serveur">
|
||||
|
||||
<g font-family="Arial, Helvetica, sans-serif">
|
||||
<rect x="15" y="20" width="230" height="215" rx="16" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5" opacity=".55"/>
|
||||
<text x="130" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#1d4ed8">RÉSEAU 1</text>
|
||||
<line x1="60" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line x1="130" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line x1="200" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<g><rect x="29" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M49 102 h22 M60 102 v6 M45 108 h30" stroke="#172554" stroke-width="2.2"/><text x="60" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.2</text></g>
|
||||
<g><rect x="99" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M119 102 h22 M130 102 v6 M115 108 h30" stroke="#172554" stroke-width="2.2"/><text x="130" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.3</text></g>
|
||||
<g><rect x="169" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M189 102 h22 M200 102 v6 M185 108 h30" stroke="#172554" stroke-width="2.2"/><text x="200" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.4</text></g>
|
||||
<g><rect x="75" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="3"/><text x="130" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#1d4ed8">Routeur</text><text x="130" y="195" text-anchor="middle" font-size="11.5" fill="#1d4ed8">10.0.1.1</text></g>
|
||||
<line x1="130" y1="204" x2="130" y2="262" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="285" y="20" width="230" height="215" rx="16" fill="#dcfce7" stroke="#15803d" stroke-width="2.5" opacity=".55"/>
|
||||
<text x="400" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">RÉSEAU 2</text>
|
||||
<line x1="330" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line x1="400" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line x1="470" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<g><rect x="299" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M319 102 h22 M330 102 v6 M315 108 h30" stroke="#172554" stroke-width="2.2"/><text x="330" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.2</text></g>
|
||||
<g><rect x="369" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M389 102 h22 M400 102 v6 M385 108 h30" stroke="#172554" stroke-width="2.2"/><text x="400" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.3</text></g>
|
||||
<g><rect x="439" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M459 102 h22 M470 102 v6 M455 108 h30" stroke="#172554" stroke-width="2.2"/><text x="470" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.4</text></g>
|
||||
<g><rect x="345" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#15803d" stroke-width="3"/><text x="400" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#15803d">Routeur</text><text x="400" y="195" text-anchor="middle" font-size="11.5" fill="#15803d">10.0.2.1</text></g>
|
||||
<line x1="400" y1="204" x2="400" y2="262" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="555" y="20" width="230" height="215" rx="16" fill="#fef3c7" stroke="#b45309" stroke-width="2.5" opacity=".55"/>
|
||||
<text x="670" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#b45309">RÉSEAU 3</text>
|
||||
<line x1="600" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line x1="670" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line x1="740" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<g><rect x="569" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M589 102 h22 M600 102 v6 M585 108 h30" stroke="#172554" stroke-width="2.2"/><text x="600" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.2</text></g>
|
||||
<g><rect x="639" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M659 102 h22 M670 102 v6 M655 108 h30" stroke="#172554" stroke-width="2.2"/><text x="670" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.3</text></g>
|
||||
<g><rect x="709" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M729 102 h22 M740 102 v6 M725 108 h30" stroke="#172554" stroke-width="2.2"/><text x="740" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.4</text></g>
|
||||
<g><rect x="615" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#b45309" stroke-width="3"/><text x="670" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#b45309">Routeur</text><text x="670" y="195" text-anchor="middle" font-size="11.5" fill="#b45309">10.0.3.1</text></g>
|
||||
<line x1="670" y1="204" x2="670" y2="262" stroke="#94a3b8" stroke-width="4"/>
|
||||
<g><rect x="20" y="262" width="760" height="44" rx="22" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/><text x="400" y="290" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">INTERNET · l'allée centrale, qui relie les routeurs entre eux</text></g>
|
||||
<line x1="400" y1="306" x2="400" y2="332" stroke="#94a3b8" stroke-width="4"/>
|
||||
<g><rect x="320" y="332" width="160" height="54" rx="10" fill="#172554"/><text x="400" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="#ffffff">Serveur</text><text x="400" y="374" text-anchor="middle" font-size="12" fill="#c7d2fe">10.0.9.1 · bureau du prof</text></g>
|
||||
</g></svg></figure>
|
||||
<div class="accordeon" id="regles"></div>
|
||||
<h3 style="margin-top:22px">Les trois manches</h3>
|
||||
<div class="steps" id="manches"></div>
|
||||
<div class="row" style="margin-top:12px"><button class="btn soft" id="maPrec">Manche précédente</button><button class="btn primary" id="maSuiv">Manche suivante</button></div>
|
||||
<div class="info alerte"><b>Tout doit être en place avant l'entrée des élèves.</b> Trois îlots, allée centrale dégagée, badges posés sur les tables, cartes « routeur » posées, papiers et cartes-pages sur ton bureau. Sinon le jeu s'enlise. Matériel imprimable en annexes A et B de la fiche.</div>
|
||||
<div class="info"><b>Les routeurs sont le goulot d'étranglement.</b> Choisis-les à l'avance, parmi des élèves calmes qui lisent vite.</div>
|
||||
<div class="info"><b>Manche 2, deux moments à provoquer.</b> Un élève demande une page qui n'existe pas : tu renvoies la carte « Erreur 404 », la vraie réponse d'un serveur. Un autre oublie son adresse d'expéditeur : tu ne peux pas répondre, dis-le à voix haute. Les deux servent en phase 2.</div>
|
||||
<div class="info"><b>Si tu dois distribuer les postes.</b> Jamais pendant le jeu. Les phases 1 et 2 sont débranchées : distribue entre la phase 2 et la phase 3.</div>
|
||||
</div></section>
|
||||
|
||||
<!-- 2 -->
|
||||
<section class="panel" id="p1">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>On rejoue le jeu, avec les vrais mots</h2><p class="muted">Choisis qui envoie et à qui. Le trajet s'allume étape par étape.</p></div><span class="score">20 min</span></div>
|
||||
<div class="envoi">
|
||||
<label>De <select id="de"></select></label>
|
||||
<label>vers <select id="vers"></select></label>
|
||||
<button class="btn primary" id="envoyer">Envoyer</button>
|
||||
<button class="btn soft" id="panne">Mettre le routeur 2 en panne</button>
|
||||
</div>
|
||||
<div id="plan"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" role="img" aria-label="Plan du jeu du courrier : trois réseaux locaux reliés par Internet, et un serveur">
|
||||
|
||||
<g font-family="Arial, Helvetica, sans-serif">
|
||||
<rect x="15" y="20" width="230" height="215" rx="16" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5" opacity=".55"/>
|
||||
<text x="130" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#1d4ed8">RÉSEAU 1</text>
|
||||
<line id="l_p10" x1="60" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line id="l_p11" x1="130" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line id="l_p12" x1="200" y1="131" x2="130" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<g id="p10"><rect x="29" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M49 102 h22 M60 102 v6 M45 108 h30" stroke="#172554" stroke-width="2.2"/><text x="60" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.2</text></g>
|
||||
<g id="p11"><rect x="99" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M119 102 h22 M130 102 v6 M115 108 h30" stroke="#172554" stroke-width="2.2"/><text x="130" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.3</text></g>
|
||||
<g id="p12"><rect x="169" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M189 102 h22 M200 102 v6 M185 108 h30" stroke="#172554" stroke-width="2.2"/><text x="200" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.1.4</text></g>
|
||||
<g id="r1"><rect x="75" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="3"/><text x="130" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#1d4ed8">Routeur</text><text x="130" y="195" text-anchor="middle" font-size="11.5" fill="#1d4ed8">10.0.1.1</text></g>
|
||||
<line id="l_r1" x1="130" y1="204" x2="130" y2="262" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="285" y="20" width="230" height="215" rx="16" fill="#dcfce7" stroke="#15803d" stroke-width="2.5" opacity=".55"/>
|
||||
<text x="400" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">RÉSEAU 2</text>
|
||||
<line id="l_p20" x1="330" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line id="l_p21" x1="400" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line id="l_p22" x1="470" y1="131" x2="400" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<g id="p20"><rect x="299" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M319 102 h22 M330 102 v6 M315 108 h30" stroke="#172554" stroke-width="2.2"/><text x="330" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.2</text></g>
|
||||
<g id="p21"><rect x="369" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M389 102 h22 M400 102 v6 M385 108 h30" stroke="#172554" stroke-width="2.2"/><text x="400" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.3</text></g>
|
||||
<g id="p22"><rect x="439" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M459 102 h22 M470 102 v6 M455 108 h30" stroke="#172554" stroke-width="2.2"/><text x="470" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.2.4</text></g>
|
||||
<g id="r2"><rect x="345" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#15803d" stroke-width="3"/><text x="400" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#15803d">Routeur</text><text x="400" y="195" text-anchor="middle" font-size="11.5" fill="#15803d">10.0.2.1</text></g>
|
||||
<line id="l_r2" x1="400" y1="204" x2="400" y2="262" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="555" y="20" width="230" height="215" rx="16" fill="#fef3c7" stroke="#b45309" stroke-width="2.5" opacity=".55"/>
|
||||
<text x="670" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#b45309">RÉSEAU 3</text>
|
||||
<line id="l_p30" x1="600" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line id="l_p31" x1="670" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<line id="l_p32" x1="740" y1="131" x2="670" y2="158" stroke="#94a3b8" stroke-width="3"/>
|
||||
<g id="p30"><rect x="569" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M589 102 h22 M600 102 v6 M585 108 h30" stroke="#172554" stroke-width="2.2"/><text x="600" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.2</text></g>
|
||||
<g id="p31"><rect x="639" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M659 102 h22 M670 102 v6 M655 108 h30" stroke="#172554" stroke-width="2.2"/><text x="670" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.3</text></g>
|
||||
<g id="p32"><rect x="709" y="62" width="62" height="40" rx="6" fill="#f8fafc" stroke="#172554" stroke-width="2.2"/><path d="M729 102 h22 M740 102 v6 M725 108 h30" stroke="#172554" stroke-width="2.2"/><text x="740" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="#172554">10.0.3.4</text></g>
|
||||
<g id="r3"><rect x="615" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#b45309" stroke-width="3"/><text x="670" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#b45309">Routeur</text><text x="670" y="195" text-anchor="middle" font-size="11.5" fill="#b45309">10.0.3.1</text></g>
|
||||
<line id="l_r3" x1="670" y1="204" x2="670" y2="262" stroke="#94a3b8" stroke-width="4"/>
|
||||
<g id="net"><rect x="20" y="262" width="760" height="44" rx="22" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/><text x="400" y="290" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">INTERNET · l'allée centrale, qui relie les routeurs entre eux</text></g>
|
||||
<line id="l_srv" x1="400" y1="306" x2="400" y2="332" stroke="#94a3b8" stroke-width="4"/>
|
||||
<g id="srv"><rect x="320" y="332" width="160" height="54" rx="10" fill="#172554"/><text x="400" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="#ffffff">Serveur</text><text x="400" y="374" text-anchor="middle" font-size="12" fill="#c7d2fe">10.0.9.1 · bureau du prof</text></g>
|
||||
</g></svg></div>
|
||||
<ol class="journal" id="journal"></ol>
|
||||
<div class="info"><b>Rejoue les trois manches.</b> Un envoi entre deux réseaux, une demande au serveur, puis mets le routeur 2 en panne et renvoie un message vers le réseau 2. Le vocabulaire s'affiche sur chaque étape.</div>
|
||||
<div class="info"><b>L'objection à valider.</b> Dans le jeu, tout passe par le routeur, même entre voisins. En vrai, deux ordinateurs du même réseau peuvent se parler directement, par un commutateur. Un élève qui objecte que le réseau 2 fonctionne encore en interne a raison : dis-le publiquement.</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Je comprends. Le réseau et le trajet d'un message</h2>
|
||||
<p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p>
|
||||
|
||||
<h3>Le réseau</h3>
|
||||
<p>Un <b>réseau</b>, ce sont des appareils reliés entre eux pour échanger des informations. Le réseau d'un seul lieu, une maison, une école, s'appelle un <b>réseau local</b>. Dans le jeu, chaque groupe de tables.</p>
|
||||
|
||||
<h3>La connexion</h3>
|
||||
<p>La <b>connexion</b> relie un appareil au réseau : par un <b>câble réseau</b>, ou par le <b>wifi</b>, sans fil. La connexion, c'est la route. Mais une route ne sert à rien si on ne sait pas où aller.</p>
|
||||
|
||||
<h3>L'adresse IP</h3>
|
||||
<p>Chaque appareil connecté a une <b>adresse IP</b> : <b>quatre nombres séparés par des points</b>, comme 10.0.2.3. <b>Sans adresse, un message ne sait pas où aller, et une réponse ne sait pas où revenir.</b> C'est pour ça qu'il fallait écrire l'adresse du destinataire et la sienne.</p>
|
||||
<p>Les premiers nombres indiquent <b>le réseau</b>, le dernier désigne <b>l'appareil</b>. L'adresse de ton poste lui est donnée par le réseau quand il se connecte.</p>
|
||||
|
||||
<h3>Le routeur</h3>
|
||||
<p>Le <b>routeur</b> relie un réseau local aux autres réseaux. Il lit l'adresse de chaque message et l'envoie dans la bonne direction, sans lire le message lui-même. À la maison, il est caché dans la <b>box</b> du <b>fournisseur d'accès</b>.</p>
|
||||
<p><b>Si le routeur tombe en panne</b>, les appareils restent reliés entre eux, mais plus rien ne sort ni n'entre. C'est ce qui est arrivé au réseau 2.</p>
|
||||
|
||||
<h3>Internet et le serveur</h3>
|
||||
<p><b>Internet, c'est le réseau des réseaux</b> : des millions de réseaux reliés par des routeurs. Dans le jeu, l'allée centrale. Un <b>serveur</b> est un ordinateur toujours allumé qui conserve des fichiers et des sites. Dans le jeu, le bureau du professeur.</p>
|
||||
|
||||
<div class="consigne"><small>Le trajet complet, en cinq étapes</small>
|
||||
<b>1.</b> Je me connecte au réseau local, par câble ou par wifi.<br>
|
||||
<b>2.</b> Je reçois une adresse IP, donnée par le routeur.<br>
|
||||
<b>3.</b> Ma demande part sur Internet, de routeur en routeur.<br>
|
||||
<b>4.</b> Elle arrive au serveur qui conserve le site.<br>
|
||||
<b>5.</b> Le serveur renvoie la page par le même chemin, jusqu'à mon adresse.</div>
|
||||
<div class="info alerte"><b>Le recueil FWB inverse deux étapes, page 27.</b> Il place l'adresse IP après « rejoindre Internet ». L'appareil reçoit son adresse dès la connexion au réseau local, comme le recueil le dit lui-même page 28. Le livret suit l'ordre exact.</div>
|
||||
<div class="info"><b>Ce qui se dit ensemble.</b> L'adresse IP et le routeur. Fais le lien avec l'élève qui avait oublié son adresse en manche 2 : sans adresse d'expéditeur, la réponse ne sait pas où revenir.</div>
|
||||
<div class="info"><b>Ne pas dépasser l'attendu.</b> Emploi correct des termes, pas protocole. Pas de masque, de DHCP, de DNS, de NAT. Si un élève demande comment l'ordinateur connait l'adresse du serveur : « Internet a un annuaire qui traduit les noms de sites en adresses ». On s'arrête là.</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Je m'entraine tout de suite</h3>
|
||||
<p class="muted" style="margin-top:0">Quel est le vrai mot pour chaque rôle du jeu ?</p>
|
||||
<table class="grille" id="tabRoles"></table>
|
||||
<div class="row" style="margin-top:12px"><button class="btn primary" id="roleSuiv">Révéler le mot suivant</button><button class="btn soft" id="roleReset">Tout masquer</button></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3 -->
|
||||
<section class="panel" id="p2"><div class="card">
|
||||
<div class="entete"><div><h2>L'adresse de mon poste</h2><p class="muted">Ton livret, activité 3. En binôme.</p></div><span class="score">20 min</span></div>
|
||||
<div class="steps" id="etapes"></div>
|
||||
<div class="row" style="margin-top:14px"><button class="btn soft" id="etprec">Étape précédente</button><button class="btn primary" id="etsuiv">Étape suivante</button></div>
|
||||
<div class="consigne" style="margin-top:20px"><small>Attention</small>
|
||||
Lis ton adresse dans les <b>paramètres</b> de ton poste, jamais sur un site web. Et ignore la ligne IPv6, longue, avec des lettres : c'est une autre façon d'écrire les adresses.</div>
|
||||
<div class="row"><button class="btn" id="constat">Ce qu'on constate</button></div>
|
||||
<div class="consigne cache" id="constatTxt" style="margin-top:14px"><small>Ce qu'on constate</small>
|
||||
Les deux adresses commencent de la même façon et finissent différemment. Le <b>début</b> désigne le <b>réseau</b>, le même pour les deux postes. La <b>fin</b> désigne l'<b>appareil</b>, différent pour chacun.</div>
|
||||
<div class="info alerte"><b>Jamais de site « quelle est mon IP ».</b> Il afficherait l'adresse publique de l'école, identique pour tous les élèves, et l'activité conclurait l'inverse du cours. Si deux élèves trouvent la même adresse, c'est qu'ils l'ont lue sur un site.</div>
|
||||
<div class="info"><b>Vérifie la veille, avec un compte élève.</b> Le chemin exact dans les Paramètres varie légèrement selon la version de Windows 11. Et regarde deux postes voisins : dans un réseau d'établissement, seuls les deux premiers nombres sont peut-être identiques. La conclusion reste la même, le livret pose la question de façon ouverte.</div>
|
||||
<div class="info"><b>Bonus si l'invite de commandes est autorisée.</b> ipconfig affiche aussi la « passerelle par défaut » : c'est l'adresse du routeur.</div>
|
||||
</div></section>
|
||||
|
||||
<!-- 4 -->
|
||||
<section class="panel" id="p3">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Du poste jusqu'au site</h2><p class="muted">Place les cinq mots dans les cases, puis vérifie.</p></div><span class="score">25 min</span></div>
|
||||
<figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 315" role="img" aria-label="Trajet d'une demande depuis mon poste jusqu'au serveur d'un site">
|
||||
|
||||
<defs><marker id="f" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#172554"/></marker><marker id="g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker></defs>
|
||||
<g font-family="Arial, Helvetica, sans-serif">
|
||||
<rect x="20" y="70" width="130" height="86" rx="10" fill="#f8fafc" stroke="#172554" stroke-width="3"/><path d="M60 156 h50 M85 156 v14 M62 170 h46" stroke="#172554" stroke-width="3"/>
|
||||
<text x="85" y="110" text-anchor="middle" font-size="15" font-weight="bold" fill="#172554">Mon poste</text><text x="85" y="132" text-anchor="middle" font-size="12" fill="#475569">et son navigateur</text>
|
||||
<rect x="20" y="195" width="130" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="36" y="215" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">1</text>
|
||||
<path d="M152 110 H232" stroke="#172554" stroke-width="3" stroke-dasharray="8 5" marker-end="url(#f)"/>
|
||||
<rect x="132" y="42" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="148" y="62" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">2</text>
|
||||
<rect x="238" y="82" width="120" height="60" rx="10" fill="#fff" stroke="#1d4ed8" stroke-width="3"/><path d="M262 82 v-16 M334 82 v-16" stroke="#1d4ed8" stroke-width="3"/>
|
||||
<rect x="238" y="158" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="254" y="178" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">3</text>
|
||||
<text x="298" y="118" text-anchor="middle" font-size="22" fill="#1d4ed8">⇄</text>
|
||||
<path d="M360 112 H408" stroke="#172554" stroke-width="3" marker-end="url(#f)"/>
|
||||
<ellipse cx="490" cy="112" rx="78" ry="48" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/>
|
||||
<text x="490" y="108" text-anchor="middle" font-size="12" fill="#5b21b6">des milliers</text><text x="490" y="124" text-anchor="middle" font-size="12" fill="#5b21b6">de réseaux</text>
|
||||
<rect x="430" y="176" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="446" y="196" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">4</text>
|
||||
<path d="M570 112 H626" stroke="#172554" stroke-width="3" marker-end="url(#f)"/>
|
||||
<rect x="630" y="62" width="140" height="100" rx="10" fill="#172554"/><path d="M650 88 h100 M650 108 h100 M650 128 h100" stroke="#6366f1" stroke-width="3"/>
|
||||
<rect x="640" y="176" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="656" y="196" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">5</text>
|
||||
<path d="M700 230 C700 305, 90 305, 85 250" stroke="#16a34a" stroke-width="3.5" fill="none" marker-end="url(#g)"/>
|
||||
<text x="400" y="252" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">le serveur renvoie la page web par le même chemin</text>
|
||||
</g></svg></figure>
|
||||
<div class="cases" id="cases"></div>
|
||||
<div class="row" style="margin-top:14px"><button class="btn primary" id="verifier">Vérifier</button><button class="btn soft" id="casesReset">Recommencer</button></div>
|
||||
<p class="feedback" id="casesMsg"></p>
|
||||
<div class="info"><b>Différenciation.</b> Version A à trous, version B entièrement à dessiner, comme le prévoit la séquence. La version B convient aux élèves qui raisonnent mieux en dessinant. On la corrige sur l'ordre du trajet, pas sur la qualité du dessin.</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 20 questions. La correction s'affiche tout de suite.</p></div></div>
|
||||
<div class="consigne"><small>Avant de commencer</small>
|
||||
Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br>À la fin, recopie tes deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
|
||||
<div class="progres">
|
||||
<input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid #cbd5e1;border-radius:11px;min-width:220px;flex:1">
|
||||
<div class="barre"><i id="jauge"></i></div>
|
||||
<span class="score" id="avancement">0 / 20</span>
|
||||
</div>
|
||||
<h3>Exercice 1. Le bon mot</h3><div id="ex1"></div>
|
||||
<h3 style="margin-top:26px">Exercice 2. Le trajet</h3><div id="ex2"></div>
|
||||
<h3 style="margin-top:26px">Exercice 3. Vrai ou faux</h3><div id="ex3"></div>
|
||||
<h3 style="margin-top:26px">Exercice 4. Le défi</h3>
|
||||
<p class="muted" style="margin-top:0">Des situations que tu n'as pas vues. Sers-toi des règles du jeu.</p>
|
||||
<div id="ex4"></div>
|
||||
<div class="row" style="margin-top:22px"><button class="btn primary" id="voir">Voir mon résultat</button><button class="btn soft" id="reset">Tout recommencer</button></div>
|
||||
<div id="bilan" style="margin-top:20px">
|
||||
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
||||
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:#94a3b8"> / 20</span></div>
|
||||
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
||||
</div>
|
||||
<div id="gDetail" style="margin-bottom:16px"></div>
|
||||
<p class="muted"><b>Recopie ces deux lignes dans ton livret.</b></p>
|
||||
<textarea id="recap" readonly></textarea>
|
||||
<div class="row" style="margin-top:10px"><button class="btn" id="copier">Copier</button><span class="muted" id="copie"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5 -->
|
||||
<section class="panel" id="p4">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Je comprends. Internet, le web et le navigateur</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">15 min</span></div>
|
||||
<p>« Je vais sur Internet », « je cherche sur le web », « j'ouvre Google » : on emploie ces expressions comme si elles voulaient dire la même chose. Ce n'est pas le cas.</p>
|
||||
<div class="consigne"><small>Les routes, les magasins et le vélo</small>
|
||||
<b>Internet, ce sont les routes</b> : un immense réseau qui relie tout.<br>
|
||||
<b>Le web, ce sont les magasins</b> le long des routes : les sites, avec leurs pages reliées par des liens.<br>
|
||||
<b>Le navigateur, c'est ton vélo</b> : le moyen d'aller de magasin en magasin. Chrome, Firefox, Edge, Safari.</div>
|
||||
<p>Sur les mêmes routes circulent aussi d'autres choses : les <b>courriels</b>, les <b>jeux en ligne</b>, la <b>messagerie</b> comme WhatsApp ou Snapchat, la <b>musique</b> et les <b>vidéos</b> dans leurs applications. Tous utilisent Internet. Aucun n'a besoin d'un navigateur. Ce n'est pas le web.</p>
|
||||
<figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 260" role="img" aria-label="Internet est le réseau ; le web, le courriel, les jeux en ligne et la messagerie sont des services qui l'utilisent">
|
||||
<g font-family="Arial, Helvetica, sans-serif" text-anchor="middle">
|
||||
<text x="400" y="26" font-size="14" font-weight="bold" fill="#475569">DES SERVICES QUI UTILISENT INTERNET</text>
|
||||
<rect x="25" y="44" width="170" height="92" rx="14" fill="#dbeafe" stroke="#2563eb" stroke-width="3"/>
|
||||
<text x="110" y="76" font-size="18" font-weight="bold" fill="#2563eb">Le web</text>
|
||||
<text x="110" y="98" font-size="13" fill="#334155">pages et liens</text>
|
||||
<text x="110" y="120" font-size="12" fill="#64748b">avec : navigateur</text>
|
||||
<line x1="110" y1="138" x2="110" y2="176" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="218" y="44" width="170" height="92" rx="14" fill="#fef3c7" stroke="#b45309" stroke-width="3"/>
|
||||
<text x="303" y="76" font-size="18" font-weight="bold" fill="#b45309">Le courriel</text>
|
||||
<text x="303" y="98" font-size="13" fill="#334155">messages</text>
|
||||
<text x="303" y="120" font-size="12" fill="#64748b">avec : application mail</text>
|
||||
<line x1="303" y1="138" x2="303" y2="176" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="411" y="44" width="170" height="92" rx="14" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
||||
<text x="496" y="76" font-size="18" font-weight="bold" fill="#15803d">Jeux en ligne</text>
|
||||
<text x="496" y="98" font-size="13" fill="#334155">parties</text>
|
||||
<text x="496" y="120" font-size="12" fill="#64748b">avec : le jeu lui-même</text>
|
||||
<line x1="496" y1="138" x2="496" y2="176" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="604" y="44" width="170" height="92" rx="14" fill="#fce7f3" stroke="#be185d" stroke-width="3"/>
|
||||
<text x="689" y="76" font-size="18" font-weight="bold" fill="#be185d">Messagerie</text>
|
||||
<text x="689" y="98" font-size="13" fill="#334155">discussions</text>
|
||||
<text x="689" y="120" font-size="12" fill="#64748b">avec : application</text>
|
||||
<line x1="689" y1="138" x2="689" y2="176" stroke="#94a3b8" stroke-width="4"/>
|
||||
<rect x="20" y="176" width="760" height="62" rx="18" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/>
|
||||
<text x="400" y="204" font-size="19" font-weight="bold" fill="#5b21b6">INTERNET</text>
|
||||
<text x="400" y="226" font-size="13" fill="#5b21b6">le réseau des réseaux, qui transporte tout le reste</text>
|
||||
</g></svg></figure>
|
||||
<div class="consigne"><small>Le test</small><b>Est-ce que j'utilise un navigateur pour afficher des pages ?</b> Si oui, c'est le web. Si c'est une application, un jeu ou une console, c'est Internet, mais pas le web.</div>
|
||||
<p><b>Et Google ?</b> Ce n'est ni Internet, ni le web, ni un navigateur : c'est un site web qui sert à chercher d'autres sites. Chrome est le navigateur fabriqué par la même entreprise, d'où la confusion.</p>
|
||||
<div class="info"><b>Phase facultative, première à raccourcir.</b> Web, Internet et serveur sont encadrés dans la brochure, non cotables. Si tu es en retard : points « routes, magasins, vélo » et « le test » seulement, activité 5 à l'oral.</div>
|
||||
<div class="info"><b>Indicateur central de la séquence.</b> L'élève ne confond plus le navigateur et Internet. À relever ici.</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Web ou pas web ?</h3>
|
||||
<p class="muted" style="margin-top:0">On répond ensemble.</p>
|
||||
<div id="ex5"></div>
|
||||
<div class="info"><b>Corrige l'imprimante en dernier.</b> C'est la seule ligne qui vérifie qu'un réseau n'est pas forcément Internet.</div>
|
||||
<div class="info"><b>Cas limites si un élève les soulève.</b> WhatsApp Web ou Smartschool dans le navigateur, c'est du web ; la même chose dans l'application, non. Le critère du navigateur est une définition d'usage, pas technique. Un élève qui le remarque applique parfaitement le critère.</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6 -->
|
||||
<section class="panel" id="p5">
|
||||
<div class="card">
|
||||
<div class="entete"><div><h2>Ma trace écrite</h2><p class="muted">Dans ton livret. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
|
||||
<div class="row" style="margin-bottom:16px">
|
||||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
||||
<button class="btn soft" id="motReset">Tout masquer</button>
|
||||
<span class="score" id="motCompte">0 mot sur 8</span>
|
||||
</div>
|
||||
<div class="trace" id="trace"></div>
|
||||
<div class="info"><b>Les huit mots, dans l'ordre.</b> réseau, connexion, adresse IP, routeur, Internet, serveur, navigateur, web. Les trois derniers et Internet sont facultatifs : dans la trace, pas dans une cote.</div>
|
||||
<div class="info alerte"><b>Fermeture.</b> Sessions fermées et vérifiées. Badges et cartes récupérés : ils resservent aux autres classes.</div>
|
||||
<div class="info"><b>À préparer pour le bloc 5.</b> Un fichier à l'extension inconnue des élèves, par exemple .stl ou .epub. Recueil FWB : thématique 2, support 1.1 page 17 et support 1.2 pages 18 et 19. La fiche-outil formats de fichiers d'e-classe si tu l'as récupérée.</div>
|
||||
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Mon lexique du cours 4</h3>
|
||||
<p class="muted" style="margin-top:0">Les mêmes définitions que dans ton livret. Clique sur un mot pour l'ouvrir.</p>
|
||||
<div class="accordeon" id="lexique"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<footer>Bloc 4 sur 35 · Séquence annuelle 1TC-NUM, volet numérique FMTTN · 2026-2027 · M. Courcelle</footer>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
var PHASES=[{t:"Le jeu du courrier",d:15,a:0},{t:"Les vrais mots",d:20,a:15},{t:"Mon adresse",d:20,a:35},
|
||||
{t:"Le trajet",d:25,a:55},{t:"Internet et le web",d:15,a:80},{t:"Ma trace écrite",d:5,a:95}];
|
||||
|
||||
/* ---------- chrono et onglets ---------- */
|
||||
var t0=null,tick=null,choisie=0,ecart=document.getElementById("ecart"),rail=document.getElementById("rail");
|
||||
function d2(n){return (n<10?"0":"")+n;}
|
||||
function minutes(){return t0?(Date.now()-t0)/60000:0;}
|
||||
function dessineRail(){rail.innerHTML="";PHASES.forEach(function(p,i){var b=document.createElement("button");b.className="tab"+(i===choisie?" active":"");b.innerHTML=(i+1)+". "+p.t+"<span>"+p.d+" min</span>";b.onclick=function(){montre(i);};rail.appendChild(b);});document.getElementById("sPhase").textContent=(choisie+1)+" sur 6";ecart.textContent="Activité "+(choisie+1)+" · "+PHASES[choisie].t;majReste();}
|
||||
function montre(i){choisie=i;for(var k=0;k<PHASES.length;k++){document.getElementById("p"+k).classList.toggle("active",k===i);}dessineRail();try{window.scrollTo({top:0,behavior:"smooth"});}catch(e){}}
|
||||
function majReste(){var e=document.getElementById("sReste");if(!t0){e.textContent="–";return;}var r=Math.ceil(PHASES[choisie].a+PHASES[choisie].d-minutes());e.textContent=r>0?(r+" min"):"terminé";}
|
||||
function rafraichit(){var s=Math.floor((Date.now()-t0)/1000);document.getElementById("sTemps").textContent=d2(Math.floor(s/60))+":"+d2(s%60);majReste();}
|
||||
document.getElementById("btnGo").onclick=function(){if(t0)return;t0=Date.now();this.textContent="En cours";tick=setInterval(rafraichit,1000);rafraichit();};
|
||||
document.getElementById("btnStop").onclick=function(){clearInterval(tick);t0=null;document.getElementById("sTemps").textContent="00:00";document.getElementById("sReste").textContent="–";document.getElementById("btnGo").textContent="Démarrer";};
|
||||
|
||||
function accordeon(zone,liste,plus){
|
||||
liste.forEach(function(e,i){
|
||||
var d=document.createElement("div");d.className="item";
|
||||
d.innerHTML='<button aria-expanded="false"><span class="n">'+(plus==="règle"?(i+1):e[0].charAt(0))+'</span><span class="t">'+e[0]+'</span><span class="plus">'+plus+'</span></button><div class="corps">'+e[1]+'</div>';
|
||||
d.querySelector("button").onclick=function(){var o=d.classList.toggle("ouvert");this.setAttribute("aria-expanded",o?"true":"false");this.querySelector(".plus").textContent=o?"masquer":plus;};
|
||||
zone.appendChild(d);
|
||||
});
|
||||
}
|
||||
function etapesPasAPas(zoneId,precId,suivId,data){
|
||||
var i=0,z=document.getElementById(zoneId);
|
||||
function dessine(){z.innerHTML="";data.forEach(function(e,k){var d=document.createElement("div");d.className="step"+(k===i?" on":"")+(k<i?" fait":"");d.innerHTML='<span class="n">'+(k+1)+'</span><div><h3>'+e[0]+'</h3><p>'+(k<=i?e[1]:"")+'</p></div>';z.appendChild(d);});}
|
||||
document.getElementById(suivId).onclick=function(){if(i<data.length-1){i++;dessine();}};
|
||||
document.getElementById(precId).onclick=function(){if(i>0){i--;dessine();}};
|
||||
dessine();
|
||||
}
|
||||
|
||||
/* ---------- 1. le jeu ---------- */
|
||||
accordeon(document.getElementById("regles"),[
|
||||
["Tu ne remets ton message qu'au routeur de ton réseau","Jamais directement à un camarade, même s'il est à côté de toi."],
|
||||
["Tu écris deux adresses","Celle du destinataire, et la tienne : celle de l'expéditeur."],
|
||||
["Le routeur ne lit que le troisième nombre","Si c'est son réseau, il livre. Sinon, il passe le message au routeur du bon réseau, par l'allée centrale."],
|
||||
["Une adresse incomplète ou inconnue finit à la corbeille","Le routeur ne devine pas."]],"règle");
|
||||
etapesPasAPas("manches","maPrec","maSuiv",[
|
||||
["Manche 1. Envoyer entre réseaux","Écris un message de cinq mots maximum à un camarade d'un autre réseau. N'oublie pas les deux adresses."],
|
||||
["Manche 2. Demander une page au serveur","Trois élèves demandent une page au serveur : la météo, une blague, un horaire. Le serveur répond."],
|
||||
["Manche 3. La panne","Le routeur du réseau 2 s'arrête. Que deviennent les messages ?"],
|
||||
["On fait le point","Retour à ta place. Livret, activité 1 : les deux questions."]]);
|
||||
|
||||
/* ---------- 2. le reseau anime ---------- */
|
||||
var NOEUDS=[];
|
||||
[1,2,3].forEach(function(n){[0,1,2].forEach(function(k){NOEUDS.push({id:"p"+n+k,res:n,adr:"10.0."+n+"."+(k+2),nom:"Poste 10.0."+n+"."+(k+2)});});});
|
||||
var selDe=document.getElementById("de"),selVers=document.getElementById("vers");
|
||||
NOEUDS.forEach(function(o,i){selDe.add(new Option(o.adr,o.id));selVers.add(new Option(o.adr,o.id));});
|
||||
selVers.add(new Option("Serveur 10.0.9.1","srv"));
|
||||
selDe.value="p10";selVers.value="p32";
|
||||
var enPanne=false,anim=[];
|
||||
var plan=document.getElementById("plan");
|
||||
function el(id){return plan.querySelector("#"+id);}
|
||||
function efface(){plan.querySelectorAll(".allume").forEach(function(x){x.classList.remove("allume");});anim.forEach(clearTimeout);anim=[];document.getElementById("journal").innerHTML="";}
|
||||
function noeud(id){return NOEUDS.filter(function(o){return o.id===id;})[0];}
|
||||
function trajet(a,b){
|
||||
var A=noeud(a),P=[],T=[];
|
||||
P.push([a,"Le "+A.nom.toLowerCase()+" écrit les deux adresses et remet le message à son routeur."]);
|
||||
P.push(["l_"+a,null]);
|
||||
P.push(["r"+A.res,"Le <b>routeur</b> du réseau "+A.res+" lit l'<b>adresse IP</b> du destinataire."]);
|
||||
if(b==="srv"){
|
||||
P.push(["l_r"+A.res,null]);P.push(["net","Le message sort du réseau local et voyage sur <b>Internet</b>."]);
|
||||
P.push(["l_srv",null]);P.push(["srv","Le <b>serveur</b> reçoit la demande et renvoie la page à l'adresse de l'expéditeur, par le même chemin."]);
|
||||
return P;
|
||||
}
|
||||
var B=noeud(b);
|
||||
if(A.res===B.res){P.push(["l_"+b,null]);P.push([b,"Même réseau : le routeur livre directement au "+B.nom.toLowerCase()+"."]);return P;}
|
||||
P.push(["l_r"+A.res,null]);P.push(["net","Autre réseau : le message passe sur <b>Internet</b>, l'allée centrale."]);
|
||||
P.push(["l_r"+B.res,null]);P.push(["r"+B.res,"Le <b>routeur</b> du réseau "+B.res+" reçoit le message et lit l'adresse."]);
|
||||
P.push(["l_"+b,null]);P.push([b,"Il le livre au "+B.nom.toLowerCase()+". Arrivé."]);
|
||||
return P;
|
||||
}
|
||||
document.getElementById("envoyer").onclick=function(){
|
||||
efface();
|
||||
var a=selDe.value,b=selVers.value;
|
||||
if(a===b){document.getElementById("journal").innerHTML='<li class="stop">Choisis deux postes différents.</li>';return;}
|
||||
var P=trajet(a,b),j=document.getElementById("journal"),t=0,bloque=false;
|
||||
P.forEach(function(p){
|
||||
if(bloque)return;
|
||||
var estPanne=enPanne&&p[0]==="r2";
|
||||
anim.push(setTimeout(function(){
|
||||
var e=el(p[0]); if(e&&!estPanne)e.classList.add("allume");
|
||||
if(estPanne){j.insertAdjacentHTML("beforeend",'<li class="stop">Le routeur du réseau 2 est en panne. Le message reste bloqué : rien n\'entre, rien ne sort du réseau 2.</li>');}
|
||||
else if(p[1]){j.insertAdjacentHTML("beforeend","<li>"+p[1]+"</li>");}
|
||||
},t));
|
||||
t+=p[1]?850:350;
|
||||
if(estPanne)bloque=true;
|
||||
});
|
||||
};
|
||||
document.getElementById("panne").onclick=function(){
|
||||
enPanne=!enPanne;el("r2").classList.toggle("panne",enPanne);
|
||||
this.textContent=enPanne?"Réparer le routeur 2":"Mettre le routeur 2 en panne";efface();
|
||||
};
|
||||
|
||||
var ROLES=[["Le badge avec quatre nombres","Adresse IP"],["L'élève qui lit l'adresse et oriente les messages","Routeur"],["L'allée centrale","Internet"],["Le bureau du professeur, qui fournit les pages","Serveur"],["Un groupe de tables","Réseau local"]];
|
||||
var ri=0;
|
||||
function dessineRoles(){var h="<tr><th>Dans le jeu</th><th>Le vrai mot</th></tr>";ROLES.forEach(function(r,i){h+="<tr"+(i<ri?' class="on"':"")+"><td>"+r[0]+"</td>"+(i<ri?"<td><b>"+r[1]+"</b></td>":'<td class="masque">.</td>')+"</tr>";});document.getElementById("tabRoles").innerHTML=h;}
|
||||
document.getElementById("roleSuiv").onclick=function(){if(ri<ROLES.length){ri++;dessineRoles();}};
|
||||
document.getElementById("roleReset").onclick=function(){ri=0;dessineRoles();};
|
||||
dessineRoles();
|
||||
|
||||
/* ---------- 3. adresse du poste ---------- */
|
||||
etapesPasAPas("etapes","etprec","etsuiv",[
|
||||
["Ouvre les Paramètres","La roue dentée, puis « Réseau et Internet »."],
|
||||
["Ouvre ta connexion","Wi-Fi ou Ethernet, puis ses propriétés."],
|
||||
["Cherche la ligne « Adresse IPv4 »","C'est ton adresse IP. Note-la dans ton livret."],
|
||||
["Compare avec ton voisin","Quels nombres sont identiques ? Lesquels changent ?"]]);
|
||||
document.getElementById("constat").onclick=function(){document.getElementById("constatTxt").classList.toggle("on");};
|
||||
|
||||
/* ---------- 4. schema a completer ---------- */
|
||||
var MOTS5=["adresse IP","connexion","routeur","Internet","serveur"];
|
||||
var zc=document.getElementById("cases");
|
||||
MOTS5.forEach(function(m,i){
|
||||
var l=document.createElement("label");l.textContent="Case "+(i+1);
|
||||
var s=document.createElement("select");s.add(new Option("choisir…",""));
|
||||
["adresse IP","connexion","Internet","routeur","serveur"].forEach(function(o){s.add(new Option(o,o));});
|
||||
l.appendChild(s);zc.appendChild(l);
|
||||
});
|
||||
document.getElementById("verifier").onclick=function(){
|
||||
var ok=0;zc.querySelectorAll("select").forEach(function(s,i){var b=s.value===MOTS5[i];s.classList.remove("ok","ko");if(s.value)s.classList.add(b?"ok":"ko");if(b)ok++;});
|
||||
document.getElementById("casesMsg").textContent=ok===5?"Bravo, le trajet est complet.":ok+" case"+(ok>1?"s":"")+" sur 5. Suis le trajet dans l'ordre : le poste, le lien, l'appareil qui oriente, le réseau des réseaux, puis le serveur.";
|
||||
};
|
||||
document.getElementById("casesReset").onclick=function(){zc.querySelectorAll("select").forEach(function(s){s.value="";s.classList.remove("ok","ko");});document.getElementById("casesMsg").textContent="";};
|
||||
|
||||
/* ---------- moteur de questions ---------- */
|
||||
var rep={},TOTAL=20;
|
||||
function poser(zone,cle,txt,opts,bon,expl,compte){
|
||||
var d=document.createElement("div");d.className="q";
|
||||
d.innerHTML='<div class="txt">'+txt+'</div><div class="opts"></div><div class="expl">'+expl+'</div>';
|
||||
var z=d.querySelector(".opts");
|
||||
opts.forEach(function(o,i){var b=document.createElement("button");b.textContent=o;
|
||||
b.onclick=function(){if(rep[cle]!==undefined)return;rep[cle]=i;d.classList.add("done",i===bon?"bon":"faux");
|
||||
z.querySelectorAll("button").forEach(function(x,j){x.disabled=true;if(j===bon)x.classList.add("pick");else if(j===i)x.classList.add("rate");});
|
||||
if(compte)maj();};
|
||||
z.appendChild(b);});
|
||||
zone.appendChild(d);
|
||||
}
|
||||
function maj(){var n=Object.keys(rep).filter(function(k){return k.charAt(0)!=="z";}).length;document.getElementById("avancement").textContent=n+" / "+TOTAL;document.getElementById("jauge").style.width=(n/TOTAL*100)+"%";document.getElementById("sEx").textContent=n+" sur "+TOTAL;}
|
||||
|
||||
var OPT1=["Réseau","Connexion","Adresse IP","Routeur"];
|
||||
var EX1=[["Des appareils reliés entre eux pour échanger des informations.",0,"C'est un réseau. Celui d'un seul lieu s'appelle un réseau local."],
|
||||
["Le lien entre un appareil et le réseau, par câble ou par wifi.",1,"C'est la connexion : la route qui mène au réseau."],
|
||||
["Quatre nombres qui identifient un appareil.",2,"C'est l'adresse IP, comme 10.0.2.3."],
|
||||
["L'appareil qui relie le réseau local aux autres réseaux.",3,"C'est le routeur. Il lit l'adresse et oriente le message."],
|
||||
["Chez toi, il est caché dans la box du fournisseur d'accès.",3,"La box contient un routeur, et aussi une borne wifi."],
|
||||
["Sans elle, la réponse ne sait pas où revenir.",2,"L'adresse IP de l'expéditeur. C'est pour ça qu'il fallait l'écrire dans le jeu."]];
|
||||
var EX2=[["Juste après « je me connecte au réseau », que se passe-t-il ?",["Je reçois une adresse IP","La demande arrive au serveur","Le serveur renvoie la page"],0,"Le routeur donne une adresse à l'appareil qui se connecte. Ensuite seulement, la demande peut partir."],
|
||||
["Qui envoie ma demande hors du réseau local ?",["Le navigateur","Le routeur","Le serveur"],1,"Le routeur relie le réseau local aux autres réseaux."],
|
||||
["Où se trouve le site que je demande ?",["Dans mon routeur","Sur un serveur","Dans mon navigateur"],1,"Les sites sont rangés sur des serveurs, quelque part dans le monde."],
|
||||
["Par où revient la page ?",["Directement dans mon écran","Par le même chemin, jusqu'à mon adresse","Par le wifi du voisin"],1,"Elle refait le trajet à l'envers, grâce à l'adresse de l'expéditeur."]];
|
||||
var VF=["Vrai","Faux"];
|
||||
var EX3=[["Deux postes de la même classe ont exactement la même adresse IP.",1,"Faux. Chaque appareil a sa propre adresse : le début est le même, la fin change."],
|
||||
["Le wifi est une connexion sans fil.",0,"Vrai. Une connexion peut passer par un câble ou par le wifi."],
|
||||
["Si le routeur tombe en panne, le réseau local est coupé des autres réseaux.",0,"Vrai. Les appareils restent reliés entre eux, mais plus rien ne sort ni n'entre."],
|
||||
["Une adresse IP, c'est comme un mot de passe.",1,"Faux. Une adresse sert à trouver un appareil, pas à prouver qui on est."],
|
||||
["Le routeur lit le contenu de tous les messages.",1,"Faux. Il lit seulement l'adresse, comme le routeur du jeu ne lisait que le troisième nombre."],
|
||||
["Pour trouver l'adresse IP de mon poste, je la lis dans ses paramètres.",0,"Vrai. Un site web te donnerait l'adresse de toute l'école, la même pour tout le monde."]];
|
||||
var EX4=[["Ton téléphone affiche « connecté, sans Internet ». Qu'est-ce qui fonctionne ?",["Rien du tout","La connexion au réseau local","Internet, mais pas le wifi"],1,"Le téléphone est bien relié à la borne, donc au réseau local. C'est la sortie vers Internet qui ne marche pas, souvent à cause de la box."],
|
||||
["Dans le jeu, 10.0.2.5 et 10.0.2.9 sont-ils dans le même réseau ?",["Oui","Non"],0,"Le troisième nombre est le même : 2. Même réseau, appareils différents."],
|
||||
["Dans le jeu, 10.0.1.4 et 10.0.3.4 sont-ils dans le même réseau ?",["Oui","Non"],1,"Le troisième nombre change : 1 et 3. Deux réseaux différents, même si la fin est pareille."],
|
||||
["Un message part de 10.0.1.2 vers 10.0.3.5. Combien de routeurs traverse-t-il ?",["Un","Deux","Trois"],1,"Le routeur du réseau 1, qui l'envoie sur Internet, puis celui du réseau 3, qui le livre."]];
|
||||
EX1.forEach(function(q,i){poser(document.getElementById("ex1"),"a"+i,q[0],OPT1,q[1],q[2],true);});
|
||||
EX2.forEach(function(q,i){poser(document.getElementById("ex2"),"b"+i,q[0],q[1],q[2],q[3],true);});
|
||||
EX3.forEach(function(q,i){poser(document.getElementById("ex3"),"c"+i,q[0],VF,q[1],q[2],true);});
|
||||
EX4.forEach(function(q,i){poser(document.getElementById("ex4"),"d"+i,q[0],q[1],q[2],q[3],true);});
|
||||
|
||||
var OPT5=["Le web","Internet sans le web","Ni l'un ni l'autre"];
|
||||
[["Tu lis un article de Wikipédia dans Chrome.",0,"Un navigateur affiche des pages : c'est le web."],
|
||||
["Tu envoies un message sur WhatsApp.",1,"L'application utilise Internet, sans navigateur : ce n'est pas le web."],
|
||||
["Tu joues en ligne sur une console.",1,"Le jeu passe par Internet, mais pas par le web."],
|
||||
["Tu cherches un horaire de bus sur un site, dans ton navigateur.",0,"Un site, dans un navigateur : le web."],
|
||||
["Tu regardes une vidéo sur youtube.com, dans ton navigateur.",0,"Le site youtube.com dans un navigateur : le web."],
|
||||
["Tu reçois une notification Snapchat.",1,"L'application utilise Internet, sans navigateur."],
|
||||
["Tu imprimes un document sur l'imprimante de la classe.",2,"L'imprimante est dans le réseau local. Le document ne sort jamais de l'école : ni Internet, ni le web. Un réseau n'est pas forcément Internet."]
|
||||
].forEach(function(q,i){poser(document.getElementById("ex5"),"z"+i,q[0],OPT5,q[1],q[2],false);});
|
||||
|
||||
function compte(pref,src,idx){var n=0;src.forEach(function(q,i){if(rep[pref+i]===q[idx])n++;});return n;}
|
||||
document.getElementById("voir").onclick=function(){
|
||||
var s1=compte("a",EX1,1),s2=compte("b",EX2,2),s3=compte("c",EX3,1),s4=compte("d",EX4,2),t=s1+s2+s3+s4;
|
||||
document.getElementById("gTotal").textContent=t;
|
||||
document.getElementById("gMot").textContent=t>=18?"Très bien. Tu peux passer aux exercices écrits de ton livret.":t>=14?"C'est acquis dans l'ensemble. Relis ton mémo pour les points ratés.":t>=10?"La base est là. Relis la page sur le réseau et le trajet, puis recommence.":"Il faut reprendre. Relis les pages « Je comprends » de ton livret, puis recommence.";
|
||||
document.getElementById("gDetail").innerHTML='<table class="grille"><tr><th>Exercice</th><th>Résultat</th></tr><tr><td>1. Le bon mot</td><td><b>'+s1+' / 6</b></td></tr><tr><td>2. Le trajet</td><td><b>'+s2+' / 4</b></td></tr><tr><td>3. Vrai ou faux</td><td><b>'+s3+' / 6</b></td></tr><tr><td>4. Le défi</td><td><b>'+s4+' / 4</b></td></tr></table>';
|
||||
var nom=(document.getElementById("nom").value||"").trim()||"...................";
|
||||
document.getElementById("recap").value="Cours 4 – exercices – "+nom+"\nBon mot "+s1+"/6 · Trajet "+s2+"/4 · Vrai-faux "+s3+"/6 · Défi "+s4+"/4 · Total "+t+"/20";
|
||||
document.getElementById("bilan").classList.add("on");
|
||||
try{document.getElementById("bilan").scrollIntoView({behavior:"smooth"});}catch(e){}
|
||||
};
|
||||
document.getElementById("copier").onclick=function(){var t=document.getElementById("recap");t.select();var ok=false;try{ok=document.execCommand("copy");}catch(e){}document.getElementById("copie").textContent=ok?"Copié.":"Sélectionne le texte et copie-le à la main.";};
|
||||
document.getElementById("reset").onclick=function(){location.reload();};
|
||||
|
||||
/* ---------- 6. trace ---------- */
|
||||
var TRACE=[["Un ",1,", ce sont des appareils reliés entre eux pour échanger des informations. Chaque appareil y est relié par une ",2," : un câble ou le wifi."],
|
||||
["Chaque appareil possède une ",3,", quatre nombres qui permettent de le retrouver. Le ",4," lit l'adresse de chaque message et l'envoie dans la bonne direction."],
|
||||
[5," est le réseau des réseaux. Quand je demande une page, ma demande voyage jusqu'au ",6," qui la conserve, puis la page revient par le même chemin."],
|
||||
["Le ",7," est le logiciel qui affiche les pages. Le ",8," est un service qui utilise Internet, mais ce n'est pas Internet."]];
|
||||
var MOTS={1:"réseau",2:"connexion",3:"adresse IP",4:"routeur",5:"Internet",6:"serveur",7:"navigateur",8:"web"};
|
||||
var rv=0,zt=document.getElementById("trace");
|
||||
function dessineTrace(){zt.innerHTML="<h3>Cours 4. Comment ça circule</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){if(typeof x==="number")return x<=rv?'<b style="color:#1d4ed8">'+MOTS[x]+'</b>':'<span style="border-bottom:2px solid #93c5fd;color:#93c5fd"> </span>';return x;}).join("")+"</p>";}).join("");document.getElementById("motCompte").textContent=rv+" mot"+(rv>1?"s":"")+" sur 8";}
|
||||
document.getElementById("motSuiv").onclick=function(){if(rv<8){rv++;dessineTrace();}};
|
||||
document.getElementById("motReset").onclick=function(){rv=0;dessineTrace();};
|
||||
dessineTrace();
|
||||
|
||||
/* ---------- lexique, genere par lexique/build.py ---------- */
|
||||
var LEXIQUE=[
|
||||
["Adresse IP","Le numéro qui identifie un appareil sur un réseau, écrit en quatre nombres séparés par des points, par exemple 10.0.1.12. Sans adresse, un message ne sait pas où aller."],
|
||||
["Box","L'appareil installé à la maison par le fournisseur d'accès. Il contient un routeur et une borne wifi, et relie le réseau de la maison à Internet."],
|
||||
["Connexion","Le lien qui relie un appareil à un réseau, par un câble ou sans fil, par le wifi."],
|
||||
["Favori","Une page web enregistrée dans le navigateur pour la retrouver en un clic. On en reparle au cours 5."],
|
||||
["Fournisseur d'accès","L'entreprise qui relie une maison ou une école à Internet, contre un abonnement."],
|
||||
["Internet","Le réseau mondial qui relie entre eux des millions de réseaux. C'est le réseau des réseaux."],
|
||||
["Navigateur","Le logiciel qui permet d'afficher les pages du web. Chrome, Firefox, Edge, Safari. Ce n'est pas Internet : c'est un logiciel qui l'utilise."],
|
||||
["Page web","Un document affiché par le navigateur, qui peut contenir du texte, des images et des liens vers d'autres pages."],
|
||||
["Réseau","Des appareils reliés entre eux pour échanger des informations."],
|
||||
["Réseau local","Le réseau d'un seul lieu : une maison, une école, une classe. Ses appareils sont reliés au même routeur."],
|
||||
["Routeur","L'appareil qui relie un réseau local à d'autres réseaux. Il lit l'adresse de chaque message et l'envoie dans la bonne direction."],
|
||||
["Serveur","Un ordinateur qui reste allumé en permanence pour conserver des fichiers et les fournir à d'autres appareils."],
|
||||
["Site web","Un ensemble de pages web qui se trouvent sur un même serveur, sous une même adresse."],
|
||||
["Web","Le service qui permet de consulter des pages reliées entre elles par des liens. Il utilise Internet, mais ce n'est pas Internet : les courriels et les jeux en ligne passent aussi par Internet sans être le web."],
|
||||
["Wifi","Une connexion sans fil, par ondes radio, entre un appareil et une borne reliée au réseau."]];
|
||||
accordeon(document.getElementById("lexique"),LEXIQUE,"définition");
|
||||
|
||||
dessineRail();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+258
-60
@@ -1,74 +1,272 @@
|
||||
<!DOCTYPE html>
|
||||
<!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">
|
||||
<title>Formation numérique 1re année – les cours de l'année</title>
|
||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
||||
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
|
||||
button,input,select{font:inherit}
|
||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
||||
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
|
||||
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
|
||||
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
|
||||
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
|
||||
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
|
||||
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
|
||||
.hero a.up:hover{color:#fff}
|
||||
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
||||
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
|
||||
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hero-chip b{font-size:14px}
|
||||
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
|
||||
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
|
||||
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
|
||||
|
||||
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
|
||||
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
|
||||
.stat strong{display:block;font-size:22px;margin-top:3px}
|
||||
.stat small{color:#64748b;font-weight:800}
|
||||
.stat.ok strong{color:var(--green)}
|
||||
|
||||
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
|
||||
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
|
||||
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
|
||||
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
|
||||
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
|
||||
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
|
||||
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
|
||||
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
|
||||
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
|
||||
|
||||
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
|
||||
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
|
||||
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
|
||||
.tab:hover{border-color:#93c5fd}
|
||||
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
|
||||
.tab.active span{color:#c7dcff}
|
||||
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
|
||||
|
||||
.panel{display:none}.panel.active{display:block}
|
||||
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
|
||||
.card h2,.card h3{margin-top:0}
|
||||
.card h2{font-size:26px;letter-spacing:-.5px}
|
||||
.muted{color:var(--muted);line-height:1.6}
|
||||
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
||||
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
|
||||
.btn:hover{filter:brightness(.97)}
|
||||
.btn.primary{background:#2563eb;color:#fff}
|
||||
.btn.soft{background:#f1f5f9;color:#334155}
|
||||
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
|
||||
.feedback{min-height:31px;margin-top:12px;font-weight:850}
|
||||
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
|
||||
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
|
||||
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
|
||||
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
|
||||
.info b{color:var(--ink)}
|
||||
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
|
||||
.info.alerte b{color:#991b1b}
|
||||
|
||||
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
|
||||
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
|
||||
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
|
||||
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
|
||||
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
|
||||
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
|
||||
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
|
||||
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
|
||||
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
|
||||
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
|
||||
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
|
||||
.colonne li button:hover{color:var(--red)}
|
||||
|
||||
.accordeon{display:grid;gap:10px}
|
||||
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
|
||||
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
|
||||
.item>button:hover{background:#f8fbff}
|
||||
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
|
||||
.item .t{font-weight:850;font-size:17px;flex:1}
|
||||
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
|
||||
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
|
||||
.item.ouvert .corps{display:block}
|
||||
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.item.ouvert .n{background:#2563eb;color:#fff}
|
||||
|
||||
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
|
||||
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
|
||||
.qtag.cle{background:#fef3c7;color:#92400e}
|
||||
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
|
||||
.answer-grid{display:grid;gap:8px}
|
||||
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
|
||||
.answer.ok{border-color:#22c55e;background:#f0fdf4}
|
||||
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
|
||||
.reveal.on{display:block}
|
||||
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
|
||||
|
||||
.steps{display:grid;gap:11px}
|
||||
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
|
||||
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.step.fait{opacity:1}
|
||||
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
|
||||
.step.on .n{background:#2563eb;color:#fff}
|
||||
.step.fait .n{background:#dcfce7;color:#15803d}
|
||||
.step h3{margin:0 0 4px;font-size:17px}
|
||||
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
|
||||
|
||||
figure{margin:0 0 18px}
|
||||
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
||||
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
|
||||
|
||||
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
|
||||
.trace h3{margin:0 0 14px;font-size:22px}
|
||||
.trace p{margin:0 0 .5em}
|
||||
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
|
||||
|
||||
.check{display:grid;gap:9px}
|
||||
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
|
||||
.check label:hover{border-color:#93c5fd}
|
||||
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
|
||||
.check input:checked+span{color:var(--green);font-weight:900}
|
||||
|
||||
table.grille{width:100%;border-collapse:collapse;font-size:15px}
|
||||
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
|
||||
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
|
||||
table.grille td.masque{color:transparent;background:#f8fafc}
|
||||
table.grille tr.on td{background:#f0fdf4}
|
||||
table.grille td b{color:#15803d}
|
||||
|
||||
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
|
||||
.module{margin-bottom:30px}
|
||||
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
|
||||
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
|
||||
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
|
||||
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
|
||||
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
|
||||
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
|
||||
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
|
||||
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
|
||||
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
|
||||
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
|
||||
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
||||
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
|
||||
.et.eval{background:#fee2e2;color:#991b1b}
|
||||
.et.fac{background:#f3e8ff;color:#6b21a8}
|
||||
.et.pret{background:#dcfce7;color:#15803d}
|
||||
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
|
||||
a.bloc .n{background:#2563eb;color:#fff}
|
||||
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
|
||||
.bloc.vide h3{font-weight:800}
|
||||
.masque{display:none!important}
|
||||
|
||||
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
|
||||
|
||||
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
|
||||
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
|
||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
||||
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
|
||||
</style>
|
||||
</head>
|
||||
<body class="classe-tc">
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<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>
|
||||
<section class="hero">
|
||||
<div>
|
||||
<div class="eyebrow">1re année · Formation numérique · 2026-2027</div>
|
||||
<h1>Les cours de l'année</h1>
|
||||
<p>Trente-cinq cours de deux périodes, répartis en six grandes parties. Tu peux revenir sur la page d'un cours quand tu veux, pour revoir ce qu'on a fait.</p>
|
||||
</div>
|
||||
</header>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg><b>La machine</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M12 3l8 4v5c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V7z"/></svg><b>Moi en ligne</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M21 12a8 8 0 1 1-3.2-6.4"/><path d="M3 20l1.6-4.2"/><path d="M21 4v5h-5"/></svg><b>Communiquer</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg><b>Produire</b></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<div id="corps"></div>
|
||||
|
||||
</main>
|
||||
<footer>Formation numérique · 1re année · M. Courcelle</footer>
|
||||
|
||||
<footer class="pied">
|
||||
<div class="pied__interieur">
|
||||
Les exercices fonctionnent sans connexion Internet et peuvent être lancés depuis une clé USB.
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
"use strict";
|
||||
var MODULES=[
|
||||
{n:1,titre:"La machine et mes données",quand:"De la rentrée au congé d'automne",
|
||||
note:"On découvre ce qu'il y a dans un ordinateur, où vont les fichiers qu'on enregistre, et comment ranger son espace de travail.",
|
||||
blocs:[
|
||||
{n:1,t:"Ouvrir le cours",href:"1TC-NUM_bloc-01_ouvrir-le-cours.html"},
|
||||
{n:2,t:"Ce qu'il y a dans la boite",href:"1TC-NUM_bloc-02_ce-quil-y-a-dans-la-boite.html"},
|
||||
{n:3,t:"Où va ce que j'enregistre",href:"1TC-NUM_bloc-03_ou-va-ce-que-j-enregistre.html"},
|
||||
{n:4,t:"Comment ça circule",href:"1TC-NUM_bloc-04_comment-ca-circule.html"},
|
||||
{n:5,t:"Extensions et logiciels"},
|
||||
{n:6,t:"Exporter vers la bonne destination"},
|
||||
{n:7,t:"Organiser son espace",eval:true}]},
|
||||
{n:2,titre:"Moi en ligne",quand:"Du congé d'automne à Noël",
|
||||
note:"Ce que les autres voient de toi sur internet, les traces que tu laisses, et comment réagir quand quelque chose dérape.",
|
||||
blocs:[
|
||||
{n:8,t:"Ce que les autres voient de moi"},
|
||||
{n:9,t:"Les traces que je laisse sans le savoir"},
|
||||
{n:10,t:"Reprendre la main sur ses réglages"},
|
||||
{n:11,t:"Lire les signaux, PEGI et cyberdépendance"},
|
||||
{n:12,t:"Quand ça dérape, réagir"},
|
||||
{n:13,t:"Évaluation et campagne de prévention",eval:true}]},
|
||||
{n:3,titre:"Communiquer et interagir",quand:"De janvier au congé de détente",
|
||||
note:"Écrire un courriel qui tient la route, choisir le bon outil selon la personne à qui tu t'adresses, et connaître tes droits.",
|
||||
blocs:[
|
||||
{n:14,t:"Le paysage des outils"},
|
||||
{n:15,t:"Une adresse email qui tient la route"},
|
||||
{n:16,t:"Cc, Cci et les autres"},
|
||||
{n:17,t:"La nétiquette"},
|
||||
{n:18,t:"Choisir l'outil selon l'interlocuteur"},
|
||||
{n:19,t:"Droits et responsabilités"},
|
||||
{n:20,t:"Communiquer pour de vrai",eval:true}]},
|
||||
{n:4,titre:"Produire un document",quand:"Du congé de détente au congé de printemps",
|
||||
note:"Construire un vrai dossier au traitement de texte : structurer le texte, maîtriser la page, l'habiller et l'enrichir.",
|
||||
blocs:[
|
||||
{n:21,t:"Choisir son outil et prendre ses repères"},
|
||||
{n:22,t:"Structurer le texte"},
|
||||
{n:23,t:"Maitriser la page"},
|
||||
{n:24,t:"Habiller le document"},
|
||||
{n:25,t:"Enrichir le document"},
|
||||
{n:26,t:"Tableaux et formes"},
|
||||
{n:27,t:"Le dossier",eval:true}]},
|
||||
{n:5,titre:"Penser comme une machine",quand:"Du congé de printemps à juin",
|
||||
note:"Donner des instructions à un ordinateur : la variable, le logigramme, puis un vrai programme qu'on teste et qu'on améliore.",
|
||||
blocs:[
|
||||
{n:28,t:"Réactiver, ce que la machine sait faire"},
|
||||
{n:29,t:"La variable"},
|
||||
{n:30,t:"Écrire son logigramme"},
|
||||
{n:31,t:"Du logigramme au programme"},
|
||||
{n:32,t:"Tester, déboguer, optimiser",eval:true}]},
|
||||
{n:6,titre:"L'intelligence artificielle en question",quand:"Fin juin",
|
||||
note:"Comprendre ce qu'une IA fait vraiment, où elle se trompe, et comment décider si on s'en sert ou pas. Ces trois cours ne sont pas cotés.",
|
||||
blocs:[
|
||||
{n:33,t:"Ce que fait une IA"},
|
||||
{n:34,t:"Ce qu'une IA se trompe à faire"},
|
||||
{n:35,t:"Choisir, formuler, décider"}]}
|
||||
];
|
||||
|
||||
var corps=document.getElementById("corps");
|
||||
MODULES.forEach(function(m){
|
||||
var cartes=m.blocs.map(function(b){
|
||||
var et=b.eval?'<div class="ets"><span class="et eval">Évaluation</span></div>':"";
|
||||
var in_='<span class="n">'+b.n+'</span><div><h3>'+b.t+'</h3>'+et+'</div>';
|
||||
return b.href
|
||||
? '<a class="bloc" href="'+b.href+'">'+in_+'</a>'
|
||||
: '<div class="bloc vide">'+in_+'</div>';
|
||||
}).join("");
|
||||
var s=document.createElement("section");
|
||||
s.className="module";
|
||||
s.innerHTML='<div class="module-tete"><span class="p">Partie '+m.n+'</span><h2>'+m.titre+'</h2>'
|
||||
+'<span class="champ">'+m.quand+'</span></div><p class="module-note">'+m.note+'</p>'
|
||||
+'<div class="blocs">'+cartes+'</div>';
|
||||
corps.appendChild(s);
|
||||
});
|
||||
</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>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,321 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Formation numérique 1TC – les 35 blocs de l'année</title>
|
||||
<style>:root{--ink:#172033;--muted:#667085;--blue:#2563eb;--navy:#172554;--green:#16a34a;--red:#dc2626;--card:#fff;--line:#e5e7eb;--shadow:0 18px 45px #0f172a18}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth}
|
||||
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#edf4ff,#f8fafc 34%,#fff);color:var(--ink)}
|
||||
button,input,select{font:inherit}
|
||||
main{max-width:1180px;margin:auto;padding:34px 20px 70px}
|
||||
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
|
||||
svg.i{width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
|
||||
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(135deg,#172554,#2563eb);color:#fff;border-radius:28px;padding:30px;box-shadow:var(--shadow);margin-bottom:24px}
|
||||
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}
|
||||
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-1.6px;margin:7px 0 12px}
|
||||
.hero p{margin:0;color:#dbeafe;line-height:1.6;font-size:17px}
|
||||
.hero a.up{display:inline-flex;align-items:center;gap:7px;color:#bfdbfe;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:10px}
|
||||
.hero a.up:hover{color:#fff}
|
||||
.hero-visual{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
||||
.hero-chip{background:#ffffff14;border:1px solid #ffffff28;border-radius:18px;padding:16px;text-align:center}
|
||||
.hero-chip .ico{display:block;margin:0 auto 7px;width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hero-chip b{font-size:14px}
|
||||
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
|
||||
.badge{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800;color:#e0ecff}
|
||||
.badge.warn{background:#dc262633;border-color:#fca5a5;color:#fee2e2}
|
||||
|
||||
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
|
||||
.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px;box-shadow:0 8px 24px #0f172a0b}
|
||||
.stat strong{display:block;font-size:22px;margin-top:3px}
|
||||
.stat small{color:#64748b;font-weight:800}
|
||||
.stat.ok strong{color:var(--green)}
|
||||
|
||||
.chrono{background:#172554;color:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:20px;display:grid;gap:12px}
|
||||
.chrono-haut{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
|
||||
.pendule{font-size:32px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1}
|
||||
.pendule small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93b4d8;margin-top:5px}
|
||||
.ecart{font-size:14px;font-weight:850;padding:9px 14px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;min-width:250px;text-align:center}
|
||||
.ecart.avance{background:#16a34a2e;border-color:#4ade80;color:#dcfce7}
|
||||
.ecart.retard{background:#dc26262e;border-color:#fca5a5;color:#fee2e2}
|
||||
.chrono .row button{background:#ffffff1a;border:1px solid #ffffff30;color:#fff}
|
||||
.chrono .row button.go{background:#fff;border-color:#fff;color:#172554}
|
||||
|
||||
.navtabs{display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.navtabs.n6{grid-template-columns:repeat(6,1fr)}
|
||||
.tab{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer;color:#334155;text-align:left;position:relative}
|
||||
.tab span{display:block;font-size:11px;font-weight:800;color:#94a3b8;margin-top:3px;font-variant-numeric:tabular-nums}
|
||||
.tab:hover{border-color:#93c5fd}
|
||||
.tab.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 8px 18px #2563eb28}
|
||||
.tab.active span{color:#c7dcff}
|
||||
.tab.prevue::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:4px;border-radius:99px;background:#f59e0b}
|
||||
|
||||
.panel{display:none}.panel.active{display:block}
|
||||
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 28px #0f172a0d;margin-bottom:16px}
|
||||
.card h2,.card h3{margin-top:0}
|
||||
.card h2{font-size:26px;letter-spacing:-.5px}
|
||||
.muted{color:var(--muted);line-height:1.6}
|
||||
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
||||
.btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;background:#eaf1ff;color:#1d4ed8}
|
||||
.btn:hover{filter:brightness(.97)}
|
||||
.btn.primary{background:#2563eb;color:#fff}
|
||||
.btn.soft{background:#f1f5f9;color:#334155}
|
||||
.score{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
|
||||
.feedback{min-height:31px;margin-top:12px;font-weight:850}
|
||||
.entete{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
|
||||
.consigne{background:linear-gradient(145deg,#f8fafc,#eef6ff);border:2px solid #dbeafe;border-radius:18px;padding:20px 24px;font-size:20px;font-weight:800;line-height:1.45;margin:16px 0}
|
||||
.consigne small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:var(--blue);margin-bottom:8px}
|
||||
.info{border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 12px 12px 0;padding:13px 17px;color:#475569;font-size:15px;line-height:1.6;margin-top:16px}
|
||||
.info b{color:var(--ink)}
|
||||
.info.alerte{border-color:#fca5a5;background:#fef4f4;color:#7f2b2b}
|
||||
.info.alerte b{color:#991b1b}
|
||||
|
||||
.saisie{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
|
||||
.saisie input{flex:1;min-width:210px;padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;outline:none}
|
||||
.saisie input:focus{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb18}
|
||||
.saisie select{padding:12px 14px;border:2px solid #cbd5e1;border-radius:12px;font-weight:800}
|
||||
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
|
||||
.colonne{border:1px solid var(--line);border-radius:17px;background:#f8fbff;min-height:145px;padding:13px}
|
||||
.colonne h3{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
|
||||
.colonne h3 em{font-style:normal;color:#94a3b8;font-size:12px}
|
||||
.colonne ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
|
||||
.colonne li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
|
||||
.colonne li button{background:none;border:0;color:#cbd5e1;cursor:pointer;padding:0 3px;font-weight:900}
|
||||
.colonne li button:hover{color:var(--red)}
|
||||
|
||||
.accordeon{display:grid;gap:10px}
|
||||
.item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
|
||||
.item>button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:15px 18px;cursor:pointer}
|
||||
.item>button:hover{background:#f8fbff}
|
||||
.item .n{width:30px;height:30px;flex:none;border-radius:10px;background:#eaf1ff;color:#1d4ed8;font-weight:950;display:grid;place-items:center;font-size:14px}
|
||||
.item .t{font-weight:850;font-size:17px;flex:1}
|
||||
.item .plus{color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
|
||||
.item .corps{display:none;padding:0 18px 17px 62px;color:#475569;line-height:1.6}
|
||||
.item.ouvert .corps{display:block}
|
||||
.item.ouvert{border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.item.ouvert .n{background:#2563eb;color:#fff}
|
||||
|
||||
.qcard{border:2px solid #dbeafe;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f4f9ff);padding:24px 26px}
|
||||
.qtag{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:900;margin-bottom:10px}
|
||||
.qtag.cle{background:#fef3c7;color:#92400e}
|
||||
.qtxt{font-size:22px;font-weight:900;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
|
||||
.answer-grid{display:grid;gap:8px}
|
||||
.answer{border:2px solid #dbe3ef;background:#fff;border-radius:12px;padding:11px 14px;text-align:left;font-weight:800}
|
||||
.answer.ok{border-color:#22c55e;background:#f0fdf4}
|
||||
.reveal{display:none;margin-top:16px;border-top:2px dashed #dbeafe;padding-top:15px}
|
||||
.reveal.on{display:block}
|
||||
.verdict{font-weight:950;color:var(--green);margin-bottom:8px}
|
||||
|
||||
.steps{display:grid;gap:11px}
|
||||
.step{border:1px solid var(--line);border-radius:17px;background:#fff;padding:16px 20px;display:flex;gap:15px;align-items:flex-start;opacity:.4}
|
||||
.step.on{opacity:1;border-color:#93c5fd;box-shadow:0 8px 20px #2563eb14}
|
||||
.step.fait{opacity:1}
|
||||
.step .n{width:34px;height:34px;flex:none;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center}
|
||||
.step.on .n{background:#2563eb;color:#fff}
|
||||
.step.fait .n{background:#dcfce7;color:#15803d}
|
||||
.step h3{margin:0 0 4px;font-size:17px}
|
||||
.step p{margin:0;color:#475569;font-size:15px;line-height:1.55}
|
||||
|
||||
figure{margin:0 0 18px}
|
||||
figure svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px}
|
||||
figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}
|
||||
|
||||
.trace{border:2px solid #dbeafe;background:linear-gradient(145deg,#fbfdff,#eef6ff);border-radius:20px;padding:26px 30px;font-size:19px;line-height:1.85}
|
||||
.trace h3{margin:0 0 14px;font-size:22px}
|
||||
.trace p{margin:0 0 .5em}
|
||||
.trace code{background:#fff;border:1px solid #dbeafe;border-radius:6px;padding:1px 7px;font-size:.92em}
|
||||
|
||||
.check{display:grid;gap:9px}
|
||||
.check label{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px 18px;cursor:pointer;font-weight:750}
|
||||
.check label:hover{border-color:#93c5fd}
|
||||
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
|
||||
.check input:checked+span{color:var(--green);font-weight:900}
|
||||
|
||||
table.grille{width:100%;border-collapse:collapse;font-size:15px}
|
||||
table.grille th,table.grille td{border:1px solid var(--line);padding:10px 13px;text-align:left}
|
||||
table.grille th{background:#f8fafc;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#475569}
|
||||
table.grille td.masque{color:transparent;background:#f8fafc}
|
||||
table.grille tr.on td{background:#f0fdf4}
|
||||
table.grille td b{color:#15803d}
|
||||
|
||||
.filtres{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:0 8px 24px #0f172a0b;margin-bottom:20px}
|
||||
.filtres .compte{margin-left:auto;font-weight:850;color:var(--muted);font-size:14px}
|
||||
.module{margin-bottom:30px}
|
||||
.module-tete{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
|
||||
.module-tete h2{margin:0;font-size:25px;letter-spacing:-.6px}
|
||||
.module-tete .p{background:#172554;color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:900}
|
||||
.module-tete .champ{color:var(--muted);font-size:14px;margin-left:auto}
|
||||
.module-note{color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:76ch}
|
||||
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
|
||||
.bloc{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 19px;display:flex;gap:15px;align-items:flex-start;text-decoration:none;color:inherit;box-shadow:0 8px 24px #0f172a08}
|
||||
.bloc .n{width:40px;height:40px;flex:none;border-radius:14px;background:#f1f5f9;color:#94a3b8;font-weight:950;display:grid;place-items:center;font-size:17px}
|
||||
.bloc h3{margin:0 0 5px;font-size:17px;line-height:1.3}
|
||||
.bloc .att{font-size:13px;color:var(--muted);font-weight:600}
|
||||
.ets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
|
||||
.et{font-size:11px;font-weight:900;border-radius:999px;padding:4px 9px;background:#f1f5f9;color:#475569}
|
||||
.et.eval{background:#fee2e2;color:#991b1b}
|
||||
.et.fac{background:#f3e8ff;color:#6b21a8}
|
||||
.et.pret{background:#dcfce7;color:#15803d}
|
||||
a.bloc:hover{border-color:#93c5fd;box-shadow:0 12px 28px #2563eb1f}
|
||||
a.bloc .n{background:#2563eb;color:#fff}
|
||||
.bloc.vide{border-style:dashed;opacity:.68;box-shadow:none}
|
||||
.bloc.vide h3{font-weight:800}
|
||||
.masque{display:none!important}
|
||||
|
||||
footer{margin:42px auto 18px;max-width:1180px;padding:16px 20px;text-align:center;color:#64748b;font-size:12px;border-top:1px solid var(--line)}
|
||||
|
||||
@media(max-width:980px){.hero{grid-template-columns:1fr}.dashboard{grid-template-columns:repeat(2,1fr)}.navtabs.n6{grid-template-columns:repeat(3,1fr)}}
|
||||
@media(max-width:620px){main{padding:20px 12px 60px}.hero{padding:22px 18px}.dashboard{grid-template-columns:1fr}.navtabs.n6{grid-template-columns:repeat(2,1fr)}.blocs{grid-template-columns:1fr}.ecart{min-width:0;flex:1}.filtres .compte{margin-left:0;width:100%}}
|
||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
||||
@media print{.chrono,.navtabs,.filtres,.saisie{display:none}.panel{display:block!important}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<section class="hero">
|
||||
<div>
|
||||
<div class="eyebrow">Document enseignant · 1TC-NUM · 2026-2027</div>
|
||||
<h1>Formation numérique<br>Pilotage des 35 blocs</h1>
|
||||
<p>Version enseignant, avec les attendus, les moments d'évaluation et les notes de conduite. Ne pas projeter. La version destinée aux élèves est <a href="index.html" style="color:#fff;text-decoration:underline">ici</a>.</p>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg><b>La machine</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M12 3l8 4v5c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V7z"/></svg><b>Sécurité</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M21 12a8 8 0 1 1-3.2-6.4"/><path d="M3 20l1.6-4.2"/><path d="M21 4v5h-5"/></svg><b>Communiquer</b></div>
|
||||
<div class="hero-chip"><svg class="ico" viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg><b>Produire</b></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="dashboard">
|
||||
<div class="stat"><small>Blocs de 2 périodes</small><strong>35</strong></div>
|
||||
<div class="stat ok"><small>Pages disponibles</small><strong id="cPret">0</strong></div>
|
||||
<div class="stat"><small>Moments d'évaluation</small><strong>5</strong></div>
|
||||
<div class="stat"><small>Blocs facultatifs</small><strong>3</strong></div>
|
||||
</section>
|
||||
|
||||
<div class="filtres">
|
||||
<button class="btn primary" data-f="tout">Tous les blocs</button>
|
||||
<button class="btn soft" data-f="pret">Pages disponibles</button>
|
||||
<button class="btn soft" data-f="eval">Évaluations</button>
|
||||
<button class="btn soft" data-f="comp">Compressibles</button>
|
||||
<button class="btn soft" data-f="fac">Facultatifs</button>
|
||||
<span class="compte" id="compte"></span>
|
||||
</div>
|
||||
|
||||
<div id="corps"></div>
|
||||
|
||||
</main>
|
||||
<footer>Séquence annuelle, volet numérique FMTTN · Référentiel et programme SeGEC D/2025/7362/3/13 · M. Courcelle</footer>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
var MODULES=[
|
||||
{n:1,titre:"La machine et mes données",periode:"Période 1",champ:"Informations et données · rentrée au congé d'automne",
|
||||
note:"Installe le vocabulaire et les gestes de base sans lesquels rien d'autre n'est possible. Se termine par la première tâche intégratrice de l'année.",
|
||||
blocs:[
|
||||
{n:1,t:"Ouvrir le cours et savoir où l'on met les pieds",a:"Aucun attendu formel, diagnostic",href:"1TC-NUM_bloc-01_pilotage.html"},
|
||||
{n:2,t:"Ce qu'il y a dans la boite",a:"S21",href:"1TC-NUM_bloc-02_pilotage.html"},
|
||||
{n:3,t:"Où va ce que j'enregistre",a:"S21, plus Ko à To en facultatif",href:"1TC-NUM_bloc-03_pilotage.html"},
|
||||
{n:4,t:"Comment ça circule",a:"S17, plus serveur et web en facultatif",href:"1TC-NUM_bloc-04_pilotage.html"},
|
||||
{n:5,t:"Extensions et logiciels",a:"S16, S36",comp:true},
|
||||
{n:6,t:"Exporter vers la bonne destination",a:"SF16"},
|
||||
{n:7,t:"Organiser son espace",a:"C11, SF16, S16, S36",eval:"Formative certifiante"}]},
|
||||
{n:2,titre:"Moi en ligne",periode:"Période 2",champ:"Sécurité · congé d'automne à Noël",
|
||||
note:"Le champ Sécurité se termine formellement en S1, d'où son traitement complet et précoce. C'est aussi l'âge où les élèves ouvrent leurs premiers comptes.",
|
||||
blocs:[
|
||||
{n:8,t:"Ce que les autres voient de moi",a:"S34, C22"},
|
||||
{n:9,t:"Les traces que je laisse sans le savoir",a:"S39, SF58"},
|
||||
{n:10,t:"Reprendre la main sur ses réglages",a:"SF59, SF53"},
|
||||
{n:11,t:"Lire les signaux, PEGI et cyberdépendance",a:"S34, C19"},
|
||||
{n:12,t:"Quand ça dérape, réagir",a:"SF54"},
|
||||
{n:13,t:"Évaluation et campagne de prévention",a:"C22, C19, S34, S39, SF53, SF58, SF59, SF54",eval:"Sommative 1"}]},
|
||||
{n:3,titre:"Communiquer et interagir",periode:"Période 3",champ:"Communication et collaboration · janvier au congé de détente",
|
||||
note:"Champ non travaillé depuis la P5 du fondamental, une réactivation est nécessaire avant tout apport nouveau. Suppose une adresse email par élève, à arbitrer avec la direction.",
|
||||
blocs:[
|
||||
{n:14,t:"Le paysage des outils",a:"S37, S18"},
|
||||
{n:15,t:"Une adresse email qui tient la route",a:"SF35, S38"},
|
||||
{n:16,t:"Cc, Cci et les autres",a:"SF35"},
|
||||
{n:17,t:"La nétiquette",a:"SF39",comp:true},
|
||||
{n:18,t:"Choisir l'outil selon l'interlocuteur",a:"SF56, SF57"},
|
||||
{n:19,t:"Droits et responsabilités",a:"S28, SF19"},
|
||||
{n:20,t:"Communiquer pour de vrai",a:"C13, SF35, SF39, SF56, SF57, SF19",eval:"Formative certifiante"}]},
|
||||
{n:4,titre:"Produire un document",periode:"Périodes 4 et 5",champ:"Création de contenus, traitement de texte · détente au printemps",
|
||||
note:"Le module le plus long de l'année, sur la période la plus propice à un travail suivi. Tout texte à produire est fourni en brut, jamais à taper.",
|
||||
blocs:[
|
||||
{n:21,t:"Choisir son outil et prendre ses repères",a:"SF40, SF17"},
|
||||
{n:22,t:"Structurer le texte",a:"S22, S23, SF32"},
|
||||
{n:23,t:"Maitriser la page",a:"SF32, S23",comp:true},
|
||||
{n:24,t:"Habiller le document",a:"SF33"},
|
||||
{n:25,t:"Enrichir le document",a:"SF33, S22"},
|
||||
{n:26,t:"Tableaux et formes",a:"SF33",comp:true},
|
||||
{n:27,t:"Le dossier",a:"C12, S22, S23, SF17, SF32, SF33, SF40",eval:"Sommative 2"}]},
|
||||
{n:5,titre:"Penser comme une machine",periode:"Période 5",champ:"Pensée algorithmique · printemps à juin",
|
||||
note:"La variable et le passage du débogage à l'optimisation sont les deux nouveautés conceptuelles réelles de l'année. La programmation par blocs relance l'engagement au printemps.",
|
||||
blocs:[
|
||||
{n:28,t:"Réactiver, ce que la machine sait faire",a:"Acquis de la P6, diagnostic"},
|
||||
{n:29,t:"La variable",a:"S29, SF43"},
|
||||
{n:30,t:"Écrire son logigramme",a:"SF44, C16"},
|
||||
{n:31,t:"Du logigramme au programme",a:"SF45, SF46"},
|
||||
{n:32,t:"Tester, déboguer, optimiser",a:"C16, C17, S29, SF43 à SF46",eval:"Sommative 3"}]},
|
||||
{n:6,titre:"L'intelligence artificielle en question",periode:"Période 5",champ:"Complément facultatif de la brochure · fin juin",
|
||||
note:"Intégralement facultatif et non cotable, puisque aucun attendu ne figure au référentiel. Construit pour n'exiger aucune manipulation d'outil génératif par les élèves.",
|
||||
blocs:[
|
||||
{n:33,t:"Ce que fait une IA",a:"Hors référentiel",fac:true},
|
||||
{n:34,t:"Ce qu'une IA se trompe à faire",a:"Hors référentiel",fac:true},
|
||||
{n:35,t:"Choisir, formuler, décider",a:"Hors référentiel",fac:true}]}
|
||||
];
|
||||
|
||||
var corps=document.getElementById("corps"),pret=0;
|
||||
MODULES.forEach(function(m){
|
||||
var cartes=m.blocs.map(function(b){
|
||||
if(b.href) pret++;
|
||||
var d=[];
|
||||
if(b.href) d.push("pret");
|
||||
if(b.eval) d.push("eval");
|
||||
if(b.comp) d.push("comp");
|
||||
if(b.fac) d.push("fac");
|
||||
var et="";
|
||||
if(b.eval) et+='<span class="et eval">'+b.eval+'</span>';
|
||||
if(b.comp) et+='<span class="et">Compressible</span>';
|
||||
if(b.fac) et+='<span class="et fac">Facultatif</span>';
|
||||
et+=b.href?'<span class="et pret">Page prête</span>':'<span class="et">Page à produire</span>';
|
||||
var in_='<span class="n">'+b.n+'</span><div><h3>'+b.t+'</h3><div class="att">'+b.a+'</div><div class="ets">'+et+'</div></div>';
|
||||
return b.href
|
||||
? '<a class="bloc" data-t="'+d.join(" ")+'" href="'+b.href+'">'+in_+'</a>'
|
||||
: '<div class="bloc vide" data-t="'+d.join(" ")+'">'+in_+'</div>';
|
||||
}).join("");
|
||||
var s=document.createElement("section");
|
||||
s.className="module";
|
||||
s.innerHTML='<div class="module-tete"><span class="p">Module '+m.n+' · '+m.periode+'</span><h2>'+m.titre+'</h2>'
|
||||
+'<span class="champ">'+m.champ+'</span></div><p class="module-note">'+m.note+'</p>'
|
||||
+'<div class="blocs">'+cartes+'</div>';
|
||||
corps.appendChild(s);
|
||||
});
|
||||
document.getElementById("cPret").textContent=pret;
|
||||
|
||||
var compte=document.getElementById("compte");
|
||||
function filtre(f){
|
||||
var n=0;
|
||||
document.querySelectorAll(".bloc").forEach(function(el){
|
||||
var ok=(f==="tout")||(el.dataset.t||"").split(" ").indexOf(f)>-1;
|
||||
el.classList.toggle("masque",!ok);
|
||||
if(ok) n++;
|
||||
});
|
||||
document.querySelectorAll(".module").forEach(function(s){
|
||||
s.classList.toggle("masque",s.querySelectorAll(".bloc:not(.masque)").length===0);
|
||||
});
|
||||
compte.textContent=n+" bloc"+(n>1?"s":"")+" affiché"+(n>1?"s":"");
|
||||
}
|
||||
document.querySelectorAll(".filtres button").forEach(function(b){
|
||||
b.onclick=function(){
|
||||
document.querySelectorAll(".filtres button").forEach(function(x){x.className="btn soft";});
|
||||
b.className="btn primary";
|
||||
filtre(b.dataset.f);
|
||||
};
|
||||
});
|
||||
filtre("tout");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,565 @@
|
||||
# Feuille de route — créer un module de cours pour la plateforme « Mes cours »
|
||||
|
||||
> **À l'attention de Claude (claude.ai).** Ce document décrit comment produire
|
||||
> les pages d'un module de cours pour une plateforme existante. Les pages que tu
|
||||
> produis seront déposées telles quelles dans le dépôt. Respecte les règles à la
|
||||
> lettre : tout écart (chemin absolu, couleur en dur, bibliothèque externe…) casse
|
||||
> le site ou son unité visuelle.
|
||||
>
|
||||
> **Conseil à l'enseignant :** joins à la conversation `assets/theme.css`, ainsi
|
||||
> que la feuille du gabarit choisi (`assets/exercices-commune.css` ou
|
||||
> `assets/atelier-texte.css`). Claude connaîtra ainsi les classes réelles.
|
||||
|
||||
---
|
||||
|
||||
## 1. Le contexte en bref
|
||||
|
||||
- Site **statique** : HTML, CSS et JavaScript natifs. Aucun framework, aucune
|
||||
bibliothèque, aucun CDN, aucun outil de construction.
|
||||
- Il doit fonctionner **hors ligne**, y compris ouvert depuis une clé USB
|
||||
(`file://`). Aucun appel réseau, sauf la feuille Google Fonts déjà prévue dans
|
||||
le gabarit (elle échoue sans dommage si le réseau la bloque).
|
||||
- Public : élèves du secondaire (12-18 ans), en local informatique, souvent
|
||||
devant un TBI. Textes courts, consignes directes, tutoiement.
|
||||
- Langue : **français correctement accentué** partout dans le texte affiché.
|
||||
- Toutes les couleurs, polices et composants de base existent déjà dans
|
||||
`assets/theme.css`. **Tu ne crées pas de charte : tu utilises la sienne.**
|
||||
|
||||
> **Aperçu dans le chat :** les pages chargent leurs feuilles de style par des
|
||||
> chemins relatifs (`../../assets/…`) qui n'existent pas dans ton aperçu. La
|
||||
> page y apparaîtra donc sans mise en forme. C'est normal. **N'intègre pas le
|
||||
> thème dans la page pour « corriger » l'aperçu.**
|
||||
|
||||
---
|
||||
|
||||
## 2. Arborescence
|
||||
|
||||
```
|
||||
index.html aiguillage général (ne pas toucher)
|
||||
assets/ ressources communes (ne pas toucher)
|
||||
<classe>/index.html liste des modules de la classe
|
||||
<classe>/images/ images de la classe, partagées par ses modules
|
||||
<classe>/<module>/index.html accueil du module (ou le module entier)
|
||||
<classe>/<module>/bloc2.html … pages supplémentaires éventuelles
|
||||
```
|
||||
|
||||
### Les classes
|
||||
|
||||
| Dossier | Classe du `<body>` | Nom affiché | Cours |
|
||||
|---|---|---|---|
|
||||
| `1re-numerique` | `classe-tc` | 1re tronc commun | Numérique |
|
||||
| `2e-differenciee` | `classe-diff` | 2e différenciée | Initiation à l'informatique |
|
||||
| `2e-commune` | `classe-comm` | 2e commune | Informatique |
|
||||
| `3tq-technique-sociale` | `classe-ts` | 3e TQ Technique sociale | Traitement de texte |
|
||||
| `4tq-agent-education` | `classe-ae` | 4e TQ Agent d'éducation | Traitement de texte |
|
||||
|
||||
### Nommage
|
||||
|
||||
- Dossier du module : `module1`, `module2`… (ou `module-a`, `module-b`). Minuscules,
|
||||
sans accent, sans espace.
|
||||
- Pages : `index.html` obligatoire. Pages suivantes : `bloc2.html`, `seance2.html`…
|
||||
- Images : `m<numéro>-<sujet>.png|jpg`, par exemple `m3-menu-format.png`,
|
||||
rangées dans `<classe>/images/`.
|
||||
|
||||
---
|
||||
|
||||
## 3. Règles absolues
|
||||
|
||||
1. **Chemins relatifs uniquement.** Depuis une page de module :
|
||||
`../../assets/theme.css`, `../index.html`, `../images/m3-menu.png`.
|
||||
Jamais `/assets/…`, jamais `https://…` vers le site lui-même.
|
||||
2. **Liens explicites vers `index.html`** : écrire `../index.html`, pas `../`
|
||||
(sinon le lien ne marche pas depuis une clé USB).
|
||||
3. **Aucune couleur en dur** (`#1f4e79`, `blue`, `rgb(…)`) dans le HTML, le CSS
|
||||
ou les SVG. Utiliser les variables de la section 5. Seule exception tolérée :
|
||||
`#fff` pour un texte posé sur `var(--juste)` ou `var(--erreur)`.
|
||||
4. **Ne jamais redéfinir `:root`, `body`, `h1`, `h2`, `h3`, `.action`,
|
||||
`.encadre`** ni aucune classe de `theme.css`.
|
||||
5. **Un seul `<h1>`**, dans l'en-tête. Le contenu commence à `<h2>`.
|
||||
6. **Toute action se fait sur un `<button type="button">`**, jamais sur un
|
||||
`<div onclick>`. Si un élément non-bouton doit être cliquable (zone SVG,
|
||||
conteneur qui reçoit des étiquettes), lui donner `tabindex="0"`,
|
||||
`role="button"`, un `aria-label` et gérer Entrée et Espace.
|
||||
7. **Les retours de correction** (« Juste », « Non… ») vont dans un élément
|
||||
`role="status" aria-live="polite"`.
|
||||
8. **Pas de `localStorage` obligatoire** : la page doit fonctionner entièrement
|
||||
sans lui.
|
||||
9. **Pas de texte qui repose sur la couleur seule** : un verdict dit « Juste » ou
|
||||
« Non », il ne se contente pas de verdir.
|
||||
|
||||
---
|
||||
|
||||
## 4. Choisir un gabarit
|
||||
|
||||
| Besoin | Gabarit | Exemple existant |
|
||||
|---|---|---|
|
||||
| Théorie courte + série d'exercices corrigés automatiquement, avec compteur de score | **A — Exercices** | `2e-commune/module1/` |
|
||||
| Cours à lire, long, avec démonstrations, quiz et exercices intégrés au texte | **B — Document long** | `3tq-technique-sociale/module1/` |
|
||||
|
||||
Le gabarit **A** est à privilégier : ses exercices sont décrits en données, sans
|
||||
code à écrire. Le gabarit **B** convient au traitement de texte et à tout
|
||||
contenu surtout textuel.
|
||||
|
||||
---
|
||||
|
||||
## 5. Jetons et composants disponibles (`assets/theme.css`)
|
||||
|
||||
### Variables de couleur
|
||||
|
||||
| Variable | Usage |
|
||||
|---|---|
|
||||
| `--encre` | texte principal, contours |
|
||||
| `--encre-douce` | texte secondaire |
|
||||
| `--papier` | fond de page |
|
||||
| `--blanc` | fond des cartes et champs |
|
||||
| `--trait`, `--trait-fort` | bordures neutres |
|
||||
| `--accent` | couleur vive de la classe : **fonds et filets seulement, jamais du texte** |
|
||||
| `--accent-fond` | aplat pâle de la classe |
|
||||
| `--accent-encre` | couleur de la classe **lisible en texte** |
|
||||
| `--juste`, `--juste-fond` | bonne réponse |
|
||||
| `--erreur`, `--erreur-fond` | mauvaise réponse |
|
||||
| `--cible`, `--cible-fond` | surlignage, élément actif |
|
||||
|
||||
Polices : `--police-titre` (JetBrains Mono), `--police-texte` (Inter),
|
||||
`--police-doc` (Cambria, pour imiter un document Word/Writer).
|
||||
Mesures : `--lecture` (largeur de paragraphe), `--page`, `--gouttiere`.
|
||||
|
||||
### Composants
|
||||
|
||||
| Classe | Rôle |
|
||||
|---|---|
|
||||
| `.chapeau` | paragraphe d'introduction, plus grand, gris |
|
||||
| `.encadre` | encadré neutre coloré à la classe |
|
||||
| `.encadre.encadre--theorie` | « Ce qu'il faut savoir » |
|
||||
| `.encadre.encadre--cle` | la règle à retenir (jaune) |
|
||||
| `.encadre.encadre--attention` | piège fréquent (rouge) |
|
||||
| `.action` | bouton principal ; `.action--secondaire` pour le bouton blanc |
|
||||
| `.actions` | rangée de boutons |
|
||||
| `table`, `th`, `td` | tableaux déjà stylés, rien à ajouter |
|
||||
| `figure`, `figcaption` | images légendées |
|
||||
| `.manque` | cadre « image à ajouter » (voir section 8) |
|
||||
| `code`, `kbd` | raccourcis clavier, noms de fichiers |
|
||||
| `.modules` / `.module` | cartes de liste (pour l'accueil d'un module à plusieurs pages) |
|
||||
|
||||
---
|
||||
|
||||
## 6. Gabarit A — Module d'exercices
|
||||
|
||||
### 6.1 Squelette d'une page
|
||||
|
||||
Remplacer les `{{…}}`. Ne rien retirer d'autre.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{Bloc 2}} — {{Module 3}} — {{2e commune}}</title>
|
||||
<meta name="robots" content="noindex">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../assets/theme.css">
|
||||
<link rel="stylesheet" href="../../assets/exercices-commune.css">
|
||||
</head>
|
||||
<body class="{{classe-comm}}">
|
||||
|
||||
<header class="entete">
|
||||
<div class="entete__interieur">
|
||||
<nav class="ariane" aria-label="Fil d'Ariane">
|
||||
<a href="../../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="../index.html">{{2e commune}}</a><span aria-hidden="true">/</span><strong>{{Module 3}}</strong>
|
||||
</nav>
|
||||
<h1>{{Titre de la page}}</h1>
|
||||
<p class="entete__meta">{{Bloc 2 du module 3, titre du module · cours papier, chapitre 7}}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Uniquement si le module a plusieurs pages. aria-current="page" sur la page courante. -->
|
||||
<nav class="sommaire" aria-label="Blocs du module">
|
||||
<div class="sommaire__interieur">
|
||||
<a href="index.html">Accueil</a>
|
||||
<a href="bloc2.html" aria-current="page">Bloc 2</a>
|
||||
<a href="bloc3.html">Bloc 3</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="contenu">
|
||||
|
||||
<div class="encadre encadre--theorie">
|
||||
<h3>Ce qu'il faut savoir avant de jouer</h3>
|
||||
<ul>
|
||||
<li>{{Notion 1}}</li>
|
||||
<li>{{Notion 2}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Exercices et jeux</h2>
|
||||
<div id="exercices"></div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="pied">
|
||||
<div class="pied__interieur">
|
||||
Support d'exercices hors ligne, utilisable depuis une clé USB.
|
||||
Toute la théorie utilisée ici figure dans le cours papier, chapitre {{7}}.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>window.DATA = [ /* exercices, voir 6.2 */ ];</script>
|
||||
<script src="../../assets/exercices-commune.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Le moteur construit tout seul le compteur de score, les cartes d'exercice et les
|
||||
corrections. **N'écris aucun JavaScript** pour ce gabarit : seulement `window.DATA`.
|
||||
|
||||
### 6.2 Format des exercices
|
||||
|
||||
> **Les clés sont sans accent** (`enonce`, `reponse`, `acceptees`, `etapes`…) :
|
||||
> ce sont des identifiants lus par le moteur. **Les valeurs sont du français
|
||||
> accentué.** Ne jamais traduire ni accentuer une clé.
|
||||
|
||||
Champs communs à tous les types :
|
||||
|
||||
| Clé | Obligatoire | Contenu |
|
||||
|---|---|---|
|
||||
| `type` | oui | un des dix types ci-dessous |
|
||||
| `consigne` | oui | titre court de l'exercice |
|
||||
| `enonce` | selon le type | la question ou l'instruction |
|
||||
| `explication` | non, conseillé | affichée à la fin, dit **pourquoi** |
|
||||
|
||||
#### `qcm` — une seule bonne réponse
|
||||
|
||||
```json
|
||||
{"type": "qcm", "consigne": "La pièce qui travaille",
|
||||
"enonce": "Où se font les calculs de l'ordinateur ?",
|
||||
"options": ["dans l'écran", "dans le clavier", "dans le processeur"],
|
||||
"reponse": 2,
|
||||
"explication": "L'écran affiche, il ne calcule pas."}
|
||||
```
|
||||
`reponse` = index de la bonne option, **en partant de 0**.
|
||||
|
||||
#### `vf` — vrai ou faux
|
||||
|
||||
```json
|
||||
{"type": "vf", "consigne": "Vrai ou faux",
|
||||
"enonce": "Un smartphone n'est pas un ordinateur.",
|
||||
"reponse": false,
|
||||
"explication": "C'est un ordinateur dont l'écran et le clavier ont fusionné."}
|
||||
```
|
||||
|
||||
#### `assoc` — relier deux colonnes
|
||||
|
||||
```json
|
||||
{"type": "assoc", "consigne": "Chaque élément son rôle",
|
||||
"enonce": "Associe chaque élément à ce qu'il fait.",
|
||||
"paires": [["écran", "afficher"], ["clavier", "entrer du texte"], ["processeur", "calculer"]]}
|
||||
```
|
||||
La colonne de droite est mélangée automatiquement. 3 à 6 paires.
|
||||
|
||||
#### `tri` — classer dans des paniers
|
||||
|
||||
```json
|
||||
{"type": "tri", "consigne": "Entrée ou sortie",
|
||||
"enonce": "Choisis un objet, puis clique sur le panier qui convient.",
|
||||
"paniers": ["Entrée", "Sortie", "Les deux"],
|
||||
"items": [["clavier", 0], ["écran", 1], ["écran tactile", 2]]}
|
||||
```
|
||||
Dans `items`, le nombre est l'index du bon panier (à partir de 0). 2 à 4 paniers, 6 à 12 étiquettes.
|
||||
|
||||
#### `ordre` — remettre des étapes dans l'ordre
|
||||
|
||||
```json
|
||||
{"type": "ordre", "consigne": "Retirer une clé USB",
|
||||
"etapes": ["Cliquer sur l'icône de retrait", "Choisir d'éjecter", "Attendre la confirmation", "Retirer la clé"]}
|
||||
```
|
||||
Écrire les étapes **dans le bon ordre** : le moteur les mélange.
|
||||
|
||||
#### `texte` — réponse courte tapée
|
||||
|
||||
```json
|
||||
{"type": "texte", "consigne": "Réponse courte",
|
||||
"enonce": "Comment appelle-t-on la pièce qui effectue les calculs ?",
|
||||
"acceptees": ["processeur", "le processeur", "cpu"],
|
||||
"indice": "Relis le point 1.4 du cours."}
|
||||
```
|
||||
Majuscules, accents et ponctuation sont ignorés à la comparaison. Lister les
|
||||
variantes raisonnables. `indice` s'affiche après une erreur.
|
||||
|
||||
#### `calcul` — réponse numérique
|
||||
|
||||
```json
|
||||
{"type": "calcul", "consigne": "Calcul de capacité",
|
||||
"enonce": "Combien de photos de 4 Mo tiennent sur une clé de 32 Go ?",
|
||||
"reponse": 8000, "tolerance": 50,
|
||||
"indice": "Convertis d'abord les Go en Mo."}
|
||||
```
|
||||
`tolerance` = écart accepté (0 par défaut). La virgule décimale est acceptée.
|
||||
|
||||
#### `intrus` — trouver les affirmations fausses
|
||||
|
||||
```json
|
||||
{"type": "intrus", "consigne": "Chasse aux affirmations fausses",
|
||||
"enonce": "Clique uniquement sur les affirmations fausses.",
|
||||
"items": [["L'écran fait les calculs", true], ["Le clavier est un périphérique d'entrée", false]]}
|
||||
```
|
||||
`true` = cette affirmation est **fausse** (c'est un intrus à cliquer). Au moins un `true`.
|
||||
|
||||
#### `chrono` — série chronométrée
|
||||
|
||||
```json
|
||||
{"type": "chrono", "consigne": "Série chronométrée",
|
||||
"enonce": "Huit questions, une minute.", "secondes": 60,
|
||||
"questions": [
|
||||
{"enonce": "Fait les calculs :", "options": ["écran", "processeur", "souris"], "reponse": 1}
|
||||
]}
|
||||
```
|
||||
Réussite à 70 % de bonnes réponses. 6 à 10 questions de 3 options courtes.
|
||||
Compter environ 7 secondes par question.
|
||||
|
||||
#### `hotspot` — cliquer sur un schéma
|
||||
|
||||
```json
|
||||
{"type": "hotspot", "consigne": "Les éléments du poste",
|
||||
"enonce": "Clique sur l'élément demandé.",
|
||||
"svg": "<svg viewBox=\"0 0 400 220\" width=\"100%\" style=\"max-width:400px\"><rect x=\"20\" y=\"20\" width=\"90\" height=\"160\" rx=\"6\" fill=\"var(--accent-fond)\" stroke=\"var(--encre)\"/><rect class=\"zone\" data-zone=\"unité centrale\" x=\"20\" y=\"20\" width=\"90\" height=\"160\" rx=\"6\"/><text x=\"26\" y=\"200\">unité centrale</text></svg>",
|
||||
"zones": ["unité centrale"]}
|
||||
```
|
||||
- Le dessin et la zone cliquable sont deux formes superposées : la forme
|
||||
visible avec ses couleurs, puis la même forme avec `class="zone"` et
|
||||
`data-zone`, **sans** `fill` ni `stroke` (le thème s'en charge).
|
||||
- Chaque valeur de `zones` doit être **identique, accents compris**, à un `data-zone`.
|
||||
- Couleurs du dessin : uniquement `var(--accent-fond)`, `var(--encre)`,
|
||||
`var(--papier)`, `var(--blanc)`.
|
||||
- Guillemets du SVG échappés en `\"` puisqu'il est dans une chaîne JSON.
|
||||
|
||||
### 6.3 Composition d'une page
|
||||
|
||||
- 12 à 20 exercices par page, en variant les types.
|
||||
- Ordre conseillé : repérage (`hotspot`, `assoc`), classement (`tri`),
|
||||
vérification (`qcm`, `vf`), production (`texte`, `calcul`), piège (`intrus`),
|
||||
et un `chrono` en fin de page.
|
||||
- Toute notion utilisée dans un exercice doit figurer dans l'encadré théorie de
|
||||
la page ou dans le cours papier cité en pied de page.
|
||||
|
||||
### 6.4 Accueil d'un module à plusieurs pages
|
||||
|
||||
L'`index.html` du module présente le module et liste ses pages avec les cartes
|
||||
`.modules` (même balisage que la section 9), puis un encadré « Comment ça
|
||||
marche ». Il charge `exercices-commune.css` mais **pas** le script, et n'a pas
|
||||
de `<div id="exercices">`. Modèle : `2e-commune/module1/index.html`.
|
||||
|
||||
---
|
||||
|
||||
## 7. Gabarit B — Document long (traitement de texte)
|
||||
|
||||
### 7.1 Squelette
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{Module 3}} — {{3e TQ Technique sociale}}</title>
|
||||
<meta name="robots" content="noindex">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../assets/theme.css">
|
||||
<link rel="stylesheet" href="../../assets/atelier-texte.css">
|
||||
</head>
|
||||
<body class="{{classe-ts}}">
|
||||
|
||||
<header class="entete">
|
||||
<div class="entete__interieur">
|
||||
<nav class="ariane" aria-label="Fil d'Ariane">
|
||||
<a href="../../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="../index.html">{{3e TQ Technique sociale}}</a><span aria-hidden="true">/</span><strong>{{Module 3}}</strong>
|
||||
</nav>
|
||||
<h1>{{Titre du module}}</h1>
|
||||
<p class="entete__meta">{{Traitement de texte · sous-titre}}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<nav class="sommaire-lat" aria-label="Sommaire">
|
||||
<a class="top" href="#haut">{{Module 3}}</a>
|
||||
<h2>{{Module 3, titre}}</h2>
|
||||
<a href="#m3-{{section}}">{{Section}}</a>
|
||||
<!-- une entrée par <h2 id="…"> du contenu -->
|
||||
<h2>Autres modules</h2>
|
||||
<a href="../index.html">Tous les modules de la classe</a>
|
||||
</nav>
|
||||
|
||||
<main class="feuille" id="haut">
|
||||
<div class="regle" aria-hidden="true"></div>
|
||||
<div class="inner">
|
||||
|
||||
<p class="chapeau">{{Introduction}}</p>
|
||||
|
||||
<h2 id="m3-{{section}}"><span class="module-tag">Module 3</span><br>{{Première section}}</h2>
|
||||
<p>…</p>
|
||||
|
||||
<h2 id="m3-quiz">Teste-toi, module 3</h2>
|
||||
<div class="quiz" id="quiz3"></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="pied">
|
||||
<div class="pied__interieur">
|
||||
<p>Cours de traitement de texte, {{3e année Techniques sociales et d'animation}}. M. Courcelle, 2026-2027.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../../assets/atelier-texte.js"></script>
|
||||
<script>
|
||||
"use strict";
|
||||
quiz(document.getElementById('quiz3'), [ /* voir 7.3 */ ]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Les `id` des sections sont préfixés par le module (`m3-…`) et correspondent
|
||||
exactement aux liens du sommaire latéral, qui se surligne tout seul à la lecture.
|
||||
|
||||
### 7.2 Composants propres au gabarit B
|
||||
|
||||
| Balisage | Rôle |
|
||||
|---|---|
|
||||
| `<span class="module-tag">Module 3</span><br>` | étiquette au-dessus du premier `<h2>` |
|
||||
| `<div class="regle-cle"><p>…</p></div>` | la règle à retenir |
|
||||
| `<div class="specimen">…</div>` | extrait de document, en police de document |
|
||||
| `<span class="pil">¶</span>` | marque de paragraphe |
|
||||
| `<details><summary>Question</summary><p>Réponse</p></details>` | FAQ « Quand ça coince » |
|
||||
| `<table>` | tableaux de raccourcis, de règles |
|
||||
|
||||
### 7.3 Outils JavaScript fournis (`assets/atelier-texte.js`)
|
||||
|
||||
**Quiz** — `quiz(element, questions)`
|
||||
|
||||
```js
|
||||
quiz(document.getElementById('quiz3'), [
|
||||
{q: "Quel raccourci enregistre le document ?",
|
||||
r: ["Ctrl+S", "Ctrl+E", "Ctrl+P"],
|
||||
b: 0,
|
||||
e: "S comme Save. À faire toutes les quelques minutes."}
|
||||
]);
|
||||
```
|
||||
`b` = index de la bonne réponse (à partir de 0), `e` = explication.
|
||||
|
||||
**Chasse aux fautes** — `chasse(conteneur, score, boutonReset, boutonSolution, jetons, total, messageFinal)`
|
||||
|
||||
```html
|
||||
<div class="chasse" id="chasse-m3"></div>
|
||||
<p class="score" id="score-m3" role="status" aria-live="polite"></p>
|
||||
<div class="actions">
|
||||
<button type="button" id="reset-m3">Recommencer</button>
|
||||
<button type="button" id="sol-m3">Voir la solution</button>
|
||||
</div>
|
||||
```
|
||||
```js
|
||||
const T_M3 = [{t:"Les"}, {t:"enfants"}, {t:"son", f:true}, {t:"arrivés."}];
|
||||
chasse(document.getElementById('chasse-m3'), document.getElementById('score-m3'),
|
||||
document.getElementById('reset-m3'), document.getElementById('sol-m3'),
|
||||
T_M3, T_M3.filter(j => j.f).length, "Le correcteur n'en a souligné aucune.");
|
||||
```
|
||||
Un jeton par mot ; `f: true` marque une faute.
|
||||
|
||||
Pour tout autre élément interactif, voir la section 10.
|
||||
|
||||
---
|
||||
|
||||
## 8. Images
|
||||
|
||||
- Rangées dans `<classe>/images/`, appelées en `../images/nom.png` depuis un module.
|
||||
- Tu ne peux pas fournir les images : **prévois-les** et donne leur liste
|
||||
(section 11). En attendant, chaque image affiche un cadre explicite grâce à
|
||||
ce balisage, à reproduire tel quel :
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="../images/m3-menu-format.png" alt="Menu Format de Writer, ouvert"
|
||||
onerror="this.outerHTML='<div class=\'manque\'>Capture à ajouter : <code>{{dossier-classe}}/images/m3-menu-format.png</code><br>{{Ce que la capture doit montrer.}}</div>'">
|
||||
<figcaption>{{Légende courte.}}</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
- `alt` décrit ce que l'image montre, pas « image de… ».
|
||||
- Pas de schéma en image quand un SVG ou un tableau fait l'affaire.
|
||||
|
||||
---
|
||||
|
||||
## 9. La carte à ajouter dans l'index de la classe
|
||||
|
||||
Pour chaque module livré, fournis ce bloc, prêt à coller dans
|
||||
`<classe>/index.html`, dans la liste `<ul class="modules">` :
|
||||
|
||||
```html
|
||||
<li class="module">
|
||||
<a class="module__lien" href="{{module3}}/index.html">
|
||||
<span class="module__num">{{Module 3}}</span>
|
||||
<span class="module__titre">{{Titre du module}}</span>
|
||||
<span class="module__resume">{{Ce qu'on y apprend, en une phrase.}}</span>
|
||||
<span class="module__meta">{{4 blocs · cours papier, chapitres 6 à 9 · 62 exercices}}</span>
|
||||
</a>
|
||||
</li>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10. Si un besoin sort des gabarits
|
||||
|
||||
Un jeu ou une démonstration que les outils existants ne couvrent pas est
|
||||
possible, à ces conditions :
|
||||
|
||||
- Code dans **un seul** `<style>` et **un seul** `<script>` en fin de page, chacun
|
||||
commençant par un commentaire `/* SPÉCIFIQUE : … */` qui dit ce qu'il fait.
|
||||
- Toutes ses classes CSS sont **préfixées** par le module : `.m3-…`. Aucun
|
||||
sélecteur de balise nu (`button {}`, `p {}`) : ils déborderaient sur le thème.
|
||||
- Couleurs et polices exclusivement par les variables de la section 5.
|
||||
- JavaScript : `"use strict"`, aucune variable globale hors d'une fonction
|
||||
d'initialisation, aucune dépendance.
|
||||
- Accessibilité : section 3, points 6, 7 et 9.
|
||||
- Signale-le dans ta livraison (section 11, point 5) : s'il est réutilisable, il
|
||||
sera intégré aux outils communs.
|
||||
|
||||
---
|
||||
|
||||
## 11. Format de livraison
|
||||
|
||||
Rends ta réponse dans cet ordre :
|
||||
|
||||
1. **Récapitulatif** : classe, dossier du module, gabarit utilisé, liste des
|
||||
fichiers avec leur chemin complet depuis la racine
|
||||
(`3tq-technique-sociale/module3/index.html`).
|
||||
2. **Chaque fichier en entier**, dans un bloc de code précédé de son chemin.
|
||||
Jamais d'extrait, jamais de « … reste inchangé ».
|
||||
3. **La carte d'index** (section 9).
|
||||
4. **Les images attendues** : tableau nom de fichier / ce qu'elle doit montrer.
|
||||
5. **Les points d'attention** : code spécifique (section 10), notion supposée
|
||||
connue, renvoi à un chapitre du cours papier à vérifier.
|
||||
|
||||
---
|
||||
|
||||
## 12. Liste de vérification avant de livrer
|
||||
|
||||
- [ ] Chemins tous relatifs, `../../assets/` depuis un module, liens finissant par `index.html`.
|
||||
- [ ] `<body class="classe-…">` correspond à la classe (section 2).
|
||||
- [ ] Fil d'Ariane : Mes cours / classe / module, avec les bons liens.
|
||||
- [ ] Un seul `<h1>`, dans l'en-tête.
|
||||
- [ ] Aucune couleur en dur, SVG compris.
|
||||
- [ ] Aucune règle CSS sur une classe ou une balise du thème.
|
||||
- [ ] Gabarit A : `window.DATA` est un JSON valide, clés sans accent, valeurs accentuées.
|
||||
- [ ] Gabarit A : chaque `reponse` et chaque index de panier existe bien (on compte à partir de 0).
|
||||
- [ ] Gabarit A : chaque entrée de `zones` a son `data-zone` identique.
|
||||
- [ ] Gabarit B : chaque lien du sommaire latéral a son `id` dans la page.
|
||||
- [ ] Tout élément cliquable est un `<button type="button">` ou a `tabindex`, `role` et le clavier.
|
||||
- [ ] Texte en français accentué, tutoiement, phrases courtes.
|
||||
- [ ] Chaque image a son `alt` et son cadre « Capture à ajouter ».
|
||||
- [ ] La carte d'index et la liste des images sont fournies.
|
||||
@@ -78,3 +78,9 @@ celui-là est accentué.
|
||||
Les pages de traitement de texte affichent un encadré « Capture à ajouter »
|
||||
tant que l'image manque. La liste des captures attendues et leur cadrage sont
|
||||
dans `3tq-technique-sociale/images/LISEZMOI.md`.
|
||||
|
||||
## Produire un module avec Claude (claude.ai)
|
||||
|
||||
Donner `FEUILLE-DE-ROUTE-CLAUDE-CHAT.md` en début de conversation, avec
|
||||
`assets/theme.css` et la feuille du gabarit choisi. Les règles de nommage, les
|
||||
gabarits de page, le format des exercices et le format de livraison y sont.
|
||||
|
||||
Reference in New Issue
Block a user