lrdlg
1072 lines
65 KiB
HTML
1072 lines
65 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Module A. Le poste de travail</title>
|
|
<style>
|
|
:root{--encre:#1F3864;--encre-clair:#3E5C93;--papier:#FBFAF7;--trait:#C9C6BC;
|
|
--cible:#F2B01E;--ok:#2E7D4F;--erreur:#C0392B;--base:17px}
|
|
*{box-sizing:border-box}
|
|
html{font-size:var(--base)}
|
|
body{margin:0;background:var(--papier);color:var(--encre);
|
|
font-family:Verdana,"DejaVu Sans",Geneva,sans-serif;line-height:1.55}
|
|
body.projection{--base:25px}
|
|
header{background:var(--encre);color:var(--papier);padding:.9rem 1.2rem;
|
|
display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:baseline}
|
|
header h1{font-size:1rem;font-weight:normal;margin:0}
|
|
nav{display:flex;flex-wrap:wrap;gap:.4rem;margin-left:auto}
|
|
nav button{font:inherit;font-size:.82rem;background:transparent;color:var(--papier);
|
|
border:2px solid rgba(251,250,247,.45);padding:.3rem .7rem;cursor:pointer;border-radius:2px}
|
|
nav button[aria-current="true"]{background:var(--cible);color:var(--encre);border-color:var(--cible)}
|
|
nav button:hover{border-color:var(--papier)}
|
|
main{max-width:60rem;margin:0 auto;padding:1.6rem 1.2rem 5rem}
|
|
section[hidden]{display:none}
|
|
h2{font-size:1.6rem;line-height:1.2;margin:.2rem 0}
|
|
.kicker{font-size:.85rem;color:var(--encre-clair);margin:0 0 1.6rem}
|
|
h3{font-size:1.1rem;margin:2.2rem 0 .6rem;border-top:2px solid var(--trait);padding-top:.8rem}
|
|
p{max-width:44rem}
|
|
ol.plan{counter-reset:s;list-style:none;padding:0;max-width:44rem}
|
|
ol.plan li{counter-increment:s;position:relative;padding:.45rem 0 .45rem 3rem;border-bottom:1px solid var(--trait)}
|
|
ol.plan li::before{content:counter(s);position:absolute;left:0;top:.45rem;width:2rem;height:2rem;
|
|
line-height:2rem;text-align:center;background:var(--encre);color:var(--papier);font-size:.9rem;border-radius:50%}
|
|
ul.but{list-style:none;padding:0;max-width:44rem}
|
|
ul.but li{padding:.35rem 0 .35rem 1.6rem;position:relative}
|
|
ul.but li::before{content:"";position:absolute;left:0;top:.95rem;width:.7rem;height:.7rem;background:var(--cible)}
|
|
.rappel{background:#FDF3DA;border-left:6px solid var(--cible);padding:.7rem 1rem;margin:.9rem 0;max-width:44rem}
|
|
.atelier{border:2px solid var(--trait);border-radius:3px;margin:1.2rem 0;background:#fff}
|
|
.atelier>h4{margin:0;padding:.6rem 1rem;background:var(--encre);color:var(--papier);font-size:.98rem;font-weight:normal;
|
|
display:flex;gap:.6rem;align-items:baseline}
|
|
.atelier>h4 .num{background:var(--cible);color:var(--encre);font-size:.8rem;padding:0 .45rem;border-radius:2px}
|
|
.atelier .corps{padding:1rem}
|
|
.consigne{margin:0 0 .9rem;font-size:.95rem}
|
|
.barre{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;align-items:center;margin:.2rem 0 .9rem;font-size:.95rem}
|
|
.cible-txt{font-weight:bold;font-size:1.05rem}
|
|
.score{color:var(--encre-clair);font-size:.9rem}
|
|
button.action{font:inherit;background:var(--encre);color:var(--papier);border:0;padding:.45rem 1rem;cursor:pointer;border-radius:2px}
|
|
button.action:hover{background:var(--encre-clair)}
|
|
:focus-visible{outline:3px solid var(--cible);outline-offset:2px}
|
|
.aire{position:relative;width:100%;height:22rem;background:#F4F2EC;border:2px solid var(--trait);overflow:hidden;touch-action:none}
|
|
.pion{position:absolute;width:3.2rem;height:3.2rem;line-height:3.2rem;text-align:center;font-family:inherit;
|
|
font-size:1.25rem;font-weight:bold;background:#fff;color:var(--encre);border:2px solid var(--encre);
|
|
border-radius:50%;cursor:pointer;user-select:none;padding:0}
|
|
.pion.fait{background:var(--ok);border-color:var(--ok);color:#fff}
|
|
.pion.actif{background:var(--cible);border-color:var(--cible)}
|
|
.rate{animation:secousse .25s}
|
|
@keyframes secousse{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
|
|
.boites{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;max-width:34rem}
|
|
.boite{aspect-ratio:1/1;border:2px solid var(--encre);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
|
|
.boite.ouverte{background:var(--ok);border-color:var(--ok)}
|
|
.boite .forme{width:52%;height:52%;opacity:0}
|
|
.boite.ouverte .forme{background:#fff;opacity:1;border-radius:50%}
|
|
.tri{display:flex;flex-wrap:wrap;gap:1.2rem}
|
|
.reserve{flex:1 1 16rem;min-height:8rem;padding:.6rem;border:2px dashed var(--trait);
|
|
display:flex;flex-wrap:wrap;gap:.5rem;align-content:flex-start}
|
|
.bacs{flex:2 1 22rem;display:flex;gap:.8rem;flex-wrap:wrap}
|
|
.bac{flex:1 1 7rem;min-height:8rem;border:2px solid var(--encre);display:flex;flex-wrap:wrap;
|
|
gap:.5rem;align-content:flex-start;padding:.5rem}
|
|
.bac .titre{flex:1 0 100%;font-size:.85rem;text-align:center;color:var(--encre-clair)}
|
|
.bac.vise{background:#FDF3DA;border-color:var(--cible)}
|
|
.jeton{padding:.4rem .65rem;background:#fff;border:2px solid var(--encre);cursor:grab;user-select:none;font-size:.88rem;touch-action:none}
|
|
.jeton.pris{position:fixed;z-index:99;pointer-events:none;cursor:grabbing;box-shadow:0 6px 14px rgba(31,56,100,.3)}
|
|
.jeton .glyphe{display:block;width:2rem;height:2rem}
|
|
.etapes{display:flex;flex-direction:column;gap:.5rem;max-width:42rem}
|
|
.etape{font:inherit;text-align:left;padding:.5rem .75rem;background:#fff;border:2px solid var(--encre);cursor:pointer}
|
|
.etape.placee{background:var(--ok);border-color:var(--ok);color:#fff;cursor:default}
|
|
.rang{display:inline-block;min-width:1.6rem;font-weight:bold}
|
|
.vf{max-width:44rem}
|
|
.vf .ligne{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--trait)}
|
|
.vf .txt{flex:1 1 18rem}
|
|
.vf .verdict{font-size:.85rem;flex:1 1 100%}
|
|
.vf button{font:inherit;padding:.25rem .8rem;border:2px solid var(--encre);background:#fff;color:var(--encre);cursor:pointer}
|
|
.vf button.choisi{background:var(--encre);color:#fff}
|
|
.juste{color:var(--ok)}
|
|
.faux{color:var(--erreur)}
|
|
.qcm{max-width:44rem}
|
|
.qcm .q{font-weight:bold;margin:.2rem 0 .6rem}
|
|
.qcm .choix{display:flex;flex-wrap:wrap;gap:.5rem}
|
|
.qcm .choix button{font:inherit;padding:.4rem .85rem;border:2px solid var(--encre);background:#fff;color:var(--encre);cursor:pointer;text-align:left}
|
|
.qcm .choix button.bon{background:var(--ok);border-color:var(--ok);color:#fff}
|
|
.qcm .choix button.mauvais{background:var(--erreur);border-color:var(--erreur);color:#fff}
|
|
.qcm .retour{margin-top:.7rem;font-size:.9rem;min-height:1.4rem}
|
|
.paires{display:flex;gap:1rem;flex-wrap:wrap;max-width:44rem}
|
|
.paires .col{flex:1 1 13rem;display:flex;flex-direction:column;gap:.45rem}
|
|
.paires button{font:inherit;font-size:.88rem;text-align:left;padding:.45rem .7rem;background:#fff;
|
|
border:2px solid var(--encre);color:var(--encre);cursor:pointer}
|
|
.paires button.choisi{background:var(--cible);border-color:var(--cible)}
|
|
.paires button.liee{background:var(--ok);border-color:var(--ok);color:#fff;cursor:default}
|
|
.chemin{max-width:40rem}
|
|
.fil{font-size:.9rem;color:var(--encre-clair);margin-bottom:.6rem;word-break:break-word}
|
|
.liste{display:flex;flex-direction:column;gap:.4rem}
|
|
.liste button{font:inherit;text-align:left;padding:.45rem .7rem;background:#fff;border:2px solid var(--encre);color:var(--encre);cursor:pointer}
|
|
.liste button.dossier::before{content:"[dossier] ";color:var(--encre-clair);font-size:.8rem}
|
|
.liste button.fichier::before{content:"[fichier] ";color:var(--encre-clair);font-size:.8rem}
|
|
.zone{fill:#fff;stroke:#1F3864;stroke-width:2;cursor:pointer}
|
|
.zone:hover{fill:#FDF3DA}
|
|
.zone.trouve{fill:#D6EBDE;stroke:#2E7D4F}
|
|
svg text{font-family:inherit;font-size:11px;fill:#1F3864;pointer-events:none}
|
|
figure.schema{margin:0;max-width:30rem}
|
|
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
|
|
@media print{header,nav{display:none}section[hidden]{display:block}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1>Module A. Le poste de travail</h1>
|
|
<nav id="nav">
|
|
<button data-cible="accueil" aria-current="true">Accueil</button>
|
|
<button data-cible="p1">1. Mettre en marche</button>
|
|
<button data-cible="p2">2. La souris</button>
|
|
<button data-cible="p3">3. Les appareils</button>
|
|
<button data-cible="p4">4. Les programmes</button>
|
|
<button data-cible="p5">5. Enregistrer</button>
|
|
<button data-cible="p6">6. Le parcours</button>
|
|
<button id="btn-projection">Agrandir</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<section id="accueil">
|
|
<h2>Six heures pour prendre l'ordinateur en main</h2>
|
|
<p class="kicker">Travaux sur ordinateur, 2e différenciée. Local 134 INFO.</p>
|
|
<p>Chaque heure suit le même ordre : on lit le cours, on fait les exercices écrits, on fait les jeux de ce site, on manipule sur le poste, on range et on éteint.</p>
|
|
<p>Tous les jeux se refont autant de fois que tu veux. Le deuxième essai est toujours meilleur que le premier.</p>
|
|
<div class="rappel"><strong>Avant de partir, toujours.</strong> Démarrer, Alimentation, Arrêter. Jamais le bouton de la boîte.</div>
|
|
</section>
|
|
|
|
<section id="p1" hidden>
|
|
<h2>Mettre l'ordinateur en marche</h2>
|
|
<p class="kicker">Période 1. Six jeux.</p>
|
|
<h3>Le plan de l'heure</h3>
|
|
<ol class="plan">
|
|
<li>Les règles du local et ton poste.</li>
|
|
<li>Le cours et les six exercices.</li>
|
|
<li>Les jeux de ce site.</li>
|
|
<li>Allumer, ouvrir sa session, verrouiller, éteindre.</li>
|
|
<li>Ranger et éteindre.</li>
|
|
</ol>
|
|
<h3>Ce que tu dois savoir faire à la fin de l'heure</h3>
|
|
<ul class="but">
|
|
<li>Allumer un ordinateur et ouvrir ta session, seul.</li>
|
|
<li>Reconnaître et nommer ce qu'il y a sur le bureau.</li>
|
|
<li>Verrouiller ton écran quand tu t'absentes une minute.</li>
|
|
<li>Éteindre par le menu, seul.</li>
|
|
</ul>
|
|
<div class="rappel"><strong>Un ordinateur ne devine pas.</strong> Il fait exactement ce qu'on lui demande. Quand le résultat est faux, c'est presque toujours la demande qui n'était pas claire.</div>
|
|
<h3>Les jeux</h3>
|
|
<div id="jeux-p1"></div>
|
|
</section>
|
|
|
|
<section id="p2" hidden>
|
|
<h2>La souris</h2>
|
|
<p class="kicker">Période 2. Neuf jeux.</p>
|
|
<h3>Le plan de l'heure</h3>
|
|
<ol class="plan">
|
|
<li>Le cours et les six exercices.</li>
|
|
<li>Les jeux de ce site.</li>
|
|
<li>Trier les douze images du dossier Exercices.</li>
|
|
<li>Ranger et éteindre.</li>
|
|
</ol>
|
|
<div class="rappel"><strong>Un clic choisit. Deux clics ouvrent.</strong> Pour déplacer, tu gardes le bouton appuyé pendant tout le trajet. La forme du curseur t'annonce ce qui va se passer.</div>
|
|
<h3>Les jeux</h3>
|
|
<div id="jeux-p2"></div>
|
|
</section>
|
|
|
|
<section id="p3" hidden>
|
|
<h2>Les appareils autour de l'ordinateur</h2>
|
|
<p class="kicker">Période 3. Sept jeux.</p>
|
|
<h3>Le plan de l'heure</h3>
|
|
<ol class="plan">
|
|
<li>Le cours et les sept exercices.</li>
|
|
<li>Les jeux de ce site.</li>
|
|
<li>Le tour du poste, à deux.</li>
|
|
<li>Brancher et tester le casque, puis la webcam.</li>
|
|
<li>Compléter le lexique, puis ranger et éteindre.</li>
|
|
</ol>
|
|
<div class="rappel"><strong>L'ordinateur reçoit, il transforme, il renvoie.</strong> Ce n'est pas parce que les câbles arrivent à l'unité centrale que c'est une entrée : l'entrée, c'est ce qui est au bout du câble, dans ta main.</div>
|
|
<h3>Les jeux</h3>
|
|
<div id="jeux-p3"></div>
|
|
</section>
|
|
|
|
<section id="p4" hidden>
|
|
<h2>Ouvrir et quitter un programme</h2>
|
|
<p class="kicker">Période 4. Sept jeux.</p>
|
|
<h3>Le plan de l'heure</h3>
|
|
<ol class="plan">
|
|
<li>La démonstration du professeur.</li>
|
|
<li>Le cours et les six exercices.</li>
|
|
<li>Les jeux de ce site.</li>
|
|
<li>Ouvrir trois programmes, basculer, quitter, vérifier la barre.</li>
|
|
<li>Ranger et éteindre.</li>
|
|
</ol>
|
|
<div class="rappel"><strong>Réduire n'est pas quitter.</strong> Tant que la marque est dans la barre du bas, le programme tourne encore.</div>
|
|
<h3>Les jeux</h3>
|
|
<div id="jeux-p4"></div>
|
|
</section>
|
|
|
|
<section id="p5" hidden>
|
|
<h2>Enregistrer et retrouver son travail</h2>
|
|
<p class="kicker">Période 5. Sept jeux.</p>
|
|
<h3>Le plan de l'heure</h3>
|
|
<ol class="plan">
|
|
<li>La démonstration du professeur.</li>
|
|
<li>Le cours et les sept exercices.</li>
|
|
<li>Les jeux de ce site.</li>
|
|
<li>Créer son dossier, enregistrer, fermer, retrouver, rouvrir.</li>
|
|
<li>Retirer sa clé, ranger et éteindre.</li>
|
|
</ol>
|
|
<div class="rappel"><strong>Ton travail n'existe que quand il est enregistré.</strong> Avant, il est sur ton banc, et le banc est vidé ce soir.</div>
|
|
<h3>Les jeux</h3>
|
|
<div id="jeux-p5"></div>
|
|
</section>
|
|
|
|
<section id="p6" hidden>
|
|
<h2>Le parcours complet</h2>
|
|
<p class="kicker">Période 6. Cinq jeux de révision.</p>
|
|
<p>Pas de matière nouvelle. Tu révises avec les jeux, puis tu fais le parcours complet sur ton poste, seul. Ce parcours compte pour le bulletin.</p>
|
|
<div class="rappel"><strong>Lis les huit étapes en entier avant de commencer.</strong> Si tu bloques, dis-le : un parcours raté se refait, et c'est la version corrigée qui compte.</div>
|
|
<h3>Les huit étapes</h3>
|
|
<ol class="plan">
|
|
<li>Installe ton poste et allume l'ordinateur.</li>
|
|
<li>Ouvre ta session.</li>
|
|
<li>Branche ta clé USB et ouvre ton dossier.</li>
|
|
<li>Démarre le programme d'écriture par le bouton Démarrer.</li>
|
|
<li>Écris les trois phrases dictées.</li>
|
|
<li>Enregistre dans ton dossier, avec un nom correct.</li>
|
|
<li>Quitte le programme, puis retrouve ton fichier et rouvre-le.</li>
|
|
<li>Ferme tout, retire ta clé, éteins par le menu.</li>
|
|
</ol>
|
|
<h3>Les jeux de révision</h3>
|
|
<div id="jeux-p6"></div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<script>
|
|
"use strict";
|
|
|
|
/* ================= navigation ================= */
|
|
const nav = document.getElementById("nav");
|
|
nav.addEventListener("click", e => {
|
|
const b = e.target.closest("button[data-cible]"); if (!b) return;
|
|
nav.querySelectorAll("button[data-cible]").forEach(x => x.setAttribute("aria-current", x === b));
|
|
document.querySelectorAll("main > section").forEach(s => s.hidden = (s.id !== b.dataset.cible));
|
|
window.scrollTo(0, 0);
|
|
});
|
|
document.getElementById("btn-projection").addEventListener("click", e => {
|
|
document.body.classList.toggle("projection");
|
|
e.target.textContent = document.body.classList.contains("projection") ? "Taille normale" : "Agrandir";
|
|
});
|
|
|
|
/* ================= utilitaires ================= */
|
|
function melange(t){ for(let i=t.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[t[i],t[j]]=[t[j],t[i]];} return t; }
|
|
function rate(el2){ el2.classList.remove("rate"); void el2.offsetWidth; el2.classList.add("rate"); }
|
|
function el(tag, cls, txt){ const e = document.createElement(tag); if(cls) e.className = cls; if(txt!=null) e.textContent = txt; return e; }
|
|
|
|
function barre(corps, avecBouton){
|
|
const b = el("div","barre");
|
|
let bt = null;
|
|
if (avecBouton){ bt = el("button","action","Recommencer"); bt.type="button"; b.appendChild(bt); }
|
|
const cible = el("span","cible-txt"), score = el("span","score");
|
|
b.append(cible, score); corps.appendChild(b);
|
|
return {bouton:bt, cible, score};
|
|
}
|
|
|
|
/* ================= moteurs ================= */
|
|
|
|
function mOrdre(corps, cfg){
|
|
const {bouton, cible, score} = barre(corps, true);
|
|
const zone = el("div","etapes"); corps.appendChild(zone);
|
|
let place = 0, erreurs = 0;
|
|
function maj(){
|
|
cible.textContent = place < cfg.etapes.length ? "Cherche l'étape numéro " + (place+1) : "Terminé, tout est dans l'ordre";
|
|
score.textContent = "Erreurs " + erreurs;
|
|
}
|
|
function demarrer(){
|
|
place = 0; erreurs = 0; zone.innerHTML = "";
|
|
melange(cfg.etapes.map((t,i)=>({t,i}))).forEach(o => {
|
|
const b = el("button","etape"); b.type="button"; b.dataset.rang = o.i;
|
|
b.innerHTML = '<span class="rang"></span>'; b.insertAdjacentText("beforeend", o.t);
|
|
zone.appendChild(b);
|
|
});
|
|
maj();
|
|
}
|
|
zone.addEventListener("click", e => {
|
|
const b = e.target.closest(".etape"); if (!b || b.classList.contains("placee")) return;
|
|
if (+b.dataset.rang === place){ b.classList.add("placee"); b.querySelector(".rang").textContent = (place+1)+"."; place++; }
|
|
else { erreurs++; rate(b); }
|
|
maj();
|
|
});
|
|
bouton.addEventListener("click", demarrer); demarrer();
|
|
}
|
|
|
|
function mVF(corps, cfg){
|
|
const zone = el("div","vf"); corps.appendChild(zone);
|
|
cfg.items.forEach(it => {
|
|
const l = el("div","ligne");
|
|
l.appendChild(el("span","txt", it.t));
|
|
["Vrai","Faux"].forEach(lib => {
|
|
const b = el("button",null,lib); b.type="button";
|
|
b.addEventListener("click", () => {
|
|
l.querySelectorAll("button").forEach(x => x.classList.remove("choisi"));
|
|
b.classList.add("choisi");
|
|
const juste = (lib === "Vrai") === it.r;
|
|
const v = l.querySelector(".verdict");
|
|
v.className = "verdict " + (juste ? "juste" : "faux");
|
|
v.textContent = (juste ? "Juste. " : "Non. ") + it.p;
|
|
});
|
|
l.appendChild(b);
|
|
});
|
|
l.appendChild(el("span","verdict")); zone.appendChild(l);
|
|
});
|
|
}
|
|
|
|
function mQCM(corps, cfg){
|
|
const zone = el("div","qcm"); corps.appendChild(zone);
|
|
const q = el("p","q"), c = el("div","choix"), r = el("div","retour"), s = el("div","score");
|
|
zone.append(q,c,r,s);
|
|
let i = 0, bons = 0, verrou = false;
|
|
function afficher(){
|
|
if (i >= cfg.items.length){
|
|
q.textContent = "Terminé."; r.textContent = ""; c.innerHTML = "";
|
|
s.textContent = "Résultat : " + bons + " sur " + cfg.items.length;
|
|
const again = el("button","action","Recommencer"); again.type="button";
|
|
again.addEventListener("click", () => { i=0; bons=0; afficher(); });
|
|
c.appendChild(again); return;
|
|
}
|
|
const it = cfg.items[i];
|
|
q.textContent = (i+1) + ". " + it.q;
|
|
r.textContent = ""; r.className = "retour";
|
|
s.textContent = "Question " + (i+1) + " sur " + cfg.items.length + ", " + bons + " juste(s)";
|
|
c.innerHTML = "";
|
|
it.o.forEach((txt,k) => {
|
|
const b = el("button",null,txt); b.type="button";
|
|
b.addEventListener("click", () => {
|
|
if (verrou) return; verrou = true;
|
|
const juste = (k === it.bon);
|
|
b.classList.add(juste ? "bon" : "mauvais");
|
|
if (!juste) c.children[it.bon].classList.add("bon");
|
|
if (juste) bons++;
|
|
r.className = "retour " + (juste ? "juste" : "faux");
|
|
r.textContent = (juste ? "Juste. " : "Non. ") + it.p;
|
|
setTimeout(() => { verrou = false; i++; afficher(); }, 2300);
|
|
});
|
|
c.appendChild(b);
|
|
});
|
|
}
|
|
afficher();
|
|
}
|
|
|
|
function mPaires(corps, cfg){
|
|
const {bouton, cible, score} = barre(corps, true);
|
|
const zone = el("div","paires");
|
|
const cg = el("div","col"), cd = el("div","col");
|
|
zone.append(cg, cd); corps.appendChild(zone);
|
|
let restant = 0, erreurs = 0, choisi = null;
|
|
function maj(){
|
|
cible.textContent = restant > 0 ? "Paires restantes : " + restant : "Terminé, tout est relié";
|
|
score.textContent = "Erreurs " + erreurs;
|
|
}
|
|
function demarrer(){
|
|
restant = cfg.paires.length; erreurs = 0; choisi = null;
|
|
cg.innerHTML = ""; cd.innerHTML = "";
|
|
melange(cfg.paires.map((p,i)=>({t:p[0],i}))).forEach(o => {
|
|
const b = el("button",null,o.t); b.type="button"; b.dataset.i = o.i; b.dataset.cote = "g"; cg.appendChild(b);
|
|
});
|
|
melange(cfg.paires.map((p,i)=>({t:p[1],i}))).forEach(o => {
|
|
const b = el("button",null,o.t); b.type="button"; b.dataset.i = o.i; b.dataset.cote = "d"; cd.appendChild(b);
|
|
});
|
|
maj();
|
|
}
|
|
zone.addEventListener("click", e => {
|
|
const b = e.target.closest("button"); if (!b || b.classList.contains("liee")) return;
|
|
if (!choisi){ choisi = b; b.classList.add("choisi"); return; }
|
|
if (choisi === b){ b.classList.remove("choisi"); choisi = null; return; }
|
|
if (choisi.dataset.cote === b.dataset.cote){ choisi.classList.remove("choisi"); choisi = b; b.classList.add("choisi"); return; }
|
|
if (choisi.dataset.i === b.dataset.i){
|
|
choisi.classList.remove("choisi"); choisi.classList.add("liee"); b.classList.add("liee");
|
|
restant--; choisi = null;
|
|
} else {
|
|
erreurs++; rate(b); rate(choisi); choisi.classList.remove("choisi"); choisi = null;
|
|
}
|
|
maj();
|
|
});
|
|
bouton.addEventListener("click", demarrer); demarrer();
|
|
}
|
|
|
|
function mZones(corps, cfg){
|
|
const {bouton, cible, score} = barre(corps, true);
|
|
const fig = el("figure","schema"); fig.innerHTML = cfg.schema; corps.appendChild(fig);
|
|
let i = 0, bons = 0;
|
|
function maj(){
|
|
score.textContent = "Trouvé " + bons + " sur " + cfg.questions.length;
|
|
cible.textContent = i < cfg.questions.length ? cfg.questions[i].q : "Terminé, tu as tout trouvé";
|
|
}
|
|
function demarrer(){ i = 0; bons = 0; fig.querySelectorAll(".zone").forEach(z => z.classList.remove("trouve")); maj(); }
|
|
fig.addEventListener("click", e => {
|
|
const z = e.target.closest(".zone"); if (!z || i >= cfg.questions.length) return;
|
|
if (z.dataset.id === cfg.questions[i].id){ z.classList.add("trouve"); bons++; i++; maj(); }
|
|
else { cible.textContent = "Non, ça c'est " + (cfg.noms[z.dataset.id] || "autre chose") + ". " + cfg.questions[i].q; }
|
|
});
|
|
bouton.addEventListener("click", demarrer); demarrer();
|
|
}
|
|
|
|
function mTrieur(corps, cfg){
|
|
const {bouton, cible, score} = barre(corps, true);
|
|
const tri = el("div","tri"), reserve = el("div","reserve"), bacs = el("div","bacs");
|
|
tri.append(reserve, bacs); corps.appendChild(tri);
|
|
let restant = 0, erreurs = 0, pris = null, fantome = null, dx = 0, dy = 0;
|
|
function maj(){ cible.textContent = restant > 0 ? "Restant " + restant : "Terminé"; score.textContent = "Erreurs " + erreurs; }
|
|
function demarrer(){
|
|
erreurs = 0; restant = cfg.items.length; bacs.innerHTML = ""; reserve.innerHTML = "";
|
|
cfg.bacs.forEach(b => {
|
|
const d = el("div","bac"); d.dataset.id = b.id;
|
|
d.appendChild(el("span","titre", b.nom)); bacs.appendChild(d);
|
|
});
|
|
melange(cfg.items.slice()).forEach(it => {
|
|
const j = el("div","jeton"); j.dataset.bac = it.bac;
|
|
if (it.glyphe) j.innerHTML = it.glyphe;
|
|
if (it.nom) j.insertAdjacentText("beforeend", it.nom);
|
|
reserve.appendChild(j);
|
|
});
|
|
maj();
|
|
}
|
|
function bacSous(x,y){ const e2 = document.elementFromPoint(x,y); return e2 ? e2.closest(".bac") : null; }
|
|
document.addEventListener("pointerdown", e => {
|
|
const j = e.target.closest(".jeton"); if (!j || !reserve.contains(j)) return;
|
|
e.preventDefault(); pris = j;
|
|
const r = j.getBoundingClientRect(); dx = e.clientX - r.left; dy = e.clientY - r.top;
|
|
fantome = j.cloneNode(true); fantome.classList.add("pris");
|
|
fantome.style.left = r.left+"px"; fantome.style.top = r.top+"px"; fantome.style.width = r.width+"px";
|
|
document.body.appendChild(fantome); j.style.opacity = ".3";
|
|
});
|
|
document.addEventListener("pointermove", e => {
|
|
if (!pris || !reserve.contains(pris)) return;
|
|
fantome.style.left = (e.clientX-dx)+"px"; fantome.style.top = (e.clientY-dy)+"px";
|
|
const b = bacSous(e.clientX, e.clientY);
|
|
bacs.querySelectorAll(".bac").forEach(x => x.classList.toggle("vise", x === b));
|
|
});
|
|
document.addEventListener("pointerup", e => {
|
|
if (!pris) return;
|
|
if (!reserve.contains(pris)){ pris = null; return; }
|
|
const b = bacSous(e.clientX, e.clientY);
|
|
bacs.querySelectorAll(".bac").forEach(x => x.classList.remove("vise"));
|
|
if (fantome){ fantome.remove(); fantome = null; }
|
|
pris.style.opacity = "";
|
|
if (b && b.dataset.id === pris.dataset.bac){ b.appendChild(pris); pris.style.cursor = "default"; restant--; }
|
|
else if (b){ erreurs++; rate(pris); }
|
|
pris = null; maj();
|
|
});
|
|
bouton.addEventListener("click", demarrer); demarrer();
|
|
}
|
|
|
|
function mPions(corps, cfg){
|
|
const b0 = el("div","barre");
|
|
const lab = el("span",null,"Nombres : ");
|
|
const sel = document.createElement("select");
|
|
[10,20].forEach(v => { const o = document.createElement("option"); o.value=v; o.textContent=v; if(v===20)o.selected=true; sel.appendChild(o); });
|
|
lab.appendChild(sel);
|
|
const bt = el("button","action","Commencer"); bt.type="button";
|
|
const cible = el("span","cible-txt","Clique sur Commencer"), score = el("span","score","");
|
|
b0.append(lab, bt, cible, score); corps.appendChild(b0);
|
|
const aire = el("div","aire"); corps.appendChild(aire);
|
|
|
|
function poser(n){
|
|
aire.innerHTML = "";
|
|
const L = aire.clientWidth || 640, H = aire.clientHeight || 350, taille = 56;
|
|
const cols = Math.max(4, Math.floor(Math.sqrt(n * L / H)));
|
|
const lignes = Math.ceil(n / cols), cw = L/cols, ch = H/lignes;
|
|
const cases = melange([...Array(cols*lignes).keys()]).slice(0,n);
|
|
for (let i=0;i<n;i++){
|
|
const c = cases[i], cx = c % cols, cy = Math.floor(c/cols);
|
|
const b = el("button","pion", String(i+1)); b.type="button"; b.dataset.n = i+1;
|
|
const m = 6;
|
|
b.style.left = Math.round(cx*cw + m + Math.random()*Math.max(0, cw-taille-2*m)) + "px";
|
|
b.style.top = Math.round(cy*ch + m + Math.random()*Math.max(0, ch-taille-2*m)) + "px";
|
|
aire.appendChild(b);
|
|
}
|
|
}
|
|
|
|
if (cfg.mode === "clic"){
|
|
let suivant = 0, erreurs = 0, t0 = 0, chrono = null, n = 20;
|
|
const maj = () => score.textContent = "Temps " + (t0 ? Math.round((Date.now()-t0)/1000) : 0) + " s, erreurs " + erreurs;
|
|
function surligne(){
|
|
aire.querySelectorAll(".pion").forEach(p => p.classList.toggle("actif", +p.dataset.n === suivant+1 && !p.classList.contains("fait")));
|
|
cible.textContent = suivant < n ? "Clique sur le " + (suivant+1) : "Terminé";
|
|
}
|
|
bt.addEventListener("click", () => { n = +sel.value; suivant=0; erreurs=0; t0=0; clearInterval(chrono); chrono=null; poser(n); maj(); surligne(); });
|
|
aire.addEventListener("click", e => {
|
|
const p = e.target.closest(".pion"); if (!p || suivant >= n) return;
|
|
if (!t0){ t0 = Date.now(); chrono = setInterval(maj, 1000); }
|
|
if (+p.dataset.n === suivant+1){
|
|
p.classList.add("fait"); p.classList.remove("actif"); suivant++;
|
|
if (suivant === n){ clearInterval(chrono); cible.textContent = "Terminé en " + Math.round((Date.now()-t0)/1000) + " s"; }
|
|
surligne();
|
|
} else { erreurs++; rate(p); }
|
|
maj();
|
|
});
|
|
} else {
|
|
let suivant = 0, vies = 3, n = 20, actif = false;
|
|
function surligne(){
|
|
aire.querySelectorAll(".pion").forEach(p => {
|
|
const k = +p.dataset.n;
|
|
p.classList.toggle("fait", k <= suivant);
|
|
p.classList.toggle("actif", k === suivant+1);
|
|
});
|
|
cible.textContent = actif ? (suivant < n ? "Passe sur le " + (suivant+1) : "Terminé") : "Clique sur Commencer";
|
|
score.textContent = "Vies " + vies;
|
|
}
|
|
bt.addEventListener("click", () => { n = +sel.value; suivant=0; vies=3; actif=true; poser(n); surligne(); });
|
|
aire.addEventListener("pointerover", e => {
|
|
const p = e.target.closest(".pion"); if (!p || !actif) return;
|
|
const k = +p.dataset.n;
|
|
if (k === suivant+1){ suivant++; if (suivant === n){ actif=false; cible.textContent = "Terminé, il te restait " + vies + " vies"; } }
|
|
else if (k > suivant+1){
|
|
vies--; suivant = 0; rate(p);
|
|
if (vies <= 0){ actif=false; surligne(); cible.textContent = "Plus de vies. Recommence."; return; }
|
|
}
|
|
surligne();
|
|
});
|
|
}
|
|
}
|
|
|
|
function mBoites(corps){
|
|
const {bouton, cible, score} = barre(corps, true);
|
|
const zone = el("div","boites"); corps.appendChild(zone);
|
|
let ouvertes = 0, clics = 0;
|
|
function maj(){
|
|
cible.textContent = ouvertes === 12 ? "Les douze boîtes sont ouvertes" : "Boîtes ouvertes " + ouvertes + " sur 12";
|
|
score.textContent = "Clics perdus " + Math.max(0, clics - 2*ouvertes);
|
|
}
|
|
function demarrer(){
|
|
ouvertes = 0; clics = 0; zone.innerHTML = "";
|
|
for (let i=0;i<12;i++){ const d = el("button","boite"); d.type="button"; d.innerHTML = '<span class="forme"></span>'; zone.appendChild(d); }
|
|
maj();
|
|
}
|
|
zone.addEventListener("click", e => { if (e.target.closest(".boite")){ clics++; maj(); } });
|
|
zone.addEventListener("dblclick", e => {
|
|
const b = e.target.closest(".boite");
|
|
if (b && !b.classList.contains("ouverte")){ b.classList.add("ouverte"); ouvertes++; maj(); }
|
|
});
|
|
bouton.addEventListener("click", demarrer); demarrer();
|
|
}
|
|
|
|
function mChemin(corps, cfg){
|
|
const {bouton, cible, score} = barre(corps, true);
|
|
const zone = el("div","chemin"); const fil = el("div","fil"), liste = el("div","liste");
|
|
zone.append(fil, liste); corps.appendChild(zone);
|
|
let mission = 0, erreurs = 0, pile = [];
|
|
function noeud(){ return pile[pile.length-1]; }
|
|
function maj(){
|
|
cible.textContent = mission < cfg.missions.length ? "Trouve le fichier : " + cfg.missions[mission] : "Terminé, tu as trouvé les trois fichiers";
|
|
score.textContent = "Erreurs " + erreurs;
|
|
fil.textContent = pile.map(n => n.nom).join(" > ");
|
|
liste.innerHTML = "";
|
|
if (mission >= cfg.missions.length) return;
|
|
if (pile.length > 1){
|
|
const b = el("button",null,"Revenir en arrière"); b.type="button"; b.dataset.retour="1"; liste.appendChild(b);
|
|
}
|
|
(noeud().enfants || []).forEach(n => {
|
|
const b = el("button", n.enfants ? "dossier" : "fichier", n.nom); b.type="button"; b.dataset.nom = n.nom;
|
|
liste.appendChild(b);
|
|
});
|
|
}
|
|
function demarrer(){ mission = 0; erreurs = 0; pile = [cfg.arbre]; maj(); }
|
|
liste.addEventListener("click", e => {
|
|
const b = e.target.closest("button"); if (!b) return;
|
|
if (b.dataset.retour){ pile.pop(); maj(); return; }
|
|
const n = (noeud().enfants || []).find(x => x.nom === b.dataset.nom);
|
|
if (!n) return;
|
|
if (n.enfants){ pile.push(n); maj(); return; }
|
|
if (n.nom === cfg.missions[mission]){ mission++; pile = [cfg.arbre]; maj(); }
|
|
else { erreurs++; rate(b); }
|
|
});
|
|
bouton.addEventListener("click", demarrer); demarrer();
|
|
}
|
|
|
|
/* ================= montage ================= */
|
|
const MOTEURS = {ordre:mOrdre, vf:mVF, qcm:mQCM, paires:mPaires, zones:mZones,
|
|
trieur:mTrieur, pions:mPions, boites:(c)=>mBoites(c), chemin:mChemin};
|
|
|
|
function monter(idParent, jeux){
|
|
const parent = document.getElementById(idParent);
|
|
jeux.forEach((j, k) => {
|
|
const a = el("div","atelier");
|
|
const h = el("h4"); h.appendChild(el("span","num", "Jeu " + (k+1)));
|
|
h.insertAdjacentText("beforeend", j.titre);
|
|
const corps = el("div","corps");
|
|
if (j.consigne) corps.appendChild(el("p","consigne", j.consigne));
|
|
a.append(h, corps); parent.appendChild(a);
|
|
MOTEURS[j.type](corps, j);
|
|
});
|
|
}
|
|
|
|
/* ================= schémas ================= */
|
|
const SCHEMA_BUREAU = `
|
|
<svg viewBox="0 0 420 300" width="100%" role="img" aria-label="Schéma d'un bureau">
|
|
<rect class="zone" data-id="fond" x="6" y="6" width="408" height="288"/>
|
|
<text x="300" y="150">fond d'écran</text>
|
|
<g class="zone" data-id="icone">
|
|
<rect x="24" y="24" width="42" height="42"/><line x1="34" y1="56" x2="56" y2="56" stroke="#1F3864" stroke-width="2"/>
|
|
</g>
|
|
<g class="zone" data-id="icone2">
|
|
<rect x="24" y="88" width="42" height="42"/><line x1="34" y1="120" x2="56" y2="120" stroke="#1F3864" stroke-width="2"/>
|
|
</g>
|
|
<g class="zone" data-id="corbeille">
|
|
<rect x="24" y="196" width="42" height="46"/>
|
|
<line x1="24" y1="206" x2="66" y2="206" stroke="#1F3864" stroke-width="2"/>
|
|
<line x1="38" y1="216" x2="38" y2="234" stroke="#1F3864" stroke-width="2"/>
|
|
<line x1="52" y1="216" x2="52" y2="234" stroke="#1F3864" stroke-width="2"/>
|
|
</g>
|
|
<rect class="zone" data-id="barre" x="6" y="256" width="408" height="38"/>
|
|
<g class="zone" data-id="demarrer"><rect x="14" y="262" width="28" height="26"/>
|
|
<line x1="20" y1="270" x2="36" y2="270" stroke="#1F3864" stroke-width="2"/>
|
|
<line x1="20" y1="276" x2="36" y2="276" stroke="#1F3864" stroke-width="2"/>
|
|
<line x1="20" y1="282" x2="36" y2="282" stroke="#1F3864" stroke-width="2"/></g>
|
|
<g class="zone" data-id="horloge"><rect x="340" y="262" width="66" height="26"/></g>
|
|
<text x="348" y="279">10:45</text>
|
|
</svg>`;
|
|
|
|
const SCHEMA_UC = `
|
|
<svg viewBox="0 0 420 520" width="100%" role="img" aria-label="Schéma de l'intérieur d'une unité centrale">
|
|
<rect x="10" y="10" width="400" height="500" fill="#F4F2EC" stroke="#1F3864" stroke-width="3"/>
|
|
<rect class="zone" data-id="carte" x="40" y="140" width="345" height="345" style="fill:#EDEBE4"/>
|
|
<text x="52" y="160">carte mère</text>
|
|
<rect class="zone" data-id="alim" x="248" y="32" width="137" height="82"/>
|
|
<text x="262" y="78">alimentation</text>
|
|
<g class="zone" data-id="ventb">
|
|
<circle cx="120" cy="73" r="46"/>
|
|
<line x1="120" y1="27" x2="120" y2="119" stroke="#1F3864" stroke-width="2"/>
|
|
<line x1="74" y1="73" x2="166" y2="73" stroke="#1F3864" stroke-width="2"/>
|
|
</g>
|
|
<g class="zone" data-id="proc">
|
|
<rect x="150" y="180" width="130" height="130"/>
|
|
<circle cx="215" cy="245" r="52" fill="none" stroke="#1F3864" stroke-width="2"/>
|
|
<circle cx="215" cy="245" r="12" fill="#1F3864"/>
|
|
</g>
|
|
<g class="zone" data-id="memoire">
|
|
<rect x="305" y="170" width="16" height="150"/>
|
|
<rect x="329" y="170" width="16" height="150"/>
|
|
<rect x="353" y="170" width="16" height="150"/>
|
|
</g>
|
|
<rect class="zone" data-id="disque" x="60" y="380" width="150" height="80"/>
|
|
<text x="74" y="426">disque</text>
|
|
</svg>`;
|
|
|
|
const SCHEMA_FENETRE = `
|
|
<svg viewBox="0 0 460 300" width="100%" role="img" aria-label="Schéma d'une fenêtre">
|
|
<rect class="zone" data-id="bord" x="6" y="6" width="448" height="288"/>
|
|
<rect class="zone" data-id="titre" x="18" y="18" width="424" height="34"/>
|
|
<text x="28" y="40">Mon document</text>
|
|
<g class="zone" data-id="reduire"><rect x="330" y="20" width="34" height="30"/>
|
|
<line x1="339" y1="42" x2="355" y2="42" stroke="#1F3864" stroke-width="2"/></g>
|
|
<g class="zone" data-id="agrandir"><rect x="366" y="20" width="34" height="30"/>
|
|
<rect x="376" y="28" width="14" height="14" fill="none" stroke="#1F3864" stroke-width="2"/></g>
|
|
<g class="zone" data-id="fermer"><rect x="402" y="20" width="34" height="30"/>
|
|
<line x1="412" y1="28" x2="426" y2="42" stroke="#1F3864" stroke-width="2"/>
|
|
<line x1="426" y1="28" x2="412" y2="42" stroke="#1F3864" stroke-width="2"/></g>
|
|
<rect class="zone" data-id="travail" x="18" y="60" width="424" height="222"/>
|
|
<text x="30" y="86">zone de travail</text>
|
|
</svg>`;
|
|
|
|
const rond = '<svg class="glyphe" viewBox="0 0 40 40"><circle cx="20" cy="20" r="17" fill="#1F3864"/></svg>';
|
|
const carre = '<svg class="glyphe" viewBox="0 0 40 40"><rect x="4" y="4" width="32" height="32" fill="#2E7D4F"/></svg>';
|
|
const triangle = '<svg class="glyphe" viewBox="0 0 40 40"><polygon points="20,3 37,36 3,36" fill="#C0392B"/></svg>';
|
|
|
|
const ES = [
|
|
{bac:"e",nom:"le clavier"},{bac:"e",nom:"la souris"},{bac:"e",nom:"la webcam"},
|
|
{bac:"e",nom:"le micro"},{bac:"e",nom:"le scanner"},{bac:"e",nom:"la manette"},
|
|
{bac:"s",nom:"l'écran"},{bac:"s",nom:"le casque"},{bac:"s",nom:"l'imprimante"},
|
|
{bac:"s",nom:"les haut-parleurs"},{bac:"s",nom:"le vidéoprojecteur"},{bac:"s",nom:"l'écran d'un portable"}
|
|
];
|
|
|
|
/* ================= période 1 ================= */
|
|
monter("jeux-p1", [
|
|
{type:"ordre", titre:"Les étapes de l'allumage",
|
|
consigne:"Clique sur les étapes dans le bon ordre. Si tu te trompes, l'étape refuse et tu peux réessayer.",
|
|
etapes:["J'allume l'unité centrale.","J'allume l'écran.","J'attends que la machine démarre.",
|
|
"Je tape mon identifiant et mon mot de passe.","Le bureau apparaît à l'écran."]},
|
|
{type:"ordre", titre:"Les étapes pour éteindre",
|
|
consigne:"Trois étapes, toujours les mêmes, toutes les semaines.",
|
|
etapes:["Je clique sur le bouton Démarrer.","Je clique sur Alimentation.","Je clique sur Arrêter."]},
|
|
{type:"zones", titre:"Reconnaître le bureau", schema:SCHEMA_BUREAU,
|
|
consigne:"Clique sur l'élément demandé, sur le schéma.",
|
|
noms:{fond:"le fond d'écran", icone:"une icône", icone2:"une icône", corbeille:"la corbeille",
|
|
barre:"la barre des tâches", demarrer:"le bouton Démarrer", horloge:"l'horloge"},
|
|
questions:[{id:"demarrer",q:"Clique sur le bouton qui ouvre la liste des programmes."},
|
|
{id:"corbeille",q:"Clique sur l'endroit où vont les fichiers supprimés."},
|
|
{id:"barre",q:"Clique sur la rangée qui montre ce qui est ouvert."},
|
|
{id:"horloge",q:"Clique sur ce qui donne l'heure et la date."},
|
|
{id:"icone",q:"Clique sur une icône."},
|
|
{id:"fond",q:"Clique sur l'image qui ne sert qu'à décorer."}]},
|
|
{type:"paires", titre:"Les mots du bureau",
|
|
consigne:"Clique sur un mot à gauche, puis sur sa définition à droite.",
|
|
paires:[["Session","Ta place à toi sur un ordinateur partagé"],
|
|
["Identifiant","Ton nom pour la machine"],
|
|
["Mot de passe","La preuve que c'est bien toi"],
|
|
["Bureau","Ce qui s'affiche quand ta session est ouverte"],
|
|
["Icône","Un petit dessin qui ouvre quelque chose"],
|
|
["Corbeille","L'endroit où vont les fichiers supprimés"],
|
|
["Verrouiller","Protéger l'écran sans fermer sa session"],
|
|
["Arrêter","Éteindre proprement, par le menu"]]},
|
|
{type:"vf", titre:"Vrai ou faux", items:[
|
|
{t:"L'écran est la partie qui fait les calculs.", r:false, p:"C'est l'unité centrale qui calcule. L'écran ne fait que montrer."},
|
|
{t:"Je peux prêter mon mot de passe à un ami.", r:false, p:"Tout ce qui serait fait sur ta session serait fait à ton nom."},
|
|
{t:"Éteindre avec le bouton est la meilleure façon de faire.", r:false, p:"La machine n'a pas le temps de fermer ses programmes. On passe par le menu."},
|
|
{t:"Un démarrage lent veut toujours dire que l'ordinateur est en panne.", r:false, p:"La machine va chercher ce dont elle a besoin. On attend."},
|
|
{t:"Une tablette est un ordinateur.", r:true, p:"Le doigt remplace la souris, mais elle travaille de la même façon."},
|
|
{t:"Un fichier mis à la corbeille est perdu pour toujours.", r:false, p:"Tant que la corbeille n'est pas vidée, on peut le récupérer."}]},
|
|
{type:"qcm", titre:"Huit questions", items:[
|
|
{q:"Quel bouton allumes-tu en premier ?", o:["Celui de l'écran","Celui de l'unité centrale","N'importe lequel"], bon:1,
|
|
p:"C'est l'unité centrale qui travaille. L'écran seul ne sert à rien."},
|
|
{q:"À quoi sert l'identifiant ?", o:["À dire qui arrive","À prouver que c'est toi","À décorer"], bon:0,
|
|
p:"C'est ton nom pour la machine. Le mot de passe, lui, prouve que c'est toi."},
|
|
{q:"Tu t'absentes deux minutes. Que fais-tu ?", o:["J'éteins","Je verrouille","Je ferme ma session"], bon:1,
|
|
p:"Verrouiller protège l'écran et garde ton travail ouvert."},
|
|
{q:"Le cours est fini et le local ferme. Que fais-tu ?", o:["Je verrouille","Je ferme ma session","J'éteins par le menu"], bon:2,
|
|
p:"Personne ne vient après. On arrête la machine proprement."},
|
|
{q:"Où se trouve le bouton Démarrer ?", o:["Dans la barre des tâches","Sur le fond d'écran","Dans la corbeille"], bon:0,
|
|
p:"Il est dans la rangée du bas, avec l'horloge et les programmes ouverts."},
|
|
{q:"Le fond d'écran sert à…", o:["ouvrir des programmes","décorer","ranger des fichiers"], bon:1,
|
|
p:"C'est une image, rien de plus. Les icônes, elles, ouvrent quelque chose."},
|
|
{q:"La machine met du temps à démarrer. Que fais-tu ?", o:["J'appuie encore sur le bouton","J'attends","J'éteins et je rallume"], bon:1,
|
|
p:"Elle va chercher ce dont elle a besoin. Rappuyer risque de tout couper."},
|
|
{q:"Que veut dire ouvrir sa session ?", o:["Allumer l'écran","Entrer à sa place sur la machine","Ouvrir un programme"], bon:1,
|
|
p:"La session, c'est ta place à toi sur un ordinateur partagé."}]}
|
|
]);
|
|
|
|
/* ================= période 2 ================= */
|
|
monter("jeux-p2", [
|
|
{type:"pions", mode:"clic", titre:"Les nombres dans l'ordre",
|
|
consigne:"Clique sur 1, puis sur 2, puis sur 3, et ainsi de suite."},
|
|
{type:"pions", mode:"survol", titre:"Le parcours",
|
|
consigne:"Passe la souris sur les nombres dans l'ordre, sans jamais toucher un nombre qui n'est pas le tien. Tu ne cliques pas. Tu as trois vies."},
|
|
{type:"boites", titre:"Les boîtes à double-clic",
|
|
consigne:"Ouvre les douze boîtes. Un seul clic ne les ouvre pas : il en faut deux, rapides, sans bouger la souris."},
|
|
{type:"trieur", titre:"Le tri par glisser-déposer",
|
|
consigne:"Prends une forme, garde le bouton appuyé, amène-la dans le bon bac, et lâche seulement là.",
|
|
bacs:[{id:"rond",nom:"Les ronds"},{id:"carre",nom:"Les carrés"},{id:"triangle",nom:"Les triangles"}],
|
|
items:[{bac:"rond",glyphe:rond},{bac:"rond",glyphe:rond},{bac:"rond",glyphe:rond},
|
|
{bac:"carre",glyphe:carre},{bac:"carre",glyphe:carre},{bac:"carre",glyphe:carre},
|
|
{bac:"triangle",glyphe:triangle},{bac:"triangle",glyphe:triangle},{bac:"triangle",glyphe:triangle}]},
|
|
{type:"paires", titre:"La forme du curseur",
|
|
consigne:"Relie chaque forme du curseur à ce qu'elle t'annonce.",
|
|
paires:[["La flèche","Tout est normal, je peux cliquer"],
|
|
["La barre verticale","Je suis sur du texte"],
|
|
["La main","Je suis sur un lien"],
|
|
["Le rond qui tourne","La machine travaille, j'attends"],
|
|
["La double flèche","Je peux changer la taille de la fenêtre"]]},
|
|
{type:"paires", titre:"Les mots de la souris",
|
|
paires:[["Curseur","La flèche qui suit ta main à l'écran"],
|
|
["Capteur","Le petit œil sous la souris"],
|
|
["Sélectionner","Choisir d'un seul clic, sans ouvrir"],
|
|
["Double-clic","Deux clics rapides, sans bouger : cela ouvre"],
|
|
["Menu","La liste des choses possibles, ouverte par le clic droit"],
|
|
["Renommer","Changer le nom sans changer le contenu"],
|
|
["Trackpad","La surface plate qui remplace la souris sur un portable"]]},
|
|
{type:"qcm", titre:"Le menu du clic droit", items:[
|
|
{q:"Le fichier s'appelle Document1 et tu veux lui donner un vrai nom.", o:["Renommer","Supprimer","Copier"], bon:0,
|
|
p:"Renommer change le nom sans toucher à ce qu'il y a dedans."},
|
|
{q:"Tu veux mettre ce fichier à la corbeille.", o:["Renommer","Supprimer","Coller"], bon:1,
|
|
p:"Supprimer l'envoie à la corbeille. Il n'est pas encore perdu."},
|
|
{q:"Tu veux le même fichier dans un deuxième dossier, sans perdre celui-ci.", o:["Supprimer","Renommer","Copier, puis coller"], bon:2,
|
|
p:"Copier prend une copie. L'original reste en place."},
|
|
{q:"Tu as ouvert un menu par erreur. Comment le refermer ?", o:["Avec la touche Échap","En éteignant","En cliquant vingt fois"], bon:0,
|
|
p:"Échap referme le menu sans rien déclencher."},
|
|
{q:"Le menu du clic droit…", o:["fait l'action tout seul","propose une liste de choix","ouvre le fichier"], bon:1,
|
|
p:"Il propose. C'est toi qui choisis dans la liste."}]},
|
|
{type:"vf", titre:"Vrai ou faux", items:[
|
|
{t:"Le curseur bouge même quand la souris est soulevée.", r:false, p:"Le capteur ne lit plus rien. Elle glisse, elle ne se soulève pas."},
|
|
{t:"La touche Échap referme un menu.", r:true, p:"Sans rien déclencher."},
|
|
{t:"Pour réussir un double-clic, il faut surtout cliquer très fort.", r:false, p:"Il faut surtout ne pas bouger la souris entre les deux clics."},
|
|
{t:"Pour déplacer un fichier, je garde le bouton appuyé pendant tout le trajet.", r:true, p:"Si tu lâches en route, l'objet reste en route."},
|
|
{t:"Copier un fichier fait disparaître l'original.", r:false, p:"L'original reste en place. C'est supprimer qui l'enlève."},
|
|
{t:"La molette sert à cliquer.", r:false, p:"Elle fait défiler la page."}]},
|
|
{type:"qcm", titre:"Huit questions", items:[
|
|
{q:"Un seul clic gauche sur un fichier, que fait-il ?", o:["Il l'ouvre","Il le choisit sans l'ouvrir","Il le supprime"], bon:1,
|
|
p:"Un clic choisit. Deux clics ouvrent."},
|
|
{q:"Qu'y a-t-il sous la souris ?", o:["Un capteur qui lit la surface","Une pile","Un aimant"], bon:0,
|
|
p:"C'est lui qui voit la surface défiler."},
|
|
{q:"Le curseur devient une barre verticale. Où es-tu ?", o:["Sur du texte","Sur un lien","Sur un bord de fenêtre"], bon:0,
|
|
p:"Si tu cliques, tu poses le point de départ pour écrire."},
|
|
{q:"Le curseur devient un rond qui tourne. Que fais-tu ?", o:["Je clique plus vite","J'attends","J'éteins"], bon:1,
|
|
p:"La machine travaille. Chaque clic s'ajoute à la file d'attente."},
|
|
{q:"Tu veux ouvrir un dossier. Quel geste ?", o:["Un clic gauche","Un double-clic","Un clic droit"], bon:1,
|
|
p:"Le double-clic ouvre."},
|
|
{q:"À quoi sert la molette ?", o:["À faire défiler la page","À sélectionner","À fermer une fenêtre"], bon:0,
|
|
p:"Elle fait monter et descendre la page."},
|
|
{q:"Sur un portable, qu'est-ce qui remplace la souris ?", o:["Le trackpad","L'écran","Le clavier"], bon:0,
|
|
p:"Les gestes sont exactement les mêmes."},
|
|
{q:"Tu lâches le bouton au milieu d'un déplacement. Que se passe-t-il ?", o:["Le fichier revient à sa place","Le fichier reste là où tu as lâché","Le fichier est supprimé"], bon:1,
|
|
p:"Il faut garder appuyé jusqu'à destination. C'est réversible, tu peux recommencer."}]}
|
|
]);
|
|
|
|
/* ================= période 3 ================= */
|
|
monter("jeux-p3", [
|
|
{type:"trieur", titre:"Entrée ou sortie",
|
|
consigne:"Une entrée va de toi vers l'ordinateur. Une sortie va de l'ordinateur vers toi.",
|
|
bacs:[{id:"e",nom:"Entrée"},{id:"s",nom:"Sortie"}], items:ES},
|
|
{type:"ordre", titre:"Les trois temps",
|
|
consigne:"Tu appuies sur la touche A du clavier. Que se passe-t-il, et dans quel ordre ?",
|
|
etapes:["L'ordinateur reçoit le signal de la touche.",
|
|
"L'ordinateur transforme ce signal en lettre.",
|
|
"L'ordinateur renvoie le résultat : le A s'affiche."]},
|
|
{type:"zones", titre:"Dans l'unité centrale", schema:SCHEMA_UC,
|
|
consigne:"Clique sur la pièce demandée. Attention, le processeur est caché sous son ventilateur.",
|
|
noms:{carte:"la carte mère", alim:"l'alimentation", ventb:"le ventilateur du boîtier",
|
|
proc:"l'endroit du processeur", memoire:"les barrettes de mémoire", disque:"le disque"},
|
|
questions:[{id:"proc",q:"Clique sur l'endroit où se trouve le processeur."},
|
|
{id:"memoire",q:"Clique sur les barrettes de mémoire vive."},
|
|
{id:"disque",q:"Clique sur la pièce qui garde ce que tu as enregistré."},
|
|
{id:"alim",q:"Clique sur la pièce qui distribue le courant."},
|
|
{id:"ventb",q:"Clique sur ce qui fait le bruit de l'ordinateur."},
|
|
{id:"carte",q:"Clique sur la plaque qui relie toutes les pièces."}]},
|
|
{type:"paires", titre:"Chaque pièce et son rôle",
|
|
paires:[["Le processeur","Calcule"],
|
|
["La mémoire vive","Retient pendant le travail, oublie à l'extinction"],
|
|
["Le disque","Garde ce qui est enregistré, même éteint"],
|
|
["Le ventilateur","Refroidit la machine"],
|
|
["La carte mère","Relie toutes les pièces entre elles"],
|
|
["L'alimentation","Distribue le courant aux autres pièces"]]},
|
|
{type:"paires", titre:"Chaque prise et son usage",
|
|
paires:[["USB","Une clé, une souris, une imprimante"],
|
|
["Jack","Un casque, des haut-parleurs"],
|
|
["HDMI","Un écran, un vidéoprojecteur"],
|
|
["Réseau","Un câble internet"]]},
|
|
{type:"vf", titre:"Vrai ou faux", items:[
|
|
{t:"L'unité centrale est un appareil d'entrée.", r:false, p:"Elle n'est ni entrée ni sortie. Elle est au milieu, c'est elle qui transforme."},
|
|
{t:"Le micro envoie un son à l'ordinateur.", r:true, p:"C'est une entrée, comme le clavier et la souris."},
|
|
{t:"Sur un portable, il n'y a pas d'unité centrale.", r:false, p:"Il y en a une, mais elle est dans la même coque que le clavier."},
|
|
{t:"Pour débrancher un casque, je tire sur le câble.", r:false, p:"On tire sur la fiche. Le câble finit par lâcher."},
|
|
{t:"Un écran tactile est à la fois une entrée et une sortie.", r:true, p:"Il montre, et il envoie l'endroit que tu touches."},
|
|
{t:"Le processeur est bien visible quand on ouvre la boîte.", r:false, p:"Il est caché sous un gros ventilateur."},
|
|
{t:"La mémoire vive garde ton travail après l'extinction.", r:false, p:"Elle oublie tout. C'est le disque qui garde."},
|
|
{t:"Le scanner est un appareil d'entrée.", r:true, p:"Il transforme une feuille en image et l'envoie à la machine."}]},
|
|
{type:"qcm", titre:"Dix questions", items:[
|
|
{q:"Dans quel ordre l'ordinateur travaille-t-il ?", o:["Il renvoie, il reçoit, il transforme","Il reçoit, il transforme, il renvoie","Il transforme, il reçoit, il renvoie"], bon:1,
|
|
p:"Il ne peut pas renvoyer avant d'avoir reçu."},
|
|
{q:"Le mot périphérique veut dire…", o:["au centre","autour","en dessous"], bon:1,
|
|
p:"Ce sont les appareils branchés autour de l'unité centrale."},
|
|
{q:"L'imprimante est un appareil…", o:["d'entrée","de sortie","ni l'un ni l'autre"], bon:1,
|
|
p:"C'est la machine qui te donne une feuille."},
|
|
{q:"La manette de jeu est un appareil…", o:["d'entrée","de sortie","ni l'un ni l'autre"], bon:0,
|
|
p:"Elle envoie tes ordres à la machine."},
|
|
{q:"Quelle pièce calcule ?", o:["Le disque","Le processeur","L'alimentation"], bon:1,
|
|
p:"C'est la pièce qui travaille le plus, et qui chauffe le plus."},
|
|
{q:"Quelle mémoire oublie tout quand on éteint ?", o:["Le disque","La mémoire vive","La clé USB"], bon:1,
|
|
p:"La mémoire vive retient pendant, le disque garde après."},
|
|
{q:"Où branche-t-on une clé USB ?", o:["Dans la prise jack","Dans la prise rectangulaire USB","Dans la prise réseau"], bon:1,
|
|
p:"Elle se branche dans un sens. Si ça résiste, on retourne, on ne force pas."},
|
|
{q:"Le casque avec micro est…", o:["seulement une entrée","seulement une sortie","les deux à la fois"], bon:2,
|
|
p:"L'écouteur est une sortie, le micro posé dessus est une entrée."},
|
|
{q:"À quoi sert le ventilateur ?", o:["À faire du bruit","À refroidir","À calculer"], bon:1,
|
|
p:"Le bruit n'est qu'une conséquence."},
|
|
{q:"Tous les câbles arrivent à l'unité centrale. Est-ce une entrée ?", o:["Oui","Non"], bon:1,
|
|
p:"L'entrée, c'est ce qui est au bout du câble, dans ta main."}]}
|
|
]);
|
|
|
|
/* ================= période 4 ================= */
|
|
monter("jeux-p4", [
|
|
{type:"zones", titre:"Les parties de la fenêtre", schema:SCHEMA_FENETRE,
|
|
consigne:"Clique sur la partie demandée.",
|
|
noms:{bord:"le bord de la fenêtre", titre:"la barre de titre", travail:"la zone de travail",
|
|
reduire:"le bouton qui réduit", agrandir:"le bouton qui agrandit", fermer:"le bouton qui ferme"},
|
|
questions:[{id:"fermer",q:"Clique sur le bouton qui arrête le programme pour de bon."},
|
|
{id:"reduire",q:"Clique sur le bouton qui cache la fenêtre sans arrêter le programme."},
|
|
{id:"agrandir",q:"Clique sur le bouton qui met la fenêtre sur tout l'écran."},
|
|
{id:"titre",q:"Clique sur la partie qui sert à déplacer la fenêtre."},
|
|
{id:"travail",q:"Clique sur la partie où tu écris."},
|
|
{id:"bord",q:"Clique sur ce qui sert à changer la taille de la fenêtre."}]},
|
|
{type:"paires", titre:"Chaque partie et son rôle",
|
|
paires:[["La barre de titre","Donne le nom du document et sert à déplacer"],
|
|
["La zone de travail","L'endroit où j'écris"],
|
|
["Les bords","Servent à changer la taille"],
|
|
["Les trois boutons","Arrêtent, cachent ou agrandissent"],
|
|
["La barre des tâches","Montre tout ce qui est ouvert"]]},
|
|
{type:"paires", titre:"Chaque programme et son métier",
|
|
paires:[["Traitement de texte","Écrire et mettre en page"],
|
|
["Programme de dessin","Dessiner et retoucher des images"],
|
|
["Navigateur","Aller sur internet"],
|
|
["Tableur","Faire des calculs dans un tableau"]]},
|
|
{type:"paires", titre:"Les mots des programmes",
|
|
paires:[["Programme","Un outil installé qui fait un métier précis"],
|
|
["Fenêtre","Le cadre dans lequel un programme s'affiche"],
|
|
["Réduire","Cacher la fenêtre sans arrêter le programme"],
|
|
["Quitter","Arrêter le programme pour de bon"],
|
|
["Basculer","Passer d'un programme ouvert à un autre"],
|
|
["Barre des tâches","La rangée du bas, qui montre ce qui est ouvert"]]},
|
|
{type:"ordre", titre:"Ouvrir, travailler, quitter",
|
|
etapes:["Je clique sur le bouton Démarrer.","Je choisis le programme dans la liste.",
|
|
"Je travaille dans la fenêtre.","Je quitte le programme par la croix.",
|
|
"Je vérifie dans la barre des tâches qu'il ne reste rien."]},
|
|
{type:"vf", titre:"Vrai ou faux", items:[
|
|
{t:"Réduire une fenêtre arrête le programme.", r:false, p:"Le programme continue de tourner, dans la barre du bas."},
|
|
{t:"Je peux avoir plusieurs programmes ouverts en même temps.", r:true, p:"Comme plusieurs feuilles posées sur une table."},
|
|
{t:"La barre des tâches montre ce qui est ouvert.", r:true, p:"C'est là que tu vérifies en fin d'heure."},
|
|
{t:"Si un programme met du temps à s'ouvrir, je double-clique encore.", r:false, p:"Tu en ouvres un de plus à chaque fois, et la machine ralentit."},
|
|
{t:"On peut déplacer une fenêtre en glissant sur sa barre de titre.", r:true, p:"C'est à ça qu'elle sert, en plus de donner le nom du document."},
|
|
{t:"Un programme qui ne répond plus se règle en cliquant très vite.", r:false, p:"Chaque clic s'ajoute à la file d'attente. On attend, puis on appelle le professeur."},
|
|
{t:"Un traitement de texte sert à retoucher des photos.", r:false, p:"Chaque programme fait son métier. Aucun ne fait tout."}]},
|
|
{type:"qcm", titre:"Dix questions", items:[
|
|
{q:"Combien de chemins pour démarrer un programme ?", o:["Un seul","Trois : l'icône, le menu Démarrer, la recherche","Deux : l'icône et la corbeille"], bon:1,
|
|
p:"Le menu Démarrer est le plus sûr : tout y est."},
|
|
{q:"Le bouton en forme de trait…", o:["ferme","réduit","agrandit"], bon:1,
|
|
p:"Il cache la fenêtre, le programme tourne encore."},
|
|
{q:"Le bouton en forme de croix…", o:["ferme","réduit","agrandit"], bon:0,
|
|
p:"Il arrête le programme pour de bon."},
|
|
{q:"Tu as fini ton travail. Que fais-tu de la fenêtre ?", o:["Je la réduis","Je la quitte par la croix","Je l'agrandis"], bon:1,
|
|
p:"Réduire laisserait le programme tourner pour rien."},
|
|
{q:"Comment sait-on qu'un programme est encore ouvert ?", o:["Sa marque est dans la barre des tâches","Il n'y a pas de moyen","L'écran clignote"], bon:0,
|
|
p:"Chaque programme ouvert y laisse une marque sous son icône."},
|
|
{q:"Quinze programmes réduits, que se passe-t-il ?", o:["Rien du tout","L'ordinateur devient lent","L'écran s'éteint"], bon:1,
|
|
p:"Chacun occupe encore une partie de la mémoire vive."},
|
|
{q:"Quel raccourci fait passer d'un programme à l'autre ?", o:["Ctrl et S","Alt et Tabulation","Échap"], bon:1,
|
|
p:"La barre des tâches fait la même chose, à la souris."},
|
|
{q:"Comment change-t-on la taille d'une fenêtre ?", o:["En glissant sur un bord","En cliquant au milieu","Avec la molette"], bon:0,
|
|
p:"Le curseur devient une double flèche pour te prévenir."},
|
|
{q:"La fenêtre est pâle et rien ne répond. Que fais-tu ?", o:["Je clique quinze fois","J'attends une minute","Je débranche"], bon:1,
|
|
p:"Si rien ne revient, tu appelles le professeur. Tu ne redémarres pas seul."},
|
|
{q:"Programme, logiciel, application, ce sont…", o:["trois choses différentes","trois mots pour la même chose","trois marques"], bon:1,
|
|
p:"Un outil installé qui sert à faire quelque chose de précis."}]}
|
|
]);
|
|
|
|
/* ================= période 5 ================= */
|
|
monter("jeux-p5", [
|
|
{type:"qcm", titre:"Le bon nom de fichier", items:[
|
|
{q:"Quel nom est le meilleur ?", o:["Document1","horaire-dupont","aaaa"], bon:1,
|
|
p:"Il dit ce que c'est et à qui c'est, sans avoir besoin de l'ouvrir."},
|
|
{q:"Quel nom est le meilleur ?", o:["mon travail à moi","truc2","fiche-identite-morgane"], bon:2,
|
|
p:"Pas d'espace, pas d'accent, et on sait tout de suite ce que c'est."},
|
|
{q:"Pourquoi éviter les espaces dans un nom de fichier ?", o:["Parce que c'est interdit","Parce que selon les machines ça pose parfois problème","Parce que c'est plus long à taper"], bon:1,
|
|
p:"Un tiret remplace très bien un espace."},
|
|
{q:"Où enregistres-tu ton travail pour ce cours ?", o:["Sur le bureau du poste","Dans ma clé USB","N'importe où"], bon:1,
|
|
p:"La clé est à toi et tu la reprends. Le poste est nettoyé."},
|
|
{q:"Pourquoi le bureau du poste est-il un mauvais endroit ?", o:["Il est trop petit","Les postes sont nettoyés et tu changes de place","C'est interdit"], bon:1,
|
|
p:"Tu ne travailleras pas forcément sur le même poste la semaine prochaine."},
|
|
{q:"Que fait le raccourci Ctrl et S ?", o:["Il ferme le programme","Il enregistre sans fermer","Il imprime"], bon:1,
|
|
p:"À faire toutes les quelques minutes, par réflexe."}]},
|
|
{type:"ordre", titre:"Les étapes de l'enregistrement",
|
|
consigne:"Tu viens d'écrire un texte. Que fais-tu, et dans quel ordre ?",
|
|
etapes:["J'ouvre le programme et j'écris mon texte.","Je clique sur Enregistrer.",
|
|
"Je choisis l'endroit : ma clé USB, dans mon dossier.","Je donne un nom qui veut dire quelque chose.",
|
|
"Je ferme le programme.","Je retire ma clé, une fois l'enregistrement terminé."]},
|
|
{type:"chemin", titre:"Retrouver le fichier",
|
|
consigne:"Ouvre les dossiers l'un après l'autre pour arriver au fichier demandé. Tu peux revenir en arrière.",
|
|
missions:["gateau-chocolat.docx","horaire-morgane.docx","page-garde-francais.docx"],
|
|
arbre:{nom:"Clé USB", enfants:[
|
|
{nom:"morgane", enfants:[
|
|
{nom:"recette", enfants:[{nom:"gateau-chocolat.docx"},{nom:"photo-gateau.jpg"}]},
|
|
{nom:"horaire", enfants:[{nom:"horaire-morgane.docx"}]},
|
|
{nom:"page-de-garde", enfants:[{nom:"page-garde-francais.docx"},{nom:"page-garde-maths.docx"}]}
|
|
]},
|
|
{nom:"photos", enfants:[{nom:"vacances.jpg"},{nom:"chien.jpg"}]},
|
|
{nom:"lisezmoi.pdf"}
|
|
]}},
|
|
{type:"paires", titre:"La fin du nom et le type de fichier",
|
|
paires:[[".docx","Un document écrit"],
|
|
[".jpg","Une image ou une photo"],
|
|
[".mp3","Un son, une musique"],
|
|
[".mp4","Une vidéo"],
|
|
[".pdf","Un document à lire, qu'on ne modifie pas"],
|
|
[".exe","Un programme"]]},
|
|
{type:"paires", titre:"Les mots de l'enregistrement",
|
|
paires:[["Fichier","Un travail rangé quelque part, avec un nom"],
|
|
["Dossier","Une boîte qui contient des fichiers"],
|
|
["Chemin","La liste des boîtes à ouvrir pour arriver au fichier"],
|
|
["Enregistrer","Faire passer son travail dans un endroit qui garde"],
|
|
["Enregistrer sous","Faire une deuxième version, ailleurs ou sous un autre nom"],
|
|
["Mémoire vive","La mémoire rapide qui s'efface quand on éteint"]]},
|
|
{type:"vf", titre:"Vrai ou faux", items:[
|
|
{t:"Un travail non enregistré est perdu quand on éteint.", r:true, p:"La mémoire vive s'efface. Seul l'enregistrement garde."},
|
|
{t:"Le bureau du poste est le meilleur endroit pour garder son travail.", r:false, p:"Les postes sont nettoyés et tu changes de place."},
|
|
{t:"Ctrl et S enregistrent sans fermer le programme.", r:true, p:"En une seconde. À faire souvent."},
|
|
{t:"Je peux retirer ma clé pendant qu'elle enregistre.", r:false, p:"Le fichier peut devenir illisible."},
|
|
{t:"Enregistrer sous fait une deuxième version du fichier.", r:true, p:"L'ancienne reste en place."},
|
|
{t:"Un fichier qui finit par .exe est une image.", r:false, p:"C'est un programme. On n'ouvre jamais un .exe reçu d'un inconnu."},
|
|
{t:"Un dossier peut contenir d'autres dossiers.", r:true, p:"Comme des boîtes dans une boîte."}]},
|
|
{type:"qcm", titre:"Dix questions", items:[
|
|
{q:"Pendant que tu écris, ton texte est…", o:["sur le disque","dans la mémoire vive","sur la clé"], bon:1,
|
|
p:"Et la mémoire vive oublie tout quand on éteint."},
|
|
{q:"Enregistrer, c'est…", o:["imprimer","faire passer son travail dans un endroit qui garde","fermer le programme"], bon:1,
|
|
p:"De la mémoire qui oublie vers l'endroit qui garde."},
|
|
{q:"Un fichier, c'est…", o:["une boîte","un travail rangé avec un nom","un programme"], bon:1,
|
|
p:"La boîte, c'est le dossier."},
|
|
{q:"Le chemin d'un fichier, c'est…", o:["son nom","la liste des boîtes à ouvrir pour y arriver","sa taille"], bon:1,
|
|
p:"On l'écrit de la plus grande boîte à la plus petite."},
|
|
{q:"Dans Clé USB puis morgane puis recette puis gateau.docx, où est le fichier ?", o:["Dans le dossier morgane","Dans le dossier recette","Sur le bureau"], bon:1,
|
|
p:"Le dossier recette est lui-même dans le dossier morgane."},
|
|
{q:"Tu veux garder l'ancienne version et en faire une nouvelle. Tu choisis…", o:["Enregistrer","Enregistrer sous","Imprimer"], bon:1,
|
|
p:"Enregistrer sous fait une deuxième version."},
|
|
{q:"Que dit la fin du nom d'un fichier ?", o:["Sa taille","De quelle sorte de fichier il s'agit","Qui l'a écrit"], bon:1,
|
|
p:"Et donc quel programme saura l'ouvrir."},
|
|
{q:"Tu reçois un fichier .exe de quelqu'un que tu ne connais pas.", o:["Je l'ouvre","Je ne l'ouvre pas","Je le renomme"], bon:1,
|
|
p:"Un .exe est un programme : il fait quelque chose quand on l'ouvre."},
|
|
{q:"Quand utilises-tu Ctrl et S ?", o:["Seulement à la fin","Toutes les quelques minutes","Jamais"], bon:1,
|
|
p:"Un travail perdu, c'est une heure perdue."},
|
|
{q:"Tu ne retrouves plus ton fichier. La cause la plus fréquente ?", o:["La machine l'a effacé","Tu ne sais plus quel chemin tu as pris en l'enregistrant","Il a changé de nom tout seul"], bon:1,
|
|
p:"C'est pour ça qu'on choisit l'endroit avant de cliquer, et qu'on le note."}]}
|
|
]);
|
|
|
|
/* ================= période 6 ================= */
|
|
monter("jeux-p6", [
|
|
{type:"ordre", titre:"Le parcours en huit étapes",
|
|
consigne:"Remets les huit étapes du parcours dans l'ordre, avant de le faire pour de vrai sur ton poste.",
|
|
etapes:["J'installe mon poste et j'allume l'ordinateur.","J'ouvre ma session.",
|
|
"Je branche ma clé USB et j'ouvre mon dossier.","Je démarre le programme par le bouton Démarrer.",
|
|
"J'écris les trois phrases dictées.","J'enregistre dans mon dossier, avec un nom correct.",
|
|
"Je quitte le programme, puis je retrouve mon fichier et je le rouvre.",
|
|
"Je ferme tout, je retire ma clé, j'éteins par le menu."]},
|
|
{type:"trieur", titre:"Le tri final",
|
|
consigne:"Douze appareils à classer. C'est le même exercice qu'à la période 3 : tu dois le réussir sans hésiter.",
|
|
bacs:[{id:"e",nom:"Entrée"},{id:"s",nom:"Sortie"}], items:ES},
|
|
{type:"paires", titre:"Les douze mots de l'étape",
|
|
consigne:"Douze mots, douze définitions. Ce sont ceux qui reviendront toute l'année.",
|
|
paires:[["Session","Ta place à toi sur un ordinateur partagé"],
|
|
["Bureau","Ce qui s'affiche quand ta session est ouverte"],
|
|
["Curseur","La flèche qui suit ta main à l'écran"],
|
|
["Sélectionner","Choisir d'un seul clic, sans ouvrir"],
|
|
["Périphérique","Un appareil branché autour de l'unité centrale"],
|
|
["Unité centrale","La boîte qui transforme ; ni entrée ni sortie"],
|
|
["Processeur","La pièce qui calcule"],
|
|
["Mémoire vive","La mémoire qui oublie quand on éteint"],
|
|
["Programme","Un outil installé qui fait un métier précis"],
|
|
["Barre des tâches","La rangée du bas, qui montre ce qui est ouvert"],
|
|
["Fichier","Un travail rangé quelque part, avec un nom"],
|
|
["Chemin","La liste des boîtes à ouvrir pour arriver au fichier"]]},
|
|
{type:"vf", titre:"Vrai ou faux de synthèse", items:[
|
|
{t:"On éteint l'ordinateur par le bouton de la boîte.", r:false, p:"Par Démarrer, Alimentation, Arrêter."},
|
|
{t:"Un clic gauche ouvre un fichier.", r:false, p:"Un clic choisit. Deux clics ouvrent."},
|
|
{t:"L'unité centrale est au milieu : elle transforme.", r:true, p:"Elle n'est ni entrée ni sortie."},
|
|
{t:"Réduire une fenêtre revient à quitter le programme.", r:false, p:"Il tourne encore, dans la barre du bas."},
|
|
{t:"La mémoire vive garde ton travail après l'extinction.", r:false, p:"C'est le disque et la clé qui gardent."},
|
|
{t:"Un dossier est une boîte qui contient des fichiers.", r:true, p:"Et il peut contenir d'autres dossiers."},
|
|
{t:"La touche Échap referme un menu ouvert par erreur.", r:true, p:"Sans rien déclencher."},
|
|
{t:"Verrouiller son écran ferme la session et perd le travail.", r:false, p:"La session reste ouverte, le travail est toujours là."}]},
|
|
{type:"qcm", titre:"Les vingt questions du module", items:[
|
|
{q:"Quel bouton allumes-tu en premier ?", o:["Celui de l'écran","Celui de l'unité centrale"], bon:1, p:"C'est elle qui travaille."},
|
|
{q:"Ta session, c'est…", o:["ta place à toi sur la machine","un programme","un fichier"], bon:0, p:"Avec tes réglages et tes documents."},
|
|
{q:"Tu t'absentes deux minutes.", o:["Je verrouille","J'éteins"], bon:0, p:"Ton travail reste ouvert et protégé."},
|
|
{q:"La corbeille sert à…", o:["décorer","garder les fichiers supprimés","ouvrir des programmes"], bon:1, p:"Tant qu'elle n'est pas vidée, on peut récupérer."},
|
|
{q:"Un seul clic gauche…", o:["ouvre","choisit sans ouvrir"], bon:1, p:"Deux clics ouvrent."},
|
|
{q:"Le clic droit…", o:["fait l'action tout seul","propose un menu de choix"], bon:1, p:"Échap le referme."},
|
|
{q:"Pour déplacer un fichier…", o:["je clique une fois dessus","je garde le bouton appuyé pendant tout le trajet"], bon:1, p:"Si tu lâches en route, il reste en route."},
|
|
{q:"Le curseur devient un rond qui tourne.", o:["J'attends","Je clique plus vite"], bon:0, p:"La machine travaille."},
|
|
{q:"L'ordinateur…", o:["reçoit, transforme, renvoie","renvoie, reçoit, transforme"], bon:0, p:"Cet ordre ne change jamais."},
|
|
{q:"Le clavier est un appareil…", o:["d'entrée","de sortie"], bon:0, p:"Il va de toi vers la machine."},
|
|
{q:"L'écran est un appareil…", o:["d'entrée","de sortie"], bon:1, p:"Il va de la machine vers toi."},
|
|
{q:"L'unité centrale est un appareil…", o:["d'entrée","de sortie","ni l'un ni l'autre"], bon:2, p:"Elle est au milieu : elle transforme."},
|
|
{q:"Quelle pièce calcule ?", o:["Le disque","Le processeur"], bon:1, p:"Caché sous son ventilateur."},
|
|
{q:"Quelle mémoire oublie tout à l'extinction ?", o:["La mémoire vive","Le disque"], bon:0, p:"Le disque, lui, garde."},
|
|
{q:"Le chemin le plus sûr pour démarrer un programme ?", o:["L'icône du bureau","Le bouton Démarrer"], bon:1, p:"Tout y est, même ce qui n'a pas d'icône."},
|
|
{q:"Le bouton en forme de trait…", o:["réduit","ferme"], bon:0, p:"Le programme continue de tourner."},
|
|
{q:"Où vérifies-tu qu'il ne reste rien d'ouvert ?", o:["Sur le fond d'écran","Dans la barre des tâches"], bon:1, p:"Chaque programme ouvert y laisse une marque."},
|
|
{q:"Un bon nom de fichier…", o:["dit ce que c'est et à qui c'est","est le plus court possible"], bon:0, p:"Pour le retrouver dans trois semaines sans l'ouvrir."},
|
|
{q:"Où enregistres-tu pour ce cours ?", o:["Sur le bureau du poste","Dans ma clé USB"], bon:1, p:"Elle est à toi, tu la reprends."},
|
|
{q:"Ctrl et S…", o:["ferment le programme","enregistrent sans fermer"], bon:1, p:"À faire toutes les quelques minutes."}]}
|
|
]);
|
|
</script>
|
|
</body>
|
|
</html>
|