Paillasse/design/apercu-banque.html

240 lines
49 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Banque de sujets · Syllabus</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<link rel="stylesheet" href="css/syllabus-theme.css">
</head>
<body class="bg-white font-display text-black antialiased">
<header style="position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #e3e5e8">
<nav aria-label="Navigation principale" style="position:relative;max-width:1200px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px">
<a href="Apercu%20accueil%20Blade.html" aria-label="Syllabus, accueil" style="display:flex;align-items:center;gap:0;text-decoration:none"><img src="images/logo-syllabus-icone.png" alt="" style="height:32px;width:auto;display:block"><span style="font-family:Mulish,system-ui,sans-serif;font-weight:800;font-size:19px;color:#111827;letter-spacing:-0.01em;margin-left:-14px;position:relative">Syllabus</span></a>
<ul style="margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;flex:1;line-height:1.5"><li><details class="group"><summary style="cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;height:36px;margin:-6px -12px;padding:0 12px;border-radius:999px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220" class="hover:bg-[#f1f3f4] group-open:bg-[#e8f0fe] group-open:text-[#0b57d0] [&::-webkit-details-marker]:hidden">Fonctionnalités<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" class="transition-transform duration-200 group-open:rotate-180" style="flex:none;opacity:.7"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
<div style="position:absolute;left:20px;right:20px;top:100%;margin-top:4px;z-index:50;max-width:1160px;margin-left:auto;margin-right:auto;box-sizing:border-box;max-height:calc(100vh - 90px);overflow:auto;border-radius:20px;background:#fff;border:1px solid #e3e5e8;box-shadow:0 24px 48px -16px rgba(15,23,42,.22)">
<div class="grid grid-cols-2 sm:grid-cols-3 min-[1100px]:grid-cols-5 [&>div:last-child]:col-span-2 min-[1100px]:[&>div:last-child]:col-span-1" style="gap:1px;background:#e3e5e8"><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#0b57d0"></span>Piloter la classe</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">En direct et au quotidien</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=cockpit" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Tableau de bord prof</a></li><li><a href="apercu-ressource.html?outil=visio" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Visio de classe</a></li><li><a href="apercu-ressource.html?outil=espace-eleve" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Espace élève</a></li><li><a href="apercu-ressource.html?outil=fiche-eleve" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Fiche élève</a></li><li><a href="apercu-ressource.html?outil=messagerie" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Messagerie</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#137333"></span>Apprendre</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Cours, TP et code</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=cours" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="apercu-ressource.html?outil=labs" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">TP sur machine Linux</a></li><li><a href="apercu-ressource.html?outil=lab-web" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Lab web</a></li><li><a href="apercu-ressource.html?outil=ide" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Éditeur de code en ligne</a></li><li><a href="apercu-ressource.html?outil=maison" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Ressources à la maison</a></li></ul></div><div style="padding:22px 20px 20px;min-w
<div style="position:sticky;bottom:0;padding:14px 24px;border-top:1px solid #e3e5e8;background:#f8f9fa;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px"><span style="font-size:14px;font-weight:500;color:#5f6368">24 outils, chacun avec sa présentation et sa démo</span><a href="apercu-fonctionnalites.html" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">Voir toutes les fonctionnalités →</a></div>
</div></details></li><li><a href="apercu-cours.html" style="display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0]">Cours</a></li><li><a href="apercu-tarifs.html" style="display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0]">Tarifs</a></li></ul>
<div style="display:flex;align-items:center;gap:20px">
<a href="apercu-connexion.html" style="font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0]">Se connecter</a>
<a href="apercu-inscription.html" style="display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:#0b57d0;color:#fff;font-size:15px;font-weight:700;text-decoration:none">Créer une classe</a>
</div>
</nav>
</header>
<main>
<section class="border-b border-[#e3e5e8] bg-white">
<div class="mx-auto flex max-w-7xl flex-wrap items-end gap-6 px-5 pb-10 pt-10 lg:px-10">
<div class="flex-1">
<p class="font-mono text-sm font-semibold">Espace enseignant · Banque</p>
<div class="min-w-0 flex-1"><p data-public="P" class="mb-2 inline-flex items-center gap-2 rounded-full border border-[#b8c1cf] bg-white px-3 py-1 text-sm font-bold text-[#1d3fa8]">Pour les profs</p>
<h1 class="mt-2 text-5xl font-extrabold leading-[0.95] tracking-tight sm:text-6xl">Banque de sujets et de questions</h1></div>
<p class="mt-3 max-w-2xl text-lg font-semibold">1 240 questions classées par cursus et par notion. Modifiez-les, ajoutez les vôtres, composez vos sujets.</p><div class="mt-4 flex flex-wrap gap-3"><a href="apercu-bibliotheque.html" class="border border-[#e3e5e8] rounded-2xl bg-white px-4 py-2 font-extrabold hover:bg-[#fef7e0]">Bibliothèque du référentiel →</a><a href="apercu-generateur.html" class="border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] px-4 py-2 font-extrabold">Générateur de TD →</a></div>
</div>
<a href="#editeur" class="inline-flex items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-lg font-extrabold text-white transition-transform hover:bg-[#ec3013] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none">+ Nouvelle question</a>
</div>
</section>
<section id="flash" class="scroll-mt-6 border-b border-[#e3e5e8] bg-[#fef7e0]" aria-labelledby="t-flash">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-4">
<p class="inline-block border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-bold">Début d’heure</p>
<h2 id="t-flash" class="mt-5 text-4xl font-extrabold leading-tight tracking-tight">Un quiz flash pour lancer le cours.</h2>
<p class="mt-4 text-lg font-semibold">Choisissez les outils à réviser. Syllabus tire les questions dans la banque. Un diaporama s’ouvre au tableau. Les élèves se connectent avec leur identifiant depuis leur téléphone ou leur PC, et vous voyez tout de suite qui manque.</p>
<span class="mt-4 flex flex-wrap gap-4"><a href="apercu-quiz-projection.html" class="font-extrabold underline underline-offset-4">Voir le diaporama →</a><a href="apercu-quiz-eleve.html" class="font-extrabold underline underline-offset-4">Voir la vue élève →</a></span>
</div>
<div class="border border-[#e3e5e8] rounded-2xl bg-white p-6 lg:col-span-8">
<p class="font-extrabold">Outils à réviser</p>
<div class="mt-3 flex flex-wrap gap-2" role="group" aria-label="Outils">
<button type="button" data-outil aria-pressed="true" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ls</button>
<button type="button" data-outil aria-pressed="false" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">cd</button>
<button type="button" data-outil aria-pressed="true" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">chmod</button>
<button type="button" data-outil aria-pressed="false" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">chown</button>
<button type="button" data-outil aria-pressed="true" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">grep</button>
<button type="button" data-outil aria-pressed="false" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">find</button>
<button type="button" data-outil aria-pressed="true" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ip</button>
<button type="button" data-outil aria-pressed="false" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ping</button>
<button type="button" data-outil aria-pressed="false" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ss</button>
<button type="button" data-outil aria-pressed="false" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">dig</button>
<button type="button" data-outil aria-pressed="false" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">ssh</button>
<button type="button" data-outil aria-pressed="false" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">systemctl</button>
<button type="button" data-outil aria-pressed="false" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">apt</button>
<button type="button" data-outil aria-pressed="false" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">journalctl</button>
<button type="button" data-outil aria-pressed="false" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono font-semibold aria-pressed:bg-black aria-pressed:text-white">tar</button>
</div>
<div class="mt-5 grid gap-4 sm:grid-cols-3">
<label class="grid gap-2 font-extrabold">Questions<select id="flash-n" class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"><option>5</option><option>8</option><option>10</option></select></label>
<label class="grid gap-2 font-extrabold">Durée<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"><option>5 min</option><option>8 min</option><option>10 min</option></select></label>
<label class="grid gap-2 font-extrabold">Classe<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"><option>BTS SIO 1 · Groupe A</option><option>2nde NSI · Groupe B</option></select></label>
</div>
<div class="mt-6 flex flex-wrap items-center gap-5">
<button type="button" id="flash-go" class="inline-flex items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-lg font-extrabold text-white transition-transform hover:bg-[#ec3013] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none">Lancer le diaporama →</button>
<p id="flash-res" hidden class="border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] px-4 py-2 font-extrabold" aria-live="polite"></p>
</div>
</div>
</div>
</section>
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-12 lg:grid-cols-12 lg:px-10">
<aside class="grid content-start gap-5 lg:col-span-3" aria-label="Filtres">
<label class="grid gap-2 font-extrabold">Rechercher<input id="recherche" class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none" placeholder="masque, VLAN…"></label>
<label class="grid gap-2 font-extrabold">Cursus<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"><option>Tous</option><option>NSI</option><option>BTS SIO</option><option>BTS CIEL</option><option>BUT R&amp;T</option><option>TSSR</option></select></label>
<label class="grid gap-2 font-extrabold">Type<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"><option>Tous</option><option>Choix unique</option><option>Choix multiple</option><option>Vrai / faux</option><option>Réponse numérique</option><option>Réponse courte</option><option>Texte à trous</option></select></label>
<label class="grid gap-2 font-extrabold">Difficulté<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"><option>Toutes</option><option>Facile</option><option>Moyen</option><option>Difficile</option></select></label>
<div class="border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-4">
<p class="font-extrabold">Sujets prêts</p>
<ul class="mt-3 grid gap-2"><li class="border border-[#dadce0] rounded-lg bg-[#fef7e0] p-2"><p class="font-bold leading-tight">E6 blanc SISR · Adressage et VLAN</p><p class="font-mono text-xs font-semibold">12 questions + TP · 1 h</p></li><li class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] p-2"><p class="font-bold leading-tight">QCM Bloc 2 · fin de trimestre</p><p class="font-mono text-xs font-semibold">20 questions · 40 min</p></li><li class="border border-[#dadce0] rounded-lg bg-[#eef0fd] p-2"><p class="font-bold leading-tight">Contrôle NSI · Architectures</p><p class="font-mono text-xs font-semibold">10 questions · 30 min</p></li></ul>
</div>
</aside>
<section class="lg:col-span-5" aria-labelledby="t-questions">
<h2 id="t-questions" class="text-2xl font-extrabold">Questions <span class="font-mono text-base font-semibold">· 7 affichées sur 1 240</span></h2>
<ul id="liste-questions" class="mt-5 grid gap-5">
<li data-question data-pts="2" class="border border-[#e3e5e8] rounded-2xl bg-white p-5">
<div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2">Choix unique</span><span class="border border-[#dadce0] rounded-lg px-2">BTS SIO · Bloc 2</span><span class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2">Adressage IPv4</span><span class="border border-[#dadce0] rounded-lg bg-[#eef0fd] px-2">Moyen</span></div>
<p data-enonce class="mt-3 text-lg font-extrabold">Quelle est l’adresse réseau de 10.0.3.200/22 ?</p>
<p class="mt-2 font-mono text-xs font-semibold">2 pts · utilisée 34 fois · réussite 38 %</p>
<div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Modifier</a><button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Dupliquer</button></div>
</li>
<li data-question data-pts="1" class="border border-[#e3e5e8] rounded-2xl bg-white p-5">
<div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2">Choix unique</span><span class="border border-[#dadce0] rounded-lg px-2">BTS CIEL · Réseaux</span><span class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2">Adressage IPv4</span><span class="border border-[#dadce0] rounded-lg bg-white px-2">Facile</span></div>
<p data-enonce class="mt-3 text-lg font-extrabold">Combien d’hôtes utilisables dans un /27 ?</p>
<p class="mt-2 font-mono text-xs font-semibold">1 pt · utilisée 51 fois · réussite 71 %</p>
<div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Modifier</a><button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Dupliquer</button></div>
</li>
<li data-question data-pts="1" class="border border-[#e3e5e8] rounded-2xl bg-white p-5">
<div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2">Choix multiple</span><span class="border border-[#dadce0] rounded-lg px-2">NSI · Première</span><span class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2">Commandes Linux</span><span class="border border-[#dadce0] rounded-lg bg-white px-2">Facile</span></div>
<p data-enonce class="mt-3 text-lg font-extrabold">Quelles commandes affichent les interfaces réseau sous Debian ?</p>
<p class="mt-2 font-mono text-xs font-semibold">1 pt · utilisée 22 fois · réussite 64 %</p>
<div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Modifier</a><button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Dupliquer</button></div>
</li>
<li data-question data-pts="1" class="border border-[#e3e5e8] rounded-2xl bg-white p-5">
<div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2">Vrai / faux</span><span class="border border-[#dadce0] rounded-lg px-2">BTS SIO · Bloc 2</span><span class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2">VLAN</span><span class="border border-[#dadce0] rounded-lg bg-white px-2">Facile</span></div>
<p data-enonce class="mt-3 text-lg font-extrabold">Un VLAN isole le trafic au niveau 2 du modèle OSI.</p>
<p class="mt-2 font-mono text-xs font-semibold">1 pt · utilisée 40 fois · réussite 82 %</p>
<div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Modifier</a><button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Dupliquer</button></div>
</li>
<li data-question data-pts="2" class="border border-[#e3e5e8] rounded-2xl bg-white p-5">
<div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2">Réponse courte</span><span class="border border-[#dadce0] rounded-lg px-2">BTS SIO · Bloc 1</span><span class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2">Droits Linux</span><span class="border border-[#dadce0] rounded-lg bg-[#eef0fd] px-2">Moyen</span></div>
<p data-enonce class="mt-3 text-lg font-extrabold">Écrivez la commande qui donne les droits rwxr-x--- au fichier notes.txt.</p>
<p class="mt-2 font-mono text-xs font-semibold">2 pts · utilisée 18 fois · réussite 47 %</p>
<div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Modifier</a><button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Dupliquer</button></div>
</li>
<li data-question data-pts="1" class="border border-[#e3e5e8] rounded-2xl bg-white p-5">
<div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2">Réponse numérique</span><span class="border border-[#dadce0] rounded-lg px-2">BUT R&amp;T · S1</span><span class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2">Services réseau</span><span class="border border-[#dadce0] rounded-lg bg-white px-2">Facile</span></div>
<p data-enonce class="mt-3 text-lg font-extrabold">Quel port utilise par défaut le protocole SSH ?</p>
<p class="mt-2 font-mono text-xs font-semibold">1 pt · utilisée 29 fois · réussite 88 %</p>
<div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Modifier</a><button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Dupliquer</button></div>
</li>
<li data-question data-pts="3" class="border border-[#e3e5e8] rounded-2xl bg-white p-5">
<div class="flex flex-wrap gap-2 text-xs font-extrabold"><span class="border border-[#dadce0] rounded-lg bg-[#fef7e0] px-2">Texte à trous</span><span class="border border-[#dadce0] rounded-lg px-2">BTS CIEL · Réseaux</span><span class="border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-2">Routage</span><span class="border border-[#dadce0] rounded-lg bg-[#ec3013] text-white px-2">Difficile</span></div>
<p data-enonce class="mt-3 text-lg font-extrabold">Complétez : la route par défaut s’écrit ___ via 192.168.1.1.</p>
<p class="mt-2 font-mono text-xs font-semibold">3 pts · utilisée 9 fois · réussite 29 %</p>
<div class="mt-4 flex flex-wrap gap-2"><button type="button" data-ajouter class="border border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white hover:bg-[#ec3013]">+ Ajouter au sujet</button><a href="#editeur" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Modifier</a><button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Dupliquer</button></div>
</li>
</ul>
</section>
<aside class="grid content-start gap-8 lg:col-span-4">
<section class="border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-6 lg:sticky lg:top-6" aria-labelledby="t-sujet">
<h2 id="t-sujet" class="text-2xl font-extrabold">Sujet en cours</h2>
<label class="mt-4 grid gap-2 font-extrabold">Titre<input value="Examen · Adressage IPv4" class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"></label>
<ol id="sujet" class="mt-4 grid gap-2 font-semibold"><li data-vide class="border-2 border-dashed border-black bg-white p-3">Ajoutez des questions depuis la liste.</li></ol>
<p class="mt-4 font-mono font-semibold"><span id="nb-q">0</span> question(s) · <span id="nb-pts">0</span> point(s</p>
<fieldset class="mt-4 grid gap-2 font-semibold"><legend class="font-extrabold">Options</legend>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Mélanger les questions</label>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Ajouter une partie TP</label>
<label class="flex items-center gap-3"><input type="checkbox" class="h-5 w-5 accent-black"> Corrections visibles après l’épreuve</label>
</fieldset>
<a href="apercu-examen.html" class="inline-flex items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-lg font-extrabold text-white transition-transform hover:bg-[#ec3013] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none mt-6">Programmer l’examen</a>
</section>
</aside>
</div>
<section id="editeur" class="scroll-mt-6 border-t border-[#e3e5e8] bg-[#eef0fd]" aria-labelledby="t-editeur">
<div class="mx-auto max-w-7xl px-5 py-14 lg:px-10">
<h2 id="t-editeur" class="text-4xl font-extrabold tracking-tight">Créer ou modifier une question</h2>
<form class="mt-8 grid gap-5 border border-[#e3e5e8] rounded-2xl bg-white p-7 lg:grid-cols-2" onsubmit="event.preventDefault(); this.querySelector('[data-ok]').hidden = false;">
<label class="grid gap-2 font-extrabold lg:col-span-2">Énoncé<textarea rows="2" class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none">Quel masque correspond à /26 ?</textarea></label>
<label class="grid gap-2 font-extrabold">Type<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"><option>Choix unique</option><option>Choix multiple</option><option>Vrai / faux</option><option>Réponse numérique</option><option>Réponse courte</option><option>Texte à trous</option></select></label>
<div class="grid grid-cols-2 gap-4"><label class="grid gap-2 font-extrabold">Points<input type="number" value="1" min="0" class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"></label><label class="grid gap-2 font-extrabold">Difficulté<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"><option>Facile</option><option selected>Moyen</option><option>Difficile</option></select></label></div>
<fieldset class="grid gap-3 lg:col-span-2"><legend class="font-extrabold">Réponses <span class="font-semibold">(cochez la bonne</span></legend>
<label class="flex items-center gap-3"><input type="radio" name="bonne" class="h-5 w-5 shrink-0 accent-black"><input value="255.255.255.128" class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none font-mono" aria-label="Réponse 1"></label>
<label class="flex items-center gap-3"><input type="radio" name="bonne" checked class="h-5 w-5 shrink-0 accent-black"><input value="255.255.255.192" class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none font-mono" aria-label="Réponse 2"></label>
<label class="flex items-center gap-3"><input type="radio" name="bonne" class="h-5 w-5 shrink-0 accent-black"><input value="255.255.255.224" class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none font-mono" aria-label="Réponse 3"></label>
<label class="flex items-center gap-3"><input type="radio" name="bonne" class="h-5 w-5 shrink-0 accent-black"><input value="255.255.255.240" class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none font-mono" aria-label="Réponse 4"></label>
</fieldset>
<label class="grid gap-2 font-extrabold lg:col-span-2">Explication montrée à l’élève<textarea rows="2" class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none">26 bits = 24 bits (255.255.255) + 2 bits dans le dernier octet : 128 + 64 = 192.</textarea></label>
<label class="grid gap-2 font-extrabold">Cursus<select class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"><option>BTS SIO · Bloc 2</option><option>BTS CIEL · Réseaux</option><option>NSI · Terminale</option><option>BUT R&amp;T · S1</option><option>TSSR · CCP 2</option></select></label>
<label class="grid gap-2 font-extrabold">Notion<input value="Adressage IPv4" class="w-full border border-[#e3e5e8] rounded-2xl bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#f8f9fa] focus:outline-none"></label>
<div class="flex flex-wrap items-center gap-4 lg:col-span-2"><button type="submit" class="inline-flex items-center gap-4 border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-lg font-extrabold text-white transition-transform hover:bg-[#ec3013] disabled:cursor-not-allowed disabled:bg-[#444141] disabled:shadow-none">Enregistrer dans ma banque</button><label class="flex items-center gap-3 font-semibold"><input type="checkbox" class="h-5 w-5 accent-black"> Partager avec mon établissement</label><p data-ok hidden class="border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] px-4 py-2 font-extrabold">Question enregistrée ✓</p></div>
</form>
</div>
</section>
<script>
(function () {
var sujet = document.getElementById('sujet'), nbq = document.getElementById('nb-q'), nbp = document.getElementById('nb-pts'), q = 0, p = 0;
document.querySelectorAll('[data-ajouter]').forEach(function (b) {
b.addEventListener('click', function () {
var li = b.closest('[data-question]');
if (b.disabled) return;
var vide = sujet.querySelector('[data-vide]'); if (vide) vide.remove();
q++; p += Number(li.dataset.pts);
var it = document.createElement('li');
it.className = 'flex gap-3 border border-[#dadce0] rounded-lg bg-white p-3';
it.innerHTML = '<span class="font-mono font-semibold">' + q + '</span><span>' + li.querySelector('[data-enonce]').textContent + '</span>';
sujet.appendChild(it);
nbq.textContent = q; nbp.textContent = p;
b.disabled = true; b.textContent = 'Ajoutée ✓'; b.classList.remove('bg-black', 'text-white'); b.classList.add('bg-[#e6f4ea]');
});
});
document.querySelectorAll('[data-outil]').forEach(function (b) { b.addEventListener('click', function () { b.setAttribute('aria-pressed', b.getAttribute('aria-pressed') !== 'true'); }); });
document.getElementById('flash-go').addEventListener('click', function () {
var sel = Array.prototype.filter.call(document.querySelectorAll('[data-outil]'), function (b) { return b.getAttribute('aria-pressed') === 'true'; }).map(function (b) { return b.textContent; });
var r = document.getElementById('flash-res'); r.hidden = false;
if (!sel.length) { r.textContent = 'Choisissez au moins un outil.'; return; }
r.textContent = 'Ouverture du diaporama…'; location.href = 'apercu-quiz-projection.html';
});
var rech = document.getElementById('recherche');
rech.addEventListener('input', function () {
var v = rech.value.toLowerCase();
document.querySelectorAll('[data-question]').forEach(function (li) { li.hidden = v && li.textContent.toLowerCase().indexOf(v) === -1; });
});
})();
</script>
</main>
<footer style="background:#f8f9fa;border-top:1px solid #e3e5e8;font-family:Mulish,system-ui,sans-serif">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p style="margin:0;font-size:18px;font-weight:800;color:#0b1220">Syllabus</p>
<p style="margin:10px 0 0;font-size:14px;line-height:1.6;font-weight:500;color:#5f6368">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Produit</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-fonctionnalites.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Fonctionnalités</a></li><li><a href="apercu-cours.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="apercu-lab-essai.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Essayer un lab</a></li><li><a href="apercu-tarifs.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Tarifs</a></li></ul></nav><nav aria-label="Outils"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Outils</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-ressource.html?outil=cockpit" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Tableau de bord prof</a></li><li><a href="apercu-ressource.html?outil=labs" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">TP sur machine Linux</a></li><li><a href="apercu-ressource.html?outil=ide" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Éditeur de code</a></li><li><a href="apercu-ressource.html?outil=quiz" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Quiz flash</a></li><li><a href="apercu-ressource.html?outil=sujet" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Examens</a></li><li><a href="apercu-ressource.html?outil=bibliotheque" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Bibliothèque du prof</a></li></ul></nav><nav aria-label="Établissements"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Établissements</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-etablissements.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Équiper une classe</a></li><li><a href="apercu-ressource.html?outil=vie-scolaire" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Vie scolaire</a></li><li><a href="apercu-ressource.html?outil=espace-etablissement" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Licences et factures</a></li><li><a href="apercu-ressource.html?outil=integration" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Intégration et sécurité</a></li></ul></nav><nav aria-label="Syllabus"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Syllabus</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-aide.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Aide et tutoriels</a></li><li><a href="apercu-legal.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales et RGPD</a></li></ul></nav>
<p style="margin:0;align-self:start;font-size:14px;font-weight:600;color:#5f6368"><span style="color:#137333">●</span> Tous les services fonctionnent</p>
</div>
<div style="border-top:1px solid #e3e5e8"><ul aria-label="Engagements" style="max-width:1200px;margin:0 auto;padding:24px 20px;list-style:none;display:flex;flex-wrap:wrap;gap:12px 40px"><li style="font-size:14px;font-weight:700;color:#0b1220">Hébergé en France <span style="font-weight:500;color:#5f6368">· Paris</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">RGPD <span style="font-weight:500;color:#5f6368">· données minimisées</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">20 cursus <span style="font-weight:500;color:#5f6368">· du lycée au master</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">0 € <span style="font-weight:500;color:#5f6368">· sans carte bancaire</span></li></ul>
</div>
<div style="border-top:1px solid #e3e5e8">
<div class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><nav aria-label="Informations légales"><ul class="flex flex-wrap justify-center gap-x-5 gap-y-1" style="margin:0;padding:0;list-style:none;font-size:14px;font-weight:500"><li><a href="apercu-legal.html#mentions" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">CGU</a></li><li><a href="apercu-legal.html#confidentialite" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>