164 lines
18 KiB
HTML
164 lines
18 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="fr">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<title>Quiz flash · projection · 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="min-h-screen bg-white font-display text-black antialiased">
|
|||
|
|
<div id="scene" class="flex min-h-screen flex-col">
|
|||
|
|
<header class="flex flex-wrap items-center gap-4 border-b-4 border-black bg-black px-6 py-3 text-white">
|
|||
|
|
<span class="border-2 border-white bg-[#FFD23F] px-3 py-1 font-extrabold text-black">QUIZ FLASH</span>
|
|||
|
|
<p class="flex-1 font-bold">BTS SIO 1 · Groupe A · ls, chmod, grep, ip, ping</p>
|
|||
|
|
<p class="font-mono"><span id="p-count">0</span> / 24 connectés</p>
|
|||
|
|
<button type="button" id="plein" class="border-2 border-white px-3 py-1 font-extrabold hover:bg-white hover:text-black">Plein écran</button>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<section id="s-attente" class="grid flex-1 gap-8 p-8 lg:grid-cols-12">
|
|||
|
|
<div class="flex flex-col justify-center lg:col-span-7">
|
|||
|
|
<p class="text-3xl font-extrabold">Sur ton téléphone ou ton PC, va sur</p>
|
|||
|
|
<p class="mt-4 inline-block self-start border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] px-5 py-3 font-mono text-5xl font-semibold">syllabus.fr/quiz</p>
|
|||
|
|
<p class="mt-10 text-3xl font-extrabold">et entre le code</p>
|
|||
|
|
<p class="mt-4 inline-block self-start border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] px-6 py-4 font-mono text-8xl font-semibold tracking-widest">K7Q4</p>
|
|||
|
|
<p class="mt-10 text-xl font-bold">Connecte-toi avec ton identifiant Syllabus.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex flex-col border border-[#e3e5e8] rounded-2xl bg-white lg:col-span-5">
|
|||
|
|
<div class="flex items-center justify-between border-b border-[#e3e5e8] bg-[#eef0fd] px-5 py-3"><p class="text-xl font-extrabold">Présences</p><p class="font-mono font-semibold"><span id="p-count2">0</span> / 24</p></div>
|
|||
|
|
<ul id="presences" class="grid flex-1 content-start grid-cols-2 gap-2 overflow-y-auto p-4 text-sm font-bold sm:grid-cols-3">
|
|||
|
|
<li data-eleve="Léa M." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Léa M.</li>
|
|||
|
|
<li data-eleve="Yanis B." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Yanis B.</li>
|
|||
|
|
<li data-eleve="Nora Kaci" class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Nora Kaci</li>
|
|||
|
|
<li data-eleve="Tom R." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Tom R.</li>
|
|||
|
|
<li data-eleve="Inès D." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Inès D.</li>
|
|||
|
|
<li data-eleve="Sami L." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Sami L.</li>
|
|||
|
|
<li data-eleve="Chloé P." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Chloé P.</li>
|
|||
|
|
<li data-eleve="Adam F." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Adam F.</li>
|
|||
|
|
<li data-eleve="Maël G." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Maël G.</li>
|
|||
|
|
<li data-eleve="Jade T." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Jade T.</li>
|
|||
|
|
<li data-eleve="Hugo M." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Hugo M.</li>
|
|||
|
|
<li data-eleve="Lina G." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Lina G.</li>
|
|||
|
|
<li data-eleve="Rayan F." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Rayan F.</li>
|
|||
|
|
<li data-eleve="Emma B." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Emma B.</li>
|
|||
|
|
<li data-eleve="Noah H." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Noah H.</li>
|
|||
|
|
<li data-eleve="Sarah R." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Sarah R.</li>
|
|||
|
|
<li data-eleve="Ilyes M." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Ilyes M.</li>
|
|||
|
|
<li data-eleve="Manon L." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Manon L.</li>
|
|||
|
|
<li data-eleve="Lucas M." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Lucas M.</li>
|
|||
|
|
<li data-eleve="Zoé D." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Zoé D.</li>
|
|||
|
|
<li data-eleve="Enzo L." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Enzo L.</li>
|
|||
|
|
<li data-eleve="Camille B." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Camille B.</li>
|
|||
|
|
<li data-eleve="Nathan F." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Nathan F.</li>
|
|||
|
|
<li data-eleve="Anaïs L." class="flex items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg bg-white"></span>Anaïs L.</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="border-t border-[#e3e5e8] p-4">
|
|||
|
|
<p id="manquants" class="font-bold">En attente des connexions…</p>
|
|||
|
|
<button type="button" id="demarrer" class="mt-4 w-full border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-left text-xl font-extrabold text-white hover:bg-[#ec3013]">Démarrer le quiz →</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section id="s-question" hidden class="flex flex-1 flex-col p-8">
|
|||
|
|
<div class="flex flex-wrap items-center gap-4">
|
|||
|
|
<p class="border border-[#e3e5e8] rounded-2xl bg-white px-4 py-2 font-mono text-xl font-semibold">Question <span id="q-num">1</span> / 5</p>
|
|||
|
|
<div class="h-6 flex-1 border border-[#e3e5e8] rounded-2xl bg-white"><div id="q-timer" class="h-full bg-[#ec3013]" style="width:100%"></div></div>
|
|||
|
|
<p class="font-mono text-3xl font-semibold"><span id="q-sec">20</span> s</p>
|
|||
|
|
</div>
|
|||
|
|
<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 id="q-texte" class="mt-10 max-w-5xl text-5xl font-extrabold leading-tight tracking-tight lg:text-7xl"></h1></div>
|
|||
|
|
<ol id="q-reps" class="mt-10 grid flex-1 content-start gap-5 md:grid-cols-2"></ol>
|
|||
|
|
<div class="mt-8 flex flex-wrap items-center gap-5">
|
|||
|
|
<p class="text-2xl font-extrabold"><span id="q-rep">0</span> / <span id="q-pres">0</span> ont répondu</p>
|
|||
|
|
<p id="q-expl" hidden class="flex-1 border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] px-5 py-3 text-xl font-bold"></p>
|
|||
|
|
<button type="button" id="suivant" class="ml-auto border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-xl font-extrabold text-white">Afficher la réponse →</button>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section id="s-fin" hidden class="grid flex-1 content-center gap-8 p-8 lg:grid-cols-3">
|
|||
|
|
<div class="border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-8 lg:col-span-2">
|
|||
|
|
<p class="text-2xl font-extrabold">Quiz terminé !</p>
|
|||
|
|
<p class="mt-4 font-mono text-8xl font-semibold"><span id="f-score">0</span> %</p>
|
|||
|
|
<p class="mt-2 text-2xl font-bold">de bonnes réponses pour la classe</p>
|
|||
|
|
<p id="f-rate" class="mt-6 border-t border-[#e3e5e8] pt-4 text-xl font-bold"></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="border border-[#e3e5e8] rounded-2xl bg-white p-6">
|
|||
|
|
<p class="text-xl font-extrabold">Absents au quiz</p>
|
|||
|
|
<ul class="mt-3 grid gap-2 font-bold"><li class="border border-[#dadce0] rounded-lg bg-[#FFE4DF] px-3 py-1">Inès D.</li><li class="border border-[#dadce0] rounded-lg bg-[#FFE4DF] px-3 py-1">Hugo M.</li><li class="border border-[#dadce0] rounded-lg bg-[#FFE4DF] px-3 py-1">Jade T.</li></ul>
|
|||
|
|
<p class="mt-4 font-semibold">Résultats enregistrés dans le suivi de la classe.</p>
|
|||
|
|
<a href="apercu-banque.html" class="mt-5 inline-block border border-[#e3e5e8] rounded-2xl bg-black px-4 py-2 font-extrabold text-white">Retour à la banque</a>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
<script>
|
|||
|
|
(function () {
|
|||
|
|
var Q = [["Que fait ls -a en plus de ls ?",["Affiche les fichiers cachés","Affiche les droits","Affiche la taille en Ko","N’affiche que les dossiers"],0,"L’option -a (all) affiche aussi les fichiers qui commencent par un point, comme .bashrc."],["chmod 750 script.sh donne au groupe…",["Lecture et exécution","Lecture seule","Tous les droits","Aucun droit"],0,"7 = rwx pour le propriétaire, 5 = r-x pour le groupe, 0 = rien pour les autres."],["Quelle commande cherche « erreur » dans app.log ?",["find erreur app.log","grep erreur app.log","cat -s erreur app.log","ls erreur app.log"],1,"grep affiche les lignes d’un fichier qui contiennent un motif."],["À quoi sert ip a ?",["Pinger une machine","Ajouter une route","Afficher les adresses des interfaces","Redémarrer le réseau"],2,"ip a (ip address) liste les interfaces réseau et leurs adresses IP."],["ping -c 4 8.8.8.8 envoie…",["Pendant 4 secondes","4 paquets puis s’arrête","À 4 machines","4 fois plus vite"],1,"L’option -c (count) fixe le nombre de paquets envoyés."]], COL = ["bg-[#fce8e6]","bg-[#e6f4ea]","bg-[#fef7e0]","bg-[#eef0fd]"], ABS = ["Inès D.","Hugo M.","Jade T."], L = 'ABCD';
|
|||
|
|
var eleves = Array.prototype.slice.call(document.querySelectorAll('[data-eleve]')), connectes = 0, i = -1, phase = 'q', tic, bons = 0, total = 0, rate = [];
|
|||
|
|
var $ = function (id) { return document.getElementById(id); };
|
|||
|
|
var file = eleves.filter(function (li) { return ABS.indexOf(li.dataset.eleve) === -1; });
|
|||
|
|
file.sort(function () { return Math.random() - .5; });
|
|||
|
|
var joins = setInterval(function () {
|
|||
|
|
var li = file.shift(); if (!li) { clearInterval(joins); return; }
|
|||
|
|
li.classList.remove('opacity-40'); li.classList.add('bg-[#e6f4ea]'); li.querySelector('[data-pastille]').classList.replace('bg-white', 'bg-black');
|
|||
|
|
connectes++; $('p-count').textContent = $('p-count2').textContent = connectes;
|
|||
|
|
var m = eleves.filter(function (e) { return e.classList.contains('opacity-40'); }).map(function (e) { return e.dataset.eleve; });
|
|||
|
|
$('manquants').innerHTML = m.length ? '<span class="bg-[#ec3013] px-1 text-white">Manquants : ' + m.length + '</span> ' + m.join(', ') : 'Tout le monde est là ✓';
|
|||
|
|
$('demarrer').textContent = 'Démarrer le quiz (' + connectes + ' / ' + eleves.length + ') →';
|
|||
|
|
}, 350);
|
|||
|
|
function question() {
|
|||
|
|
i++; phase = 'q';
|
|||
|
|
if (i >= Q.length) return fin();
|
|||
|
|
var q = Q[i], t = 20, rep = 0;
|
|||
|
|
$('q-num').textContent = i + 1; $('q-texte').textContent = q[0]; $('q-pres').textContent = connectes; $('q-rep').textContent = 0;
|
|||
|
|
$('q-expl').hidden = true; $('suivant').textContent = 'Afficher la réponse →';
|
|||
|
|
$('q-reps').innerHTML = q[1].map(function (r, k) {
|
|||
|
|
return '<li data-r class="flex items-center gap-5 border border-[#e3e5e8] rounded-2xl ' + COL[k] + ' p-6 text-3xl font-extrabold"><span class="grid h-14 w-14 shrink-0 place-items-center border border-[#e3e5e8] rounded-2xl bg-white font-mono">' + L[k] + '</span><span class="flex-1">' + r + '</span><span data-pc class="font-mono text-2xl" hidden></span></li>';
|
|||
|
|
}).join('');
|
|||
|
|
clearInterval(tic);
|
|||
|
|
tic = setInterval(function () {
|
|||
|
|
t--; $('q-sec').textContent = Math.max(0, t); $('q-timer').style.width = Math.max(0, t / 20 * 100) + '%';
|
|||
|
|
if (rep < connectes && Math.random() < .55) { rep = Math.min(connectes, rep + 1 + Math.floor(Math.random() * 3)); $('q-rep').textContent = rep; }
|
|||
|
|
if (t <= 0) reponse();
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
function reponse() {
|
|||
|
|
clearInterval(tic); phase = 'r';
|
|||
|
|
var q = Q[i], ok = q[2], n = Number($('q-rep').textContent) || connectes, part = [0, 0, 0, 0];
|
|||
|
|
var pBon = .45 + Math.random() * .45; part[ok] = Math.round(n * pBon);
|
|||
|
|
var reste = n - part[ok]; [0, 1, 2, 3].filter(function (k) { return k !== ok; }).forEach(function (k, j, arr) { var v = j === arr.length - 1 ? reste : Math.floor(Math.random() * (reste + 1)); part[k] = v; reste -= v; });
|
|||
|
|
bons += part[ok]; total += n; rate.push([i + 1, Math.round(pBon * 100)]);
|
|||
|
|
document.querySelectorAll('#q-reps [data-r]').forEach(function (li, k) {
|
|||
|
|
var pc = li.querySelector('[data-pc]'); pc.hidden = false; pc.textContent = part[k] + ' élève' + (part[k] > 1 ? 's' : '');
|
|||
|
|
if (k !== ok) li.classList.add('opacity-40'); else li.classList.add('outline', 'outline-8', 'outline-black');
|
|||
|
|
});
|
|||
|
|
$('q-expl').hidden = false; $('q-expl').textContent = '✓ ' + q[3];
|
|||
|
|
$('suivant').textContent = i === Q.length - 1 ? 'Voir le bilan →' : 'Question suivante →';
|
|||
|
|
}
|
|||
|
|
function fin() {
|
|||
|
|
$('s-question').hidden = true; $('s-fin').hidden = false;
|
|||
|
|
$('f-score').textContent = Math.round(bons / Math.max(1, total) * 100);
|
|||
|
|
var pire = rate.slice().sort(function (a, b) { return a[1] - b[1]; })[0];
|
|||
|
|
$('f-rate').textContent = 'À revoir en cours : question ' + pire[0] + ' (' + pire[1] + ' % de réussite).';
|
|||
|
|
}
|
|||
|
|
$('demarrer').addEventListener('click', function () { clearInterval(joins); $('s-attente').hidden = true; $('s-question').hidden = false; question(); });
|
|||
|
|
$('suivant').addEventListener('click', function () { phase === 'q' ? reponse() : question(); });
|
|||
|
|
document.addEventListener('keydown', function (e) { if ((e.key === 'ArrowRight' || e.key === ' ') && !$('s-question').hidden) { e.preventDefault(); $('suivant').click(); } });
|
|||
|
|
$('plein').addEventListener('click', function () { document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen && document.documentElement.requestFullscreen(); });
|
|||
|
|
})();
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|