116 lines
10 KiB
PHP
116 lines
10 KiB
PHP
|
<!DOCTYPE html>
|
|||
|
|
<html lang="fr">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<title>Mode examen · 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="bg-white font-display text-black antialiased">
|
|||
|
|
<header class="border-b-4 border-black bg-black text-white">
|
|||
|
|
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-3 px-5 py-4 lg:px-10">
|
|||
|
|
<span class="border-2 border-white bg-[#ec3013] px-3 py-1 font-extrabold">MODE EXAMEN</span>
|
|||
|
|
<p class="flex-1 font-bold">Adressage et VLAN · E6 blanc SISR · Léa Martin</p>
|
|||
|
|
<p class="flex items-center gap-3"><span class="font-semibold">Temps restant</span><span id="chrono" class="border-2 border-white bg-[#FFD23F] px-3 py-1 font-mono text-2xl font-semibold text-black" role="timer" aria-live="off">59:59</span></p>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
<div class="border-b-4 border-black bg-[#FFD23F]">
|
|||
|
|
<ul class="mx-auto flex max-w-7xl flex-wrap gap-x-6 gap-y-1 px-5 py-2 text-sm font-extrabold lg:px-10">
|
|||
|
|
<li>■ Indices désactivés</li><li>■ Copier-coller bloqué</li><li>■ Sortie d’onglet signalée à l’enseignant</li><li>■ VM sans accès Internet</li><li class="ml-auto">Incidents signalés : <span id="incidents" class="font-mono">0</span></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<main class="mx-auto grid max-w-7xl gap-10 px-5 py-10 lg:grid-cols-12 lg:px-10">
|
|||
|
|
<nav class="lg:col-span-3" aria-label="Questions">
|
|||
|
|
<h2 class="text-xl font-black">Questions</h2>
|
|||
|
|
<ol class="mt-4 grid grid-cols-5 gap-2 lg:grid-cols-4">
|
|||
|
|
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-black text-white">1</a></li>
|
|||
|
|
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-black text-white">2</a></li>
|
|||
|
|
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-black text-white">3</a></li>
|
|||
|
|
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-black text-white">4</a></li>
|
|||
|
|
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-[#FFD23F] shadow-[3px_3px_0px_#000000]" aria-current="step">5</a></li>
|
|||
|
|
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-white">6</a></li>
|
|||
|
|
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-white">7</a></li>
|
|||
|
|
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-[#FF6FB5]">8</a></li>
|
|||
|
|
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-white">9</a></li>
|
|||
|
|
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-white">10</a></li>
|
|||
|
|
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-white">11</a></li>
|
|||
|
|
<li><a href="#q" class="grid h-11 place-items-center border-2 border-black font-mono font-semibold bg-white">12</a></li>
|
|||
|
|
</ol>
|
|||
|
|
<ul class="mt-5 grid gap-1 text-sm font-semibold">
|
|||
|
|
<li class="flex items-center gap-2"><span class="h-3 w-3 bg-black"></span> Répondue</li>
|
|||
|
|
<li class="flex items-center gap-2"><span class="h-3 w-3 border-2 border-black bg-[#FF6FB5]"></span> Marquée pour revoir</li>
|
|||
|
|
</ul>
|
|||
|
|
<p class="mt-6 border-2 border-black p-3 font-mono text-sm font-semibold">4 / 12 répondues · Partie TP : 0 / 3 étapes</p>
|
|||
|
|
</nav>
|
|||
|
|
<div class="grid gap-10 lg:col-span-9">
|
|||
|
|
<fieldset id="q" class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]">
|
|||
|
|
<legend class="-ml-2 border-2 border-black bg-[#FFD23F] px-2 font-mono text-sm font-semibold">Question 5 · 1 point</legend>
|
|||
|
|
<p class="text-2xl font-extrabold">Un service de 50 postes doit avoir son propre sous-réseau. Quel masque choisissez-vous ?</p>
|
|||
|
|
<div class="mt-5 grid gap-3 sm:grid-cols-2">
|
|||
|
|
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-mono font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q5" class="h-5 w-5 accent-black"> /24 · 255.255.255.0</label>
|
|||
|
|
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-mono font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q5" class="h-5 w-5 accent-black"> /25 · 255.255.255.128</label>
|
|||
|
|
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-mono font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q5" class="h-5 w-5 accent-black"> /26 · 255.255.255.192</label>
|
|||
|
|
<label class="flex cursor-pointer items-center gap-3 border-2 border-black px-4 py-3 font-mono font-semibold hover:bg-[#FFFBEA] has-[:checked]:bg-[#C4B5FD]"><input type="radio" name="q5" class="h-5 w-5 accent-black"> /27 · 255.255.255.224</label>
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-6 flex flex-wrap gap-3">
|
|||
|
|
<a href="#q" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none">← Précédente</a>
|
|||
|
|
<button type="button" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none">Marquer pour revoir</button>
|
|||
|
|
<a href="#q" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none bg-black text-white hover:text-black">Suivante →</a>
|
|||
|
|
</div>
|
|||
|
|
</fieldset>
|
|||
|
|
<section class="border-4 border-black bg-[#13233A] font-mono text-white shadow-[8px_8px_0px_#7CF2C0]" aria-labelledby="t-partie">
|
|||
|
|
<div class="flex flex-wrap items-center gap-3 border-b-4 border-black bg-[#0d192b] px-4 py-2">
|
|||
|
|
<h2 id="t-partie" class="flex-1 text-sm font-semibold">Partie TP · commutateur-sw1 · console 1</h2>
|
|||
|
|
<span class="border-2 border-white px-2 text-xs">vérification à la remise</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="space-y-1 p-5 text-sm leading-relaxed">
|
|||
|
|
<p class="text-[#FFD23F]">Créez le VLAN 20 « compta » et placez-y l’interface eth2.</p>
|
|||
|
|
<p><span class="text-[#7CF2C0]">root@sw1</span>:~# ip link add link eth0 name eth0.20 type vlan id 20</p>
|
|||
|
|
<p><span class="text-[#7CF2C0]">root@sw1</span>:~# <span class="curseur inline-block h-4 w-2.5 translate-y-0.5 bg-[#FFD23F]"></span></p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<div class="flex flex-wrap items-center gap-5">
|
|||
|
|
<button type="button" id="rendre" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Rendre ma copie</button>
|
|||
|
|
<p class="font-semibold">La copie est rendue automatiquement à la fin du temps.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
<script>
|
|||
|
|
(function () {
|
|||
|
|
var fin = Date.now() + 60 * 60 * 1000 - 1000;
|
|||
|
|
var el = document.getElementById('chrono');
|
|||
|
|
function tic() {
|
|||
|
|
var s = Math.max(0, Math.round((fin - Date.now()) / 1000));
|
|||
|
|
el.textContent = String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0');
|
|||
|
|
if (s < 300) el.classList.add('bg-[#ec3013]', 'text-white');
|
|||
|
|
}
|
|||
|
|
tic(); setInterval(tic, 1000);
|
|||
|
|
var inc = 0, spot = document.getElementById('incidents'), last = 0;
|
|||
|
|
function signal() { if (Date.now() - last < 800) return; last = Date.now(); inc++; spot.textContent = inc; spot.parentNode.classList.add('bg-[#ec3013]', 'text-white', 'px-2'); }
|
|||
|
|
document.addEventListener('visibilitychange', function () { if (document.hidden) signal(); });
|
|||
|
|
window.addEventListener('blur', signal);
|
|||
|
|
document.documentElement.addEventListener('mouseleave', signal);
|
|||
|
|
['copy', 'cut', 'paste'].forEach(function (ev) { document.addEventListener(ev, function (e) { e.preventDefault(); signal(); }); });
|
|||
|
|
document.getElementById('rendre').addEventListener('click', function () {
|
|||
|
|
if (confirm('Rendre la copie ? Vous ne pourrez plus la modifier.')) {
|
|||
|
|
this.textContent = 'Copie rendue ✓';
|
|||
|
|
this.disabled = true;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|