first commit ever
This commit is contained in:
lrdlg
Vendored
BIN
Binary file not shown.
@@ -0,0 +1,25 @@
|
|||||||
|
Images à déposer dans ce dossier
|
||||||
|
================================
|
||||||
|
|
||||||
|
peripheriques.html
|
||||||
|
periph.jpg 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.
|
||||||
|
Paysage, environ 1600 x 1000 px.
|
||||||
|
Si le cadrage diffère, ajuster les valeurs left/top des
|
||||||
|
boutons .hs-dot dans peripheriques.html (positions en %).
|
||||||
|
|
||||||
|
vocabulaire.html
|
||||||
|
bureau.png Bureau Windows complet (icônes, fond d'écran, barre des tâches).
|
||||||
|
barre-taches.png Gros plan de la barre des tâches seule, format large.
|
||||||
|
menu-demarrer.png Menu Démarrer ouvert, bouton Démarrer entouré en rouge.
|
||||||
|
dossier.png Icône d'un dossier fermé (type « Mes documents »).
|
||||||
|
dossier-interieur.png Intérieur d'un dossier : un sous-dossier et trois fichiers
|
||||||
|
de types différents.
|
||||||
|
souris.jpg Photo ou illustration d'une souris d'ordinateur.
|
||||||
|
trackpad.jpg Main posée sur le pavé tactile d'un portable.
|
||||||
|
navigateurs.png Logos Chrome, Edge, Firefox, Opera, Safari en bande.
|
||||||
|
onglets.png Haut d'un navigateur : deux onglets, bouton +, barre d'adresse.
|
||||||
|
|
||||||
|
Tant qu'une image est absente, la page affiche un cadre hachuré indiquant
|
||||||
|
le nom du fichier attendu et ce qu'il doit contenir. Rien ne casse.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 637 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 336 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
@@ -0,0 +1,128 @@
|
|||||||
|
/* ==========================================================
|
||||||
|
M. Courcelle — Labo Ordinateur
|
||||||
|
Menubar + menu mobile + pied de page, injectés dans chaque page.
|
||||||
|
Un seul endroit à modifier pour toutes les pages.
|
||||||
|
========================================================== */
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
|
||||||
|
/* ── Structure du menu ──
|
||||||
|
Modifier ici pour ajouter une page. Les entrées sans "href"
|
||||||
|
s'affichent en grisé (« bientôt »). */
|
||||||
|
const MENU = [
|
||||||
|
{
|
||||||
|
label: "L'Ordinateur",
|
||||||
|
items: [
|
||||||
|
{ label: "Labo Ordinateur", href: "index.html", shortcut: "index" },
|
||||||
|
{ sep: true },
|
||||||
|
{ label: "Les périphériques", href: "peripheriques.html" },
|
||||||
|
{ label: "Vocabulaire de base", href: "vocabulaire.html" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Dactylographie",
|
||||||
|
items: [ { label: "Le clavier" }, { label: "Exercices et jeux" } ]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Cybersécurité",
|
||||||
|
items: [ { label: "Les mots de passe" }, { label: "Le phishing" } ]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const stripes = ['as1','as2','as3','as4','as5','as6']
|
||||||
|
.map(c => `<div class="${c}"></div>`).join('');
|
||||||
|
|
||||||
|
function ddItem(it) {
|
||||||
|
if (it.sep) return '<div class="mb-dd-sep"></div>';
|
||||||
|
const sc = it.shortcut ? `<span class="mb-dd-shortcut">${it.shortcut}</span>` : '';
|
||||||
|
if (!it.href) {
|
||||||
|
return `<span class="mb-dd-item dim">${it.label}<span class="mb-dd-shortcut">bientôt</span></span>`;
|
||||||
|
}
|
||||||
|
return `<a class="mb-dd-item" href="${it.href}">${it.label}${sc}</a>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const menubar = `
|
||||||
|
<div class="menubar">
|
||||||
|
<div class="apple-stripes">${stripes}</div>
|
||||||
|
<a class="mb-logo" href="index.html">M. Courcelle</a>
|
||||||
|
${MENU.map(m => `
|
||||||
|
<div class="mb-item">
|
||||||
|
<span class="mb-trigger">${m.label}</span>
|
||||||
|
<div class="mb-dropdown">${m.items.map(ddItem).join('')}</div>
|
||||||
|
</div>`).join('')}
|
||||||
|
<button class="mb-hamburger" id="mb-hamburger" aria-label="Menu">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
</button>
|
||||||
|
<div class="mb-right">
|
||||||
|
<button class="mb-dyslexic-btn" id="mb-dyslexic-btn">
|
||||||
|
<span class="mb-dy-dot"></span>Lisibilité
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-mobile-menu" id="mb-mobile-menu">
|
||||||
|
${MENU.map(m => `
|
||||||
|
<div class="mb-mob-section">
|
||||||
|
<div class="mb-mob-label">${m.label}</div>
|
||||||
|
${m.items.filter(i => !i.sep).map(i => i.href
|
||||||
|
? `<a class="mb-mob-item" href="${i.href}">${i.label}</a>`
|
||||||
|
: `<span class="mb-mob-item" style="color:var(--dim)">${i.label} — bientôt</span>`
|
||||||
|
).join('')}
|
||||||
|
</div>
|
||||||
|
<div class="mb-mob-sep"></div>`).join('')}
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
const footer = `
|
||||||
|
<footer>
|
||||||
|
<div class="footer-inner">
|
||||||
|
<div>
|
||||||
|
<div class="footer-logo">
|
||||||
|
<span style="color:#E03A3E">M</span><span style="color:#F58220">.</span> <span style="color:#FDB827">C</span><span style="color:#61BB46">o</span><span style="color:#009DDC">u</span><span style="color:#963D97">r</span><span style="color:#E03A3E">c</span><span style="color:#F58220">e</span><span style="color:#FDB827">l</span><span style="color:#61BB46">l</span><span style="color:#009DDC">e</span>
|
||||||
|
</div>
|
||||||
|
<p class="footer-copy">© 2026 M. Courcelle — Labo Ordinateur</p>
|
||||||
|
</div>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="index.html">Accueil</a></li>
|
||||||
|
<li><a href="peripheriques.html">Les périphériques</a></li>
|
||||||
|
<li><a href="vocabulaire.html">Vocabulaire de base</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</footer>`;
|
||||||
|
|
||||||
|
/* ── Injection ── */
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
document.body.insertAdjacentHTML('afterbegin', menubar);
|
||||||
|
document.body.insertAdjacentHTML('beforeend', footer);
|
||||||
|
|
||||||
|
// Hamburger
|
||||||
|
const btn = document.getElementById('mb-hamburger');
|
||||||
|
const menu = document.getElementById('mb-mobile-menu');
|
||||||
|
btn.addEventListener('click', function () {
|
||||||
|
const open = menu.classList.toggle('open');
|
||||||
|
btn.classList.toggle('open', open);
|
||||||
|
document.body.style.overflow = open ? 'hidden' : '';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mode lisibilité (dyslexie)
|
||||||
|
const dy = document.getElementById('mb-dyslexic-btn');
|
||||||
|
if (localStorage.getItem('courcelle_lisibilite') === '1') document.body.classList.add('dyslexic');
|
||||||
|
dy.addEventListener('click', function () {
|
||||||
|
const on = !document.body.classList.contains('dyslexic');
|
||||||
|
document.body.classList.toggle('dyslexic', on);
|
||||||
|
localStorage.setItem('courcelle_lisibilite', on ? '1' : '0');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Repli visuel pour les images pas encore en place
|
||||||
|
document.querySelectorAll('img[data-todo]').forEach(function (img) {
|
||||||
|
img.addEventListener('error', function () {
|
||||||
|
const box = document.createElement('div');
|
||||||
|
box.className = 'img-todo';
|
||||||
|
box.innerHTML = '<strong>Image à placer</strong>'
|
||||||
|
+ '<span>' + img.getAttribute('src') + '</span>'
|
||||||
|
+ '<span>' + img.getAttribute('data-todo') + '</span>';
|
||||||
|
img.replaceWith(box);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
||||||
@@ -0,0 +1,706 @@
|
|||||||
|
/* ==========================================================
|
||||||
|
M. Courcelle — Labo Ordinateur
|
||||||
|
Feuille de style autonome (aucune dépendance externe)
|
||||||
|
Encodage UTF-8
|
||||||
|
========================================================== */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Palette beige */
|
||||||
|
--bg: #F0EFEA;
|
||||||
|
--bg2: #E8E6E0;
|
||||||
|
--bg3: #DDDBD4;
|
||||||
|
--white: #FFFFFF;
|
||||||
|
|
||||||
|
/* Texte */
|
||||||
|
--text: #1A1A1A;
|
||||||
|
--text2: #444444;
|
||||||
|
--dim: #888888;
|
||||||
|
|
||||||
|
/* Bordures et ombres */
|
||||||
|
--border: #B0ADA8;
|
||||||
|
--border2: #CCCAC4;
|
||||||
|
--shadow: 0 8px 32px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
|
||||||
|
--shadow-sm: 0 2px 8px rgba(0,0,0,.08);
|
||||||
|
|
||||||
|
/* Couleurs arc-en-ciel */
|
||||||
|
--apple-r: #E03A3E;
|
||||||
|
--apple-o: #F58220;
|
||||||
|
--apple-y: #FDB827;
|
||||||
|
--apple-g: #61BB46;
|
||||||
|
--apple-b: #009DDC;
|
||||||
|
--apple-p: #963D97;
|
||||||
|
|
||||||
|
--accent: #009DDC;
|
||||||
|
--accent2: #0077AA;
|
||||||
|
|
||||||
|
/* Couleurs fonctionnelles */
|
||||||
|
--c-entree: #009DDC;
|
||||||
|
--c-sortie: #F58220;
|
||||||
|
--c-uc: #963D97;
|
||||||
|
--c-ok: #61BB46;
|
||||||
|
--c-err: #E03A3E;
|
||||||
|
|
||||||
|
/* Typographie : piles système, aucune police à télécharger */
|
||||||
|
--fd: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
--ft: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
--fm: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
||||||
|
|
||||||
|
--fs-xs: 0.78rem;
|
||||||
|
--fs-sm: 0.90rem;
|
||||||
|
--fs-md: 1.00rem;
|
||||||
|
--fs-lg: 1.13rem;
|
||||||
|
--fs-xl: 1.30rem;
|
||||||
|
--fs-2xl: 1.70rem;
|
||||||
|
|
||||||
|
--radius: 8px;
|
||||||
|
--radius-lg: 12px;
|
||||||
|
--transition: all .20s ease;
|
||||||
|
--menubar-h: 30px;
|
||||||
|
|
||||||
|
--labo: #E03A3E;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mode dyslexique : sans police externe, on agit sur l'espacement */
|
||||||
|
body.dyslexic {
|
||||||
|
--fs-md: 1.10rem;
|
||||||
|
--fs-sm: 1.00rem;
|
||||||
|
}
|
||||||
|
body.dyslexic p,
|
||||||
|
body.dyslexic li,
|
||||||
|
body.dyslexic .cat-item-text,
|
||||||
|
body.dyslexic .qcm-opt {
|
||||||
|
line-height: 2.0 !important;
|
||||||
|
letter-spacing: .04em !important;
|
||||||
|
word-spacing: .10em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Reset ── */
|
||||||
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: var(--ft);
|
||||||
|
font-size: var(--fs-md);
|
||||||
|
line-height: 1.65;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
img { max-width: 100%; display: block; }
|
||||||
|
a { color: var(--accent); text-decoration: none; transition: var(--transition); }
|
||||||
|
a:hover { color: var(--accent2); }
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
MENUBAR
|
||||||
|
========================================================== */
|
||||||
|
.menubar {
|
||||||
|
position: sticky; top: 0; z-index: 20000;
|
||||||
|
background: rgba(255,255,254,.94);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
-webkit-backdrop-filter: blur(16px);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
height: var(--menubar-h);
|
||||||
|
display: flex; align-items: center;
|
||||||
|
padding: 0 .75rem;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.apple-stripes {
|
||||||
|
display: flex; gap: 2px; align-items: flex-end;
|
||||||
|
height: 14px; margin-right: .5rem; flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.apple-stripes div { width: 3px; border-radius: 2px; }
|
||||||
|
.as1 { height: 14px; background: var(--apple-g); }
|
||||||
|
.as2 { height: 11px; background: var(--apple-y); }
|
||||||
|
.as3 { height: 13px; background: var(--apple-o); }
|
||||||
|
.as4 { height: 10px; background: var(--apple-r); }
|
||||||
|
.as5 { height: 12px; background: var(--apple-p); }
|
||||||
|
.as6 { height: 9px; background: var(--apple-b); }
|
||||||
|
|
||||||
|
.mb-logo {
|
||||||
|
font-size: .80rem; font-weight: 800; color: var(--text);
|
||||||
|
padding: 0 .5rem; line-height: var(--menubar-h);
|
||||||
|
white-space: nowrap; border-radius: 4px;
|
||||||
|
}
|
||||||
|
.mb-logo:hover { background: rgba(0,0,0,.06); color: var(--text); }
|
||||||
|
|
||||||
|
.mb-item { position: relative; height: var(--menubar-h); display: flex; align-items: center; }
|
||||||
|
.mb-trigger {
|
||||||
|
display: flex; align-items: center;
|
||||||
|
height: var(--menubar-h); padding: 0 .55rem;
|
||||||
|
font-size: .74rem; font-weight: 500;
|
||||||
|
color: var(--text); cursor: default;
|
||||||
|
border-radius: 4px; white-space: nowrap;
|
||||||
|
}
|
||||||
|
.mb-item:hover .mb-trigger { background: var(--apple-b); color: #fff; }
|
||||||
|
|
||||||
|
.mb-dropdown {
|
||||||
|
display: none;
|
||||||
|
position: absolute; top: calc(100% + 1px); left: 0;
|
||||||
|
min-width: 220px;
|
||||||
|
background: rgba(245,244,240,.98);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 8px 30px rgba(0,0,0,.18);
|
||||||
|
padding: .3rem 0; z-index: 20001;
|
||||||
|
}
|
||||||
|
.mb-item:hover .mb-dropdown { display: block; }
|
||||||
|
.mb-dd-item {
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
padding: .3rem 1rem; font-size: .78rem; color: var(--text);
|
||||||
|
gap: 1.5rem; white-space: nowrap;
|
||||||
|
}
|
||||||
|
.mb-dd-item:hover { background: var(--apple-b); color: #fff; border-radius: 4px; margin: 0 .3rem; padding: .3rem .7rem; }
|
||||||
|
.mb-dd-item.dim { color: var(--dim); pointer-events: none; }
|
||||||
|
.mb-dd-sep { height: 1px; background: var(--border2); margin: .3rem .5rem; }
|
||||||
|
.mb-dd-shortcut { font-family: var(--fm); font-size: .66rem; color: var(--dim); }
|
||||||
|
.mb-dd-item:hover .mb-dd-shortcut { color: rgba(255,255,255,.75); }
|
||||||
|
|
||||||
|
.mb-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
|
||||||
|
.mb-dyslexic-btn {
|
||||||
|
display: flex; align-items: center; gap: .35rem;
|
||||||
|
background: none; border: none; cursor: pointer;
|
||||||
|
font-family: var(--fm); font-size: .66rem; color: var(--dim);
|
||||||
|
padding: 0 .4rem; height: var(--menubar-h); border-radius: 3px;
|
||||||
|
}
|
||||||
|
.mb-dyslexic-btn:hover { background: rgba(0,0,0,.07); color: var(--text); }
|
||||||
|
body.dyslexic .mb-dyslexic-btn { color: var(--apple-b); }
|
||||||
|
.mb-dy-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
|
||||||
|
body.dyslexic .mb-dy-dot { background: var(--apple-b); }
|
||||||
|
|
||||||
|
/* Hamburger + menu mobile */
|
||||||
|
.mb-hamburger {
|
||||||
|
display: none; flex-direction: column; justify-content: center; gap: 4px;
|
||||||
|
background: none; border: none; cursor: pointer;
|
||||||
|
padding: 0 .4rem; height: var(--menubar-h); border-radius: 3px;
|
||||||
|
}
|
||||||
|
.mb-hamburger span { display: block; width: 17px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; }
|
||||||
|
.mb-hamburger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
|
||||||
|
.mb-hamburger.open span:nth-child(2) { opacity: 0; }
|
||||||
|
.mb-hamburger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
|
||||||
|
|
||||||
|
.mb-mobile-menu {
|
||||||
|
display: none;
|
||||||
|
position: fixed; top: var(--menubar-h); left: 0; right: 0; bottom: 0;
|
||||||
|
background: rgba(245,244,240,.98);
|
||||||
|
z-index: 19999; overflow-y: auto;
|
||||||
|
padding: .5rem 0 2rem; border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.mb-mobile-menu.open { display: block; }
|
||||||
|
.mb-mob-section { padding: .75rem 1rem .25rem; }
|
||||||
|
.mb-mob-label {
|
||||||
|
font-family: var(--fm); font-size: .62rem; font-weight: 700;
|
||||||
|
letter-spacing: .12em; text-transform: uppercase;
|
||||||
|
color: var(--dim); padding: 0 .25rem;
|
||||||
|
}
|
||||||
|
.mb-mob-item { display: block; padding: .65rem .5rem; font-size: .92rem; color: var(--text); border-radius: 8px; }
|
||||||
|
.mb-mob-item:hover { background: rgba(0,0,0,.05); color: var(--text); }
|
||||||
|
.mb-mob-sep { height: 1px; background: var(--border2); margin: .5rem 1rem; }
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.mb-item { display: none; }
|
||||||
|
.mb-hamburger { display: flex; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
BUREAU + FENÊTRES
|
||||||
|
========================================================== */
|
||||||
|
.page-desktop {
|
||||||
|
padding: 2rem;
|
||||||
|
flex: 1;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 60% 40% at 90% 10%, rgba(224,58,62,.05) 0%, transparent 60%),
|
||||||
|
var(--bg);
|
||||||
|
}
|
||||||
|
.page-window {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid var(--border2);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 1060px;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
}
|
||||||
|
.page-win-chrome {
|
||||||
|
background: linear-gradient(to bottom, #F8F7F4, #E8E6E0);
|
||||||
|
border-bottom: 1px solid var(--border2);
|
||||||
|
padding: .5rem .9rem;
|
||||||
|
display: flex; align-items: center; gap: .5rem;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.traffic { display: flex; gap: 5px; }
|
||||||
|
.t-r, .t-y, .t-g { width: 12px; height: 12px; border-radius: 50%; }
|
||||||
|
.t-r { background: #FF5F57; border: 1px solid #E0443E; }
|
||||||
|
.t-y { background: #FEBC2E; border: 1px solid #D9A01C; }
|
||||||
|
.t-g { background: #28C840; border: 1px solid #1BAD2E; }
|
||||||
|
.page-win-title {
|
||||||
|
flex: 1; text-align: center;
|
||||||
|
font-family: var(--fm); font-size: .74rem; font-weight: 600; color: var(--dim);
|
||||||
|
}
|
||||||
|
.page-win-body { padding: 2rem 2.5rem; }
|
||||||
|
.page-statusbar {
|
||||||
|
background: var(--bg2); border-top: 1px solid var(--border2);
|
||||||
|
padding: .38rem 1rem;
|
||||||
|
font-family: var(--fm); font-size: .68rem; color: var(--dim);
|
||||||
|
display: flex; justify-content: space-between; gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Titres et fil d'Ariane ── */
|
||||||
|
.page-breadcrumb {
|
||||||
|
font-size: var(--fs-xs); color: var(--dim);
|
||||||
|
margin-bottom: .75rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.page-breadcrumb a { color: var(--text2); }
|
||||||
|
.page-breadcrumb a:hover { color: var(--text); }
|
||||||
|
.page-h1 {
|
||||||
|
font-family: var(--fd); font-size: clamp(1.6rem, 3vw, 2.2rem);
|
||||||
|
font-weight: 900; letter-spacing: -.03em; line-height: 1.1;
|
||||||
|
color: var(--text); margin-bottom: .6rem;
|
||||||
|
}
|
||||||
|
.page-h1 em { color: var(--labo); font-style: normal; }
|
||||||
|
.page-lead { font-size: var(--fs-sm); color: var(--text2); line-height: 1.75; margin-bottom: 1.25rem; max-width: 560px; }
|
||||||
|
.section-sub { font-size: var(--fs-sm); color: var(--text2); line-height: 1.7; margin-bottom: 1.5rem; max-width: 620px; }
|
||||||
|
|
||||||
|
.back-link {
|
||||||
|
display: inline-flex; align-items: center; gap: .4rem;
|
||||||
|
font-family: var(--fm); font-size: var(--fs-xs);
|
||||||
|
color: var(--text2); background: var(--bg2);
|
||||||
|
border: 1px solid var(--border2); border-radius: 8px;
|
||||||
|
padding: .4rem .9rem; margin-bottom: 1.25rem; cursor: pointer;
|
||||||
|
}
|
||||||
|
.back-link:hover { background: var(--bg3); color: var(--text); }
|
||||||
|
|
||||||
|
.rainbow-line { display: flex; height: 3px; border-radius: 2px; overflow: hidden; margin-bottom: 1.75rem; }
|
||||||
|
.rainbow-line div { flex: 1; }
|
||||||
|
|
||||||
|
/* ── Hero ── */
|
||||||
|
.hero-layout { display: flex; gap: 3rem; align-items: center; }
|
||||||
|
.hero-text { flex: 1; min-width: 0; }
|
||||||
|
.hero-visual-side { flex: 0 0 160px; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
|
||||||
|
.hero-big-icon {
|
||||||
|
width: 90px; height: 90px; border-radius: 22px;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-size: 2.8rem;
|
||||||
|
background: rgba(224,58,62,.09);
|
||||||
|
box-shadow: 0 4px 18px rgba(224,58,62,.12);
|
||||||
|
}
|
||||||
|
.hero-labo-badge {
|
||||||
|
font-family: var(--fm); font-size: .64rem; font-weight: 700;
|
||||||
|
letter-spacing: .15em; text-transform: uppercase;
|
||||||
|
color: var(--labo); padding: .2rem .65rem;
|
||||||
|
border: 1px solid rgba(224,58,62,.25); border-radius: 99px;
|
||||||
|
background: rgba(224,58,62,.06);
|
||||||
|
}
|
||||||
|
.lecon-meta { display: flex; gap: 1.25rem; flex-wrap: wrap; }
|
||||||
|
.lecon-meta-item { font-family: var(--fm); font-size: var(--fs-xs); color: var(--dim); display: flex; align-items: center; gap: .35rem; }
|
||||||
|
.lecon-meta-item strong { color: var(--c-entree); }
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
IMAGES : repli si le fichier n'est pas encore en place
|
||||||
|
========================================================== */
|
||||||
|
.img-todo {
|
||||||
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||||
|
gap: .4rem; min-height: 180px; padding: 1.5rem;
|
||||||
|
background: repeating-linear-gradient(45deg, var(--bg2), var(--bg2) 12px, var(--bg3) 12px, var(--bg3) 24px);
|
||||||
|
border: 2px dashed var(--border); border-radius: var(--radius);
|
||||||
|
font-family: var(--fm); font-size: var(--fs-xs); color: var(--text2); text-align: center;
|
||||||
|
}
|
||||||
|
.img-todo strong { color: var(--labo); font-size: var(--fs-sm); }
|
||||||
|
.img-todo span { color: var(--dim); }
|
||||||
|
|
||||||
|
figure.lecon-figure {
|
||||||
|
margin: 1.25rem auto; max-width: 720px;
|
||||||
|
border: 1px solid var(--border2); border-radius: var(--radius);
|
||||||
|
overflow: hidden; background: var(--bg2);
|
||||||
|
}
|
||||||
|
figure.lecon-figure img { width: 100%; height: auto; }
|
||||||
|
figure.lecon-figure figcaption {
|
||||||
|
font-family: var(--fm); font-size: var(--fs-xs); color: var(--dim);
|
||||||
|
padding: .5rem 1rem; text-align: center;
|
||||||
|
}
|
||||||
|
.figure-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
||||||
|
@media (max-width: 700px) { .figure-duo { grid-template-columns: 1fr; } }
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
IMAGE INTERACTIVE (hotspots)
|
||||||
|
========================================================== */
|
||||||
|
.periph-img-wrap {
|
||||||
|
position: relative; display: block;
|
||||||
|
max-width: 860px; margin: 0 auto;
|
||||||
|
border-radius: var(--radius); overflow: hidden;
|
||||||
|
box-shadow: 0 4px 24px rgba(0,0,0,.12);
|
||||||
|
border: 1px solid var(--border2);
|
||||||
|
background: var(--bg2);
|
||||||
|
}
|
||||||
|
.periph-img-wrap img { display: block; width: 100%; height: auto; }
|
||||||
|
.hs-dot {
|
||||||
|
position: absolute; transform: translate(-50%, -50%);
|
||||||
|
width: 32px; height: 32px; border-radius: 50%;
|
||||||
|
cursor: pointer; z-index: 10;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
transition: transform .2s ease;
|
||||||
|
border: 2px solid rgba(255,255,255,.6);
|
||||||
|
}
|
||||||
|
.hs-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; animation: hs-pulse 2s ease-out infinite; }
|
||||||
|
.hs-dot.entree { background: rgba(0,157,220,.85); box-shadow: 0 0 0 3px rgba(0,157,220,.25); }
|
||||||
|
.hs-dot.entree::before { background: rgba(0,157,220,.4); }
|
||||||
|
.hs-dot.sortie { background: rgba(245,130,32,.85); box-shadow: 0 0 0 3px rgba(245,130,32,.25); }
|
||||||
|
.hs-dot.sortie::before { background: rgba(245,130,32,.4); }
|
||||||
|
.hs-dot.uc { background: rgba(150,61,151,.85); box-shadow: 0 0 0 3px rgba(150,61,151,.25); }
|
||||||
|
.hs-dot.uc::before { background: rgba(150,61,151,.4); }
|
||||||
|
.hs-dot:hover { transform: translate(-50%,-50%) scale(1.2); }
|
||||||
|
.hs-dot.active { transform: translate(-50%,-50%) scale(1.3); }
|
||||||
|
.hs-dot-icon { font-size: .8rem; position: relative; z-index: 1; }
|
||||||
|
@keyframes hs-pulse {
|
||||||
|
0% { transform: scale(1); opacity: .8; }
|
||||||
|
70% { transform: scale(2.2); opacity: 0; }
|
||||||
|
100% { transform: scale(2.2); opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.hs-infobox {
|
||||||
|
max-width: 860px; margin: .5rem auto 0;
|
||||||
|
background: var(--bg2);
|
||||||
|
border: 1px solid var(--border2); border-top: 3px solid var(--c-entree);
|
||||||
|
border-radius: 0 0 var(--radius) var(--radius);
|
||||||
|
padding: 1rem 1.25rem; display: none;
|
||||||
|
}
|
||||||
|
.hs-infobox.visible { display: block; }
|
||||||
|
.hs-infobox.cat-sortie { border-top-color: var(--c-sortie); }
|
||||||
|
.hs-infobox.cat-uc { border-top-color: var(--c-uc); }
|
||||||
|
.hs-infobox-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
|
||||||
|
.hs-infobox-emoji { font-size: 1.4rem; flex-shrink: 0; }
|
||||||
|
.hs-infobox-name { font-family: var(--fd); font-size: var(--fs-md); font-weight: 800; color: var(--text); flex: 1; }
|
||||||
|
.hs-infobox-badge {
|
||||||
|
font-family: var(--fm); font-size: .64rem;
|
||||||
|
padding: .15rem .5rem; border-radius: 3px;
|
||||||
|
text-transform: uppercase; letter-spacing: .08em; flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.badge-entree { background: rgba(0,157,220,.1); color: var(--c-entree); border: 1px solid rgba(0,157,220,.25); }
|
||||||
|
.badge-sortie { background: rgba(245,130,32,.1); color: var(--c-sortie); border: 1px solid rgba(245,130,32,.25); }
|
||||||
|
.badge-uc { background: rgba(150,61,151,.1); color: var(--c-uc); border: 1px solid rgba(150,61,151,.25); }
|
||||||
|
.hs-infobox-close { background: none; border: none; color: var(--dim); font-size: 1.1rem; cursor: pointer; padding-left: .75rem; }
|
||||||
|
.hs-infobox-close:hover { color: var(--text); }
|
||||||
|
.hs-infobox-desc { font-size: var(--fs-sm); color: var(--text2); line-height: 1.65; margin-bottom: .35rem; }
|
||||||
|
.hs-infobox-detail { font-family: var(--fm); font-size: var(--fs-xs); color: var(--dim); font-style: italic; }
|
||||||
|
.hs-hint { text-align: center; font-family: var(--fm); font-size: var(--fs-xs); color: var(--dim); margin-top: .75rem; }
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
CARTES CATÉGORIES
|
||||||
|
========================================================== */
|
||||||
|
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
|
||||||
|
.cat-card {
|
||||||
|
background: var(--bg); border: 1px solid var(--border2);
|
||||||
|
border-radius: 10px; padding: 1.25rem 1.4rem;
|
||||||
|
position: relative; overflow: hidden;
|
||||||
|
}
|
||||||
|
.cat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
|
||||||
|
.cat-card.entree::before { background: var(--c-entree); }
|
||||||
|
.cat-card.sortie::before { background: var(--c-sortie); }
|
||||||
|
.cat-card.uc::before { background: var(--c-uc); }
|
||||||
|
.cat-card-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
|
||||||
|
.cat-card-icon { font-size: 1.75rem; }
|
||||||
|
.cat-card-title { font-family: var(--fd); font-size: var(--fs-sm); font-weight: 800; color: var(--text); }
|
||||||
|
.cat-card-subtitle { font-family: var(--fm); font-size: var(--fs-xs); margin-top: .1rem; }
|
||||||
|
.cat-card.entree .cat-card-subtitle { color: var(--c-entree); }
|
||||||
|
.cat-card.sortie .cat-card-subtitle { color: var(--c-sortie); }
|
||||||
|
.cat-card.uc .cat-card-subtitle { color: var(--c-uc); }
|
||||||
|
.cat-card-def { font-size: var(--fs-sm); color: var(--text2); line-height: 1.65; margin-bottom: 1rem; }
|
||||||
|
.cat-item-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
|
||||||
|
.cat-item { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-sm); color: var(--text2); }
|
||||||
|
.cat-item-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: .45em; }
|
||||||
|
.cat-item-text { flex: 1; line-height: 1.55; }
|
||||||
|
.entree .cat-item-dot { background: var(--c-entree); }
|
||||||
|
.sortie .cat-item-dot { background: var(--c-sortie); }
|
||||||
|
.uc .cat-item-dot { background: var(--c-uc); }
|
||||||
|
.cat-item strong { color: var(--text); }
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
GRILLE DE CARTES (hub vocabulaire / accueil)
|
||||||
|
========================================================== */
|
||||||
|
.notion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
|
||||||
|
.notion-card {
|
||||||
|
background: var(--white); border: 1px solid var(--border2);
|
||||||
|
border-radius: var(--radius-lg); padding: 1.25rem;
|
||||||
|
cursor: pointer; text-align: left; width: 100%;
|
||||||
|
font-family: var(--ft); color: inherit;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
transition: var(--transition);
|
||||||
|
position: relative; overflow: hidden;
|
||||||
|
}
|
||||||
|
.notion-card::before {
|
||||||
|
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
|
||||||
|
background: var(--card-color, var(--accent)); opacity: 0; transition: var(--transition);
|
||||||
|
}
|
||||||
|
.notion-card:hover { transform: translateY(-3px); border-color: var(--card-color, var(--accent)); box-shadow: var(--shadow); }
|
||||||
|
.notion-card:hover::before { opacity: 1; }
|
||||||
|
.notion-card-icon { font-size: 2rem; display: block; margin-bottom: .6rem; }
|
||||||
|
.notion-card-title { font-family: var(--fd); font-size: var(--fs-md); font-weight: 700; color: var(--text); margin-bottom: .25rem; }
|
||||||
|
.notion-card-desc { font-size: var(--fs-sm); color: var(--text2); line-height: 1.5; }
|
||||||
|
.notion-card-tag {
|
||||||
|
display: inline-block; margin-top: .7rem;
|
||||||
|
font-family: var(--fm); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
|
||||||
|
color: var(--card-color, var(--accent));
|
||||||
|
border: 1px solid var(--card-color, var(--accent));
|
||||||
|
border-radius: 4px; padding: .1rem .45rem; opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
CONTENU D'UNE CARTE
|
||||||
|
========================================================== */
|
||||||
|
.carte-title {
|
||||||
|
font-family: var(--fd); font-size: var(--fs-2xl); font-weight: 900;
|
||||||
|
color: var(--text); letter-spacing: -.02em;
|
||||||
|
padding-left: .8rem; border-left: 4px solid var(--labo);
|
||||||
|
margin-bottom: 1.25rem; display: flex; align-items: center; gap: .5rem;
|
||||||
|
}
|
||||||
|
.carte-intro { font-size: var(--fs-md); color: var(--text2); line-height: 1.8; margin-bottom: 1.25rem; }
|
||||||
|
.carte-h3 {
|
||||||
|
font-family: var(--fd); font-size: var(--fs-lg); font-weight: 800;
|
||||||
|
color: var(--accent); margin: 1.75rem 0 .9rem;
|
||||||
|
}
|
||||||
|
.carte-list { list-style: none; display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1rem; }
|
||||||
|
.carte-list li { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--fs-md); color: var(--text2); line-height: 1.6; }
|
||||||
|
.carte-list li::before { content: '●'; color: var(--labo); font-size: .6rem; margin-top: .55em; flex-shrink: 0; }
|
||||||
|
.carte-list strong { color: var(--text); }
|
||||||
|
|
||||||
|
code, .kbd, .term {
|
||||||
|
font-family: var(--fm); font-size: .88em;
|
||||||
|
border-radius: 5px; padding: .12em .45em;
|
||||||
|
}
|
||||||
|
.term { background: rgba(245,130,32,.10); color: var(--apple-o); border: 1px solid rgba(245,130,32,.28); }
|
||||||
|
.kbd { background: var(--bg2); color: var(--text); border: 1px solid var(--border); box-shadow: 0 1px 0 var(--border); }
|
||||||
|
|
||||||
|
.callout {
|
||||||
|
display: flex; gap: .9rem; align-items: flex-start;
|
||||||
|
padding: 1rem 1.25rem; border-radius: var(--radius);
|
||||||
|
border-left: 4px solid; margin: 1.25rem 0;
|
||||||
|
font-size: var(--fs-md); color: var(--text2); line-height: 1.7;
|
||||||
|
}
|
||||||
|
.callout .callout-icon { font-size: 1.3rem; flex-shrink: 0; }
|
||||||
|
.callout.tip { background: rgba(97,187,70,.08); border-color: var(--apple-g); }
|
||||||
|
.callout.info { background: rgba(0,157,220,.07); border-color: var(--apple-b); }
|
||||||
|
.callout.warning { background: rgba(253,184,39,.10); border-color: var(--apple-y); }
|
||||||
|
.callout strong { color: var(--text); }
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
EXERCICES — commun
|
||||||
|
========================================================== */
|
||||||
|
.exo-num {
|
||||||
|
font-family: var(--fm); font-size: .64rem; font-weight: 700;
|
||||||
|
letter-spacing: .15em; text-transform: uppercase;
|
||||||
|
color: var(--labo); margin-bottom: .3rem;
|
||||||
|
}
|
||||||
|
.exo-title { font-family: var(--fd); font-size: var(--fs-md); font-weight: 800; color: var(--text); margin-bottom: .3rem; }
|
||||||
|
.exo-desc { font-size: var(--fs-sm); color: var(--text2); line-height: 1.6; margin-bottom: 1.5rem; }
|
||||||
|
|
||||||
|
.exo-btn {
|
||||||
|
display: inline-flex; align-items: center; gap: .5rem;
|
||||||
|
font-family: var(--fm); font-size: var(--fs-sm);
|
||||||
|
padding: .55rem 1.2rem; border-radius: var(--radius);
|
||||||
|
border: none; cursor: pointer; transition: filter .15s;
|
||||||
|
}
|
||||||
|
.exo-btn-primary { background: var(--labo); color: #fff; font-weight: 600; }
|
||||||
|
.exo-btn-primary:hover { filter: brightness(1.1); }
|
||||||
|
.exo-btn-reset { background: var(--bg2); color: var(--text2); border: 1px solid var(--border2); }
|
||||||
|
.exo-btn-reset:hover { background: var(--bg3); color: var(--text); }
|
||||||
|
.exo-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
|
||||||
|
|
||||||
|
.exo-feedback { margin-top: 1rem; padding: .85rem 1.1rem; border-radius: var(--radius); font-size: var(--fs-sm); line-height: 1.6; display: none; }
|
||||||
|
.exo-feedback.success { background: rgba(97,187,70,.08); border: 1px solid rgba(97,187,70,.3); color: #16a34a; display: block; }
|
||||||
|
.exo-feedback.error { background: rgba(224,58,62,.07); border: 1px solid rgba(224,58,62,.25); color: var(--c-err); display: block; }
|
||||||
|
.exo-feedback.partial { background: rgba(253,184,39,.08); border: 1px solid rgba(253,184,39,.3); color: #b45309; display: block; }
|
||||||
|
|
||||||
|
/* ── Glisser-déposer ── */
|
||||||
|
.dd-items-pool {
|
||||||
|
display: flex; flex-wrap: wrap; gap: .6rem;
|
||||||
|
padding: 1rem; background: var(--bg2);
|
||||||
|
border: 1px dashed var(--border); border-radius: var(--radius);
|
||||||
|
min-height: 64px; margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
.dd-item, .dd-item-placed {
|
||||||
|
display: flex; align-items: center; gap: .45rem;
|
||||||
|
font-family: var(--fm); font-size: var(--fs-sm); color: var(--text);
|
||||||
|
background: #fff; border: 1px solid var(--border2);
|
||||||
|
border-radius: 6px; padding: .35rem .75rem;
|
||||||
|
cursor: grab; user-select: none;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,.07);
|
||||||
|
}
|
||||||
|
.dd-item:active, .dd-item-placed:active { cursor: grabbing; opacity: .6; }
|
||||||
|
.dd-item.dragging { opacity: .4; }
|
||||||
|
.dd-item.correct { border-color: rgba(97,187,70,.6); background: rgba(97,187,70,.08); }
|
||||||
|
.dd-item.incorrect { border-color: rgba(224,58,62,.5); background: rgba(224,58,62,.07); }
|
||||||
|
.dd-item.dd-selected, .dd-item-placed.dd-selected {
|
||||||
|
border-color: var(--c-entree); background: rgba(0,157,220,.10);
|
||||||
|
box-shadow: 0 0 0 2px rgba(0,157,220,.3);
|
||||||
|
}
|
||||||
|
.dd-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
|
||||||
|
.dd-zone {
|
||||||
|
min-height: 120px; padding: .75rem; border-radius: var(--radius);
|
||||||
|
border: 2px dashed; display: flex; flex-direction: column; gap: .5rem;
|
||||||
|
transition: background .15s;
|
||||||
|
}
|
||||||
|
.dd-zone-label {
|
||||||
|
font-family: var(--fd); font-size: var(--fs-xs); font-weight: 700;
|
||||||
|
letter-spacing: .08em; text-transform: uppercase; text-align: center; margin-bottom: .2rem;
|
||||||
|
}
|
||||||
|
.dd-zone.entree { border-color: rgba(0,157,220,.35); }
|
||||||
|
.dd-zone.entree .dd-zone-label { color: var(--c-entree); }
|
||||||
|
.dd-zone.sortie { border-color: rgba(245,130,32,.35); }
|
||||||
|
.dd-zone.sortie .dd-zone-label { color: var(--c-sortie); }
|
||||||
|
.dd-zone.dragover { background: rgba(0,157,220,.05); border-color: rgba(0,157,220,.6); }
|
||||||
|
.dd-zone.sortie.dragover { background: rgba(245,130,32,.05); border-color: rgba(245,130,32,.6); }
|
||||||
|
.dd-zone-empty { font-family: var(--fm); font-size: var(--fs-xs); color: var(--dim); text-align: center; margin: auto; font-style: italic; }
|
||||||
|
.dd-zone.dd-zone-ready { border-style: solid; }
|
||||||
|
.dd-select-hint { font-family: var(--fm); font-size: var(--fs-xs); color: var(--c-entree); text-align: center; margin: .5rem 0 .75rem; }
|
||||||
|
|
||||||
|
/* ── Texte à trou ── */
|
||||||
|
.tt-pool {
|
||||||
|
display: flex; flex-wrap: wrap; gap: .6rem;
|
||||||
|
padding: 1.1rem; background: var(--bg2);
|
||||||
|
border: 1px solid var(--border2); border-radius: var(--radius);
|
||||||
|
min-height: 60px; margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
.tt-text {
|
||||||
|
background: var(--bg2); border: 1px solid var(--border2);
|
||||||
|
border-radius: var(--radius); padding: 1.5rem;
|
||||||
|
font-size: var(--fs-md); color: var(--text2); line-height: 3.2;
|
||||||
|
}
|
||||||
|
.tt-blank {
|
||||||
|
display: inline-flex; align-items: center; justify-content: center;
|
||||||
|
min-width: 150px; height: 2.2rem; padding: 0 .6rem;
|
||||||
|
background: #fff; border: 1px solid var(--border2);
|
||||||
|
border-bottom: 2px dashed var(--apple-o);
|
||||||
|
border-radius: 6px; vertical-align: middle;
|
||||||
|
font-family: var(--fm); font-size: var(--fs-sm); color: var(--text);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.tt-blank.empty::after { content: '…'; color: var(--dim); }
|
||||||
|
.tt-blank.dragover { background: rgba(0,157,220,.07); border-color: var(--c-entree); }
|
||||||
|
.tt-blank.correct { border-color: var(--apple-g); background: rgba(97,187,70,.10); border-bottom-style: solid; }
|
||||||
|
.tt-blank.incorrect { border-color: var(--apple-r); background: rgba(224,58,62,.08); border-bottom-style: solid; }
|
||||||
|
.tt-blank.ready { border-color: var(--c-entree); }
|
||||||
|
|
||||||
|
/* ── QCM ── */
|
||||||
|
.qcm-list { display: flex; flex-direction: column; gap: 1.25rem; }
|
||||||
|
.qcm-q { background: var(--bg); border: 1px solid var(--border2); border-radius: 10px; padding: 1.1rem 1.25rem; }
|
||||||
|
.qcm-q-num {
|
||||||
|
font-family: var(--fm); font-size: .64rem; font-weight: 700;
|
||||||
|
letter-spacing: .12em; text-transform: uppercase; color: var(--labo); margin-bottom: .3rem;
|
||||||
|
}
|
||||||
|
.qcm-q-enonce { font-size: var(--fs-sm); color: var(--text); line-height: 1.6; margin-bottom: .85rem; font-weight: 600; }
|
||||||
|
.qcm-opts { display: flex; flex-direction: column; gap: .45rem; }
|
||||||
|
.qcm-opt {
|
||||||
|
display: flex; align-items: flex-start; gap: .7rem;
|
||||||
|
font-size: var(--fs-sm); color: var(--text2);
|
||||||
|
cursor: pointer; padding: .5rem .65rem;
|
||||||
|
border-radius: 8px; border: 1px solid var(--border2);
|
||||||
|
background: #fff; width: 100%;
|
||||||
|
transition: background .15s, border-color .15s;
|
||||||
|
}
|
||||||
|
.qcm-opt:hover { background: var(--bg2); border-color: var(--border); }
|
||||||
|
.qcm-opt-letter {
|
||||||
|
min-width: 22px; height: 22px; border-radius: 50%;
|
||||||
|
border: 1.5px solid var(--border);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-family: var(--fm); font-size: .64rem; color: var(--dim);
|
||||||
|
flex-shrink: 0; margin-top: .05rem;
|
||||||
|
}
|
||||||
|
.qcm-opt.selected { border-color: rgba(0,157,220,.35); color: var(--text); }
|
||||||
|
.qcm-opt.selected .qcm-opt-letter { border-color: var(--c-entree); background: rgba(0,157,220,.12); color: var(--c-entree); }
|
||||||
|
.qcm-opt.correct { border-color: rgba(97,187,70,.4); background: rgba(97,187,70,.05); color: var(--text); }
|
||||||
|
.qcm-opt.correct .qcm-opt-letter { border-color: var(--c-ok); background: rgba(97,187,70,.15); color: #16a34a; }
|
||||||
|
.qcm-opt.wrong { border-color: rgba(224,58,62,.35); }
|
||||||
|
.qcm-opt.wrong .qcm-opt-letter { border-color: var(--c-err); background: rgba(224,58,62,.12); color: var(--c-err); }
|
||||||
|
.qcm-expl { margin-top: .6rem; padding: .5rem .75rem; border-radius: 6px; font-size: var(--fs-xs); line-height: 1.55; display: none; }
|
||||||
|
.qcm-expl.show { display: block; }
|
||||||
|
.qcm-expl.ok { background: rgba(97,187,70,.08); color: #16a34a; border: 1px solid rgba(97,187,70,.25); }
|
||||||
|
.qcm-expl.ko { background: rgba(224,58,62,.06); color: var(--c-err); border: 1px solid rgba(224,58,62,.2); }
|
||||||
|
.qcm-submit-row { margin-top: 1.5rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
|
||||||
|
.qcm-score { font-family: var(--fd); font-size: var(--fs-md); font-weight: 800; color: var(--text); display: none; }
|
||||||
|
.score-col-good { color: #16a34a; }
|
||||||
|
.score-col-mid { color: var(--c-entree); }
|
||||||
|
.score-col-bad { color: var(--c-err); }
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
FOOTER
|
||||||
|
========================================================== */
|
||||||
|
footer { background: var(--bg2); border-top: 1px solid var(--border2); padding: 1.1rem 2rem; margin-top: auto; }
|
||||||
|
.footer-inner { max-width: 1060px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
|
||||||
|
.footer-logo { font-family: var(--fd); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
|
||||||
|
.footer-copy { font-size: var(--fs-xs); color: var(--dim); }
|
||||||
|
.footer-links { display: flex; gap: 1.5rem; list-style: none; flex-wrap: wrap; }
|
||||||
|
.footer-links a { font-size: var(--fs-xs); color: var(--dim); }
|
||||||
|
.footer-links a:hover { color: var(--text); }
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
RESPONSIVE
|
||||||
|
========================================================== */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.page-desktop { padding: 1rem; }
|
||||||
|
.page-win-body { padding: 1.25rem; }
|
||||||
|
.hero-layout { flex-direction: column; }
|
||||||
|
.hero-visual-side { display: none; }
|
||||||
|
.cat-grid, .dd-zones { grid-template-columns: 1fr; }
|
||||||
|
.notion-grid { grid-template-columns: 1fr 1fr; }
|
||||||
|
.hs-dot { width: 26px; height: 26px; }
|
||||||
|
.hs-dot-icon { font-size: .7rem; }
|
||||||
|
.tt-text { line-height: 2.8; }
|
||||||
|
.footer-inner { flex-direction: column; align-items: flex-start; }
|
||||||
|
}
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.notion-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
TABLEAUX DE COURS
|
||||||
|
========================================================== */
|
||||||
|
.cours-table {
|
||||||
|
width: 100%; border-collapse: collapse;
|
||||||
|
font-size: var(--fs-sm); margin: 1rem 0 1.25rem;
|
||||||
|
border: 1px solid var(--border2); border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.cours-table th {
|
||||||
|
background: var(--bg2); color: var(--text);
|
||||||
|
font-family: var(--fd); font-size: var(--fs-xs); font-weight: 800;
|
||||||
|
text-align: left; padding: .6rem .9rem;
|
||||||
|
border-bottom: 1px solid var(--border2);
|
||||||
|
}
|
||||||
|
.cours-table td {
|
||||||
|
padding: .55rem .9rem; color: var(--text2);
|
||||||
|
border-bottom: 1px solid var(--border2); line-height: 1.55;
|
||||||
|
}
|
||||||
|
.cours-table tr:last-child td { border-bottom: none; }
|
||||||
|
.cours-table tr:hover td { background: var(--bg); color: var(--text); }
|
||||||
|
.cours-table strong { color: var(--text); }
|
||||||
|
|
||||||
|
/* Schéma entrée → traitement → sortie */
|
||||||
|
.flux {
|
||||||
|
display: flex; align-items: stretch; gap: .75rem;
|
||||||
|
margin: 1.25rem 0; flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.flux-etape {
|
||||||
|
flex: 1; min-width: 150px;
|
||||||
|
border: 1px solid var(--border2); border-radius: 10px;
|
||||||
|
padding: 1rem; text-align: center; background: var(--bg);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.flux-etape::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
|
||||||
|
.flux-etape.e::before { background: var(--c-entree); }
|
||||||
|
.flux-etape.t::before { background: var(--c-uc); }
|
||||||
|
.flux-etape.s::before { background: var(--c-sortie); }
|
||||||
|
.flux-icone { font-size: 1.8rem; display: block; margin-bottom: .4rem; }
|
||||||
|
.flux-titre {
|
||||||
|
font-family: var(--fd); font-size: var(--fs-sm); font-weight: 800;
|
||||||
|
color: var(--text); margin-bottom: .25rem;
|
||||||
|
}
|
||||||
|
.flux-etape.e .flux-titre { color: var(--c-entree); }
|
||||||
|
.flux-etape.t .flux-titre { color: var(--c-uc); }
|
||||||
|
.flux-etape.s .flux-titre { color: var(--c-sortie); }
|
||||||
|
.flux-desc { font-size: var(--fs-xs); color: var(--text2); line-height: 1.5; }
|
||||||
|
.flux-fleche {
|
||||||
|
display: flex; align-items: center; color: var(--dim);
|
||||||
|
font-size: 1.3rem; flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
@media (max-width: 700px) { .flux-fleche { display: none; } }
|
||||||
+84
@@ -0,0 +1,84 @@
|
|||||||
|
<!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="Labo Ordinateur — les périphériques et le vocabulaire de base de Windows, avec exercices interactifs.">
|
||||||
|
<title>Labo Ordinateur — M. Courcelle</title>
|
||||||
|
<link rel="stylesheet" href="assets/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="page-desktop">
|
||||||
|
|
||||||
|
<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">Labo Ordinateur</div>
|
||||||
|
</div>
|
||||||
|
<div class="page-win-body">
|
||||||
|
<div class="hero-layout">
|
||||||
|
<div class="hero-text">
|
||||||
|
<div class="page-breadcrumb"><span>M. Courcelle</span><span>›</span><span>Labo Ordinateur</span></div>
|
||||||
|
<h1 class="page-h1">Labo <em>Ordinateur</em></h1>
|
||||||
|
<p class="page-lead">Découvre comment fonctionne un ordinateur : ses périphériques, son bureau, ses fichiers. Chaque leçon se termine par des exercices que tu corriges toi-même.</p>
|
||||||
|
<div class="lecon-meta">
|
||||||
|
<span class="lecon-meta-item">📚 <strong>2</strong> leçons</span>
|
||||||
|
<span class="lecon-meta-item">🎯 <strong>4</strong> exercices</span>
|
||||||
|
<span class="lecon-meta-item">🖱️ Interactif</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-visual-side">
|
||||||
|
<div class="hero-big-icon">💻</div>
|
||||||
|
<span class="hero-labo-badge">Labo</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="page-statusbar">
|
||||||
|
<span>💻 Labo Ordinateur</span>
|
||||||
|
<span>Choisis une leçon</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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 leçons</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">
|
||||||
|
|
||||||
|
<a class="notion-card" href="peripheriques.html" style="--card-color:#009DDC">
|
||||||
|
<span class="notion-card-icon">🔌</span>
|
||||||
|
<div class="notion-card-title">Les périphériques</div>
|
||||||
|
<p class="notion-card-desc">Entrée, sortie, unité centrale, mémoires et unités de mesure. Image cliquable et 2 exercices.</p>
|
||||||
|
<span class="notion-card-tag">Leçon 01</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="notion-card" href="vocabulaire.html" style="--card-color:#F58220">
|
||||||
|
<span class="notion-card-icon">🖥️</span>
|
||||||
|
<div class="notion-card-title">Vocabulaire de base</div>
|
||||||
|
<p class="notion-card-desc">Système, bureau, fichiers, extensions, navigateur. 14 cartes et 2 exercices.</p>
|
||||||
|
<span class="notion-card-tag">Leçon 03</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="page-statusbar">
|
||||||
|
<span>2 leçons disponibles</span>
|
||||||
|
<span>Labo Ordinateur</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="assets/layout.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,640 @@
|
|||||||
|
<!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>
|
||||||
@@ -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 & 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 & fichiers</div>
|
||||||
|
</div>
|
||||||
|
<div class="page-win-body">
|
||||||
|
<button class="back-link" onclick="retour()">← Retour aux cartes</button>
|
||||||
|
<h2 class="carte-title">📁 Dossiers & 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 & 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>
|
||||||
Reference in New Issue
Block a user