lrdlg
585 lines
39 KiB
HTML
585 lines
39 KiB
HTML
<!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>
|