e4a6aaebb1
Pages /legal et /confidentialite réécrites d'après le système réel, purge des classes archivées depuis 90 jours (prouvée par Pest), archivage côté prof. Polices, xterm.js et CodeMirror ne sont plus chargés depuis Google ni jsDelivr. Pages d'aperçu signalées, sans vrais établissements ni faux chiffres. Journaux Laravel gardés 14 jours. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
162 lines
18 KiB
PHP
162 lines
18 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 · Syllabus</title>
|
||
{{ Vite::fonts() }}
|
||
@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>
|
||
<link rel="stylesheet" href="{{ asset('css/syllabus-theme.css') }}">
|
||
</head>
|
||
|
||
<body class="min-h-screen bg-white font-display text-black antialiased">
|
||
@include('partials.apercu')
|
||
<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="{{ route('banque') }}" 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>
|