lrdlg/formNum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit ever

Browse Source
This commit is contained in:
lrdlg
2026-09-07 07:49:21 +02:00
commit 0f60998ca8
18 changed files with 2568 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vocabulaire.html
+985
View File
@@ -0,0 +1,985 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Le vocabulaire de base de Windows : bureau, barre des tâches, menu Démarrer, fichiers, souris, navigateur. Cartes et exercices interactifs.">
<title>Vocabulaire de base — M. Courcelle</title>
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<div class="page-desktop">
<!-- ══ HERO ══ -->
<div class="page-window" id="hero-window">
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">Leçon 03 — Vocabulaire de base</div>
</div>
<div class="page-win-body">
<div class="hero-layout">
<div class="hero-text">
<div class="page-breadcrumb">
<a href="index.html">M. Courcelle</a><span>›</span>
<a href="index.html">Labo Ordinateur</a><span>›</span>
<span>Vocabulaire de base</span>
</div>
<a href="index.html" class="back-link">← Retour au Labo</a>
<h1 class="page-h1">Vocabulaire <em>de base</em></h1>
<p class="page-lead">Les mots qu'il faut connaître pour se débrouiller sur un ordinateur. Clique sur une carte pour l'ouvrir, puis vérifie tes acquis avec les deux exercices.</p>
<div class="lecon-meta">
<span class="lecon-meta-item">🗂️ <strong>14</strong> cartes</span>
<span class="lecon-meta-item">🎯 <strong>2</strong> exercices</span>
<span class="lecon-meta-item">📚 1re secondaire</span>
</div>
</div>
<div class="hero-visual-side">
<div class="hero-big-icon">🖥️</div>
<span class="hero-labo-badge">Leçon 03</span>
</div>
</div>
</div>
<div class="page-statusbar">
<span>🖥️ Bureau · fichiers · souris · navigateur</span>
<span>Labo Ordinateur</span>
</div>
</div>
<!-- ══ HUB DES CARTES ══ -->
<div class="page-window" id="hub-window">
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">Les cartes — clique pour ouvrir</div>
</div>
<div class="page-win-body">
<div class="rainbow-line">
<div style="background:#E03A3E"></div><div style="background:#F58220"></div>
<div style="background:#FDB827"></div><div style="background:#61BB46"></div>
<div style="background:#009DDC"></div><div style="background:#963D97"></div>
</div>
<div class="notion-grid">
<button class="notion-card" style="--card-color:#009DDC" onclick="ouvrir('bureau')">
<span class="notion-card-icon">🖥️</span>
<div class="notion-card-title">Le bureau</div>
<p class="notion-card-desc">Ton espace de travail virtuel, ce que tu vois au démarrage.</p>
<span class="notion-card-tag">Notion</span>
</button>
<button class="notion-card" style="--card-color:#F58220" onclick="ouvrir('barre')">
<span class="notion-card-icon">📌</span>
<div class="notion-card-title">La barre des tâches</div>
<p class="notion-card-desc">La barre du bas, toujours visible, avec ses trois zones.</p>
<span class="notion-card-tag">Notion</span>
</button>
<button class="notion-card" style="--card-color:#963D97" onclick="ouvrir('demarrer')">
<span class="notion-card-icon">🚀</span>
<div class="notion-card-title">Le menu Démarrer</div>
<p class="notion-card-desc">Toutes tes applications, et le bon moyen d'éteindre.</p>
<span class="notion-card-tag">Notion</span>
</button>
<button class="notion-card" style="--card-color:#FDB827" onclick="ouvrir('dossiers')">
<span class="notion-card-icon">📁</span>
<div class="notion-card-title">Dossiers &amp; fichiers</div>
<p class="notion-card-desc">Comment tes données sont rangées, et où les retrouver.</p>
<span class="notion-card-tag">Notion</span>
</button>
<button class="notion-card" style="--card-color:#61BB46" onclick="ouvrir('souris')">
<span class="notion-card-icon">🖱️</span>
<div class="notion-card-title">La souris</div>
<p class="notion-card-desc">Clic, double-clic, clic droit, molette, glisser-déposer.</p>
<span class="notion-card-tag">Notion</span>
</button>
<button class="notion-card" style="--card-color:#009DDC" onclick="ouvrir('trackpad')">
<span class="notion-card-icon">✋</span>
<div class="notion-card-title">Le trackpad</div>
<p class="notion-card-desc">La souris des ordinateurs portables, au bout des doigts.</p>
<span class="notion-card-tag">Notion</span>
</button>
<button class="notion-card" style="--card-color:#E03A3E" onclick="ouvrir('navigateurs')">
<span class="notion-card-icon">🌐</span>
<div class="notion-card-title">Les navigateurs</div>
<p class="notion-card-desc">Le programme qui te permet de visiter des sites internet.</p>
<span class="notion-card-tag">Notion</span>
</button>
<button class="notion-card" style="--card-color:#963D97" onclick="ouvrir('onglets')">
<span class="notion-card-icon">🗂️</span>
<div class="notion-card-title">Les onglets</div>
<p class="notion-card-desc">Plusieurs pages web dans une seule fenêtre.</p>
<span class="notion-card-tag">Notion</span>
</button>
<button class="notion-card" style="--card-color:#61BB46" onclick="ouvrir('systeme')">
<span class="notion-card-icon">⚙️</span>
<div class="notion-card-title">Le système d'exploitation</div>
<p class="notion-card-desc">Le programme qui fait fonctionner tout le reste.</p>
<span class="notion-card-tag">Notion</span>
</button>
<button class="notion-card" style="--card-color:#FDB827" onclick="ouvrir('fenetres')">
<span class="notion-card-icon">🪟</span>
<div class="notion-card-title">Les fenêtres</div>
<p class="notion-card-desc">Réduire, agrandir, fermer : trois boutons, trois effets très différents.</p>
<span class="notion-card-tag">Notion</span>
</button>
<button class="notion-card" style="--card-color:#963D97" onclick="ouvrir('extensions')">
<span class="notion-card-icon">🏷️</span>
<div class="notion-card-title">Les extensions</div>
<p class="notion-card-desc">Ce que les lettres après le point disent d'un fichier.</p>
<span class="notion-card-tag">Notion</span>
</button>
<button class="notion-card" style="--card-color:#009DDC" onclick="ouvrir('enregistrer')">
<span class="notion-card-icon">💾</span>
<div class="notion-card-title">Enregistrer, et où</div>
<p class="notion-card-desc">La question qui décide si tu retrouves ton travail demain.</p>
<span class="notion-card-tag">Notion</span>
</button>
<button class="notion-card" style="--card-color:#61BB46" onclick="ouvrir('internet')">
<span class="notion-card-icon">🌍</span>
<div class="notion-card-title">Internet et le Web</div>
<p class="notion-card-desc">Deux mots différents, et la confusion navigateur / moteur de recherche.</p>
<span class="notion-card-tag">Notion</span>
</button>
<button class="notion-card" style="--card-color:#E03A3E" onclick="ouvrir('raccourcis')">
<span class="notion-card-icon">⌨️</span>
<div class="notion-card-title">Raccourcis clavier</div>
<p class="notion-card-desc">Sept combinaisons qui font gagner un temps fou.</p>
<span class="notion-card-tag">Notion</span>
</button>
<button class="notion-card" style="--card-color:#F58220" onclick="ouvrir('texte-a-trou')">
<span class="notion-card-icon">✋</span>
<div class="notion-card-title">Texte à trou</div>
<p class="notion-card-desc">14 termes à replacer dans le bon ordre.</p>
<span class="notion-card-tag">Exercice 01</span>
</button>
<button class="notion-card" style="--card-color:#E03A3E" onclick="ouvrir('quiz')">
<span class="notion-card-icon">🧠</span>
<div class="notion-card-title">Quiz vocabulaire</div>
<p class="notion-card-desc">10 questions pour vérifier que tout est retenu.</p>
<span class="notion-card-tag">Exercice 02</span>
</button>
</div>
</div>
<div class="page-statusbar">
<span>14 notions · 2 exercices</span>
<span>Clique une carte pour l'ouvrir</span>
</div>
</div>
<!-- ══════════════════════════════════════════════
CARTES — chacune s'affiche seule
══════════════════════════════════════════════ -->
<!-- ── Le bureau ── -->
<div class="page-window carte" id="carte-bureau" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">🖥️ Le bureau</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">🖥️ Le bureau</h2>
<p class="carte-intro">Le <span class="term">bureau</span> est la zone principale que tu vois dès que Windows a démarré. C'est ton espace de travail virtuel.</p>
<!-- IMAGE À PLACER : capture d'un bureau Windows complet (icônes à gauche, fond d'écran, barre des tâches en bas). -->
<figure class="lecon-figure">
<img src="assets/img/bureau.png" alt="Le bureau de Windows avec ses icônes et sa barre des tâches"
data-todo="Capture d'un bureau Windows : icônes à gauche, fond d'écran, barre des tâches en bas.">
</figure>
<h3 class="carte-h3">Ce qu'on trouve sur le bureau</h3>
<ul class="carte-list">
<li>Des <strong>icônes</strong> : petites images représentant des fichiers, dossiers ou programmes. Double-cliquer dessus les ouvre.</li>
<li>Un <strong>fond d'écran</strong> (wallpaper) : l'image de fond, personnalisable.</li>
<li>Des <strong>raccourcis</strong> : liens directs vers tes programmes ou fichiers préférés.</li>
</ul>
<div class="callout tip"><span class="callout-icon">💡</span>
<div>Clic droit sur le bureau → menu pour changer le fond d'écran, créer un nouveau dossier ou personnaliser l'affichage.</div>
</div>
</div>
<div class="page-statusbar"><span>🖥️ Le bureau</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── La barre des tâches ── -->
<div class="page-window carte" id="carte-barre" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">📌 La barre des tâches</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">📌 La barre des tâches</h2>
<p class="carte-intro">La <span class="term">barre des tâches</span> est la barre horizontale en bas de l'écran. Elle est toujours visible, même quand tu utilises un programme.</p>
<!-- IMAGE À PLACER : gros plan sur la barre des tâches Windows seule, en largeur. -->
<figure class="lecon-figure">
<img src="assets/img/barre-taches.png" alt="La barre des tâches de Windows"
data-todo="Gros plan de la barre des tâches Windows, format large et peu haut.">
</figure>
<h3 class="carte-h3">Ses trois parties</h3>
<ul class="carte-list">
<li>À gauche : le <strong>bouton Démarrer</strong> (logo Windows).</li>
<li>Au centre : les <strong>applications épinglées et ouvertes</strong>. Une appli ouverte a un trait lumineux sous son icône.</li>
<li>À droite : la <strong>zone de notification</strong> : heure, Wi-Fi, son, icônes système.</li>
</ul>
<div class="callout info"><span class="callout-icon">💡</span>
<div>Tu peux <strong>épingler</strong> n'importe quel programme dans la barre des tâches pour y accéder rapidement, même quand il est fermé.</div>
</div>
</div>
<div class="page-statusbar"><span>📌 La barre des tâches</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── Le menu Démarrer ── -->
<div class="page-window carte" id="carte-demarrer" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">🚀 Le menu Démarrer</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">🚀 Le menu Démarrer</h2>
<p class="carte-intro">Le <span class="term">menu Démarrer</span> s'ouvre en cliquant sur le logo Windows en bas à gauche, ou en appuyant sur la touche <span class="kbd">⊞ Windows</span> du clavier.</p>
<!-- IMAGE À PLACER : capture du menu Démarrer ouvert, avec le bouton Démarrer entouré en rouge. -->
<figure class="lecon-figure">
<img src="assets/img/menu-demarrer.png" alt="Le menu Démarrer de Windows ouvert"
data-todo="Capture du menu Démarrer ouvert, avec le bouton Démarrer entouré en rouge.">
</figure>
<h3 class="carte-h3">Ce qu'on y trouve</h3>
<ul class="carte-list">
<li>La liste de toutes tes <strong>applications</strong> installées.</li>
<li>Une <strong>barre de recherche</strong> : tape directement le nom d'un programme pour le trouver.</li>
<li>Les <strong>fichiers récents</strong> et les dossiers importants.</li>
<li>Le bouton pour <strong>éteindre, redémarrer ou mettre en veille</strong> l'ordinateur.</li>
</ul>
<div class="callout warning"><span class="callout-icon">⚠️</span>
<div>Pour éteindre correctement l'ordinateur, passe toujours par <strong>Démarrer → Alimentation → Arrêter</strong>. Ne jamais appuyer directement sur le bouton physique.</div>
</div>
</div>
<div class="page-statusbar"><span>🚀 Le menu Démarrer</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── Dossiers & fichiers ── -->
<div class="page-window carte" id="carte-dossiers" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">📁 Dossiers &amp; fichiers</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">📁 Dossiers &amp; fichiers</h2>
<p class="carte-intro">Sur un ordinateur, toutes les données sont organisées en <span class="term">fichiers</span> et en <span class="term">dossiers</span>. Comprendre cette organisation est essentiel pour retrouver tes travaux.</p>
<div class="figure-duo">
<!-- IMAGE À PLACER : icône d'un dossier fermé, type « Mes documents ». -->
<figure class="lecon-figure">
<img src="assets/img/dossier.png" alt="Un dossier"
data-todo="Icône d'un dossier fermé, par exemple « Mes documents ».">
<figcaption>Un dossier</figcaption>
</figure>
<!-- IMAGE À PLACER : capture de l'intérieur d'un dossier montrant un sous-dossier et trois fichiers de types différents. -->
<figure class="lecon-figure">
<img src="assets/img/dossier-interieur.png" alt="L'intérieur d'un dossier"
data-todo="Intérieur d'un dossier : un sous-dossier et trois fichiers de types différents (texte, image, présentation).">
<figcaption>L'intérieur d'un dossier</figcaption>
</figure>
</div>
<h3 class="carte-h3">La différence essentielle</h3>
<ul class="carte-list">
<li>Un <strong>fichier</strong> contient des données : un texte (.docx), une image (.jpg), une vidéo (.mp4), un programme (.exe)…</li>
<li>Un <strong>dossier</strong> est un conteneur qui range des fichiers et d'autres sous-dossiers. C'est comme une chemise cartonnée.</li>
</ul>
<h3 class="carte-h3">Le chemin d'accès</h3>
<p class="carte-intro">Chaque fichier a une adresse précise dans l'ordinateur : le <span class="term">chemin d'accès</span>. Il se lit comme une adresse postale, du plus général au plus précis.</p>
<p class="carte-intro"><code>C:\Utilisateurs\Léa\Documents\Français\dissertation.docx</code></p>
<p class="carte-intro">Sur le disque C, dans le dossier Utilisateurs, dans le dossier Léa, dans Documents, dans Français, se trouve le fichier <code>dissertation.docx</code>.</p>
<h3 class="carte-h3">L'Explorateur de fichiers</h3>
<p class="carte-intro">L'<strong>Explorateur de fichiers</strong> (icône de dossier dans la barre des tâches) permet de circuler dans tous tes fichiers et dossiers. La structure en dossiers et sous-dossiers s'appelle une <span class="term">arborescence</span>, parce qu'elle ressemble à un arbre vu à l'envers. En haut de la fenêtre, la barre d'adresse indique en permanence où tu te trouves : la lire est le réflexe qui évite de se perdre.</p>
<div class="callout tip"><span class="callout-icon">💡</span>
<div>Crée un dossier par matière, et un sous-dossier par année. Tu retrouveras tes travaux facilement.</div>
</div>
</div>
<div class="page-statusbar"><span>📁 Dossiers &amp; fichiers</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── La souris ── -->
<div class="page-window carte" id="carte-souris" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">🖱️ La souris</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">🖱️ La souris</h2>
<p class="carte-intro">La <span class="term">souris</span> est un <strong>périphérique d'entrée</strong> qui contrôle le <span class="term">curseur</span> à l'écran. En la déplaçant, tu déplaces la flèche sur l'écran.</p>
<!-- IMAGE À PLACER : photo ou illustration d'une souris d'ordinateur. -->
<figure class="lecon-figure">
<img src="assets/img/souris.jpg" alt="Une souris d'ordinateur"
data-todo="Photo ou illustration d'une souris d'ordinateur.">
</figure>
<h3 class="carte-h3">Les actions principales</h3>
<ul class="carte-list">
<li><strong>Clic gauche</strong> : sélectionner un élément, cliquer sur un bouton</li>
<li><strong>Double-clic gauche</strong> : ouvrir un fichier ou une application</li>
<li><strong>Clic droit</strong> : ouvrir le menu contextuel (options supplémentaires)</li>
<li><strong>Molette / Scroll</strong> : faire défiler une page vers le haut ou le bas</li>
<li><strong>Glisser-déposer</strong> : maintenir le clic gauche et déplacer un élément</li>
</ul>
<div class="callout info"><span class="callout-icon">💡</span>
<div>Le curseur change de forme : <strong>flèche</strong> (navigation), <strong>main</strong> (lien cliquable), <strong>sablier</strong> (l'ordi travaille), <strong>curseur texte</strong> (champ de saisie).</div>
</div>
</div>
<div class="page-statusbar"><span>🖱️ La souris</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── Le trackpad ── -->
<div class="page-window carte" id="carte-trackpad" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">✋ Le trackpad</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">✋ Le trackpad</h2>
<p class="carte-intro">Le <span class="term">trackpad</span> (ou <span class="term">pavé tactile</span>) est une surface tactile présente sur les <strong>ordinateurs portables</strong>. Il remplace la souris sans avoir besoin d'une surface plane.</p>
<!-- IMAGE À PLACER : photo d'une main utilisant le trackpad d'un ordinateur portable. -->
<figure class="lecon-figure">
<img src="assets/img/trackpad.png" alt="Une main utilisant le trackpad d'un ordinateur portable"
data-todo="Photo d'une main posée sur le pavé tactile d'un ordinateur portable.">
</figure>
<h3 class="carte-h3">Comment l'utiliser</h3>
<ul class="carte-list">
<li><strong>Glisser un doigt</strong> → déplacer le curseur</li>
<li><strong>Taper une fois</strong> → clic gauche</li>
<li><strong>Taper deux fois</strong> → double-clic</li>
<li><strong>Deux doigts qui glissent</strong> → scroll (faire défiler)</li>
<li><strong>Deux doigts + tap</strong> → clic droit</li>
</ul>
<div class="callout warning"><span class="callout-icon">⚠️</span>
<div>Le trackpad demande un peu de pratique. Si tu trouves ça difficile, tu peux brancher une souris USB sur ton ordinateur portable.</div>
</div>
</div>
<div class="page-statusbar"><span>✋ Le trackpad</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── Les navigateurs ── -->
<div class="page-window carte" id="carte-navigateurs" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">🌐 Les navigateurs</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">🌐 Les navigateurs</h2>
<p class="carte-intro">Un <span class="term">navigateur web</span> est un programme qui te permet de visiter des sites internet. Sans lui, impossible d'accéder au web.</p>
<!-- IMAGE À PLACER : bande des logos des navigateurs (Chrome, Edge, Firefox, Opera, Safari). -->
<figure class="lecon-figure">
<img src="assets/img/navigateurs.png" alt="Les logos des principaux navigateurs web"
data-todo="Bande horizontale avec les logos Chrome, Edge, Firefox, Opera et Safari.">
</figure>
<h3 class="carte-h3">Les plus utilisés</h3>
<ul class="carte-list">
<li><strong>Google Chrome</strong> : le plus répandu dans le monde</li>
<li><strong>Mozilla Firefox</strong> : open source, respectueux de la vie privée</li>
<li><strong>Microsoft Edge</strong> : inclus dans Windows</li>
<li><strong>Safari</strong> : le navigateur d'Apple (Mac, iPhone, iPad)</li>
</ul>
<h3 class="carte-h3">La barre d'adresse</h3>
<p class="carte-intro">Dans la <strong>barre d'adresse</strong> en haut du navigateur, tu tapes l'<span class="term">URL</span> du site, par exemple <code>www.google.com</code>. Appuie sur Entrée pour y accéder.</p>
<div class="callout info"><span class="callout-icon">🔒</span>
<div>Un site sécurisé affiche un <strong>cadenas</strong> à gauche de l'URL. Cela signifie que la connexion est chiffrée (HTTPS).</div>
</div>
</div>
<div class="page-statusbar"><span>🌐 Les navigateurs</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── Les onglets ── -->
<div class="page-window carte" id="carte-onglets" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">🗂️ Les onglets</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">🗂️ Les onglets</h2>
<p class="carte-intro">Les <span class="term">onglets</span> permettent d'ouvrir <strong>plusieurs pages web en même temps</strong> dans la même fenêtre du navigateur, sans multiplier les fenêtres.</p>
<!-- IMAGE À PLACER : capture du haut d'un navigateur avec deux onglets ouverts et la barre d'adresse. -->
<figure class="lecon-figure">
<img src="assets/img/onglets.gif" alt="Deux onglets ouverts dans un navigateur"
data-todo="Haut d'un navigateur avec deux onglets ouverts, le bouton + et la barre d'adresse.">
</figure>
<h3 class="carte-h3">Gérer les onglets</h3>
<ul class="carte-list">
<li>Cliquer sur le <strong>+</strong> à droite des onglets → nouvel onglet</li>
<li>Cliquer sur la <strong>croix ✕</strong> d'un onglet → le fermer</li>
<li>Cliquer sur un <strong>onglet</strong> → y aller</li>
</ul>
<h3 class="carte-h3">Raccourcis clavier</h3>
<ul class="carte-list">
<li><span class="kbd">Ctrl + T</span> → nouvel onglet</li>
<li><span class="kbd">Ctrl + W</span> → fermer l'onglet actif</li>
<li><span class="kbd">Ctrl + Tab</span> → onglet suivant</li>
</ul>
<div class="callout tip"><span class="callout-icon">💡</span>
<div>Clic droit sur un lien → <strong>« Ouvrir dans un nouvel onglet »</strong> pour ne pas quitter la page en cours.</div>
</div>
</div>
<div class="page-statusbar"><span>🗂️ Les onglets</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── Le système d'exploitation ── -->
<div class="page-window carte" id="carte-systeme" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">⚙️ Le système d'exploitation</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">⚙️ Le système d'exploitation</h2>
<p class="carte-intro">Un ordinateur sans logiciel ne sert à rien. Le tout premier programme, celui qui démarre avant tous les autres et qui permet à tout le reste de fonctionner, s'appelle le <span class="term">système d'exploitation</span>.</p>
<p class="carte-intro">C'est lui qui affiche le bureau, gère les fenêtres, range les fichiers et fait dialoguer les programmes avec le matériel. Quand tu appuies sur une touche, c'est lui qui transmet l'information au bon programme.</p>
<h3 class="carte-h3">Les principaux systèmes</h3>
<table class="cours-table">
<tr><th>Système</th><th>Sur quoi</th><th>Éditeur</th></tr>
<tr><td><strong>Windows</strong></td><td>Ordinateurs de bureau et portables</td><td>Microsoft</td></tr>
<tr><td><strong>macOS</strong></td><td>Ordinateurs Apple</td><td>Apple</td></tr>
<tr><td><strong>Linux</strong></td><td>Ordinateurs, serveurs</td><td>Libre et gratuit</td></tr>
<tr><td><strong>Android</strong></td><td>Téléphones et tablettes</td><td>Google</td></tr>
<tr><td><strong>iOS</strong></td><td>iPhone et iPad</td><td>Apple</td></tr>
</table>
<div class="callout info"><span class="callout-icon">💡</span>
<div>Ce cours utilise <strong>Windows</strong>, le système installé à l'école. Mais l'essentiel se retrouve ailleurs sous un autre nom : tous ces systèmes ont un bureau, des fichiers, des dossiers et des fenêtres.</div>
</div>
</div>
<div class="page-statusbar"><span>⚙️ Le système d'exploitation</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── Les fenêtres ── -->
<div class="page-window carte" id="carte-fenetres" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">🪟 Les fenêtres</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">🪟 Les fenêtres</h2>
<p class="carte-intro">Chaque programme s'ouvre dans une <span class="term">fenêtre</span>. Tu peux en ouvrir plusieurs en même temps et passer de l'une à l'autre : c'est ce qui permet de recopier une information d'un document vers un autre.</p>
<h3 class="carte-h3">Les trois boutons en haut à droite</h3>
<table class="cours-table">
<tr><th>Bouton</th><th>Effet</th><th>Attention</th></tr>
<tr><td><strong>Réduire</strong> (trait)</td><td>La fenêtre disparaît de l'écran</td><td>Le programme continue de tourner</td></tr>
<tr><td><strong>Agrandir</strong> (carré)</td><td>La fenêtre occupe tout l'écran</td><td>Un second clic la remet à sa taille</td></tr>
<tr><td><strong>Fermer</strong> (croix)</td><td>Le programme se ferme</td><td>Le travail non enregistré est perdu</td></tr>
</table>
<div class="callout warning"><span class="callout-icon">⚠️</span>
<div>La différence entre <strong>réduire</strong> et <strong>fermer</strong> est essentielle. Réduire range la fenêtre sans rien perdre, tu la retrouves dans la barre des tâches. Fermer arrête le programme. Beaucoup de travaux perdus viennent d'un clic sur la croix au lieu du trait.</div>
</div>
<p class="carte-intro">Le raccourci <span class="kbd">Alt + Tab</span> permet de passer d'une fenêtre à l'autre sans utiliser la souris.</p>
</div>
<div class="page-statusbar"><span>🪟 Les fenêtres</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── Les extensions ── -->
<div class="page-window carte" id="carte-extensions" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">🏷️ Les extensions</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">🏷️ Les extensions</h2>
<p class="carte-intro">Le nom complet d'un fichier se termine par un point suivi de quelques lettres : c'est l'<span class="term">extension</span>. Elle indique au système de quel type de fichier il s'agit, et donc quel programme doit l'ouvrir.</p>
<table class="cours-table">
<tr><th>Extension</th><th>Type de fichier</th><th>S'ouvre avec</th></tr>
<tr><td><code>.docx</code></td><td>Document texte</td><td>Word, LibreOffice Writer</td></tr>
<tr><td><code>.pdf</code></td><td>Document figé, non modifiable</td><td>Un lecteur PDF, un navigateur</td></tr>
<tr><td><code>.xlsx</code></td><td>Tableau de calcul</td><td>Excel, LibreOffice Calc</td></tr>
<tr><td><code>.pptx</code></td><td>Présentation</td><td>PowerPoint, LibreOffice Impress</td></tr>
<tr><td><code>.jpg</code> <code>.png</code></td><td>Image</td><td>Une visionneuse d'images</td></tr>
<tr><td><code>.mp3</code></td><td>Son</td><td>Un lecteur audio</td></tr>
<tr><td><code>.mp4</code></td><td>Vidéo</td><td>Un lecteur vidéo</td></tr>
<tr><td><code>.exe</code></td><td>Programme</td><td>Il s'exécute directement</td></tr>
<tr><td><code>.zip</code></td><td>Archive compressée</td><td>Il faut l'extraire</td></tr>
</table>
<div class="callout info"><span class="callout-icon">💡</span>
<div>Changer l'extension ne change <strong>pas</strong> le contenu. Renommer une image en <code>.docx</code> ne la transforme pas en document : cela empêche seulement le système de savoir avec quoi l'ouvrir. Le fichier est intact, mais il a l'air perdu.</div>
</div>
<div class="callout warning"><span class="callout-icon">⚠️</span>
<div>Un fichier <code>.exe</code> reçu par message ou téléchargé sur un site inconnu est un <strong>programme</strong> que tu vas exécuter sur ta machine. C'est par là que passent beaucoup de virus. Dans le doute, on n'ouvre pas.</div>
</div>
</div>
<div class="page-statusbar"><span>🏷️ Les extensions</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── Enregistrer, et où ── -->
<div class="page-window carte" id="carte-enregistrer" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">💾 Enregistrer, et où</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">💾 Enregistrer, et où</h2>
<p class="carte-intro">Tant que tu n'as pas enregistré, ton travail n'existe que dans la mémoire vive. Autrement dit : il n'existe pas vraiment.</p>
<h3 class="carte-h3">Deux commandes qui se ressemblent</h3>
<ul class="carte-list">
<li><strong>Enregistrer</strong> (<span class="kbd">Ctrl + S</span>) : sauvegarde les modifications dans le fichier existant, au même endroit, sous le même nom. La première fois, le programme demande où et sous quel nom.</li>
<li><strong>Enregistrer sous</strong> : crée une <strong>nouvelle copie</strong>, ailleurs ou sous un autre nom. L'ancienne version reste telle quelle.</li>
</ul>
<h3 class="carte-h3">La vraie question : où ?</h3>
<table class="cours-table">
<tr><th>Endroit</th><th>Retrouvable ailleurs</th><th>Risque</th></tr>
<tr><td>Le bureau de ce poste</td><td>Non</td><td>Perdu dès que tu changes de machine</td></tr>
<tr><td>Une clé USB</td><td>Oui, si tu l'as sur toi</td><td>Perdue ou oubliée</td></tr>
<tr><td>Un espace en ligne</td><td>Oui, partout</td><td>Inaccessible sans connexion</td></tr>
</table>
<div class="callout warning"><span class="callout-icon">⚠️</span>
<div>Enregistrer sur le bureau d'un poste d'école est presque toujours une mauvaise idée : le lendemain, sur un autre poste, il n'y a plus rien.</div>
</div>
<div class="callout tip"><span class="callout-icon">💡</span>
<div>Donne à tes fichiers des noms qui décrivent leur contenu, pas « travail », « travail2 », « travail final vrai ». Dans six mois, tu ne sauras plus lequel est lequel.</div>
</div>
</div>
<div class="page-statusbar"><span>💾 Enregistrer, et où</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── Internet et le Web ── -->
<div class="page-window carte" id="carte-internet" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">🌍 Internet et le Web</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">🌍 Internet et le Web</h2>
<p class="carte-intro">On emploie les deux mots comme s'ils étaient synonymes. Ils ne le sont pas.</p>
<ul class="carte-list">
<li><strong>Internet</strong> est le réseau : des millions de machines reliées par des câbles, des antennes et des satellites. C'est l'infrastructure, comme le réseau routier.</li>
<li><strong>Le Web</strong> est un des services qui circulent sur ce réseau : l'ensemble des pages consultables avec un navigateur. C'est un usage de la route, pas la route elle-même.</li>
</ul>
<p class="carte-intro">D'autres services utilisent Internet sans être le Web : le courrier électronique, les messageries, les jeux en ligne, le streaming.</p>
<h3 class="carte-h3">Navigateur ou moteur de recherche ?</h3>
<p class="carte-intro">Autre confusion très fréquente. Le <span class="term">navigateur</span> est le <strong>programme</strong> installé sur ton ordinateur : Chrome, Firefox, Edge, Safari. Le <span class="term">moteur de recherche</span> est un <strong>site web</strong> que tu consultes avec ce programme : Google, Bing, Qwant, DuckDuckGo.</p>
<div class="callout info"><span class="callout-icon">🚗</span>
<div>Le navigateur est la <strong>voiture</strong>, le moteur de recherche est le <strong>GPS</strong>. Le GPS te dit où aller, mais c'est la voiture qui t'y conduit.</div>
</div>
<div class="callout tip"><span class="callout-icon">💡</span>
<div>Si tu connais déjà l'adresse d'un site, tape-la directement dans la barre d'adresse. Passer par une recherche est plus lent et t'expose à cliquer sur un résultat publicitaire qui n'est pas le bon site.</div>
</div>
</div>
<div class="page-statusbar"><span>🌍 Internet et le Web</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── Raccourcis clavier ── -->
<div class="page-window carte" id="carte-raccourcis" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">⌨️ Raccourcis clavier</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">⌨️ Raccourcis clavier</h2>
<p class="carte-intro">Un <span class="term">raccourci clavier</span> est une combinaison de touches qui déclenche une action sans passer par la souris. On maintient la première touche enfoncée et on appuie sur la seconde.</p>
<table class="cours-table">
<tr><th>Raccourci</th><th>Effet</th></tr>
<tr><td><span class="kbd">Ctrl + S</span></td><td>Enregistrer</td></tr>
<tr><td><span class="kbd">Ctrl + Z</span></td><td>Annuler la dernière action</td></tr>
<tr><td><span class="kbd">Ctrl + C</span></td><td>Copier la sélection</td></tr>
<tr><td><span class="kbd">Ctrl + X</span></td><td>Couper la sélection</td></tr>
<tr><td><span class="kbd">Ctrl + V</span></td><td>Coller</td></tr>
<tr><td><span class="kbd">Ctrl + A</span></td><td>Tout sélectionner</td></tr>
<tr><td><span class="kbd">Alt + Tab</span></td><td>Passer d'une fenêtre à l'autre</td></tr>
</table>
<div class="callout info"><span class="callout-icon">💡</span>
<div><strong>Copier ou couper ?</strong> Copier laisse l'original en place et en fabrique un double. Couper enlève l'original pour le déposer ailleurs. Dans les deux cas, il faut ensuite <strong>coller</strong>, sinon rien ne se passe.</div>
</div>
</div>
<div class="page-statusbar"><span>⌨️ Raccourcis clavier</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── Exercice 1 : texte à trou ── -->
<div class="page-window carte" id="carte-texte-a-trou" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">✋ Texte à trou</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">✋ Texte à trou</h2>
<p class="carte-intro">Glisse chaque mot vers le bon emplacement (ou clique dessus, puis clique sur le blanc). 14 termes à placer !</p>
<div class="tt-pool" id="tt-pool" ondragover="ttPoolDragOver(event)" ondrop="ttPoolDrop(event)" onclick="ttPoolClick(event)"></div>
<div class="tt-text" id="tt-text"></div>
<div class="exo-actions">
<button class="exo-btn exo-btn-primary" onclick="ttVerify()">✔ Vérifier</button>
<button class="exo-btn exo-btn-reset" onclick="ttReset()">↺ Recommencer</button>
</div>
<div class="exo-feedback" id="tt-feedback"></div>
</div>
<div class="page-statusbar"><span>✋ Texte à trou</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
<!-- ── Exercice 2 : quiz ── -->
<div class="page-window carte" id="carte-quiz" hidden>
<div class="page-win-chrome">
<div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
<div class="page-win-title">🧠 Quiz vocabulaire</div>
</div>
<div class="page-win-body">
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
<h2 class="carte-title">🧠 Quiz — Vocabulaire de base</h2>
<p class="carte-intro">10 questions pour vérifier que tu as bien retenu les termes essentiels. La correction s'affiche à chaque réponse.</p>
<div class="qcm-list" id="qcm-list"></div>
<div class="qcm-submit-row">
<button class="exo-btn exo-btn-primary" onclick="qcmVerify()">✔ Voir le score</button>
<button class="exo-btn exo-btn-reset" onclick="qcmReset()">↺ Recommencer</button>
<div class="qcm-score" id="qcm-score">Score : <span id="qcm-score-val"></span></div>
</div>
</div>
<div class="page-statusbar"><span>🧠 Quiz vocabulaire</span><span>Labo Ordinateur — Leçon 03</span></div>
</div>
</div>
<script src="assets/layout.js"></script>
<script>
/* ══════════ Navigation entre les cartes ══════════ */
function ouvrir(id) {
document.getElementById('hero-window').hidden = true;
document.getElementById('hub-window').hidden = true;
document.querySelectorAll('.carte').forEach(function (c) { c.hidden = true; });
document.getElementById('carte-' + id).hidden = false;
window.scrollTo({ top: 0, behavior: 'auto' });
history.replaceState(null, '', '#' + id);
}
function retour() {
document.querySelectorAll('.carte').forEach(function (c) { c.hidden = true; });
document.getElementById('hero-window').hidden = false;
document.getElementById('hub-window').hidden = false;
window.scrollTo({ top: 0, behavior: 'auto' });
history.replaceState(null, '', location.pathname);
}
if (location.hash) {
var cible = document.getElementById('carte-' + location.hash.slice(1));
if (cible) ouvrir(location.hash.slice(1));
}
/* ══════════ Exercice 1 — texte à trou ══════════ */
const TT_MOTS = [
{ id:'bureau', label:"le bureau" },
{ id:'fond', label:"le fond d'écran" },
{ id:'icones', label:"des icônes" },
{ id:'barre', label:"la barre des tâches" },
{ id:'demarrer', label:"le menu Démarrer" },
{ id:'dossiers', label:"des dossiers" },
{ id:'fichiers', label:"fichiers" },
{ id:'explorateur', label:"l'explorateur de fichiers" },
{ id:'navigateur', label:"un navigateur" },
{ id:'url', label:"une URL" },
{ id:'onglets', label:"onglets" },
{ id:'molette', label:"la molette" },
{ id:'curseur', label:"le curseur" },
{ id:'clicdroit', label:"un clic droit" }
];
/* Le texte : {id} marque un blanc à remplir */
const TT_TEXTE =
"Quand tu démarres Windows, tu arrives sur {bureau}, ton espace de travail virtuel. " +
"L'image de fond s'appelle {fond}. Les petites images visibles sur le bureau sont {icones} : " +
"elles représentent des programmes ou des fichiers. En bas de l'écran, {barre} affiche les applications ouvertes. " +
"Pour accéder à tous tes programmes, clique sur {demarrer}. Tes documents sont rangés dans {dossiers}, " +
"qui peuvent contenir des {fichiers} comme des textes, des images ou des vidéos. " +
"Pour naviguer dans tes données, utilise {explorateur}. Pour visiter des sites web, ouvre {navigateur} " +
"et tape {url} dans la barre d'adresse. Grâce aux {onglets}, tu peux avoir plusieurs pages ouvertes en même temps. " +
"Fais tourner {molette} pour faire défiler une page. {curseur} se déplace quand tu bouges la souris. " +
"Enfin, {clicdroit} ouvre un menu avec des options supplémentaires.";
let ttPlacement = {}; // idBlanc -> idMot
let ttSelected = null;
function ttMelange(arr) {
const a = arr.slice();
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
const TT_ORDRE = ttMelange(TT_MOTS);
function ttBuildTexte() {
const zone = document.getElementById('tt-text');
zone.innerHTML = TT_TEXTE.replace(/\{(\w+)\}/g, function (_, id) {
return '<span class="tt-blank empty" data-blank="' + id + '" ' +
'ondragover="ttBlankDragOver(event)" ondragleave="ttBlankDragLeave(event)" ' +
'ondrop="ttBlankDrop(event,\'' + id + '\')" onclick="ttBlankClick(\'' + id + '\')"></span>';
});
}
function ttRender() {
const pool = document.getElementById('tt-pool');
pool.innerHTML = '';
const places = Object.values(ttPlacement);
TT_ORDRE.forEach(function (mot) {
if (places.includes(mot.id)) return;
const el = document.createElement('div');
el.className = 'dd-item' + (ttSelected === mot.id ? ' dd-selected' : '');
el.draggable = true;
el.textContent = mot.label;
el.dataset.mot = mot.id;
el.addEventListener('dragstart', function (e) {
ttSelected = null;
e.dataTransfer.setData('text/plain', mot.id);
e.dataTransfer.effectAllowed = 'move';
});
el.addEventListener('click', function (e) {
e.stopPropagation();
ttSelected = (ttSelected === mot.id) ? null : mot.id;
ttRender();
});
pool.appendChild(el);
});
document.querySelectorAll('.tt-blank').forEach(function (b) {
const blancId = b.dataset.blank;
const motId = ttPlacement[blancId];
b.classList.remove('correct','incorrect');
b.classList.toggle('ready', !!ttSelected);
if (motId) {
const mot = TT_MOTS.find(function (m) { return m.id === motId; });
b.textContent = mot.label;
b.classList.remove('empty');
} else {
b.textContent = '';
b.classList.add('empty');
}
});
}
function ttBlankClick(blancId) {
if (ttSelected) {
for (const k in ttPlacement) if (ttPlacement[k] === ttSelected) delete ttPlacement[k];
ttPlacement[blancId] = ttSelected;
ttSelected = null;
} else if (ttPlacement[blancId]) {
delete ttPlacement[blancId];
}
ttRender();
}
function ttBlankDragOver(e) { e.preventDefault(); e.currentTarget.classList.add('dragover'); }
function ttBlankDragLeave(e) { e.currentTarget.classList.remove('dragover'); }
function ttBlankDrop(e, blancId) {
e.preventDefault(); e.currentTarget.classList.remove('dragover');
const motId = e.dataTransfer.getData('text/plain');
if (!motId) return;
for (const k in ttPlacement) if (ttPlacement[k] === motId) delete ttPlacement[k];
ttPlacement[blancId] = motId;
ttRender();
}
function ttPoolDragOver(e) { e.preventDefault(); }
function ttPoolDrop(e) {
e.preventDefault();
const motId = e.dataTransfer.getData('text/plain');
for (const k in ttPlacement) if (ttPlacement[k] === motId) delete ttPlacement[k];
ttRender();
}
function ttPoolClick(e) {
if (e.target === e.currentTarget && ttSelected) { ttSelected = null; ttRender(); }
}
function ttVerify() {
const total = TT_MOTS.length;
let bons = 0, remplis = 0;
document.querySelectorAll('.tt-blank').forEach(function (b) {
const blancId = b.dataset.blank;
const motId = ttPlacement[blancId];
b.classList.remove('correct','incorrect');
if (!motId) return;
remplis++;
if (motId === blancId) { bons++; b.classList.add('correct'); }
else b.classList.add('incorrect');
});
const fb = document.getElementById('tt-feedback');
if (remplis < total) {
fb.className = 'exo-feedback partial';
fb.textContent = '⚠ Il reste des blancs à compléter (' + remplis + '/' + total + ' placés).';
} else if (bons === total) {
fb.className = 'exo-feedback success';
fb.textContent = '✔ Parfait ! Les ' + total + ' termes sont à leur place.';
} else {
fb.className = 'exo-feedback error';
fb.textContent = '✗ ' + bons + '/' + total + ' corrects. Les blancs en rouge sont à corriger.';
}
}
function ttReset() {
ttPlacement = {}; ttSelected = null;
document.getElementById('tt-feedback').className = 'exo-feedback';
ttRender();
}
ttBuildTexte();
ttRender();
/* ══════════ Exercice 2 — quiz ══════════ */
const QCM = [
{ enonce: "Qu'est-ce que le bureau de Windows ?",
opts: ["La zone principale visible à l'écran au démarrage","Le fond de ton cartable","Un logiciel de dessin","La barre en bas de l'écran"],
answer: 0, expl: "Le <strong>bureau</strong> est ton espace de travail virtuel : c'est ce que tu vois dès que Windows a démarré." },
{ enonce: "Où se trouve la barre des tâches par défaut ?",
opts: ["En haut de l'écran","À droite de l'écran","En bas de l'écran","Au centre de l'écran"],
answer: 2, expl: "La <strong>barre des tâches</strong> se trouve en bas de l'écran et reste visible en permanence." },
{ enonce: "Qu'est-ce qu'un dossier ?",
opts: ["Un fichier contenant une image","Un logiciel de navigation","Un conteneur qui organise des fichiers","Une application du menu Démarrer"],
answer: 2, expl: "Un <strong>dossier</strong> range des fichiers et d'autres sous-dossiers, comme une chemise cartonnée." },
{ enonce: "Quelle est la différence entre un fichier et un dossier ?",
opts: ["Il n'y a aucune différence","Un dossier contient des données, un fichier contient des dossiers","Un fichier contient des données, un dossier organise des fichiers","Un fichier est plus grand qu'un dossier"],
answer: 2, expl: "Le <strong>fichier</strong> contient les données (texte, image, vidéo). Le <strong>dossier</strong> sert à les ranger." },
{ enonce: "Qu'est-ce qu'un navigateur web ?",
opts: ["Un programme pour créer des images","Un logiciel pour visiter des sites internet","Un type de dossier Windows","Une barre en bas de l'écran"],
answer: 1, expl: "Le <strong>navigateur</strong> (Chrome, Firefox, Edge, Safari) est le programme qui affiche les sites internet." },
{ enonce: "À quoi sert un onglet dans un navigateur ?",
opts: ["Changer la couleur du fond","Fermer le navigateur","Ouvrir plusieurs pages en même temps dans une fenêtre","Télécharger des fichiers"],
answer: 2, expl: "Les <strong>onglets</strong> permettent d'avoir plusieurs pages ouvertes dans une seule fenêtre." },
{ enonce: "Quel clic de souris ouvre le menu contextuel ?",
opts: ["Double-clic gauche","Clic gauche","Clic droit","La molette"],
answer: 2, expl: "Le <strong>clic droit</strong> ouvre le menu contextuel, qui propose des options supplémentaires." },
{ enonce: "Qu'est-ce qu'un trackpad ?",
opts: ["Un type de clavier sans fil","Une surface tactile qui remplace la souris sur un portable","Un écran tactile","Un type de navigateur internet"],
answer: 1, expl: "Le <strong>trackpad</strong> ou pavé tactile équipe les ordinateurs portables et remplace la souris." },
{ enonce: "Comment s'appelle la petite image sur le bureau qui représente un programme ?",
opts: ["Un curseur","Une icône","Un raccourci clavier","Un onglet"],
answer: 1, expl: "Une <strong>icône</strong> représente un fichier, un dossier ou un programme. Un double-clic l'ouvre." },
{ enonce: "Le système d'exploitation, c'est…",
opts: ["un site internet","le programme qui fait fonctionner l'ordinateur","une marque d'ordinateur","un type de fichier"],
answer: 1, expl: "Le <strong>système d'exploitation</strong> (Windows, macOS, Linux, Android, iOS) démarre avant tout et permet à tous les autres programmes de fonctionner." },
{ enonce: "Chrome est…",
opts: ["un moteur de recherche","un navigateur","un système d'exploitation","un type de fichier"],
answer: 1, expl: "Chrome est un <strong>navigateur</strong> : le programme installé sur ta machine. Google, lui, est un moteur de recherche." },
{ enonce: "Google est…",
opts: ["un moteur de recherche","un navigateur","un système d'exploitation","une extension"],
answer: 0, expl: "Google est un <strong>moteur de recherche</strong> : un site web que tu consultes avec un navigateur." },
{ enonce: "Dans une fenêtre, à quoi sert le bouton en forme de trait ?",
opts: ["fermer le programme","réduire la fenêtre sans fermer le programme","agrandir la fenêtre","couper le son"],
answer: 1, expl: "Le trait <strong>réduit</strong> la fenêtre : le programme continue de tourner et tu le retrouves dans la barre des tâches." },
{ enonce: "Que garantit le cadenas à gauche d'une adresse web ?",
opts: ["que le site dit la vérité","que la connexion est chiffrée","que le site est gratuit","que le site est belge"],
answer: 1, expl: "Le cadenas garantit que la <strong>connexion</strong> est chiffrée, pas que le site est honnête. Un site malveillant peut très bien en avoir un." },
{ enonce: "Comment ouvrir le menu Démarrer sous Windows ?",
opts: ["Double-clic sur le bureau","Touche Échap","Clic sur le logo Windows en bas à gauche","Clic droit sur la barre des tâches"],
answer: 2, expl: "Un clic sur le <strong>logo Windows</strong>, ou la touche ⊞ Windows du clavier, ouvre le menu Démarrer." }
];
let qcmAnswered = {};
function qcmBuild() {
const list = document.getElementById('qcm-list');
list.innerHTML = ''; qcmAnswered = {};
QCM.forEach(function (q, qi) {
const div = document.createElement('div');
div.className = 'qcm-q';
div.innerHTML =
'<p class="qcm-q-num">Question ' + (qi + 1) + ' / ' + QCM.length + '</p>' +
'<p class="qcm-q-enonce">' + q.enonce + '</p>' +
'<div class="qcm-opts">' +
q.opts.map(function (opt, oi) {
return '<button type="button" class="qcm-opt" id="qopt-' + qi + '-' + oi + '" onclick="qcmSelect(' + qi + ',' + oi + ')">' +
'<span class="qcm-opt-letter">' + String.fromCharCode(65 + oi) + '</span><span>' + opt + '</span></button>';
}).join('') +
'</div><div class="qcm-expl" id="qexpl-' + qi + '"></div>';
list.appendChild(div);
});
}
function qcmSelect(qi, oi) {
if (qcmAnswered[qi] !== undefined) return;
qcmAnswered[qi] = oi;
const q = QCM[qi], isOk = (oi === q.answer);
q.opts.forEach(function (_, i) {
const el = document.getElementById('qopt-' + qi + '-' + i);
el.classList.remove('selected','correct','wrong');
if (i === oi) el.classList.add(isOk ? 'correct' : 'wrong');
if (!isOk && i === q.answer) el.classList.add('correct');
});
const expl = document.getElementById('qexpl-' + qi);
expl.innerHTML = (isOk ? '✔ ' : '✗ ') + q.expl;
expl.className = 'qcm-expl show ' + (isOk ? 'ok' : 'ko');
}
function qcmVerify() {
const total = QCM.length;
const done = Object.keys(qcmAnswered).length;
const score = QCM.filter(function (q, i) { return qcmAnswered[i] === q.answer; }).length;
const val = document.getElementById('qcm-score-val');
document.getElementById('qcm-score').style.display = 'block';
val.textContent = done < total
? score + ' / ' + total + ' (' + (total - done) + ' sans réponse)'
: score + ' / ' + total;
val.className = score === total ? 'score-col-good' : (score >= total / 2 ? 'score-col-mid' : 'score-col-bad');
}
function qcmReset() { document.getElementById('qcm-score').style.display = 'none'; qcmBuild(); }
qcmBuild();
</script>
</body>
</html>