lrdlg
563 lines
52 KiB
HTML
563 lines
52 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Cours 4, comment ça circule — 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 4</strong>
|
||
</nav>
|
||
<h1>Comment ça circule</h1>
|
||
<p class="entete__meta">Cours 4 · Formation numérique · 1re année</p>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="contenu contenu--large">
|
||
|
||
<p class="chapeau">Le trajet d'une demande, depuis ton ordinateur jusqu'à un site web, et retour. Et la différence entre Internet, le web et le navigateur.</p>
|
||
|
||
<ul class="etiquettes">
|
||
<li class="etiquette">2 périodes</li>
|
||
<li class="etiquette">Livret du cours 4</li>
|
||
<li class="etiquette">Exercices dans l'onglet 4</li>
|
||
</ul>
|
||
|
||
<ul class="apercu">
|
||
<li><svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 7l9 6 9-6"/></svg><span>Le courrier</span></li>
|
||
<li><svg viewBox="0 0 24 24"><rect x="3" y="12" width="18" height="7" rx="2"/><path d="M7 12V8M17 12V8M7 16h.01M11 16h.01"/></svg><span>Le routeur</span></li>
|
||
<li><svg viewBox="0 0 24 24"><path d="M4 7h4M4 12h7M4 17h5M14 7h6M14 12h6M14 17h6"/></svg><span>L'adresse IP</span></li>
|
||
<li><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg><span>Internet</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>Exercices répondus</small><strong id="sEx">0 sur 20</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</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>Le jeu du courrier</h2><p class="muted">Ordinateurs éteints. La classe devient un réseau.</p></div><span class="score">15 min</span></div>
|
||
<figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" role="img" aria-label="Plan du jeu du courrier : trois réseaux locaux reliés par Internet, et un serveur">
|
||
|
||
<g font-family="Arial, Helvetica, sans-serif">
|
||
<rect x="15" y="20" width="230" height="215" rx="16" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5" opacity=".55"/>
|
||
<text x="130" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#1d4ed8">RÉSEAU 1</text>
|
||
<line x1="60" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<line x1="130" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<line x1="200" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<g><rect x="29" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M49 102 h22 M60 102 v6 M45 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="60" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.2</text></g>
|
||
<g><rect x="99" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M119 102 h22 M130 102 v6 M115 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="130" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.3</text></g>
|
||
<g><rect x="169" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M189 102 h22 M200 102 v6 M185 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="200" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.4</text></g>
|
||
<g><rect x="75" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="3"/><text x="130" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#1d4ed8">Routeur</text><text x="130" y="195" text-anchor="middle" font-size="11.5" fill="#1d4ed8">10.0.1.1</text></g>
|
||
<line x1="130" y1="204" x2="130" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
|
||
<rect x="285" y="20" width="230" height="215" rx="16" fill="#dcfce7" stroke="#15803d" stroke-width="2.5" opacity=".55"/>
|
||
<text x="400" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">RÉSEAU 2</text>
|
||
<line x1="330" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<line x1="400" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<line x1="470" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<g><rect x="299" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M319 102 h22 M330 102 v6 M315 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="330" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.2</text></g>
|
||
<g><rect x="369" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M389 102 h22 M400 102 v6 M385 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="400" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.3</text></g>
|
||
<g><rect x="439" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M459 102 h22 M470 102 v6 M455 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="470" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.4</text></g>
|
||
<g><rect x="345" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#15803d" stroke-width="3"/><text x="400" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#15803d">Routeur</text><text x="400" y="195" text-anchor="middle" font-size="11.5" fill="#15803d">10.0.2.1</text></g>
|
||
<line x1="400" y1="204" x2="400" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
|
||
<rect x="555" y="20" width="230" height="215" rx="16" fill="#fef3c7" stroke="#b45309" stroke-width="2.5" opacity=".55"/>
|
||
<text x="670" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#b45309">RÉSEAU 3</text>
|
||
<line x1="600" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<line x1="670" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<line x1="740" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<g><rect x="569" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M589 102 h22 M600 102 v6 M585 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="600" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.2</text></g>
|
||
<g><rect x="639" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M659 102 h22 M670 102 v6 M655 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="670" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.3</text></g>
|
||
<g><rect x="709" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M729 102 h22 M740 102 v6 M725 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="740" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.4</text></g>
|
||
<g><rect x="615" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#b45309" stroke-width="3"/><text x="670" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#b45309">Routeur</text><text x="670" y="195" text-anchor="middle" font-size="11.5" fill="#b45309">10.0.3.1</text></g>
|
||
<line x1="670" y1="204" x2="670" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
|
||
<g><rect x="20" y="262" width="760" height="44" rx="22" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/><text x="400" y="290" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">INTERNET · l'allée centrale, qui relie les routeurs entre eux</text></g>
|
||
<line x1="400" y1="306" x2="400" y2="332" stroke="var(--encre-douce)" stroke-width="4"/>
|
||
<g><rect x="320" y="332" width="160" height="54" rx="10" fill="var(--encre)"/><text x="400" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="#ffffff">Serveur</text><text x="400" y="374" text-anchor="middle" font-size="12" fill="#c7d2fe">10.0.9.1 · bureau du prof</text></g>
|
||
</g></svg></figure>
|
||
<div class="accordeon" id="regles"></div>
|
||
<h3 style="margin-top:22px">Les trois manches</h3>
|
||
<div class="steps" id="manches"></div>
|
||
<div class="row" style="margin-top:12px"><button class="btn soft" id="maPrec">Manche précédente</button><button class="btn primary" id="maSuiv">Manche suivante</button></div>
|
||
</div></section>
|
||
|
||
<!-- 2 -->
|
||
<section class="panel" id="p1">
|
||
<div class="card">
|
||
<div class="carte-entete"><div><h2>On rejoue le jeu, avec les vrais mots</h2><p class="muted">Choisis qui envoie et à qui. Le trajet s'allume étape par étape.</p></div><span class="score">20 min</span></div>
|
||
<div class="envoi">
|
||
<label>De <select id="de"></select></label>
|
||
<label>vers <select id="vers"></select></label>
|
||
<button class="btn primary" id="envoyer">Envoyer</button>
|
||
<button class="btn soft" id="panne">Mettre le routeur 2 en panne</button>
|
||
</div>
|
||
<div id="plan"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" role="img" aria-label="Plan du jeu du courrier : trois réseaux locaux reliés par Internet, et un serveur">
|
||
|
||
<g font-family="Arial, Helvetica, sans-serif">
|
||
<rect x="15" y="20" width="230" height="215" rx="16" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2.5" opacity=".55"/>
|
||
<text x="130" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#1d4ed8">RÉSEAU 1</text>
|
||
<line id="l_p10" x1="60" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<line id="l_p11" x1="130" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<line id="l_p12" x1="200" y1="131" x2="130" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<g id="p10"><rect x="29" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M49 102 h22 M60 102 v6 M45 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="60" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.2</text></g>
|
||
<g id="p11"><rect x="99" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M119 102 h22 M130 102 v6 M115 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="130" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.3</text></g>
|
||
<g id="p12"><rect x="169" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M189 102 h22 M200 102 v6 M185 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="200" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.1.4</text></g>
|
||
<g id="r1"><rect x="75" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="3"/><text x="130" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#1d4ed8">Routeur</text><text x="130" y="195" text-anchor="middle" font-size="11.5" fill="#1d4ed8">10.0.1.1</text></g>
|
||
<line id="l_r1" x1="130" y1="204" x2="130" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
|
||
<rect x="285" y="20" width="230" height="215" rx="16" fill="#dcfce7" stroke="#15803d" stroke-width="2.5" opacity=".55"/>
|
||
<text x="400" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">RÉSEAU 2</text>
|
||
<line id="l_p20" x1="330" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<line id="l_p21" x1="400" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<line id="l_p22" x1="470" y1="131" x2="400" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<g id="p20"><rect x="299" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M319 102 h22 M330 102 v6 M315 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="330" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.2</text></g>
|
||
<g id="p21"><rect x="369" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M389 102 h22 M400 102 v6 M385 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="400" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.3</text></g>
|
||
<g id="p22"><rect x="439" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M459 102 h22 M470 102 v6 M455 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="470" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.2.4</text></g>
|
||
<g id="r2"><rect x="345" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#15803d" stroke-width="3"/><text x="400" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#15803d">Routeur</text><text x="400" y="195" text-anchor="middle" font-size="11.5" fill="#15803d">10.0.2.1</text></g>
|
||
<line id="l_r2" x1="400" y1="204" x2="400" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
|
||
<rect x="555" y="20" width="230" height="215" rx="16" fill="#fef3c7" stroke="#b45309" stroke-width="2.5" opacity=".55"/>
|
||
<text x="670" y="42" text-anchor="middle" font-size="14" font-weight="bold" fill="#b45309">RÉSEAU 3</text>
|
||
<line id="l_p30" x1="600" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<line id="l_p31" x1="670" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<line id="l_p32" x1="740" y1="131" x2="670" y2="158" stroke="var(--encre-douce)" stroke-width="3"/>
|
||
<g id="p30"><rect x="569" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M589 102 h22 M600 102 v6 M585 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="600" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.2</text></g>
|
||
<g id="p31"><rect x="639" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M659 102 h22 M670 102 v6 M655 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="670" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.3</text></g>
|
||
<g id="p32"><rect x="709" y="62" width="62" height="40" rx="6" fill="var(--papier)" stroke="var(--encre)" stroke-width="2.2"/><path d="M729 102 h22 M740 102 v6 M725 108 h30" stroke="var(--encre)" stroke-width="2.2"/><text x="740" y="124" text-anchor="middle" font-size="11.5" font-weight="bold" fill="var(--encre)">10.0.3.4</text></g>
|
||
<g id="r3"><rect x="615" y="158" width="110" height="46" rx="10" fill="#ffffff" stroke="#b45309" stroke-width="3"/><text x="670" y="178" text-anchor="middle" font-size="13" font-weight="bold" fill="#b45309">Routeur</text><text x="670" y="195" text-anchor="middle" font-size="11.5" fill="#b45309">10.0.3.1</text></g>
|
||
<line id="l_r3" x1="670" y1="204" x2="670" y2="262" stroke="var(--encre-douce)" stroke-width="4"/>
|
||
<g id="net"><rect x="20" y="262" width="760" height="44" rx="22" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/><text x="400" y="290" text-anchor="middle" font-size="15" font-weight="bold" fill="#5b21b6">INTERNET · l'allée centrale, qui relie les routeurs entre eux</text></g>
|
||
<line id="l_srv" x1="400" y1="306" x2="400" y2="332" stroke="var(--encre-douce)" stroke-width="4"/>
|
||
<g id="srv"><rect x="320" y="332" width="160" height="54" rx="10" fill="var(--encre)"/><text x="400" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="#ffffff">Serveur</text><text x="400" y="374" text-anchor="middle" font-size="12" fill="#c7d2fe">10.0.9.1 · bureau du prof</text></g>
|
||
</g></svg></div>
|
||
<ol class="journal" id="journal"></ol>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>Je comprends. Le réseau et le trajet d'un message</h2>
|
||
<p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p>
|
||
|
||
<h3>Le réseau</h3>
|
||
<p>Un <b>réseau</b>, ce sont des appareils reliés entre eux pour échanger des informations. Le réseau d'un seul lieu, une maison, une école, s'appelle un <b>réseau local</b>. Dans le jeu, chaque groupe de tables.</p>
|
||
|
||
<h3>La connexion</h3>
|
||
<p>La <b>connexion</b> relie un appareil au réseau : par un <b>câble réseau</b>, ou par le <b>wifi</b>, sans fil. La connexion, c'est la route. Mais une route ne sert à rien si on ne sait pas où aller.</p>
|
||
|
||
<h3>L'adresse IP</h3>
|
||
<p>Chaque appareil connecté a une <b>adresse IP</b> : <b>quatre nombres séparés par des points</b>, comme 10.0.2.3. <b>Sans adresse, un message ne sait pas où aller, et une réponse ne sait pas où revenir.</b> C'est pour ça qu'il fallait écrire l'adresse du destinataire et la sienne.</p>
|
||
<p>Les premiers nombres indiquent <b>le réseau</b>, le dernier désigne <b>l'appareil</b>. L'adresse de ton poste lui est donnée par le réseau quand il se connecte.</p>
|
||
|
||
<h3>Le routeur</h3>
|
||
<p>Le <b>routeur</b> relie un réseau local aux autres réseaux. Il lit l'adresse de chaque message et l'envoie dans la bonne direction, sans lire le message lui-même. À la maison, il est caché dans la <b>box</b> du <b>fournisseur d'accès</b>.</p>
|
||
<p><b>Si le routeur tombe en panne</b>, les appareils restent reliés entre eux, mais plus rien ne sort ni n'entre. C'est ce qui est arrivé au réseau 2.</p>
|
||
|
||
<h3>Internet et le serveur</h3>
|
||
<p><b>Internet, c'est le réseau des réseaux</b> : des millions de réseaux reliés par des routeurs. Dans le jeu, l'allée centrale. Un <b>serveur</b> est un ordinateur toujours allumé qui conserve des fichiers et des sites. Dans le jeu, le bureau du professeur.</p>
|
||
|
||
<div class="consigne"><small>Le trajet complet, en cinq étapes</small>
|
||
<b>1.</b> Je me connecte au réseau local, par câble ou par wifi.<br>
|
||
<b>2.</b> Je reçois une adresse IP, donnée par le routeur.<br>
|
||
<b>3.</b> Ma demande part sur Internet, de routeur en routeur.<br>
|
||
<b>4.</b> Elle arrive au serveur qui conserve le site.<br>
|
||
<b>5.</b> Le serveur renvoie la page par le même chemin, jusqu'à mon adresse.</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Je m'entraine tout de suite</h3>
|
||
<p class="muted" style="margin-top:0">Quel est le vrai mot pour chaque rôle du jeu ?</p>
|
||
<table class="grille" id="tabRoles"></table>
|
||
<div class="row" style="margin-top:12px"><button class="btn primary" id="roleSuiv">Révéler le mot suivant</button><button class="btn soft" id="roleReset">Tout masquer</button></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3 -->
|
||
<section class="panel" id="p2"><div class="card">
|
||
<div class="carte-entete"><div><h2>L'adresse de mon poste</h2><p class="muted">Ton livret, activité 3. En binôme.</p></div><span class="score">20 min</span></div>
|
||
<div class="steps" id="etapes"></div>
|
||
<div class="row" style="margin-top:14px"><button class="btn soft" id="etprec">Étape précédente</button><button class="btn primary" id="etsuiv">Étape suivante</button></div>
|
||
<div class="consigne" style="margin-top:20px"><small>Attention</small>
|
||
Lis ton adresse dans les <b>paramètres</b> de ton poste, jamais sur un site web. Et ignore la ligne IPv6, longue, avec des lettres : c'est une autre façon d'écrire les adresses.</div>
|
||
<div class="row"><button class="btn" id="constat">Ce qu'on constate</button></div>
|
||
<div class="consigne cache" id="constatTxt" style="margin-top:14px"><small>Ce qu'on constate</small>
|
||
Les deux adresses commencent de la même façon et finissent différemment. Le <b>début</b> désigne le <b>réseau</b>, le même pour les deux postes. La <b>fin</b> désigne l'<b>appareil</b>, différent pour chacun.</div>
|
||
</div></section>
|
||
|
||
<!-- 4 -->
|
||
<section class="panel" id="p3">
|
||
<div class="card">
|
||
<div class="carte-entete"><div><h2>Du poste jusqu'au site</h2><p class="muted">Place les cinq mots dans les cases, puis vérifie.</p></div><span class="score">25 min</span></div>
|
||
<figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 315" role="img" aria-label="Trajet d'une demande depuis mon poste jusqu'au serveur d'un site">
|
||
|
||
<defs><marker id="f" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="var(--encre)"/></marker><marker id="g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0L10 5L0 10z" fill="#16a34a"/></marker></defs>
|
||
<g font-family="Arial, Helvetica, sans-serif">
|
||
<rect x="20" y="70" width="130" height="86" rx="10" fill="var(--papier)" stroke="var(--encre)" stroke-width="3"/><path d="M60 156 h50 M85 156 v14 M62 170 h46" stroke="var(--encre)" stroke-width="3"/>
|
||
<text x="85" y="110" text-anchor="middle" font-size="15" font-weight="bold" fill="var(--encre)">Mon poste</text><text x="85" y="132" text-anchor="middle" font-size="12" fill="var(--encre-douce)">et son navigateur</text>
|
||
<rect x="20" y="195" width="130" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="36" y="215" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">1</text>
|
||
<path d="M152 110 H232" stroke="var(--encre)" stroke-width="3" stroke-dasharray="8 5" marker-end="url(#f)"/>
|
||
<rect x="132" y="42" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="148" y="62" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">2</text>
|
||
<rect x="238" y="82" width="120" height="60" rx="10" fill="#fff" stroke="#1d4ed8" stroke-width="3"/><path d="M262 82 v-16 M334 82 v-16" stroke="#1d4ed8" stroke-width="3"/>
|
||
<rect x="238" y="158" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="254" y="178" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">3</text>
|
||
<text x="298" y="118" text-anchor="middle" font-size="22" fill="#1d4ed8">⇄</text>
|
||
<path d="M360 112 H408" stroke="var(--encre)" stroke-width="3" marker-end="url(#f)"/>
|
||
<ellipse cx="490" cy="112" rx="78" ry="48" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/>
|
||
<text x="490" y="108" text-anchor="middle" font-size="12" fill="#5b21b6">des milliers</text><text x="490" y="124" text-anchor="middle" font-size="12" fill="#5b21b6">de réseaux</text>
|
||
<rect x="430" y="176" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="446" y="196" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">4</text>
|
||
<path d="M570 112 H626" stroke="var(--encre)" stroke-width="3" marker-end="url(#f)"/>
|
||
<rect x="630" y="62" width="140" height="100" rx="10" fill="var(--encre)"/><path d="M650 88 h100 M650 108 h100 M650 128 h100" stroke="#6366f1" stroke-width="3"/>
|
||
<rect x="640" y="176" width="120" height="30" rx="8" fill="#fff" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="6 4"/><text x="656" y="196" text-anchor="middle" font-size="15" font-weight="bold" fill="#2563eb">5</text>
|
||
<path d="M700 230 C700 305, 90 305, 85 250" stroke="#16a34a" stroke-width="3.5" fill="none" marker-end="url(#g)"/>
|
||
<text x="400" y="252" text-anchor="middle" font-size="14" font-weight="bold" fill="#15803d">le serveur renvoie la page web par le même chemin</text>
|
||
</g></svg></figure>
|
||
<div class="cases" id="cases"></div>
|
||
<div class="row" style="margin-top:14px"><button class="btn primary" id="verifier">Vérifier</button><button class="btn soft" id="casesReset">Recommencer</button></div>
|
||
<p class="feedback" id="casesMsg"></p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="carte-entete"><div><h2>Je m'entraine</h2><p class="muted">Quatre exercices, 20 questions. La correction s'affiche tout de suite.</p></div></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>À la fin, recopie tes 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 / 20</span>
|
||
</div>
|
||
<h3>Exercice 1. Le bon mot</h3><div id="ex1"></div>
|
||
<h3 style="margin-top:26px">Exercice 2. Le trajet</h3><div id="ex2"></div>
|
||
<h3 style="margin-top:26px">Exercice 3. Vrai ou faux</h3><div id="ex3"></div>
|
||
<h3 style="margin-top:26px">Exercice 4. Le défi</h3>
|
||
<p class="muted" style="margin-top:0">Des situations que tu n'as pas vues. Sers-toi des règles du jeu.</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)"> / 20</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>
|
||
</section>
|
||
|
||
<!-- 5 -->
|
||
<section class="panel" id="p4">
|
||
<div class="card">
|
||
<div class="carte-entete"><div><h2>Je comprends. Internet, le web et le navigateur</h2><p class="muted">On lit cette page ensemble. Elle est dans ton livret.</p></div><span class="score">15 min</span></div>
|
||
<p>« Je vais sur Internet », « je cherche sur le web », « j'ouvre Google » : on emploie ces expressions comme si elles voulaient dire la même chose. Ce n'est pas le cas.</p>
|
||
<div class="consigne"><small>Les routes, les magasins et le vélo</small>
|
||
<b>Internet, ce sont les routes</b> : un immense réseau qui relie tout.<br>
|
||
<b>Le web, ce sont les magasins</b> le long des routes : les sites, avec leurs pages reliées par des liens.<br>
|
||
<b>Le navigateur, c'est ton vélo</b> : le moyen d'aller de magasin en magasin. Chrome, Firefox, Edge, Safari.</div>
|
||
<p>Sur les mêmes routes circulent aussi d'autres choses : les <b>courriels</b>, les <b>jeux en ligne</b>, la <b>messagerie</b> comme WhatsApp ou Snapchat, la <b>musique</b> et les <b>vidéos</b> dans leurs applications. Tous utilisent Internet. Aucun n'a besoin d'un navigateur. Ce n'est pas le web.</p>
|
||
<figure><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 260" role="img" aria-label="Internet est le réseau ; le web, le courriel, les jeux en ligne et la messagerie sont des services qui l'utilisent">
|
||
<g font-family="Arial, Helvetica, sans-serif" text-anchor="middle">
|
||
<text x="400" y="26" font-size="14" font-weight="bold" fill="var(--encre-douce)">DES SERVICES QUI UTILISENT INTERNET</text>
|
||
<rect x="25" y="44" width="170" height="92" rx="14" fill="#dbeafe" stroke="#2563eb" stroke-width="3"/>
|
||
<text x="110" y="76" font-size="18" font-weight="bold" fill="#2563eb">Le web</text>
|
||
<text x="110" y="98" font-size="13" fill="var(--encre-douce)">pages et liens</text>
|
||
<text x="110" y="120" font-size="12" fill="var(--encre-douce)">avec : navigateur</text>
|
||
<line x1="110" y1="138" x2="110" y2="176" stroke="var(--encre-douce)" stroke-width="4"/>
|
||
<rect x="218" y="44" width="170" height="92" rx="14" fill="#fef3c7" stroke="#b45309" stroke-width="3"/>
|
||
<text x="303" y="76" font-size="18" font-weight="bold" fill="#b45309">Le courriel</text>
|
||
<text x="303" y="98" font-size="13" fill="var(--encre-douce)">messages</text>
|
||
<text x="303" y="120" font-size="12" fill="var(--encre-douce)">avec : application mail</text>
|
||
<line x1="303" y1="138" x2="303" y2="176" stroke="var(--encre-douce)" stroke-width="4"/>
|
||
<rect x="411" y="44" width="170" height="92" rx="14" fill="#dcfce7" stroke="#15803d" stroke-width="3"/>
|
||
<text x="496" y="76" font-size="18" font-weight="bold" fill="#15803d">Jeux en ligne</text>
|
||
<text x="496" y="98" font-size="13" fill="var(--encre-douce)">parties</text>
|
||
<text x="496" y="120" font-size="12" fill="var(--encre-douce)">avec : le jeu lui-même</text>
|
||
<line x1="496" y1="138" x2="496" y2="176" stroke="var(--encre-douce)" stroke-width="4"/>
|
||
<rect x="604" y="44" width="170" height="92" rx="14" fill="#fce7f3" stroke="#be185d" stroke-width="3"/>
|
||
<text x="689" y="76" font-size="18" font-weight="bold" fill="#be185d">Messagerie</text>
|
||
<text x="689" y="98" font-size="13" fill="var(--encre-douce)">discussions</text>
|
||
<text x="689" y="120" font-size="12" fill="var(--encre-douce)">avec : application</text>
|
||
<line x1="689" y1="138" x2="689" y2="176" stroke="var(--encre-douce)" stroke-width="4"/>
|
||
<rect x="20" y="176" width="760" height="62" rx="18" fill="#ede9fe" stroke="#6d28d9" stroke-width="3"/>
|
||
<text x="400" y="204" font-size="19" font-weight="bold" fill="#5b21b6">INTERNET</text>
|
||
<text x="400" y="226" font-size="13" fill="#5b21b6">le réseau des réseaux, qui transporte tout le reste</text>
|
||
</g></svg></figure>
|
||
<div class="consigne"><small>Le test</small><b>Est-ce que j'utilise un navigateur pour afficher des pages ?</b> Si oui, c'est le web. Si c'est une application, un jeu ou une console, c'est Internet, mais pas le web.</div>
|
||
<p><b>Et Google ?</b> Ce n'est ni Internet, ni le web, ni un navigateur : c'est un site web qui sert à chercher d'autres sites. Chrome est le navigateur fabriqué par la même entreprise, d'où la confusion.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Web ou pas web ?</h3>
|
||
<p class="muted" style="margin-top:0">On répond ensemble.</p>
|
||
<div id="ex5"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6 -->
|
||
<section class="panel" id="p5">
|
||
<div class="card">
|
||
<div class="carte-entete"><div><h2>Ma trace écrite</h2><p class="muted">Dans ton livret. 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>Rends ton badge. Ferme ta session.</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Mon lexique du cours 4</h3>
|
||
<p class="muted" style="margin-top:0">Les mêmes définitions que dans ton livret. Clique sur un mot pour l'ouvrir.</p>
|
||
<div class="accordeon" id="lexique"></div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
<footer class="pied">
|
||
<div class="pied__interieur">Cours 4 · Formation numérique · 1re année · M. Courcelle</div>
|
||
</footer>
|
||
|
||
<script>
|
||
"use strict";
|
||
var PHASES=[{t:"Le jeu du courrier",d:15,a:0},{t:"Les vrais mots",d:20,a:15},{t:"Mon adresse",d:20,a:35},
|
||
{t:"Le trajet",d:25,a:55},{t:"Internet et le web",d:15,a:80},{t:"Ma trace écrite",d:5,a:95}];
|
||
|
||
/* ---------- chrono et onglets ---------- */
|
||
var t0=null,tick=null,choisie=0,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();try{window.scrollTo({top:0,behavior:"smooth"});}catch(e){}}
|
||
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";};
|
||
|
||
function accordeon(zone,liste,plus){
|
||
liste.forEach(function(e,i){
|
||
var d=document.createElement("div");d.className="item";
|
||
d.innerHTML='<button aria-expanded="false"><span class="n">'+(plus==="règle"?(i+1):e[0].charAt(0))+'</span><span class="t">'+e[0]+'</span><span class="plus">'+plus+'</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":plus;};
|
||
zone.appendChild(d);
|
||
});
|
||
}
|
||
function etapesPasAPas(zoneId,precId,suivId,data){
|
||
var i=0,z=document.getElementById(zoneId);
|
||
function dessine(){z.innerHTML="";data.forEach(function(e,k){var d=document.createElement("div");d.className="step"+(k===i?" on":"")+(k<i?" fait":"");d.innerHTML='<span class="n">'+(k+1)+'</span><div><h3>'+e[0]+'</h3><p>'+(k<=i?e[1]:"")+'</p></div>';z.appendChild(d);});}
|
||
document.getElementById(suivId).onclick=function(){if(i<data.length-1){i++;dessine();}};
|
||
document.getElementById(precId).onclick=function(){if(i>0){i--;dessine();}};
|
||
dessine();
|
||
}
|
||
|
||
/* ---------- 1. le jeu ---------- */
|
||
accordeon(document.getElementById("regles"),[
|
||
["Tu ne remets ton message qu'au routeur de ton réseau","Jamais directement à un camarade, même s'il est à côté de toi."],
|
||
["Tu écris deux adresses","Celle du destinataire, et la tienne : celle de l'expéditeur."],
|
||
["Le routeur ne lit que le troisième nombre","Si c'est son réseau, il livre. Sinon, il passe le message au routeur du bon réseau, par l'allée centrale."],
|
||
["Une adresse incomplète ou inconnue finit à la corbeille","Le routeur ne devine pas."]],"règle");
|
||
etapesPasAPas("manches","maPrec","maSuiv",[
|
||
["Manche 1. Envoyer entre réseaux","Écris un message de cinq mots maximum à un camarade d'un autre réseau. N'oublie pas les deux adresses."],
|
||
["Manche 2. Demander une page au serveur","Trois élèves demandent une page au serveur : la météo, une blague, un horaire. Le serveur répond."],
|
||
["Manche 3. La panne","Le routeur du réseau 2 s'arrête. Que deviennent les messages ?"],
|
||
["On fait le point","Retour à ta place. Livret, activité 1 : les deux questions."]]);
|
||
|
||
/* ---------- 2. le reseau anime ---------- */
|
||
var NOEUDS=[];
|
||
[1,2,3].forEach(function(n){[0,1,2].forEach(function(k){NOEUDS.push({id:"p"+n+k,res:n,adr:"10.0."+n+"."+(k+2),nom:"Poste 10.0."+n+"."+(k+2)});});});
|
||
var selDe=document.getElementById("de"),selVers=document.getElementById("vers");
|
||
NOEUDS.forEach(function(o,i){selDe.add(new Option(o.adr,o.id));selVers.add(new Option(o.adr,o.id));});
|
||
selVers.add(new Option("Serveur 10.0.9.1","srv"));
|
||
selDe.value="p10";selVers.value="p32";
|
||
var enPanne=false,anim=[];
|
||
var plan=document.getElementById("plan");
|
||
function el(id){return plan.querySelector("#"+id);}
|
||
function efface(){plan.querySelectorAll(".allume").forEach(function(x){x.classList.remove("allume");});anim.forEach(clearTimeout);anim=[];document.getElementById("journal").innerHTML="";}
|
||
function noeud(id){return NOEUDS.filter(function(o){return o.id===id;})[0];}
|
||
function trajet(a,b){
|
||
var A=noeud(a),P=[],T=[];
|
||
P.push([a,"Le "+A.nom.toLowerCase()+" écrit les deux adresses et remet le message à son routeur."]);
|
||
P.push(["l_"+a,null]);
|
||
P.push(["r"+A.res,"Le <b>routeur</b> du réseau "+A.res+" lit l'<b>adresse IP</b> du destinataire."]);
|
||
if(b==="srv"){
|
||
P.push(["l_r"+A.res,null]);P.push(["net","Le message sort du réseau local et voyage sur <b>Internet</b>."]);
|
||
P.push(["l_srv",null]);P.push(["srv","Le <b>serveur</b> reçoit la demande et renvoie la page à l'adresse de l'expéditeur, par le même chemin."]);
|
||
return P;
|
||
}
|
||
var B=noeud(b);
|
||
if(A.res===B.res){P.push(["l_"+b,null]);P.push([b,"Même réseau : le routeur livre directement au "+B.nom.toLowerCase()+"."]);return P;}
|
||
P.push(["l_r"+A.res,null]);P.push(["net","Autre réseau : le message passe sur <b>Internet</b>, l'allée centrale."]);
|
||
P.push(["l_r"+B.res,null]);P.push(["r"+B.res,"Le <b>routeur</b> du réseau "+B.res+" reçoit le message et lit l'adresse."]);
|
||
P.push(["l_"+b,null]);P.push([b,"Il le livre au "+B.nom.toLowerCase()+". Arrivé."]);
|
||
return P;
|
||
}
|
||
document.getElementById("envoyer").onclick=function(){
|
||
efface();
|
||
var a=selDe.value,b=selVers.value;
|
||
if(a===b){document.getElementById("journal").innerHTML='<li class="stop">Choisis deux postes différents.</li>';return;}
|
||
var P=trajet(a,b),j=document.getElementById("journal"),t=0,bloque=false;
|
||
P.forEach(function(p){
|
||
if(bloque)return;
|
||
var estPanne=enPanne&&p[0]==="r2";
|
||
anim.push(setTimeout(function(){
|
||
var e=el(p[0]); if(e&&!estPanne)e.classList.add("allume");
|
||
if(estPanne){j.insertAdjacentHTML("beforeend",'<li class="stop">Le routeur du réseau 2 est en panne. Le message reste bloqué : rien n\'entre, rien ne sort du réseau 2.</li>');}
|
||
else if(p[1]){j.insertAdjacentHTML("beforeend","<li>"+p[1]+"</li>");}
|
||
},t));
|
||
t+=p[1]?850:350;
|
||
if(estPanne)bloque=true;
|
||
});
|
||
};
|
||
document.getElementById("panne").onclick=function(){
|
||
enPanne=!enPanne;el("r2").classList.toggle("panne",enPanne);
|
||
this.textContent=enPanne?"Réparer le routeur 2":"Mettre le routeur 2 en panne";efface();
|
||
};
|
||
|
||
var ROLES=[["Le badge avec quatre nombres","Adresse IP"],["L'élève qui lit l'adresse et oriente les messages","Routeur"],["L'allée centrale","Internet"],["Le bureau du professeur, qui fournit les pages","Serveur"],["Un groupe de tables","Réseau local"]];
|
||
var ri=0;
|
||
function dessineRoles(){var h="<tr><th>Dans le jeu</th><th>Le vrai mot</th></tr>";ROLES.forEach(function(r,i){h+="<tr"+(i<ri?' class="on"':"")+"><td>"+r[0]+"</td>"+(i<ri?"<td><b>"+r[1]+"</b></td>":'<td class="masque">.</td>')+"</tr>";});document.getElementById("tabRoles").innerHTML=h;}
|
||
document.getElementById("roleSuiv").onclick=function(){if(ri<ROLES.length){ri++;dessineRoles();}};
|
||
document.getElementById("roleReset").onclick=function(){ri=0;dessineRoles();};
|
||
dessineRoles();
|
||
|
||
/* ---------- 3. adresse du poste ---------- */
|
||
etapesPasAPas("etapes","etprec","etsuiv",[
|
||
["Ouvre les Paramètres","La roue dentée, puis « Réseau et Internet »."],
|
||
["Ouvre ta connexion","Wi-Fi ou Ethernet, puis ses propriétés."],
|
||
["Cherche la ligne « Adresse IPv4 »","C'est ton adresse IP. Note-la dans ton livret."],
|
||
["Compare avec ton voisin","Quels nombres sont identiques ? Lesquels changent ?"]]);
|
||
document.getElementById("constat").onclick=function(){document.getElementById("constatTxt").classList.toggle("on");};
|
||
|
||
/* ---------- 4. schema a completer ---------- */
|
||
var MOTS5=["adresse IP","connexion","routeur","Internet","serveur"];
|
||
var zc=document.getElementById("cases");
|
||
MOTS5.forEach(function(m,i){
|
||
var l=document.createElement("label");l.textContent="Case "+(i+1);
|
||
var s=document.createElement("select");s.add(new Option("choisir…",""));
|
||
["adresse IP","connexion","Internet","routeur","serveur"].forEach(function(o){s.add(new Option(o,o));});
|
||
l.appendChild(s);zc.appendChild(l);
|
||
});
|
||
document.getElementById("verifier").onclick=function(){
|
||
var ok=0;zc.querySelectorAll("select").forEach(function(s,i){var b=s.value===MOTS5[i];s.classList.remove("ok","ko");if(s.value)s.classList.add(b?"ok":"ko");if(b)ok++;});
|
||
document.getElementById("casesMsg").textContent=ok===5?"Bravo, le trajet est complet.":ok+" case"+(ok>1?"s":"")+" sur 5. Suis le trajet dans l'ordre : le poste, le lien, l'appareil qui oriente, le réseau des réseaux, puis le serveur.";
|
||
};
|
||
document.getElementById("casesReset").onclick=function(){zc.querySelectorAll("select").forEach(function(s){s.value="";s.classList.remove("ok","ko");});document.getElementById("casesMsg").textContent="";};
|
||
|
||
/* ---------- moteur de questions ---------- */
|
||
var rep={},TOTAL=20;
|
||
function poser(zone,cle,txt,opts,bon,expl,compte){
|
||
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;d.classList.add("done",i===bon?"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");});
|
||
if(compte)maj();};
|
||
z.appendChild(b);});
|
||
zone.appendChild(d);
|
||
}
|
||
function maj(){var n=Object.keys(rep).filter(function(k){return k.charAt(0)!=="z";}).length;document.getElementById("avancement").textContent=n+" / "+TOTAL;document.getElementById("jauge").style.width=(n/TOTAL*100)+"%";document.getElementById("sEx").textContent=n+" sur "+TOTAL;}
|
||
|
||
var OPT1=["Réseau","Connexion","Adresse IP","Routeur"];
|
||
var EX1=[["Des appareils reliés entre eux pour échanger des informations.",0,"C'est un réseau. Celui d'un seul lieu s'appelle un réseau local."],
|
||
["Le lien entre un appareil et le réseau, par câble ou par wifi.",1,"C'est la connexion : la route qui mène au réseau."],
|
||
["Quatre nombres qui identifient un appareil.",2,"C'est l'adresse IP, comme 10.0.2.3."],
|
||
["L'appareil qui relie le réseau local aux autres réseaux.",3,"C'est le routeur. Il lit l'adresse et oriente le message."],
|
||
["Chez toi, il est caché dans la box du fournisseur d'accès.",3,"La box contient un routeur, et aussi une borne wifi."],
|
||
["Sans elle, la réponse ne sait pas où revenir.",2,"L'adresse IP de l'expéditeur. C'est pour ça qu'il fallait l'écrire dans le jeu."]];
|
||
var EX2=[["Juste après « je me connecte au réseau », que se passe-t-il ?",["Je reçois une adresse IP","La demande arrive au serveur","Le serveur renvoie la page"],0,"Le routeur donne une adresse à l'appareil qui se connecte. Ensuite seulement, la demande peut partir."],
|
||
["Qui envoie ma demande hors du réseau local ?",["Le navigateur","Le routeur","Le serveur"],1,"Le routeur relie le réseau local aux autres réseaux."],
|
||
["Où se trouve le site que je demande ?",["Dans mon routeur","Sur un serveur","Dans mon navigateur"],1,"Les sites sont rangés sur des serveurs, quelque part dans le monde."],
|
||
["Par où revient la page ?",["Directement dans mon écran","Par le même chemin, jusqu'à mon adresse","Par le wifi du voisin"],1,"Elle refait le trajet à l'envers, grâce à l'adresse de l'expéditeur."]];
|
||
var VF=["Vrai","Faux"];
|
||
var EX3=[["Deux postes de la même classe ont exactement la même adresse IP.",1,"Faux. Chaque appareil a sa propre adresse : le début est le même, la fin change."],
|
||
["Le wifi est une connexion sans fil.",0,"Vrai. Une connexion peut passer par un câble ou par le wifi."],
|
||
["Si le routeur tombe en panne, le réseau local est coupé des autres réseaux.",0,"Vrai. Les appareils restent reliés entre eux, mais plus rien ne sort ni n'entre."],
|
||
["Une adresse IP, c'est comme un mot de passe.",1,"Faux. Une adresse sert à trouver un appareil, pas à prouver qui on est."],
|
||
["Le routeur lit le contenu de tous les messages.",1,"Faux. Il lit seulement l'adresse, comme le routeur du jeu ne lisait que le troisième nombre."],
|
||
["Pour trouver l'adresse IP de mon poste, je la lis dans ses paramètres.",0,"Vrai. Un site web te donnerait l'adresse de toute l'école, la même pour tout le monde."]];
|
||
var EX4=[["Ton téléphone affiche « connecté, sans Internet ». Qu'est-ce qui fonctionne ?",["Rien du tout","La connexion au réseau local","Internet, mais pas le wifi"],1,"Le téléphone est bien relié à la borne, donc au réseau local. C'est la sortie vers Internet qui ne marche pas, souvent à cause de la box."],
|
||
["Dans le jeu, 10.0.2.5 et 10.0.2.9 sont-ils dans le même réseau ?",["Oui","Non"],0,"Le troisième nombre est le même : 2. Même réseau, appareils différents."],
|
||
["Dans le jeu, 10.0.1.4 et 10.0.3.4 sont-ils dans le même réseau ?",["Oui","Non"],1,"Le troisième nombre change : 1 et 3. Deux réseaux différents, même si la fin est pareille."],
|
||
["Un message part de 10.0.1.2 vers 10.0.3.5. Combien de routeurs traverse-t-il ?",["Un","Deux","Trois"],1,"Le routeur du réseau 1, qui l'envoie sur Internet, puis celui du réseau 3, qui le livre."]];
|
||
EX1.forEach(function(q,i){poser(document.getElementById("ex1"),"a"+i,q[0],OPT1,q[1],q[2],true);});
|
||
EX2.forEach(function(q,i){poser(document.getElementById("ex2"),"b"+i,q[0],q[1],q[2],q[3],true);});
|
||
EX3.forEach(function(q,i){poser(document.getElementById("ex3"),"c"+i,q[0],VF,q[1],q[2],true);});
|
||
EX4.forEach(function(q,i){poser(document.getElementById("ex4"),"d"+i,q[0],q[1],q[2],q[3],true);});
|
||
|
||
var OPT5=["Le web","Internet sans le web","Ni l'un ni l'autre"];
|
||
[["Tu lis un article de Wikipédia dans Chrome.",0,"Un navigateur affiche des pages : c'est le web."],
|
||
["Tu envoies un message sur WhatsApp.",1,"L'application utilise Internet, sans navigateur : ce n'est pas le web."],
|
||
["Tu joues en ligne sur une console.",1,"Le jeu passe par Internet, mais pas par le web."],
|
||
["Tu cherches un horaire de bus sur un site, dans ton navigateur.",0,"Un site, dans un navigateur : le web."],
|
||
["Tu regardes une vidéo sur youtube.com, dans ton navigateur.",0,"Le site youtube.com dans un navigateur : le web."],
|
||
["Tu reçois une notification Snapchat.",1,"L'application utilise Internet, sans navigateur."],
|
||
["Tu imprimes un document sur l'imprimante de la classe.",2,"L'imprimante est dans le réseau local. Le document ne sort jamais de l'école : ni Internet, ni le web. Un réseau n'est pas forcément Internet."]
|
||
].forEach(function(q,i){poser(document.getElementById("ex5"),"z"+i,q[0],OPT5,q[1],q[2],false);});
|
||
|
||
function compte(pref,src,idx){var n=0;src.forEach(function(q,i){if(rep[pref+i]===q[idx])n++;});return n;}
|
||
document.getElementById("voir").onclick=function(){
|
||
var s1=compte("a",EX1,1),s2=compte("b",EX2,2),s3=compte("c",EX3,1),s4=compte("d",EX4,2),t=s1+s2+s3+s4;
|
||
document.getElementById("gTotal").textContent=t;
|
||
document.getElementById("gMot").textContent=t>=18?"Très bien. Tu peux passer aux exercices écrits de ton livret.":t>=14?"C'est acquis dans l'ensemble. Relis ton mémo pour les points ratés.":t>=10?"La base est là. Relis la page sur le réseau et le trajet, puis recommence.":"Il faut reprendre. Relis les pages « Je comprends » de ton livret, puis recommence.";
|
||
document.getElementById("gDetail").innerHTML='<table class="grille"><tr><th>Exercice</th><th>Résultat</th></tr><tr><td>1. Le bon mot</td><td><b>'+s1+' / 6</b></td></tr><tr><td>2. Le trajet</td><td><b>'+s2+' / 4</b></td></tr><tr><td>3. Vrai ou faux</td><td><b>'+s3+' / 6</b></td></tr><tr><td>4. Le défi</td><td><b>'+s4+' / 4</b></td></tr></table>';
|
||
var nom=(document.getElementById("nom").value||"").trim()||"...................";
|
||
document.getElementById("recap").value="Cours 4 – exercices – "+nom+"\nBon mot "+s1+"/6 · Trajet "+s2+"/4 · Vrai-faux "+s3+"/6 · Défi "+s4+"/4 · Total "+t+"/20";
|
||
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){}document.getElementById("copie").textContent=ok?"Copié.":"Sélectionne le texte et copie-le à la main.";};
|
||
document.getElementById("reset").onclick=function(){location.reload();};
|
||
|
||
/* ---------- 6. trace ---------- */
|
||
var TRACE=[["Un ",1,", ce sont des appareils reliés entre eux pour échanger des informations. Chaque appareil y est relié par une ",2," : un câble ou le wifi."],
|
||
["Chaque appareil possède une ",3,", quatre nombres qui permettent de le retrouver. Le ",4," lit l'adresse de chaque message et l'envoie dans la bonne direction."],
|
||
[5," est le réseau des réseaux. Quand je demande une page, ma demande voyage jusqu'au ",6," qui la conserve, puis la page revient par le même chemin."],
|
||
["Le ",7," est le logiciel qui affiche les pages. Le ",8," est un service qui utilise Internet, mais ce n'est pas Internet."]];
|
||
var MOTS={1:"réseau",2:"connexion",3:"adresse IP",4:"routeur",5:"Internet",6:"serveur",7:"navigateur",8:"web"};
|
||
var rv=0,zt=document.getElementById("trace");
|
||
function dessineTrace(){zt.innerHTML="<h3>Cours 4. Comment ça circule</h3>"+TRACE.map(function(par){return "<p>"+par.map(function(x){if(typeof x==="number")return x<=rv?'<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=rv+" mot"+(rv>1?"s":"")+" sur 8";}
|
||
document.getElementById("motSuiv").onclick=function(){if(rv<8){rv++;dessineTrace();}};
|
||
document.getElementById("motReset").onclick=function(){rv=0;dessineTrace();};
|
||
dessineTrace();
|
||
|
||
/* ---------- lexique, genere par lexique/build.py ---------- */
|
||
var LEXIQUE=[
|
||
["Adresse IP","Le numéro qui identifie un appareil sur un réseau, écrit en quatre nombres séparés par des points, par exemple 10.0.1.12. Sans adresse, un message ne sait pas où aller."],
|
||
["Box","L'appareil installé à la maison par le fournisseur d'accès. Il contient un routeur et une borne wifi, et relie le réseau de la maison à Internet."],
|
||
["Connexion","Le lien qui relie un appareil à un réseau, par un câble ou sans fil, par le wifi."],
|
||
["Favori","Une page web enregistrée dans le navigateur pour la retrouver en un clic. On en reparle au cours 5."],
|
||
["Fournisseur d'accès","L'entreprise qui relie une maison ou une école à Internet, contre un abonnement."],
|
||
["Internet","Le réseau mondial qui relie entre eux des millions de réseaux. C'est le réseau des réseaux."],
|
||
["Navigateur","Le logiciel qui permet d'afficher les pages du web. Chrome, Firefox, Edge, Safari. Ce n'est pas Internet : c'est un logiciel qui l'utilise."],
|
||
["Page web","Un document affiché par le navigateur, qui peut contenir du texte, des images et des liens vers d'autres pages."],
|
||
["Réseau","Des appareils reliés entre eux pour échanger des informations."],
|
||
["Réseau local","Le réseau d'un seul lieu : une maison, une école, une classe. Ses appareils sont reliés au même routeur."],
|
||
["Routeur","L'appareil qui relie un réseau local à d'autres réseaux. Il lit l'adresse de chaque message et l'envoie dans la bonne direction."],
|
||
["Serveur","Un ordinateur qui reste allumé en permanence pour conserver des fichiers et les fournir à d'autres appareils."],
|
||
["Site web","Un ensemble de pages web qui se trouvent sur un même serveur, sous une même adresse."],
|
||
["Web","Le service qui permet de consulter des pages reliées entre elles par des liens. Il utilise Internet, mais ce n'est pas Internet : les courriels et les jeux en ligne passent aussi par Internet sans être le web."],
|
||
["Wifi","Une connexion sans fil, par ondes radio, entre un appareil et une borne reliée au réseau."]];
|
||
accordeon(document.getElementById("lexique"),LEXIQUE,"définition");
|
||
|
||
dessineRail();
|
||
</script>
|
||
</body>
|
||
</html>
|