160 lines
17 KiB
PHP
160 lines
17 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Quiz flash · projection · Paillasse</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">
|
||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||
<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>
|
||
</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-black">Sur ton téléphone ou ton PC, va sur</p>
|
||
<p class="mt-4 inline-block self-start -rotate-1 border-4 border-black bg-[#7CF2C0] px-5 py-3 font-mono text-5xl font-semibold shadow-[8px_8px_0px_#000000]">paillasse.fr/quiz</p>
|
||
<p class="mt-10 text-3xl font-black">et entre le code</p>
|
||
<p class="mt-4 inline-block self-start rotate-1 border-4 border-black bg-[#FFD23F] px-6 py-4 font-mono text-8xl font-semibold tracking-widest shadow-[10px_10px_0px_#000000]">K7Q4</p>
|
||
<p class="mt-10 text-xl font-bold">Connecte-toi avec ton identifiant Paillasse.</p>
|
||
</div>
|
||
<div class="flex flex-col border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:col-span-5">
|
||
<div class="flex items-center justify-between border-b-4 border-black bg-[#C4B5FD] px-5 py-3"><p class="text-xl font-black">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 Martin" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Léa Martin</li>
|
||
<li data-eleve="Yanis Benali" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Yanis Benali</li>
|
||
<li data-eleve="Nora Kaci" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Nora Kaci</li>
|
||
<li data-eleve="Tom Robert" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Tom Robert</li>
|
||
<li data-eleve="Inès Durand" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Inès Durand</li>
|
||
<li data-eleve="Sami Lefèvre" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Sami Lefèvre</li>
|
||
<li data-eleve="Chloé Petit" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Chloé Petit</li>
|
||
<li data-eleve="Adam Fontaine" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Adam Fontaine</li>
|
||
<li data-eleve="Maël Girard" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Maël Girard</li>
|
||
<li data-eleve="Jade Thomas" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Jade Thomas</li>
|
||
<li data-eleve="Hugo Moreau" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Hugo Moreau</li>
|
||
<li data-eleve="Lina Garcia" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Lina Garcia</li>
|
||
<li data-eleve="Rayan Faure" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Rayan Faure</li>
|
||
<li data-eleve="Emma Blanc" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Emma Blanc</li>
|
||
<li data-eleve="Noah Henry" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Noah Henry</li>
|
||
<li data-eleve="Sarah Roux" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Sarah Roux</li>
|
||
<li data-eleve="Ilyes Morel" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Ilyes Morel</li>
|
||
<li data-eleve="Manon Lopez" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Manon Lopez</li>
|
||
<li data-eleve="Lucas Mercier" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Lucas Mercier</li>
|
||
<li data-eleve="Zoé Dupont" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Zoé Dupont</li>
|
||
<li data-eleve="Enzo Lambert" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Enzo Lambert</li>
|
||
<li data-eleve="Camille Bonnet" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Camille Bonnet</li>
|
||
<li data-eleve="Nathan Fournier" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Nathan Fournier</li>
|
||
<li data-eleve="Anaïs Leroy" class="flex items-center gap-2 border-2 border-black bg-white px-2 py-1 opacity-40"><span data-pastille class="h-3 w-3 shrink-0 border-2 border-black bg-white"></span>Anaïs Leroy</li>
|
||
</ul>
|
||
<div class="border-t-4 border-black p-4">
|
||
<p id="manquants" class="font-bold">En attente des connexions…</p>
|
||
<button type="button" id="demarrer" class="mt-4 w-full border-4 border-black bg-black px-6 py-4 text-left text-xl font-extrabold text-white shadow-[6px_6px_0px_#ec3013] 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-4 border-black 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-4 border-black 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>
|
||
<h1 id="q-texte" class="mt-10 max-w-5xl text-5xl font-black leading-tight tracking-tight lg:text-7xl"></h1>
|
||
<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-black"><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-4 border-black bg-[#7CF2C0] px-5 py-3 text-xl font-bold"></p>
|
||
<button type="button" id="suivant" class="ml-auto border-4 border-black bg-black px-6 py-4 text-xl font-extrabold text-white shadow-[6px_6px_0px_#FFD23F]">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-4 border-black bg-[#FFD23F] p-8 shadow-[10px_10px_0px_#000000] lg:col-span-2">
|
||
<p class="text-2xl font-black">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-4 border-black pt-4 text-xl font-bold"></p>
|
||
</div>
|
||
<div class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]">
|
||
<p class="text-xl font-black">Absents au quiz</p>
|
||
<ul class="mt-3 grid gap-2 font-bold"><li class="border-2 border-black bg-[#FFE4DF] px-3 py-1">Inès Durand</li><li class="border-2 border-black bg-[#FFE4DF] px-3 py-1">Hugo Moreau</li><li class="border-2 border-black bg-[#FFE4DF] px-3 py-1">Jade Thomas</li></ul>
|
||
<p class="mt-4 font-semibold">Résultats enregistrés dans le suivi de la classe.</p>
|
||
<a href="{{ route('banque') }}" class="mt-5 inline-block border-4 border-black 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-[#FF6FB5]","bg-[#7CF2C0]","bg-[#FFD23F]","bg-[#C4B5FD]"], ABS = ["Inès Durand","Hugo Moreau","Jade Thomas"], 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-[#7CF2C0]'); 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-4 border-black ' + COL[k] + ' p-6 text-3xl font-black shadow-[6px_6px_0px_#000000]"><span class="grid h-14 w-14 shrink-0 place-items-center border-4 border-black 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>
|