Paillasse/portail/resources/views/quiz/projection.blade.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é&nbsp;!</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>