lrdlg
641 lines
34 KiB
HTML
641 lines
34 KiB
HTML
<!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="Découvre les périphériques d'entrée, de sortie et l'unité centrale — leçon interactive avec image cliquable et exercices.">
|
||
<title>Les périphériques — M. Courcelle</title>
|
||
<link rel="stylesheet" href="assets/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div class="page-desktop">
|
||
|
||
<!-- ══ HERO ══ -->
|
||
<div class="page-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 01 — Les périphériques</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>Les périphériques</span>
|
||
</div>
|
||
<a href="index.html" class="back-link">← Retour au Labo</a>
|
||
<h1 class="page-h1">Les <em>périphériques</em></h1>
|
||
<p class="page-lead">Clique sur chaque composant de l'image pour découvrir son rôle, puis teste tes connaissances avec les exercices.</p>
|
||
<div class="lecon-meta">
|
||
<span class="lecon-meta-item">🖱️ Image interactive</span>
|
||
<span class="lecon-meta-item">🎯 <strong>2</strong> exercices</span>
|
||
<span class="lecon-meta-item">🧠 Théorie complète</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 01</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="page-statusbar">
|
||
<span>🔌 Périphériques d'entrée · de sortie · unité centrale</span>
|
||
<span>Labo Ordinateur</span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══ COMMENT ÇA MARCHE ══ -->
|
||
<div class="page-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">Comment ça marche</div>
|
||
</div>
|
||
<div class="page-win-body">
|
||
<p class="section-sub">Un ordinateur ne réfléchit pas. Il reçoit des informations, il les transforme, il renvoie un résultat. Toujours dans cet ordre.</p>
|
||
|
||
<div class="flux">
|
||
<div class="flux-etape e">
|
||
<span class="flux-icone">⌨️</span>
|
||
<div class="flux-titre">ENTRÉE</div>
|
||
<p class="flux-desc">Tu appuies sur la touche A. Le clavier envoie un signal.</p>
|
||
</div>
|
||
<div class="flux-fleche">→</div>
|
||
<div class="flux-etape t">
|
||
<span class="flux-icone">🧠</span>
|
||
<div class="flux-titre">TRAITEMENT</div>
|
||
<p class="flux-desc">L'unité centrale interprète le signal et calcule l'image de la lettre.</p>
|
||
</div>
|
||
<div class="flux-fleche">→</div>
|
||
<div class="flux-etape s">
|
||
<span class="flux-icone">🖥️</span>
|
||
<div class="flux-titre">SORTIE</div>
|
||
<p class="flux-desc">L'écran affiche un A.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="section-sub" style="margin-bottom:0"><strong>Périphérique</strong> vient de « périphérie », ce qui se trouve autour. Un périphérique est donc un appareil situé autour de l'ordinateur. L'unité centrale, elle, est au centre : ce n'est pas un périphérique, et c'est l'erreur la plus fréquente.</p>
|
||
</div>
|
||
<div class="page-statusbar">
|
||
<span>Entrée · Traitement · Sortie</span>
|
||
<span>Le principe de base</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ IMAGE INTERACTIVE ══ -->
|
||
<div class="page-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">L'ordinateur de près — clique pour découvrir</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>
|
||
|
||
<p class="section-sub">Chaque point coloré représente un composant. Clique dessus pour voir son nom, son rôle et sa catégorie.</p>
|
||
|
||
<div class="periph-img-wrap" id="img-wrap">
|
||
<!-- IMAGE À PLACER : photo d'un poste de travail complet (unité centrale à gauche,
|
||
écran au centre avec webcam au-dessus, haut-parleurs de part et d'autre,
|
||
clavier et souris devant, imprimante à droite).
|
||
Format conseillé : paysage, environ 1600 x 1000 px.
|
||
Si le cadrage diffère, ajuster les valeurs left/top des .hs-dot ci-dessous. -->
|
||
<img src="assets/img/periph.jpg" id="periph-img" draggable="false"
|
||
alt="Poste de travail informatique avec ses périphériques"
|
||
data-todo="Photo d'un poste complet : unité centrale, écran, webcam, haut-parleurs, clavier, souris, imprimante.">
|
||
|
||
<!-- Points cliquables — positions en pourcentage (left / top) -->
|
||
<button class="hs-dot uc" style="left:11%;top:47%;" data-id="uc" aria-label="Unité centrale"><span class="hs-dot-icon">💻</span></button>
|
||
<button class="hs-dot sortie" style="left:53%;top:28%;" data-id="ecran" aria-label="Écran"><span class="hs-dot-icon">🖥️</span></button>
|
||
<button class="hs-dot entree" style="left:53%;top:7%;" data-id="webcam" aria-label="Webcam"><span class="hs-dot-icon">📷</span></button>
|
||
<button class="hs-dot sortie" style="left:31%;top:62%;" data-id="hp" aria-label="Haut-parleur"><span class="hs-dot-icon">🔊</span></button>
|
||
<button class="hs-dot sortie" style="left:69%;top:62%;" data-id="hp" aria-label="Haut-parleur"><span class="hs-dot-icon">🔊</span></button>
|
||
<button class="hs-dot entree" style="left:46%;top:83%;" data-id="clavier" aria-label="Clavier"><span class="hs-dot-icon">⌨️</span></button>
|
||
<button class="hs-dot entree" style="left:73%;top:82%;" data-id="souris" aria-label="Souris"><span class="hs-dot-icon">🖱️</span></button>
|
||
<button class="hs-dot sortie" style="left:88%;top:50%;" data-id="imprimante" aria-label="Imprimante"><span class="hs-dot-icon">🖨️</span></button>
|
||
</div>
|
||
|
||
<div class="hs-infobox" id="hs-infobox">
|
||
<div class="hs-infobox-header">
|
||
<span class="hs-infobox-emoji" id="hs-emoji"></span>
|
||
<span class="hs-infobox-name" id="hs-name"></span>
|
||
<span class="hs-infobox-badge" id="hs-badge"></span>
|
||
<button class="hs-infobox-close" id="hs-close" aria-label="Fermer">✕</button>
|
||
</div>
|
||
<p class="hs-infobox-desc" id="hs-desc"></p>
|
||
<p class="hs-infobox-detail" id="hs-detail"></p>
|
||
</div>
|
||
|
||
<p class="hs-hint">💡 Clique sur un point coloré —
|
||
<span style="color:var(--c-entree)">●</span> entrée |
|
||
<span style="color:var(--c-sortie)">●</span> sortie |
|
||
<span style="color:var(--c-uc)">●</span> unité centrale
|
||
</p>
|
||
|
||
</div>
|
||
<div class="page-statusbar">
|
||
<span>8 points cliquables</span>
|
||
<span>Clique un point pour l'explorer</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ THÉORIE ══ -->
|
||
<div class="page-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 3 catégories — à retenir</div>
|
||
</div>
|
||
<div class="page-win-body">
|
||
|
||
<div class="rainbow-line">
|
||
<div style="background:#009DDC"></div><div style="background:#F58220"></div>
|
||
<div style="background:#963D97"></div><div style="background:#61BB46"></div>
|
||
<div style="background:#FDB827"></div><div style="background:#E03A3E"></div>
|
||
</div>
|
||
|
||
<p class="section-sub">Un ordinateur est composé de trois types d'éléments, selon le sens dans lequel circulent les informations.</p>
|
||
|
||
<div class="cat-grid">
|
||
|
||
<div class="cat-card entree">
|
||
<div class="cat-card-header">
|
||
<span class="cat-card-icon">➡️</span>
|
||
<div>
|
||
<div class="cat-card-title">Périphériques d'ENTRÉE</div>
|
||
<div class="cat-card-subtitle">Toi → Ordinateur</div>
|
||
</div>
|
||
</div>
|
||
<p class="cat-card-def">Ils permettent d'<strong>envoyer des informations vers l'ordinateur</strong>. Sans eux, impossible de communiquer avec la machine.</p>
|
||
<ul class="cat-item-list">
|
||
<li class="cat-item"><span class="cat-item-dot"></span><span class="cat-item-text"><strong>Clavier</strong> — saisir du texte et des commandes</span></li>
|
||
<li class="cat-item"><span class="cat-item-dot"></span><span class="cat-item-text"><strong>Souris</strong> — pointer et cliquer</span></li>
|
||
<li class="cat-item"><span class="cat-item-dot"></span><span class="cat-item-text"><strong>Webcam</strong> — capturer images et vidéos</span></li>
|
||
<li class="cat-item"><span class="cat-item-dot"></span><span class="cat-item-text"><strong>Microphone</strong> — enregistrer la voix</span></li>
|
||
<li class="cat-item"><span class="cat-item-dot"></span><span class="cat-item-text"><strong>Scanner</strong> — numériser un document papier</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="cat-card sortie">
|
||
<div class="cat-card-header">
|
||
<span class="cat-card-icon">⬅️</span>
|
||
<div>
|
||
<div class="cat-card-title">Périphériques de SORTIE</div>
|
||
<div class="cat-card-subtitle">Ordinateur → Toi</div>
|
||
</div>
|
||
</div>
|
||
<p class="cat-card-def">Ils permettent à l'ordinateur de <strong>t'envoyer des informations</strong> : ce que tu vois, entends ou imprimes vient de lui.</p>
|
||
<ul class="cat-item-list">
|
||
<li class="cat-item"><span class="cat-item-dot"></span><span class="cat-item-text"><strong>Écran</strong> — afficher images et textes</span></li>
|
||
<li class="cat-item"><span class="cat-item-dot"></span><span class="cat-item-text"><strong>Haut-parleurs</strong> — diffuser le son</span></li>
|
||
<li class="cat-item"><span class="cat-item-dot"></span><span class="cat-item-text"><strong>Imprimante</strong> — imprimer sur papier</span></li>
|
||
<li class="cat-item"><span class="cat-item-dot"></span><span class="cat-item-text"><strong>Casque</strong> — écouter le son en privé</span></li>
|
||
<li class="cat-item"><span class="cat-item-dot"></span><span class="cat-item-text"><strong>Projecteur</strong> — projeter l'image sur un mur</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="cat-card uc">
|
||
<div class="cat-card-header">
|
||
<span class="cat-card-icon">🧠</span>
|
||
<div>
|
||
<div class="cat-card-title">L'UNITÉ CENTRALE</div>
|
||
<div class="cat-card-subtitle">Le cerveau</div>
|
||
</div>
|
||
</div>
|
||
<p class="cat-card-def">Ce n'est pas un périphérique. C'est le <strong>composant central</strong> qui traite toutes les informations. Sans elle, rien ne fonctionne.</p>
|
||
<ul class="cat-item-list">
|
||
<li class="cat-item"><span class="cat-item-dot"></span><span class="cat-item-text"><strong>Processeur (CPU)</strong> — exécute les instructions</span></li>
|
||
<li class="cat-item"><span class="cat-item-dot"></span><span class="cat-item-text"><strong>Mémoire vive (RAM)</strong> — stockage temporaire</span></li>
|
||
<li class="cat-item"><span class="cat-item-dot"></span><span class="cat-item-text"><strong>Disque dur / SSD</strong> — stockage permanent</span></li>
|
||
<li class="cat-item"><span class="cat-item-dot"></span><span class="cat-item-text">Tout est <em>à l'intérieur du boîtier</em></span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="page-statusbar">
|
||
<span>3 catégories</span>
|
||
<span>Entrée · Sortie · Unité centrale</span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ══ DANS LA MACHINE ══ -->
|
||
<div class="page-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">Dans la machine — pour aller plus loin</div>
|
||
</div>
|
||
<div class="page-win-body">
|
||
|
||
<h3 class="carte-h3" style="margin-top:0">Les appareils qui font les deux</h3>
|
||
<p class="section-sub">Certains boîtiers contiennent en réalité deux appareils différents. Raisonne appareil par appareil, pas boîtier par boîtier.</p>
|
||
<table class="cours-table">
|
||
<tr><th>Appareil</th><th>Ce qui est entrée</th><th>Ce qui est sortie</th></tr>
|
||
<tr><td><strong>Imprimante multifonction</strong></td><td>Le scanner numérise le papier</td><td>L'imprimante produit le papier</td></tr>
|
||
<tr><td><strong>Casque-micro</strong></td><td>Le micro capte ta voix</td><td>Les écouteurs diffusent le son</td></tr>
|
||
<tr><td><strong>Écran tactile</strong></td><td>Le doigt indique une position</td><td>L'écran affiche l'image</td></tr>
|
||
<tr><td><strong>Clé USB</strong></td><td>On y lit des fichiers</td><td>On y écrit des fichiers</td></tr>
|
||
</table>
|
||
|
||
<h3 class="carte-h3">Ce que contient l'unité centrale</h3>
|
||
<table class="cours-table">
|
||
<tr><th>Composant</th><th>Son rôle</th></tr>
|
||
<tr><td><strong>Processeur (CPU)</strong></td><td>Exécute les instructions, plusieurs milliards par seconde</td></tr>
|
||
<tr><td><strong>Mémoire vive (RAM)</strong></td><td>Espace de travail temporaire, effacé à l'extinction</td></tr>
|
||
<tr><td><strong>Disque dur ou SSD</strong></td><td>Conserve les fichiers même éteint</td></tr>
|
||
<tr><td><strong>Carte mère</strong></td><td>Relie tous les composants entre eux</td></tr>
|
||
<tr><td><strong>Alimentation</strong></td><td>Transforme le courant de la prise</td></tr>
|
||
<tr><td><strong>Ventilateur</strong></td><td>Refroidit le processeur, qui chauffe</td></tr>
|
||
</table>
|
||
|
||
<h3 class="carte-h3">Mémoire vive ou mémoire de stockage ?</h3>
|
||
<table class="cours-table">
|
||
<tr><th></th><th>Mémoire vive (RAM)</th><th>Stockage (disque, SSD)</th></tr>
|
||
<tr><td><strong>Sert à</strong></td><td>Travailler maintenant</td><td>Conserver durablement</td></tr>
|
||
<tr><td><strong>À l'extinction</strong></td><td>Tout s'efface</td><td>Tout est conservé</td></tr>
|
||
<tr><td><strong>Vitesse</strong></td><td>Très rapide</td><td>Plus lente</td></tr>
|
||
<tr><td><strong>Taille habituelle</strong></td><td>8 à 16 Go</td><td>256 Go à 2 To</td></tr>
|
||
</table>
|
||
|
||
<div class="callout tip"><span class="callout-icon">💡</span>
|
||
<div>La mémoire vive, c'est ton <strong>bureau</strong> : tu y étales ce sur quoi tu travailles. Le disque, c'est ton <strong>armoire</strong> : tu y ranges ce que tu veux garder. En fin de journée, ce qui reste sur le bureau est balayé. C'est exactement ce qui arrive à un document non enregistré.</div>
|
||
</div>
|
||
|
||
<h3 class="carte-h3">Mesurer l'information</h3>
|
||
<p class="section-sub">Un ordinateur ne connaît que deux états : 0 et 1. Chacun s'appelle un <strong>bit</strong>. Huit bits forment un <strong>octet</strong>, de quoi coder une lettre.</p>
|
||
<table class="cours-table">
|
||
<tr><th>Unité</th><th>Symbole</th><th>Vaut environ</th><th>Exemple</th></tr>
|
||
<tr><td>Octet</td><td>o</td><td>1 caractère</td><td>La lettre A</td></tr>
|
||
<tr><td>Kilooctet</td><td>Ko</td><td>1 000 octets</td><td>Une page de texte</td></tr>
|
||
<tr><td>Mégaoctet</td><td>Mo</td><td>1 000 Ko</td><td>Une photo, une chanson</td></tr>
|
||
<tr><td>Gigaoctet</td><td>Go</td><td>1 000 Mo</td><td>Un film</td></tr>
|
||
<tr><td>Téraoctet</td><td>To</td><td>1 000 Go</td><td>Une bibliothèque de films</td></tr>
|
||
</table>
|
||
|
||
<h3 class="carte-h3">Les principaux ports</h3>
|
||
<table class="cours-table">
|
||
<tr><th>Port</th><th>À quoi il sert</th></tr>
|
||
<tr><td><strong>USB</strong></td><td>Clé USB, souris, clavier, imprimante, recharge</td></tr>
|
||
<tr><td><strong>USB-C</strong></td><td>Version récente, réversible, plus rapide</td></tr>
|
||
<tr><td><strong>HDMI</strong></td><td>Relier un écran, un projecteur, une télévision</td></tr>
|
||
<tr><td><strong>Jack 3,5 mm</strong></td><td>Casque et écouteurs filaires</td></tr>
|
||
<tr><td><strong>Réseau (RJ45)</strong></td><td>Connexion internet par câble</td></tr>
|
||
</table>
|
||
|
||
<div class="callout warning"><span class="callout-icon">⚠️</span>
|
||
<div>Une souris sans fil qui « ne marche plus » a très souvent simplement une <strong>pile vide</strong>. Vérifie ça avant de conclure qu'elle est cassée.</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="page-statusbar">
|
||
<span>Composants · mémoires · unités · ports</span>
|
||
<span>Pour aller plus loin</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ EXERCICE 1 ══ -->
|
||
<div class="page-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">Exercice 1 — Glisser-déposer</div>
|
||
</div>
|
||
<div class="page-win-body">
|
||
|
||
<p class="exo-num">Exercice 01 — Glisser-déposer</p>
|
||
<p class="exo-title">Classe les périphériques</p>
|
||
<p class="exo-desc">Fais glisser chaque étiquette dans la bonne catégorie : <strong style="color:var(--c-entree)">Entrée</strong> ou <strong style="color:var(--c-sortie)">Sortie</strong>. Tu peux déplacer une étiquette d'une zone à l'autre si tu changes d'avis.</p>
|
||
|
||
<div class="dd-items-pool" id="dd-pool"
|
||
ondragover="ddPoolDragOver(event)" ondrop="ddPoolDrop(event)" onclick="ddPoolClick(event)"></div>
|
||
<p class="dd-select-hint" id="dd-select-hint" style="display:none;">👆 Maintenant clique sur la bonne zone ci-dessous</p>
|
||
|
||
<div class="dd-zones">
|
||
<div class="dd-zone entree" id="zone-entree"
|
||
ondragover="ddZoneDragOver(event)" ondragleave="ddZoneDragLeave(event)"
|
||
ondrop="ddZoneDrop(event,'entree')" onclick="ddZoneClick('entree')">
|
||
<div class="dd-zone-label">➡️ Entrée</div>
|
||
<div class="dd-zone-empty" id="empty-entree">Clique ou dépose ici…</div>
|
||
</div>
|
||
<div class="dd-zone sortie" id="zone-sortie"
|
||
ondragover="ddZoneDragOver(event)" ondragleave="ddZoneDragLeave(event)"
|
||
ondrop="ddZoneDrop(event,'sortie')" onclick="ddZoneClick('sortie')">
|
||
<div class="dd-zone-label">⬅️ Sortie</div>
|
||
<div class="dd-zone-empty" id="empty-sortie">Clique ou dépose ici…</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="exo-actions">
|
||
<button class="exo-btn exo-btn-primary" onclick="ddVerify()">✔ Vérifier</button>
|
||
<button class="exo-btn exo-btn-reset" onclick="ddReset()">↺ Recommencer</button>
|
||
</div>
|
||
<div class="exo-feedback" id="dd-feedback"></div>
|
||
|
||
</div>
|
||
<div class="page-statusbar">
|
||
<span>8 éléments à classer</span>
|
||
<span>Glisse ou clique pour placer</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ EXERCICE 2 ══ -->
|
||
<div class="page-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">Exercice 2 — Questions à choix multiple</div>
|
||
</div>
|
||
<div class="page-win-body">
|
||
<p class="exo-num">Exercice 02 — QCM</p>
|
||
<p class="exo-title">Questions à choix multiple</p>
|
||
<p class="exo-desc">Clique sur la bonne réponse. La correction s'affiche immédiatement.</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>8 questions</span>
|
||
<span>Labo Ordinateur — Leçon 01</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script src="assets/layout.js"></script>
|
||
<script>
|
||
/* ══════════ Données des points cliquables ══════════ */
|
||
const PERIPH_DATA = {
|
||
uc: {
|
||
emoji: '💻', name: 'Unité centrale', cat: 'uc',
|
||
desc: "Le boîtier (ou tour) contient le processeur (CPU), la mémoire vive (RAM) et le disque dur. C'est le « cerveau » de l'ordinateur : il traite toutes les informations reçues et produit des résultats.",
|
||
detail: "💡 Ce n'est pas un périphérique — c'est le composant central de l'ordinateur."
|
||
},
|
||
ecran: {
|
||
emoji: '🖥️', name: 'Écran (moniteur)', cat: 'sortie',
|
||
desc: "L'écran affiche les images, les textes et les vidéos produits par l'ordinateur. Il reçoit les données de l'unité centrale et les rend visibles pour toi.",
|
||
detail: "💡 Périphérique de sortie : l'ordinateur envoie des informations vers l'écran."
|
||
},
|
||
webcam: {
|
||
emoji: '📷', name: 'Webcam', cat: 'entree',
|
||
desc: "La webcam capture des images et des vidéos en temps réel. Elle envoie ces données à l'ordinateur, par exemple pour les appels vidéo ou l'enregistrement.",
|
||
detail: "💡 Périphérique d'entrée : la webcam capte le monde réel et l'envoie à l'ordinateur."
|
||
},
|
||
hp: {
|
||
emoji: '🔊', name: 'Haut-parleurs', cat: 'sortie',
|
||
desc: "Les haut-parleurs diffusent le son produit par l'ordinateur : musique, vidéos, alertes sonores, voix lors des appels. Ils transforment un signal électrique en onde sonore.",
|
||
detail: "💡 Périphérique de sortie : l'ordinateur envoie un signal audio vers les haut-parleurs."
|
||
},
|
||
clavier: {
|
||
emoji: '⌨️', name: 'Clavier', cat: 'entree',
|
||
desc: "Le clavier permet de saisir du texte, des chiffres et des commandes. En appuyant sur les touches, tu envoies des informations directement à l'ordinateur.",
|
||
detail: "💡 Périphérique d'entrée : tes frappes sont envoyées vers l'ordinateur."
|
||
},
|
||
souris: {
|
||
emoji: '🖱️', name: 'Souris', cat: 'entree',
|
||
desc: "La souris te permet de déplacer le curseur sur l'écran et d'interagir avec les éléments (clic, double-clic, glisser-déposer). Elle envoie tes mouvements et tes clics à l'ordinateur.",
|
||
detail: "💡 Périphérique d'entrée : tes gestes sont envoyés vers l'ordinateur."
|
||
},
|
||
imprimante: {
|
||
emoji: '🖨️', name: 'Imprimante / Scanner', cat: 'sortie',
|
||
desc: "L'imprimante reproduit sur papier les documents créés sur l'ordinateur (sortie). Beaucoup de modèles intègrent aussi un scanner qui numérise des documents papier et les envoie à l'ordinateur (entrée).",
|
||
detail: "💡 Principalement un périphérique de sortie, mais le scanner intégré est un périphérique d'entrée."
|
||
}
|
||
};
|
||
|
||
const badgeClass = { entree: 'badge-entree', sortie: 'badge-sortie', uc: 'badge-uc' };
|
||
const badgeLabel = { entree: 'Entrée', sortie: 'Sortie', uc: 'Unité centrale' };
|
||
let activeBtn = null;
|
||
|
||
document.querySelectorAll('.hs-dot').forEach(function (btn) {
|
||
btn.addEventListener('click', function () {
|
||
const data = PERIPH_DATA[this.dataset.id];
|
||
if (!data) return;
|
||
const box = document.getElementById('hs-infobox');
|
||
if (activeBtn) activeBtn.classList.remove('active');
|
||
if (activeBtn === this) { activeBtn = null; box.classList.remove('visible'); return; }
|
||
activeBtn = this; this.classList.add('active');
|
||
document.getElementById('hs-emoji').textContent = data.emoji;
|
||
document.getElementById('hs-name').textContent = data.name;
|
||
const badge = document.getElementById('hs-badge');
|
||
badge.textContent = badgeLabel[data.cat];
|
||
badge.className = 'hs-infobox-badge ' + badgeClass[data.cat];
|
||
document.getElementById('hs-desc').textContent = data.desc;
|
||
document.getElementById('hs-detail').textContent = data.detail;
|
||
box.className = 'hs-infobox visible cat-' + data.cat;
|
||
});
|
||
});
|
||
document.getElementById('hs-close').addEventListener('click', function () {
|
||
document.getElementById('hs-infobox').classList.remove('visible');
|
||
if (activeBtn) { activeBtn.classList.remove('active'); activeBtn = null; }
|
||
});
|
||
|
||
/* ══════════ Exercice 1 — glisser-déposer ══════════ */
|
||
const DD_ITEMS = (function () {
|
||
const items = [
|
||
{ id:'clavier', label:'⌨️ Clavier', answer:'entree' },
|
||
{ id:'souris', label:'🖱️ Souris', answer:'entree' },
|
||
{ id:'webcam', label:'📷 Webcam', answer:'entree' },
|
||
{ id:'microphone', label:'🎤 Microphone', answer:'entree' },
|
||
{ id:'ecran', label:'🖥️ Écran', answer:'sortie' },
|
||
{ id:'hp', label:'🔊 Haut-parleurs', answer:'sortie' },
|
||
{ id:'imprimante', label:'🖨️ Imprimante', answer:'sortie' },
|
||
{ id:'casque', label:'🎧 Casque audio', answer:'sortie' }
|
||
];
|
||
for (let i = items.length - 1; i > 0; i--) {
|
||
const j = Math.floor(Math.random() * (i + 1));
|
||
[items[i], items[j]] = [items[j], items[i]];
|
||
}
|
||
return items;
|
||
})();
|
||
|
||
let ddSelected = null, ddPlacement = {};
|
||
|
||
function ddBuildItem(item, inPool) {
|
||
const el = document.createElement('div');
|
||
el.className = inPool ? 'dd-item' : 'dd-item-placed';
|
||
el.dataset.ddid = item.id;
|
||
el.draggable = true;
|
||
el.textContent = item.label;
|
||
if (ddSelected === item.id) el.classList.add('dd-selected');
|
||
el.addEventListener('dragstart', function (e) {
|
||
ddSelected = null; this.classList.add('dragging');
|
||
e.dataTransfer.setData('text/plain', item.id);
|
||
e.dataTransfer.effectAllowed = 'move';
|
||
});
|
||
el.addEventListener('dragend', function () { this.classList.remove('dragging'); });
|
||
el.addEventListener('click', function (e) {
|
||
e.stopPropagation();
|
||
ddSelected = (ddSelected === item.id) ? null : item.id;
|
||
ddRender();
|
||
});
|
||
return el;
|
||
}
|
||
|
||
function ddRender() {
|
||
const pool = document.getElementById('dd-pool');
|
||
['entree','sortie'].forEach(function (z) {
|
||
document.getElementById('zone-' + z).querySelectorAll('.dd-item-placed').forEach(function (el) { el.remove(); });
|
||
});
|
||
pool.querySelectorAll('.dd-item').forEach(function (el) { el.remove(); });
|
||
|
||
DD_ITEMS.forEach(function (item) {
|
||
const loc = ddPlacement[item.id] || 'pool';
|
||
if (loc === 'pool') pool.appendChild(ddBuildItem(item, true));
|
||
else document.getElementById('zone-' + loc).appendChild(ddBuildItem(item, false));
|
||
});
|
||
|
||
['entree','sortie'].forEach(function (z) {
|
||
const has = Object.values(ddPlacement).includes(z);
|
||
document.getElementById('empty-' + z).style.display = has ? 'none' : '';
|
||
document.getElementById('zone-' + z).classList.toggle('dd-zone-ready', !!ddSelected);
|
||
});
|
||
document.getElementById('dd-select-hint').style.display = ddSelected ? 'block' : 'none';
|
||
}
|
||
|
||
function ddZoneClick(zone) { if (!ddSelected) return; ddPlacement[ddSelected] = zone; ddSelected = null; ddRender(); }
|
||
function ddPoolClick(e) {
|
||
if (e.target === e.currentTarget && ddSelected) { delete ddPlacement[ddSelected]; ddSelected = null; ddRender(); }
|
||
}
|
||
function ddPoolDragOver(e) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; }
|
||
function ddZoneDragOver(e) { e.preventDefault(); e.currentTarget.classList.add('dragover'); }
|
||
function ddZoneDragLeave(e) { e.currentTarget.classList.remove('dragover'); }
|
||
function ddPoolDrop(e) {
|
||
e.preventDefault();
|
||
const id = e.dataTransfer.getData('text/plain');
|
||
if (id) { delete ddPlacement[id]; ddRender(); }
|
||
}
|
||
function ddZoneDrop(e, zone) {
|
||
e.preventDefault(); e.currentTarget.classList.remove('dragover');
|
||
const id = e.dataTransfer.getData('text/plain');
|
||
if (id) { ddPlacement[id] = zone; ddRender(); }
|
||
}
|
||
|
||
function ddVerify() {
|
||
let correct = 0, placed = 0;
|
||
const total = DD_ITEMS.length, errors = [];
|
||
DD_ITEMS.forEach(function (item) {
|
||
const loc = ddPlacement[item.id];
|
||
if (!loc) return;
|
||
placed++;
|
||
if (loc === item.answer) correct++;
|
||
else errors.push(item.label.replace(/^\S+\s/, ''));
|
||
});
|
||
document.querySelectorAll('.dd-item, .dd-item-placed').forEach(function (el) {
|
||
el.classList.remove('correct','incorrect');
|
||
const item = DD_ITEMS.find(function (i) { return i.id === el.dataset.ddid; });
|
||
if (!item) return;
|
||
const loc = ddPlacement[item.id];
|
||
if (!loc) return;
|
||
el.classList.add(loc === item.answer ? 'correct' : 'incorrect');
|
||
});
|
||
const fb = document.getElementById('dd-feedback');
|
||
if (placed < total) {
|
||
fb.className = 'exo-feedback partial';
|
||
fb.textContent = '⚠ Tu n\'as pas encore placé tous les éléments (' + placed + '/' + total + ' placés). Continue !';
|
||
} else if (correct === total) {
|
||
fb.className = 'exo-feedback success';
|
||
fb.textContent = '✔ Parfait ! Les ' + total + ' éléments sont bien classés.';
|
||
} else {
|
||
fb.className = 'exo-feedback error';
|
||
fb.textContent = '✗ ' + correct + '/' + total + ' bons. À revoir : ' + errors.join(', ') + '.';
|
||
}
|
||
}
|
||
|
||
function ddReset() {
|
||
ddPlacement = {}; ddSelected = null; ddRender();
|
||
document.getElementById('dd-feedback').className = 'exo-feedback';
|
||
}
|
||
ddRender();
|
||
|
||
/* ══════════ Exercice 2 — QCM ══════════ */
|
||
const QCM = [
|
||
{ enonce: "L'écran est un périphérique de…",
|
||
opts: ['Entrée','Sortie','Traitement','Stockage'], answer: 1,
|
||
expl: "L'écran <strong>affiche</strong> les informations produites par l'ordinateur : il reçoit des données de l'ordinateur, c'est donc un périphérique de sortie." },
|
||
{ enonce: "Lequel de ces appareils est un périphérique d'ENTRÉE ?",
|
||
opts: ['Imprimante','Haut-parleurs','Clavier','Écran'], answer: 2,
|
||
expl: "Le <strong>clavier</strong> envoie des informations (tes frappes) vers l'ordinateur. Les autres envoient des informations de l'ordinateur vers toi." },
|
||
{ enonce: "Que contient l'unité centrale ?",
|
||
opts: ["L'écran et les haut-parleurs","Le processeur, la RAM et le disque dur","Le clavier et la souris","La webcam et le microphone"], answer: 1,
|
||
expl: "L'unité centrale contient le <strong>processeur (CPU)</strong>, la <strong>mémoire vive (RAM)</strong> et le <strong>disque dur ou SSD</strong>." },
|
||
{ enonce: "La webcam est un périphérique de…",
|
||
opts: ['Sortie','Stockage','Traitement','Entrée'], answer: 3,
|
||
expl: "La <strong>webcam</strong> capture des images du monde réel et les envoie à l'ordinateur : périphérique d'entrée." },
|
||
{ enonce: "Pourquoi l'imprimante est-elle un périphérique de SORTIE ?",
|
||
opts: ["Parce qu'elle envoie des données à l'ordinateur","Parce qu'elle stocke les documents","Parce qu'elle reçoit des données de l'ordinateur et les imprime","Parce qu'elle est connectée par USB"], answer: 2,
|
||
expl: "L'imprimante <strong>reçoit</strong> les données de l'ordinateur et les reproduit sur papier : les données vont de l'ordinateur vers l'imprimante." },
|
||
{ enonce: "Combien de bits contient un octet ?",
|
||
opts: ['2','8','100','1 000'], answer: 1,
|
||
expl: "Un <strong>octet</strong> est un paquet de <strong>8 bits</strong>. Il suffit à coder une lettre." },
|
||
{ enonce: "Quelle unité est la plus grande ?",
|
||
opts: ["le mégaoctet","le kilooctet","le gigaoctet","l'octet"], answer: 2,
|
||
expl: "Dans l'ordre croissant : octet, kilooctet (Ko), mégaoctet (Mo), <strong>gigaoctet (Go)</strong>, téraoctet (To)." },
|
||
{ enonce: "Un microphone est un périphérique de…",
|
||
opts: ['Sortie','Entrée','Unité centrale','Stockage'], answer: 1,
|
||
expl: "Le <strong>microphone</strong> capte ta voix et l'envoie à l'ordinateur : périphérique d'entrée." }
|
||
];
|
||
|
||
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>
|