lrdlg
799 lines
58 KiB
HTML
799 lines
58 KiB
HTML
<!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>
|