lrdlg
620 lines
36 KiB
HTML
620 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Cours 2, ce qu'il y a dans la boite — 1re tronc commun</title>
|
||
<meta name="robots" content="noindex">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="../assets/theme.css">
|
||
<link rel="stylesheet" href="../assets/numerique-1re.css">
|
||
</head>
|
||
<body class="classe-tc">
|
||
|
||
<header class="entete">
|
||
<div class="entete__interieur entete__interieur--large">
|
||
<nav class="ariane" aria-label="Fil d'Ariane">
|
||
<a href="../index.html">Mes cours</a><span aria-hidden="true">/</span><a href="index.html">1re tronc commun</a><span aria-hidden="true">/</span><strong>Cours 2</strong>
|
||
</nav>
|
||
<h1>Ce qu'il y a dans la boite</h1>
|
||
<p class="entete__meta">Cours 2 · Formation numérique · 1re année</p>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="contenu contenu--large">
|
||
|
||
<p class="chapeau">Aujourd'hui, on ouvre un vrai ordinateur. Tu vas apprendre à nommer ce qu'il y a dedans, à faire la différence entre le matériel et le logiciel, et à dire dans quel sens l'information circule quand on branche un appareil.</p>
|
||
|
||
<ul class="etiquettes">
|
||
<li class="etiquette">2 périodes</li>
|
||
<li class="etiquette">Cours débranché</li>
|
||
<li class="etiquette">Livret pages 1 à 6</li>
|
||
</ul>
|
||
|
||
<ul class="apercu">
|
||
<li><svg viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"/><circle cx="12" cy="10" r="3.5"/><path d="M8 17h8"/></svg><span>La boite</span></li>
|
||
<li><svg viewBox="0 0 24 24"><path d="M3 5h8v14H3zM13 5h8v14h-8"/><path d="M6 9h2M16 9h2"/></svg><span>Le tri</span></li>
|
||
<li><svg viewBox="0 0 24 24"><path d="M4 8h11l-3-3M20 16H9l3 3"/></svg><span>Entrée, sortie</span></li>
|
||
<li><svg viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h7M9 17h5"/></svg><span>Ma trace</span></li>
|
||
</ul>
|
||
|
||
|
||
<section class="dashboard">
|
||
<div class="stat"><small>Activité en cours</small><strong id="sPhase">1 sur 6</strong></div>
|
||
<div class="stat"><small>Temps depuis le début</small><strong id="sTemps">00:00</strong></div>
|
||
<div class="stat"><small>Il reste pour cette activité</small><strong id="sReste">–</strong></div>
|
||
<div class="stat"><small>Cartes triées</small><strong id="sComp">0 sur 17</strong></div>
|
||
</section>
|
||
|
||
<div class="card" style="padding:16px 18px">
|
||
<div class="row">
|
||
<button class="btn primary" id="btnGo">Démarrer</button>
|
||
<button class="btn soft" id="btnStop">Remettre à zéro</button>
|
||
<span class="ecart" id="ecart" style="background:var(--papier);border:1px solid var(--line);color:var(--encre-douce)">Activité 1 · La question du jour</span>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="navtabs n6" id="rail"></nav>
|
||
|
||
<!-- 1 -->
|
||
<section class="panel active" id="p0"><div class="card">
|
||
<div class="carte-entete"><div><h2>On s'installe</h2><p class="muted">Pendant que le professeur distribue les ordinateurs et les codes.</p></div><span class="score">20 min</span></div>
|
||
|
||
<div class="consigne"><small>À faire tout de suite, seul et en silence</small>
|
||
Ouvre ton livret à la page 1.<br><br>
|
||
Quand tu dis que ton téléphone ou ton ordinateur est lent, qu'est-ce qui est lent ? L'objet lui-même, ou ce qu'il y a dedans ?<br><br>
|
||
Écris ta réponse, puis un exemple précis d'un moment où ça t'est arrivé.</div>
|
||
|
||
<div class="consigne" style="margin-bottom:0"><small>Si tu n'as pas encore ton code</small>
|
||
Ne bouge pas de ta place et lève la main. Le professeur passe te le donner. Tu n'en as pas besoin avant la fin du cours.</div>
|
||
</div></section>
|
||
|
||
<!-- 2 -->
|
||
<section class="panel" id="p1"><div class="card">
|
||
<div class="carte-entete"><div><h2>La question du jour</h2><p class="muted">Ton livret, page 1.</p></div><span class="score">10 min</span></div>
|
||
|
||
<h3>Les réponses de la classe</h3>
|
||
<div class="saisie">
|
||
<input id="entree" placeholder="Une réponse donnée par la classe" autocomplete="off">
|
||
<select id="cat" aria-label="Colonne"></select>
|
||
<button class="btn primary" id="ajouter">Ajouter</button>
|
||
</div>
|
||
<div class="colonnes" id="colonnes"></div>
|
||
<p class="muted">On ne corrige rien pour l'instant. On reviendra sur ces réponses à la fin du cours.</p>
|
||
</div></section>
|
||
|
||
<!-- 3 -->
|
||
<section class="panel" id="p2">
|
||
<div class="card">
|
||
<h2>Je comprends. Le matériel, le logiciel et la donnée</h2>
|
||
<p class="muted">On lit cette page ensemble. Elle est dans ton livret, tu la reliras pour réviser.</p>
|
||
|
||
<h3>Un ordinateur seul ne fait rien</h3>
|
||
<p>Un ordinateur qui sort de son carton affiche un écran noir et attend. Toutes les pièces fonctionnent, mais <b>personne ne leur a dit quoi faire</b>. Un ordinateur, ce n'est pas une chose : c'est trois choses qui travaillent ensemble.</p>
|
||
|
||
<h3>1. Le matériel <span class="muted" style="font-weight:600">· hardware</span></h3>
|
||
<p>Ce sont <b>les pièces</b>. L'écran, le clavier, la souris, les câbles, la boite, les cartes électroniques à l'intérieur.</p>
|
||
<p>Il se fabrique dans une usine, il pèse quelque chose, il chauffe, il s'use, il se casse. Attention : le matériel n'est pas seulement la grosse boite. Un câble est du matériel. Une clé USB aussi.</p>
|
||
|
||
<h3>2. Le logiciel <span class="muted" style="font-weight:600">· software</span></h3>
|
||
<p>C'est <b>une suite d'instructions</b> écrites par des personnes, que la machine exécute l'une après l'autre.</p>
|
||
<p>Une instruction, c'est un ordre simple : <i>affiche cette lettre ici, compare ces deux nombres, si le premier est plus grand va à l'étape 12.</i> Un logiciel, c'est des millions d'instructions de ce genre.</p>
|
||
<p><b>Deux familles.</b> Le <b>système d'exploitation</b> démarre en premier et commande tous les autres : Windows, macOS, Linux, Android, iOS. Les <b>applications</b> sont tous les autres logiciels, ceux qu'on lance soi-même.</p>
|
||
<p>Un logiciel ne se fabrique pas, il s'écrit. Il ne pèse rien, il ne s'use pas. On peut le remplacer sans changer une seule pièce.</p>
|
||
|
||
<h3>3. La donnée</h3>
|
||
<p>C'est une <b>information enregistrée</b>. Ta photo de profil, ton devoir, une chanson, une vidéo.</p>
|
||
<p>Un logiciel <b>s'exécute</b> : il agit. Une donnée <b>ne fait rien</b> : on l'ouvre, on la lit, on la modifie. Une photo ne peut pas se lancer toute seule, il faut un logiciel pour l'ouvrir.</p>
|
||
|
||
<div class="consigne"><small>L'image qui aide : la cuisine</small>
|
||
Le four, la casserole, le couteau, c'est le <b>matériel</b>.<br>
|
||
La recette, c'est le <b>logiciel</b> : une suite d'étapes dans l'ordre. Avec le même four, mille plats différents.<br>
|
||
Les ingrédients et le gâteau, ce sont les <b>données</b> : ce qui se fait transformer.</div>
|
||
|
||
<h3>Le raccourci, et là où il casse</h3>
|
||
<p>On dit souvent : le matériel se touche, le logiciel ne se touche pas. Ça marche pour trier vite. Mais une photo sur une clé USB ne se touche pas non plus, et ce n'est pas un logiciel.</p>
|
||
<p>Le raccourci sépare bien le matériel du reste. Pour distinguer logiciel et donnée, une seule question : <b>est-ce que ça s'exécute, ou est-ce que ça se fait ouvrir ?</b></p>
|
||
|
||
<h3>Les trois questions, dans l'ordre</h3>
|
||
<p><b>1.</b> Est-ce que je peux le toucher ? Oui → matériel.<br>
|
||
<b>2.</b> Sinon, est-ce que ça s'exécute, est-ce que ça agit ? Oui → logiciel.<br>
|
||
<b>3.</b> Sinon → donnée.</p>
|
||
|
||
<p class="muted">En anglais, <i>ware</i> veut dire article. <i>Hard</i>, dur, ce sont les pièces. <i>Soft</i>, mou, c'est ce qu'on change sans toucher à la machine. Le mot français « logiciel » a été inventé en 1969 à partir de « logique » et de la fin de « matériel ».</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="carte-entete"><div><h2>Matériel et logiciel</h2><p class="muted">On lit d'abord la page « Je comprends » du livret, puis on trie.</p></div><span class="score">20 min</span></div>
|
||
|
||
<div class="consigne"><small>Consigne</small>
|
||
Range chaque mot dans une des deux colonnes : ce que je peux toucher, ce que je ne peux pas toucher.<br><br>
|
||
Les colonnes n'ont pas encore de nom. On leur en donnera un à la fin.</div>
|
||
|
||
<div class="row" style="margin-bottom:16px">
|
||
<button class="btn primary" id="triSuiv">Ranger la carte suivante</button>
|
||
<button class="btn soft" id="triReset">Tout remettre</button>
|
||
<button class="btn" id="triNom">Donner un nom aux colonnes</button>
|
||
<span class="score" id="triCompte"></span>
|
||
</div>
|
||
|
||
<div id="tirage" style="margin-bottom:16px"></div>
|
||
<div class="colonnes" id="deuxcol" style="grid-template-columns:1fr 1fr"></div>
|
||
<div id="apresNom"></div>
|
||
</div></section>
|
||
|
||
<!-- 4 -->
|
||
<section class="panel" id="p3">
|
||
<div class="card">
|
||
<h2>Je comprends. Les périphériques</h2>
|
||
<p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p>
|
||
|
||
<h3>D'où vient le mot</h3>
|
||
<p><b>Périphérie</b> veut dire : ce qui est autour. Un <b>périphérique</b> est un appareil qui se trouve autour de la partie qui calcule, et qui est relié à elle.</p>
|
||
|
||
<h3>Deux idées fausses</h3>
|
||
<p><b>Ce n'est pas le câble.</b> Une souris sans fil est un périphérique. Une imprimante en wifi aussi.</p>
|
||
<p><b>Ce n'est pas la position.</b> L'écran et le clavier d'un ordinateur portable sont des périphériques, même intégrés dans le châssis.</p>
|
||
<p>Le vrai critère : un périphérique <b>échange de l'information</b> avec la partie qui calcule.</p>
|
||
|
||
<h3>Le sens de circulation</h3>
|
||
<p>C'est le cœur du cours. Puisqu'un périphérique fait circuler de l'information, la seule question est : <b>dans quel sens ?</b> Et on se place <b>toujours du point de vue de l'ordinateur</b>, jamais du sien.</p>
|
||
<p><b>Entrée</b> : l'ordinateur <b>reçoit</b>. La souris lui envoie tes clics, le clavier tes lettres, la webcam une image, le scanner une feuille, le micro ta voix.</p>
|
||
<p><b>Sortie</b> : l'ordinateur <b>envoie</b>. L'écran reçoit une image et l'affiche, l'imprimante reçoit un document et l'imprime, le haut-parleur reçoit un son et le diffuse.</p>
|
||
<p><b>Les deux</b> : ce ne sont pas des exceptions, ce sont deux fonctions dans un seul objet. Le casque avec micro diffuse et capte. L'écran tactile affiche et détecte ton doigt. Sur une clé USB, on écrit et on lit.</p>
|
||
|
||
<div class="consigne"><small>Le piège classique, et la méthode qui marche</small>
|
||
Presque tous les élèves se disent une fois : « l'écran, l'image entre dans mes yeux, donc c'est une entrée ». Le raisonnement est logique, mais il est centré sur la mauvaise personne.<br><br>
|
||
Quand tu hésites, pose la question à voix haute en commençant par le mot ordinateur :<br>
|
||
<b>« Est-ce que l'ordinateur reçoit quelque chose, ou est-ce qu'il envoie quelque chose ? »</b></div>
|
||
|
||
<h3>Pourquoi ce n'est pas une liste à apprendre</h3>
|
||
<p>Il existe des milliers de périphériques et il s'en invente chaque année. Ce que tu dois savoir faire, ce n'est pas réciter dix appareils : c'est en classer un que tu n'as jamais vu.</p>
|
||
|
||
<h3>Le lien avec la page précédente</h3>
|
||
<p>Un périphérique est <b>toujours du matériel</b>. Mais tout le matériel n'est pas un périphérique : la carte mère, le processeur et la mémoire vive ne sont pas autour, ils sont au centre.</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="carte-entete"><div><h2>Les périphériques</h2><p class="muted">On lit la page « Je comprends » du livret, puis on complète la table en binôme.</p></div><span class="score">25 min</span></div>
|
||
|
||
<div class="consigne"><small>Attention au sens</small>
|
||
On se demande toujours si l'information <b>entre dans l'ordinateur</b> ou si elle <b>sort de l'ordinateur</b>.<br>
|
||
Pas si elle entre dans tes yeux ou dans tes oreilles.</div>
|
||
|
||
<figure>
|
||
<svg viewBox="0 0 700 210" role="img" aria-label="L'information entre dans l'ordinateur par les périphériques d'entrée et en sort par les périphériques de sortie">
|
||
<g font-family="Inter, system-ui, sans-serif">
|
||
<rect x="270" y="60" width="160" height="100" rx="14" fill="#dbeafe" stroke="var(--encre)" stroke-width="3"/>
|
||
<text x="350" y="105" text-anchor="middle" font-size="17" font-weight="800" fill="var(--encre)">ORDINATEUR</text>
|
||
<text x="350" y="130" text-anchor="middle" font-size="13" fill="var(--encre-douce)">il traite l'information</text>
|
||
<path d="M60 110h190" stroke="#16a34a" stroke-width="4" fill="none" marker-end="url(#av)"/>
|
||
<path d="M450 110h190" stroke="#7c3aed" stroke-width="4" fill="none" marker-end="url(#am)"/>
|
||
<defs>
|
||
<marker id="av" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#16a34a"/></marker>
|
||
<marker id="am" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#7c3aed"/></marker>
|
||
</defs>
|
||
<text x="155" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#15803d">ENTRÉE</text>
|
||
<text x="155" y="140" text-anchor="middle" font-size="13.5" fill="var(--encre-douce)">souris, clavier, webcam</text>
|
||
<text x="545" y="96" text-anchor="middle" font-size="16" font-weight="800" fill="#6d28d9">SORTIE</text>
|
||
<text x="545" y="140" text-anchor="middle" font-size="13.5" fill="var(--encre-douce)">écran, imprimante, haut-parleur</text>
|
||
<path d="M270 175 h-60 a10 10 0 0 1 -10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
|
||
<path d="M430 175 h60 a10 10 0 0 0 10 -10 v-20" fill="none" stroke="#0369a1" stroke-width="3" stroke-dasharray="7 5"/>
|
||
<text x="350" y="196" text-anchor="middle" font-size="14.5" font-weight="800" fill="#0369a1">LES DEUX : écran tactile, casque avec micro, clé USB</text>
|
||
</g>
|
||
</svg>
|
||
<figcaption>La question à se poser est toujours la même : dans quel sens l'information circule-t-elle ?</figcaption>
|
||
</figure>
|
||
</div></section>
|
||
|
||
<!-- 5 -->
|
||
<section class="panel" id="p4"><div class="card">
|
||
<div class="carte-entete"><div><h2>Je m'entraine</h2><p class="muted">Trois exercices, 24 questions. Tu réponds, la correction s'affiche tout de suite avec l'explication.</p></div><span class="score">20 min</span></div>
|
||
|
||
<div class="consigne"><small>Avant de commencer</small>
|
||
Ce n'est pas coté. Rien n'est enregistré. Tu peux te tromper, c'est fait pour ça.<br><br>
|
||
À la fin, tu recopieras deux lignes de résultat dans ton livret, page « Où j'en suis ».</div>
|
||
|
||
<div class="progres">
|
||
<input id="nom" placeholder="Ton prénom et ton nom" style="padding:10px 13px;border:2px solid var(--trait-fort);border-radius:11px;min-width:220px;flex:1">
|
||
<div class="barre"><i id="jauge"></i></div>
|
||
<span class="score" id="avancement">0 / 24</span>
|
||
</div>
|
||
|
||
<h3>Exercice 1. Matériel, logiciel, ou donnée ?</h3>
|
||
<p class="muted" style="margin-top:0">Attention : tout ce qu'on ne peut pas toucher n'est pas forcément un logiciel.</p>
|
||
<div id="ex2"></div>
|
||
|
||
<h3 style="margin-top:26px">Exercice 2. Entrée, sortie, ou les deux ?</h3>
|
||
<p class="muted" style="margin-top:0">Demande-toi si l'ordinateur <b>reçoit</b> ou s'il <b>envoie</b>.</p>
|
||
<div id="ex3"></div>
|
||
|
||
<h3 style="margin-top:26px">Exercice 3. Le défi</h3>
|
||
<p class="muted" style="margin-top:0">Ces quatre appareils n'ont pas été vus en classe. Si tu y arrives, c'est que tu as compris la règle et pas seulement retenu la liste.</p>
|
||
<div id="ex4"></div>
|
||
|
||
<div class="row" style="margin-top:22px"><button class="btn primary" id="voir">Voir mon résultat</button><button class="btn soft" id="reset">Tout recommencer</button></div>
|
||
|
||
<div id="bilan" style="margin-top:20px">
|
||
<div class="row" style="align-items:flex-end;gap:20px;margin-bottom:16px">
|
||
<div><span class="gros" id="gTotal">0</span><span style="font-size:22px;font-weight:800;color:var(--encre-douce)"> / 24</span></div>
|
||
<div class="muted" id="gMot" style="font-weight:800;font-size:18px"></div>
|
||
</div>
|
||
<div id="gDetail" style="margin-bottom:16px"></div>
|
||
<p class="muted"><b>Recopie ces deux lignes dans ton livret.</b></p>
|
||
<textarea id="recap" readonly></textarea>
|
||
<div class="row" style="margin-top:10px"><button class="btn" id="copier">Copier</button><span class="muted" id="copie"></span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>La correction de la table des périphériques</h3>
|
||
<p class="muted" style="margin-top:0">Si on la fait ensemble, au tableau.</p>
|
||
<div class="row" style="margin-bottom:16px">
|
||
<button class="btn primary" id="ligSuiv">Corriger la ligne suivante</button>
|
||
<button class="btn soft" id="ligReset">Tout masquer</button>
|
||
<span class="score" id="ligCompte">0 ligne sur 10</span>
|
||
</div>
|
||
<table class="grille" id="tableP"></table>
|
||
<p class="muted" id="noteAmbigu" style="margin-top:16px"></p>
|
||
</div></section>
|
||
|
||
<!-- 6 -->
|
||
<section class="panel" id="p5"><div class="card">
|
||
<div class="carte-entete"><div><h2>Ma trace écrite</h2><p class="muted">Ton livret, dernière page. Complète les mots manquants.</p></div><span class="score">5 min</span></div>
|
||
|
||
<div class="row" style="margin-bottom:16px">
|
||
<button class="btn primary" id="motSuiv">Révéler le mot suivant</button>
|
||
<button class="btn soft" id="motReset">Tout masquer</button>
|
||
<span class="score" id="motCompte">0 mot sur 8</span>
|
||
</div>
|
||
|
||
<div class="trace" id="trace"></div>
|
||
|
||
<div class="consigne" style="margin-top:18px;margin-bottom:0"><small>Avant de partir</small>
|
||
Relis ta réponse de l'activité 1. Avec les mots que tu connais maintenant, comment répondrais-tu ? Écris-la au bas de ton livret.<br><br>
|
||
Puis ferme ta session, même si tu n'as pas utilisé l'ordinateur aujourd'hui.</div>
|
||
</div></section>
|
||
|
||
<div class="card">
|
||
<h3>Mon lexique du cours 2</h3>
|
||
<p class="muted" style="margin-top:0">Les mêmes définitions que dans ton livret, par ordre alphabétique. Clique sur un mot pour l'ouvrir.</p>
|
||
<div class="accordeon" id="lexique"></div>
|
||
</div>
|
||
|
||
</main>
|
||
<footer class="pied">
|
||
<div class="pied__interieur">Cours 2 · Formation numérique · 1re année · M. Courcelle</div>
|
||
</footer>
|
||
|
||
<script>
|
||
"use strict";
|
||
|
||
var PHASES=[
|
||
{t:"On s'installe",d:20,a:0},{t:"La question du jour",d:10,a:20},
|
||
{t:"Matériel et logiciel",d:20,a:30},{t:"Les périphériques",d:25,a:50},
|
||
{t:"Les exercices",d:20,a:75},{t:"Ma trace écrite",d:5,a:95}];
|
||
|
||
var CATS=["L'objet lui-même","Ce qu'il y a dedans","Autre réponse"];
|
||
|
||
var CARTES=[
|
||
["écran",0],["Windows",1],["souris",0],["un navigateur web",1],
|
||
["clavier",0],["un traitement de texte",1],["disque dur",0],["un jeu vidéo",1],
|
||
["processeur",0],["un antivirus",1],["imprimante",0],["une application de messagerie",1],
|
||
["câble HDMI",0],["une application photo",1],["webcam",0],["un lecteur de musique",1],
|
||
["une photo de vacances",1]];
|
||
|
||
var PERIPH=[
|
||
["Souris","Entrée","Déplacer le pointeur, cliquer"],
|
||
["Clavier","Entrée","Saisir du texte et des commandes"],
|
||
["Écran","Sortie","Afficher l'image"],
|
||
["Imprimante","Sortie","Mettre un document sur papier"],
|
||
["Webcam","Entrée","Capter l'image et la voix"],
|
||
["Haut-parleur","Sortie","Diffuser le son"],
|
||
["Scanner","Entrée","Transformer un document papier en fichier"],
|
||
["Casque avec micro","Les deux","Diffuser le son, capter la voix"],
|
||
["Clé USB","Les deux","Conserver des fichiers, les relire ailleurs"],
|
||
["Écran tactile","Les deux","Afficher l'image, recevoir le doigt"]];
|
||
|
||
var TRACE=[
|
||
["Un ordinateur, c'est trois choses. Le ",1," , en anglais hardware, ce sont les pièces : je peux les toucher. Le ",2," , en anglais software, est une suite d'",3," que la machine exécute. La ",4," est une information enregistrée : elle ne s'exécute pas, on l'ouvre."],
|
||
["Un ",5," est un appareil relié à l'ordinateur, qui échange de l'information avec lui. Il n'a besoin ni de câble, ni d'être à l'extérieur. Il est toujours du matériel."],
|
||
["Je me demande toujours dans quel sens circule l'information, du point de vue de l'ordinateur. Un périphérique d'",6," fait entrer de l'information : la souris, le clavier, la webcam. Un périphérique de ",7," fait sortir de l'information : l'écran, l'imprimante, le haut-parleur. Certains font ",8," : l'écran tactile, le casque avec micro, la clé USB."]];
|
||
var MOTS={1:"matériel",2:"logiciel",3:"instructions",4:"donnée",5:"périphérique",6:"entrée",7:"sortie",8:"les deux"};
|
||
|
||
/* chrono */
|
||
var t0=null,tick=null,choisie=0;
|
||
var ecart=document.getElementById("ecart"),rail=document.getElementById("rail");
|
||
function d2(n){return (n<10?"0":"")+n;}
|
||
function minutes(){return t0?(Date.now()-t0)/60000:0;}
|
||
function dessineRail(){
|
||
rail.innerHTML="";
|
||
PHASES.forEach(function(p,i){
|
||
var b=document.createElement("button");
|
||
b.className="tab"+(i===choisie?" active":"");
|
||
b.innerHTML=(i+1)+". "+p.t+"<span>"+p.d+" min</span>";
|
||
b.onclick=function(){montre(i);};
|
||
rail.appendChild(b);
|
||
});
|
||
document.getElementById("sPhase").textContent=(choisie+1)+" sur 6";
|
||
ecart.textContent="Activité "+(choisie+1)+" · "+PHASES[choisie].t;
|
||
majReste();
|
||
}
|
||
function montre(i){
|
||
choisie=i;
|
||
for(var k=0;k<PHASES.length;k++){document.getElementById("p"+k).classList.toggle("active",k===i);}
|
||
dessineRail();window.scrollTo({top:0,behavior:"smooth"});
|
||
}
|
||
function majReste(){
|
||
var e=document.getElementById("sReste");
|
||
if(!t0){e.textContent="–";return;}
|
||
var r=Math.ceil(PHASES[choisie].a+PHASES[choisie].d-minutes());
|
||
e.textContent=r>0?(r+" min"):"terminé";
|
||
}
|
||
function rafraichit(){
|
||
var s=Math.floor((Date.now()-t0)/1000);
|
||
document.getElementById("sTemps").textContent=d2(Math.floor(s/60))+":"+d2(s%60);
|
||
majReste();
|
||
}
|
||
document.getElementById("btnGo").onclick=function(){
|
||
if(t0)return;t0=Date.now();this.textContent="En cours";
|
||
tick=setInterval(rafraichit,1000);rafraichit();
|
||
};
|
||
document.getElementById("btnStop").onclick=function(){
|
||
clearInterval(tick);t0=null;
|
||
document.getElementById("sTemps").textContent="00:00";
|
||
document.getElementById("sReste").textContent="–";
|
||
document.getElementById("btnGo").textContent="Démarrer";
|
||
};
|
||
|
||
/* 1 */
|
||
var tableau={};CATS.forEach(function(c){tableau[c]=[];});
|
||
var sel=document.getElementById("cat");
|
||
CATS.forEach(function(c){var o=document.createElement("option");o.value=c;o.textContent=c;sel.appendChild(o);});
|
||
function dessineColonnes(){
|
||
var z=document.getElementById("colonnes");z.innerHTML="";
|
||
CATS.forEach(function(c){
|
||
var d=document.createElement("div");d.className="colonne";
|
||
var items=tableau[c].map(function(x,i){
|
||
return '<li><span>'+x+'</span><button data-c="'+c+'" data-i="'+i+'" aria-label="Retirer">×</button></li>';}).join("");
|
||
d.innerHTML='<h3>'+c+' <em>'+tableau[c].length+'</em></h3><ul>'+items+'</ul>';
|
||
z.appendChild(d);
|
||
});
|
||
z.querySelectorAll("button[data-c]").forEach(function(b){
|
||
b.onclick=function(){tableau[b.dataset.c].splice(parseInt(b.dataset.i,10),1);dessineColonnes();};});
|
||
}
|
||
function ajoute(){
|
||
var e=document.getElementById("entree"),v=e.value.trim();
|
||
if(!v)return;
|
||
tableau[sel.value].push(v.replace(/[<>&]/g,""));
|
||
e.value="";e.focus();dessineColonnes();
|
||
}
|
||
document.getElementById("ajouter").onclick=ajoute;
|
||
document.getElementById("entree").addEventListener("keydown",function(ev){if(ev.key==="Enter")ajoute();});
|
||
dessineColonnes();
|
||
|
||
/* 3 */
|
||
var ti=0,nomme=false;
|
||
var col=[[],[]];
|
||
function dessineTri(){
|
||
var z=document.getElementById("deuxcol");
|
||
var titres=nomme?["Le matériel · hardware","Le logiciel · software"]:["Ce que je peux toucher","Ce que je ne peux pas toucher"];
|
||
z.innerHTML="";
|
||
[0,1].forEach(function(k){
|
||
var d=document.createElement("div");d.className="colonne";
|
||
d.innerHTML='<h3>'+titres[k]+' <em>'+col[k].length+'</em></h3><ul>'
|
||
+col[k].map(function(x){
|
||
var pieg=(x==="une photo de vacances"&&nomme);
|
||
return '<li'+(pieg?' style="border-color:var(--erreur);background:var(--erreur-fond);color:var(--erreur)"':'')+'><span>'+x+'</span></li>';
|
||
}).join("")+'</ul>';
|
||
z.appendChild(d);
|
||
});
|
||
var t=document.getElementById("tirage");
|
||
t.innerHTML=ti<CARTES.length
|
||
? '<div class="qcard" style="padding:18px 22px"><span class="qtag">Carte '+(ti+1)+' sur '+CARTES.length+'</span><div class="qtxt" style="margin:0">'+CARTES[ti][0]+'</div></div>'
|
||
: '<div class="qcard" style="padding:18px 22px"><div class="qtxt" style="margin:0">Toutes les cartes sont rangées.</div></div>';
|
||
document.getElementById("triCompte").textContent=ti+" / "+CARTES.length;
|
||
document.getElementById("sComp").textContent=ti+" sur "+CARTES.length;
|
||
document.getElementById("apresNom").innerHTML=nomme
|
||
? '<div class="consigne" style="margin-bottom:0"><small>La carte qui ne va nulle part</small>Une photo de vacances n\'est pas un logiciel. Ce n\'est pas un programme, c\'est une information qu\'on a rangée. Tout ce qu\'on ne peut pas toucher n\'est donc pas un logiciel. On verra le nom que ça porte au prochain cours.</div>'
|
||
: "";
|
||
}
|
||
document.getElementById("triSuiv").onclick=function(){
|
||
if(ti<CARTES.length){col[CARTES[ti][1]].push(CARTES[ti][0]);ti++;dessineTri();}};
|
||
document.getElementById("triReset").onclick=function(){ti=0;col=[[],[]];nomme=false;dessineTri();};
|
||
document.getElementById("triNom").onclick=function(){
|
||
nomme=!nomme;this.textContent=nomme?"Retirer les noms":"Donner un nom aux colonnes";dessineTri();};
|
||
dessineTri();
|
||
|
||
/* 5 */
|
||
var li=0,zt2=document.getElementById("tableP");
|
||
function dessineTable(){
|
||
var h="<tr><th>Périphérique</th><th>Entrée, sortie ou les deux</th><th>À quoi il sert</th></tr>";
|
||
PERIPH.forEach(function(p,i){
|
||
var vu=i<li;
|
||
h+="<tr"+(vu?' class="on"':'')+"><td><b style='color:var(--encre)'>"+p[0]+"</b></td>"
|
||
+(vu?"<td><b>"+p[1]+"</b></td><td>"+p[2]+"</td>":'<td class="masque">.</td><td class="masque">.</td>')+"</tr>";
|
||
});
|
||
zt2.innerHTML=h;
|
||
document.getElementById("ligCompte").textContent=li+" ligne"+(li>1?"s":"")+" sur "+PERIPH.length;
|
||
document.getElementById("noteAmbigu").textContent=li>=PERIPH.length
|
||
? "Les trois dernières lignes font les deux. Ce ne sont pas des exceptions à retenir par cœur : ce sont deux fonctions dans un seul objet. Il suffit de se demander, à chaque fois, dans quel sens l'information circule."
|
||
: "";
|
||
}
|
||
document.getElementById("ligSuiv").onclick=function(){if(li<PERIPH.length){li++;dessineTable();}};
|
||
document.getElementById("ligReset").onclick=function(){li=0;dessineTable();};
|
||
dessineTable();
|
||
|
||
/* 6 */
|
||
var reveles=0,zt=document.getElementById("trace");
|
||
function dessineTrace(){
|
||
zt.innerHTML="<h3>Cours 2. Ce qu'il y a dans la boite</h3>"+TRACE.map(function(par){
|
||
return "<p>"+par.map(function(x){
|
||
if(typeof x==="number"){
|
||
return x<=reveles?'<b style="color:var(--accent-encre)">'+MOTS[x]+'</b>'
|
||
:'<span style="border-bottom:2px solid var(--accent);color:var(--accent)"> </span>';
|
||
}
|
||
return x;
|
||
}).join("")+"</p>";
|
||
}).join("");
|
||
document.getElementById("motCompte").textContent=reveles+" mot"+(reveles>1?"s":"")+" sur 8";
|
||
}
|
||
document.getElementById("motSuiv").onclick=function(){if(reveles<8){reveles++;dessineTrace();}};
|
||
document.getElementById("motReset").onclick=function(){reveles=0;dessineTrace();};
|
||
dessineTrace();
|
||
|
||
/* ===== exerciseur ===== */
|
||
var OPT2=["Matériel","Logiciel","Donnée"];
|
||
var EX2=[
|
||
["Un écran",0,"Je peux le toucher, c'est une pièce. C'est du matériel, en anglais hardware."],
|
||
["Le système Windows",1,"C'est une suite d'instructions que la machine exécute. Un logiciel, en anglais software."],
|
||
["Une souris",0,"Je peux la toucher. C'est du matériel, et c'est aussi un périphérique."],
|
||
["Un navigateur web",1,"C'est un programme qui sert à consulter des pages. Un logiciel."],
|
||
["Une barrette de mémoire",0,"C'est une pièce électronique qu'on tient dans la main. Du matériel."],
|
||
["Un jeu vidéo",1,"C'est un programme, donc un logiciel. La manette, elle, est du matériel."],
|
||
["Un câble USB",0,"Un câble se touche. C'est du matériel, même si ce n'est pas dans la boite."],
|
||
["Un antivirus",1,"C'est un programme qui surveille la machine. Un logiciel."],
|
||
["Une photo de vacances",2,"Je ne peux pas la toucher, mais ce n'est pas un programme : elle ne s'exécute pas. C'est une donnée, une information enregistrée."],
|
||
["Un texte que j'ai écrit",2,"Même chose. Ce n'est ni une pièce ni une suite d'instructions. C'est une donnée."]];
|
||
|
||
var OPT3=["Entrée","Sortie","Les deux"];
|
||
var EX3=[
|
||
["Une souris",0,"Elle envoie tes mouvements et tes clics vers l'ordinateur. L'information entre."],
|
||
["Un écran",1,"L'ordinateur lui envoie une image à afficher. L'information sort de l'ordinateur."],
|
||
["Un clavier",0,"Il envoie les lettres que tu tapes vers l'ordinateur."],
|
||
["Une imprimante",1,"L'ordinateur lui envoie un document. Elle ne lui renvoie rien."],
|
||
["Une webcam",0,"Elle capte l'image et la voix, et les envoie à l'ordinateur."],
|
||
["Un haut-parleur",1,"L'ordinateur lui envoie du son. L'information sort."],
|
||
["Un scanner",0,"Il transforme une feuille de papier en fichier et l'envoie à l'ordinateur."],
|
||
["Un casque avec micro",2,"Le casque diffuse le son, ça sort. Le micro capte ta voix, ça entre. Donc les deux."],
|
||
["Une clé USB",2,"Tu y écris des fichiers, et tu les relis ensuite. L'information circule dans les deux sens."],
|
||
["Un écran tactile",2,"Il affiche l'image, ça sort. Il reçoit ton doigt, ça entre. Les deux."]];
|
||
|
||
var EX4=[
|
||
["Un micro",0,"Il capte le son et l'envoie à l'ordinateur. C'est une entrée, comme la webcam."],
|
||
["Un projecteur",1,"L'ordinateur lui envoie une image à projeter. C'est une sortie, comme un écran."],
|
||
["Un lecteur de carte bancaire",2,"Il lit la puce de la carte, ça entre. Il affiche le montant à valider, ça sort. Les deux."],
|
||
["Une imprimante 3D",1,"L'ordinateur lui envoie un modèle, elle fabrique l'objet. Elle ne renvoie rien. C'est une sortie."]];
|
||
|
||
var TOTAL=EX2.length+EX3.length+EX4.length;
|
||
var rep={},just=0;
|
||
|
||
function poser(zone,cle,txt,opts,bon,expl,onPick){
|
||
var d=document.createElement("div");
|
||
d.className="q";
|
||
d.innerHTML='<div class="txt">'+txt+'</div><div class="opts"></div><div class="expl">'+expl+'</div>';
|
||
var z=d.querySelector(".opts");
|
||
opts.forEach(function(o,i){
|
||
var b=document.createElement("button");
|
||
b.textContent=o;
|
||
b.onclick=function(){
|
||
if(rep[cle]!==undefined) return;
|
||
rep[cle]=i;
|
||
var ok=(i===bon);
|
||
if(ok) just++;
|
||
d.classList.add("done",ok?"bon":"faux");
|
||
z.querySelectorAll("button").forEach(function(x,j){
|
||
x.disabled=true;
|
||
if(j===bon) x.classList.add("pick");
|
||
else if(j===i) x.classList.add("rate");
|
||
});
|
||
maj();
|
||
if(onPick) onPick();
|
||
};
|
||
z.appendChild(b);
|
||
});
|
||
zone.appendChild(d);
|
||
}
|
||
|
||
function maj(){
|
||
var n=Object.keys(rep).length;
|
||
document.getElementById("avancement").textContent=n+" / "+TOTAL;
|
||
document.getElementById("jauge").style.width=(n/TOTAL*100)+"%";
|
||
}
|
||
|
||
var z2=document.getElementById("ex2");
|
||
EX2.forEach(function(q,i){poser(z2,"b"+i,q[0],OPT2,q[1],q[2]);});
|
||
var z3=document.getElementById("ex3");
|
||
EX3.forEach(function(q,i){poser(z3,"c"+i,q[0],OPT3,q[1],q[2]);});
|
||
var z4=document.getElementById("ex4");
|
||
EX4.forEach(function(q,i){poser(z4,"d"+i,q[0],OPT3,q[1],q[2]);});
|
||
|
||
/* bilan */
|
||
function compte(pref,src){
|
||
var n=0;
|
||
src.forEach(function(q,i){ if(rep[pref+i]===q[1]) n++; });
|
||
return n;
|
||
}
|
||
document.getElementById("voir").onclick=function(){
|
||
var s2=compte("b",EX2),s3=compte("c",EX3),s4=compte("d",EX4);
|
||
var t=s2+s3+s4;
|
||
document.getElementById("gTotal").textContent=t;
|
||
var mot = t>=22 ? "Très bien. Tu peux passer aux exercices écrits de ton livret."
|
||
: t>=17 ? "C'est acquis dans l'ensemble. Relis ton mémo pour les points ratés."
|
||
: t>=12 ? "La base est là. Reprends le mémo du livret, puis recommence l'exercice 2."
|
||
: "Il faut reprendre. Relis les deux pages « Je comprends » du livret, puis recommence.";
|
||
document.getElementById("gMot").textContent=mot;
|
||
document.getElementById("gDetail").innerHTML=
|
||
'<table class="grille"><tr><th>Exercice</th><th>Résultat</th></tr>'
|
||
+'<tr><td>1. Matériel, logiciel ou donnée</td><td><b>'+s2+' / '+EX2.length+'</b></td></tr>'
|
||
+'<tr><td>2. Entrée, sortie ou les deux</td><td><b>'+s3+' / '+EX3.length+'</b></td></tr>'
|
||
+'<tr><td>3. Le défi</td><td><b>'+s4+' / '+EX4.length+'</b></td></tr></table>';
|
||
var nom=(document.getElementById("nom").value||"").trim()||"...................";
|
||
document.getElementById("recap").value=
|
||
"Cours 2 – exercices – "+nom+"\n"
|
||
+"Matériel-logiciel-donnée "+s2+"/"+EX2.length
|
||
+" · Entrée-sortie "+s3+"/"+EX3.length+" · Défi "+s4+"/"+EX4.length
|
||
+" · Total "+t+"/"+TOTAL;
|
||
document.getElementById("bilan").classList.add("on");
|
||
try{ document.getElementById("bilan").scrollIntoView({behavior:"smooth"}); }catch(e){}
|
||
};
|
||
document.getElementById("copier").onclick=function(){
|
||
var t=document.getElementById("recap");
|
||
t.select();
|
||
var ok=false;
|
||
try{ ok=document.execCommand("copy"); }catch(e){ ok=false; }
|
||
document.getElementById("copie").textContent = ok ? "Copié." : "Sélectionne le texte et copie-le à la main.";
|
||
};
|
||
document.getElementById("reset").onclick=function(){ location.reload(); };
|
||
|
||
maj();
|
||
|
||
/* lexique */
|
||
var LEXIQUE=[
|
||
["Application","Un logiciel qu'on lance soi-même quand on en a besoin. On dit plutôt « application » sur un téléphone et « logiciel » sur un ordinateur, mais c'est la même chose."],
|
||
["Composant","Un élément de matériel qui se trouve à l'intérieur de l'unité centrale. La carte mère, le processeur, la carte graphique sont des composants. Un composant n'est pas un périphérique : il est au centre, pas autour."],
|
||
["Disque dur","Le composant qui conserve les fichiers, même quand l'ordinateur est éteint. On en reparle au cours 3."],
|
||
["Donnée","Une information enregistrée quelque part. Une photo, un texte, une chanson, une vidéo. Une donnée ne s'exécute pas : on l'ouvre avec un logiciel."],
|
||
["Entrée (périphérique d')","Un périphérique qui fait entrer de l'information dans l'ordinateur. La souris, le clavier, la webcam, le scanner, le micro."],
|
||
["Exécuter","Faire ce que les instructions demandent, l'une après l'autre. Un logiciel s'exécute. Une donnée ne s'exécute pas : on l'ouvre."],
|
||
["Hardware","Le mot anglais pour matériel. De hard, dur, et ware, article."],
|
||
["Instruction","Un ordre simple et précis donné à la machine. Un logiciel est une suite de milliers d'instructions."],
|
||
["Logiciel","Une suite d'instructions que la machine exécute dans l'ordre. Windows, un navigateur, un jeu, un antivirus."],
|
||
["Matériel","Les pièces physiques. Elles se fabriquent, se transportent, s'usent et se cassent."],
|
||
["Mémoire vive","Le composant qui garde ce sur quoi tu travailles en ce moment. Tout ce qu'elle contient disparait quand la machine s'éteint. On en reparle au cours 3."],
|
||
["Périphérie","Ce qui est autour. La périphérie d'une ville, ce sont les quartiers autour du centre. C'est de ce mot que vient « périphérique »."],
|
||
["Périphérique","Un appareil relié à l'ordinateur, autour de la partie qui calcule, qui échange de l'information avec elle. Toujours du matériel."],
|
||
["Programme","Autre mot pour logiciel. Les deux se disent."],
|
||
["Software","Le mot anglais pour logiciel. De soft, mou, et ware, article."],
|
||
["Sortie (périphérique de)","Un périphérique qui fait sortir de l'information de l'ordinateur. L'écran, l'imprimante, le haut-parleur, le projecteur."],
|
||
["Système d'exploitation","Le logiciel qui démarre en premier et qui commande tous les autres. Windows, macOS, Linux, Android, iOS."],
|
||
["Unité centrale","La boite qui contient les composants qui calculent. Elle n'est pas un périphérique."]];
|
||
|
||
var zl=document.getElementById("lexique");
|
||
LEXIQUE.forEach(function(e,i){
|
||
var d=document.createElement("div");d.className="item";
|
||
d.innerHTML='<button aria-expanded="false"><span class="n">'+e[0].charAt(0)+'</span><span class="t">'+e[0]+'</span><span class="plus">définition</span></button><div class="corps">'+e[1]+'</div>';
|
||
d.querySelector("button").onclick=function(){
|
||
var o=d.classList.toggle("ouvert");
|
||
this.setAttribute("aria-expanded",o?"true":"false");
|
||
this.querySelector(".plus").textContent=o?"masquer":"définition";
|
||
};
|
||
zl.appendChild(d);
|
||
});
|
||
|
||
dessineRail();
|
||
</script>
|
||
</body>
|
||
</html>
|