ajoute la surveillance d'examen (chantier vrai cockpit, dernière étape)
Une séance peut être lancée en mode examen avec une durée dédiée. Réutilise le mécanisme d'expiration déjà en place (labs:expirer-sessions, expire_a) plutôt que d'en construire un nouveau. Le navigateur de l'élève signale les changements d'onglet et les sorties de plein écran (evenements_examen : un type et un horodatage, rien d'autre - pas de capture d'écran ni de webcam) ; le prof voit le compte par élève et le temps restant dans le cockpit de sa classe et la salle d'attente. Choix d'Adam après discussion des options (suivi chronométré simple / + détection d'onglet / + tentative de plein écran) : la troisième, honnêtement présentée - un navigateur ne permet pas de vraiment empêcher de sortir, seulement de le signaler. Avec cette étape, les quatre fonctions fictives du tableau de bord démo (quiz, devoirs, observations, examen) sont maintenant réelles. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Adam Belkacemi
parent
954bb6ca6c
commit
f2bca621cd
15 changed files with 392 additions and 11 deletions
|
|
@ -153,7 +153,11 @@
|
|||
{{-- Vraies données de la séance en cours : un élève, son état, sa dernière vérification. --}}
|
||||
<section class="mt-6 rounded-lg border border-[#dadce0] bg-white" aria-labelledby="t-seance-encours">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3 border-b border-[#e3e5e8] p-4">
|
||||
<h2 id="t-seance-encours" class="text-lg font-extrabold">{{ $seance->lab->titre }} — {{ $seance->statut === \App\Models\Seance::EN_COURS ? 'en cours' : 'salle d\'attente' }}</h2>
|
||||
<h2 id="t-seance-encours" class="text-lg font-extrabold">{{ $seance->lab->titre }} — {{ $seance->statut === \App\Models\Seance::EN_COURS ? 'en cours' : 'salle d\'attente' }}
|
||||
@if ($seance->mode_examen)
|
||||
<span class="rounded-lg border border-[#A63D2A] bg-[#fce8e6] px-2 py-0.5 font-mono text-xs font-bold align-middle">Mode examen · {{ $seance->duree_examen_min }} min</span>
|
||||
@endif
|
||||
</h2>
|
||||
<span class="flex flex-wrap gap-2">
|
||||
<a href="{{ route('seances.attente', $seance) }}" class="inline-flex h-10 items-center rounded-lg border border-[#dadce0] px-4 text-sm font-extrabold hover:bg-[#f8f9fa]">Salle d'attente</a>
|
||||
<a href="{{ route('seances.visio.prof', $seance) }}" class="inline-flex h-10 items-center rounded-lg bg-[#0b57d0] px-4 text-sm font-extrabold text-white">{{ $seance->visioOuverte() ? 'Rejoindre la visio' : 'Lancer la visio' }}</a>
|
||||
|
|
@ -164,7 +168,9 @@
|
|||
@else
|
||||
<div class="overflow-x-auto"><table class="w-full min-w-[640px] border-collapse text-left text-sm">
|
||||
<thead class="border-b border-[#e3e5e8] bg-[#f8f9fa] font-mono text-[11px] uppercase tracking-wider">
|
||||
<tr><th class="px-4 py-3 font-semibold">Élève</th><th class="px-4 py-3 font-semibold">État</th><th class="px-4 py-3 font-semibold">Dernière vérification</th><th class="px-4 py-3 font-semibold"></th></tr>
|
||||
<tr><th class="px-4 py-3 font-semibold">Élève</th><th class="px-4 py-3 font-semibold">État</th><th class="px-4 py-3 font-semibold">Dernière vérification</th>
|
||||
@if ($seance->mode_examen)<th class="px-4 py-3 font-semibold">Sorties</th>@endif
|
||||
<th class="px-4 py-3 font-semibold"></th></tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-[#e3e5e8]">
|
||||
@foreach ($seance->labSessions as $labSession)
|
||||
|
|
@ -195,6 +201,15 @@
|
|||
—
|
||||
@endif
|
||||
</td>
|
||||
@if ($seance->mode_examen)
|
||||
<td class="px-4 py-3 font-mono font-semibold">
|
||||
@if ($labSession->evenementsExamen->isNotEmpty())
|
||||
<span class="text-[#A63D2A]">{{ $labSession->evenementsExamen->count() }}</span>
|
||||
@else
|
||||
0
|
||||
@endif
|
||||
</td>
|
||||
@endif
|
||||
<td class="px-4 py-3 text-right">
|
||||
@if ($labSession->etat === $etats::ACTIF)
|
||||
<a href="{{ route('seances.console.prof.page', [$seance, $labSession]) }}" class="font-bold underline underline-offset-4">Voir sa console</a>
|
||||
|
|
@ -414,7 +429,7 @@
|
|||
@if (session('seance_planifiee'))
|
||||
<p class="mt-4 rounded-lg border border-[#e3e5e8] bg-[#e6f4ea] p-4 font-semibold">Séance planifiée.</p>
|
||||
@endif
|
||||
<form action="{{ route('mes-classes.seances.store', $classe) }}" method="post" class="mt-4 flex flex-wrap items-end gap-3">
|
||||
<form action="{{ route('mes-classes.seances.store', $classe) }}" method="post" class="mt-4 flex flex-wrap items-end gap-3" id="form-seance">
|
||||
@csrf
|
||||
<label class="grid gap-1 font-bold">Lab<select name="lab_id" required class="rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold">
|
||||
@foreach (\App\Models\Lab::orderBy('titre')->get() as $lab)
|
||||
|
|
@ -422,11 +437,17 @@
|
|||
@endforeach
|
||||
</select></label>
|
||||
<label class="grid gap-1 font-bold">Date et heure (facultatif)<input type="datetime-local" name="prevue_a" value="{{ old('prevue_a') }}" class="rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold"></label>
|
||||
<label class="flex items-center gap-2 font-bold"><input type="checkbox" name="mode_examen" value="1" id="case-mode-examen"> Mode examen</label>
|
||||
<label class="grid gap-1 font-bold" id="champ-duree-examen" hidden>Durée (minutes)<input type="number" name="duree_examen_min" min="5" max="300" value="{{ old('duree_examen_min', 60) }}" class="w-28 rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold"></label>
|
||||
<button type="submit" class="inline-flex h-11 items-center justify-center rounded-full bg-black px-5 font-bold text-white">Ouvrir ou planifier</button>
|
||||
</form>
|
||||
@error('prevue_a')
|
||||
<p class="mt-2 font-semibold text-[#A63D2A]">{{ $message }}</p>
|
||||
@enderror
|
||||
@error('duree_examen_min')
|
||||
<p class="mt-2 font-semibold text-[#A63D2A]">{{ $message }}</p>
|
||||
@enderror
|
||||
<p class="mt-2 text-sm font-semibold text-[#5f6368]">Mode examen : chronométré, détecte les changements d'onglet et propose le plein écran. Ça ne bloque pas vraiment l'élève — un navigateur ne le permet pas — mais tu vois les sorties.</p>
|
||||
|
||||
@php($planifiees = $classe->seances()->where('statut', \App\Models\Seance::PLANIFIEE)->with('lab')->orderBy('prevue_a')->get())
|
||||
@if ($planifiees->isNotEmpty())
|
||||
|
|
@ -489,6 +510,10 @@
|
|||
if (!occupe) location.reload();
|
||||
}, 15000);
|
||||
@endif
|
||||
var caseModeExamen = document.getElementById('case-mode-examen');
|
||||
if (caseModeExamen) caseModeExamen.addEventListener('change', function () {
|
||||
document.getElementById('champ-duree-examen').hidden = !caseModeExamen.checked;
|
||||
});
|
||||
document.querySelectorAll('[data-imprimer]').forEach(function (b) { b.addEventListener('click', function () { window.print(); }); });
|
||||
document.querySelectorAll('form[data-confirmer]').forEach(function (f) {
|
||||
f.addEventListener('submit', function (e) { if (!window.confirm(f.dataset.confirmer)) e.preventDefault(); });
|
||||
|
|
|
|||
|
|
@ -26,6 +26,13 @@
|
|||
<p class="mt-4 font-semibold">Ton prof le voit et peut relancer. Cette page se mettra à jour toute seule.</p>
|
||||
</div>
|
||||
@elseif ($labSession->etat === $etats::ACTIF && $labSession->machines->isNotEmpty())
|
||||
@if ($seance->mode_examen)
|
||||
<div id="bandeau-examen" class="mb-4 flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-[#A63D2A] bg-[#fce8e6] p-4">
|
||||
<p class="font-extrabold">Mode examen · temps restant : <span id="temps-restant" class="font-mono">…</span></p>
|
||||
<button type="button" id="bouton-plein-ecran" class="inline-flex h-10 items-center rounded-full bg-black px-4 font-bold text-white">Passer en plein écran</button>
|
||||
</div>
|
||||
<p class="mb-4 text-sm font-semibold text-[#5f6368]">Reste sur cette page : les changements d'onglet et les sorties du plein écran sont signalés à ton prof.</p>
|
||||
@endif
|
||||
<h1 class="mt-2 text-3xl font-extrabold tracking-tight">Tes machines</h1>
|
||||
<div class="mt-4 flex gap-2" role="tablist">
|
||||
@foreach ($labSession->machines as $i => $machine)
|
||||
|
|
@ -96,6 +103,43 @@
|
|||
@endforeach
|
||||
});
|
||||
</script>
|
||||
@if ($seance->mode_examen)
|
||||
<script nonce="{{ Vite::cspNonce() }}">
|
||||
(function () {
|
||||
var finA = new Date(@json($labSession->expire_a?->toIso8601String()));
|
||||
var URL_EVENEMENT = @json(route('lab-sessions.evenements-examen', $labSession));
|
||||
var CSRF = @json(csrf_token());
|
||||
|
||||
function signaler(type) {
|
||||
fetch(URL_EVENEMENT, {
|
||||
method: 'POST', keepalive: true,
|
||||
headers: { 'X-CSRF-TOKEN': CSRF, 'Content-Type': 'application/json', Accept: 'application/json' },
|
||||
body: JSON.stringify({ type: type }),
|
||||
}).catch(function () {});
|
||||
}
|
||||
|
||||
function mettreAJourTemps() {
|
||||
var restantMs = finA - new Date();
|
||||
var affichage = document.getElementById('temps-restant');
|
||||
if (restantMs <= 0) { affichage.textContent = '0 min'; location.reload(); return; }
|
||||
affichage.textContent = Math.ceil(restantMs / 60000) + ' min';
|
||||
}
|
||||
mettreAJourTemps();
|
||||
setInterval(mettreAJourTemps, 10000);
|
||||
|
||||
document.getElementById('bouton-plein-ecran').addEventListener('click', function () {
|
||||
if (document.documentElement.requestFullscreen) document.documentElement.requestFullscreen().catch(function () {});
|
||||
});
|
||||
|
||||
document.addEventListener('visibilitychange', function () {
|
||||
if (document.hidden) signaler('changement_onglet');
|
||||
});
|
||||
document.addEventListener('fullscreenchange', function () {
|
||||
if (!document.fullscreenElement) signaler('sortie_plein_ecran');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
@endif
|
||||
@else
|
||||
<div class="py-20 text-center">
|
||||
<h1 class="text-4xl font-extrabold tracking-tight">Cette séance est terminée pour toi</h1>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@
|
|||
<meta http-equiv="refresh" content="10">
|
||||
<div class="mx-auto max-w-4xl px-5 py-14 lg:px-10">
|
||||
<p class="font-mono text-sm font-semibold">{{ $seance->classe->nom }} · {{ $seance->lab->titre }}</p>
|
||||
<h1 class="mt-1 text-4xl font-extrabold tracking-tight">Salle d'attente</h1>
|
||||
<h1 class="mt-1 text-4xl font-extrabold tracking-tight">Salle d'attente
|
||||
@if ($seance->mode_examen)
|
||||
<span class="rounded-lg border border-[#A63D2A] bg-[#fce8e6] px-2 py-0.5 align-middle font-mono text-sm font-bold">Mode examen · {{ $seance->duree_examen_min }} min</span>
|
||||
@endif
|
||||
</h1>
|
||||
<p class="mt-2 font-semibold">La page se rafraîchit toutes les 10 secondes.</p>
|
||||
<p class="mt-4"><a href="{{ route('seances.visio.prof', $seance) }}" class="inline-flex h-11 items-center rounded-full bg-[#0b57d0] px-5 font-bold text-white">{{ $seance->visioOuverte() ? 'Retourner à la visio' : 'Visio de la classe' }}</a></p>
|
||||
|
||||
|
|
@ -38,6 +42,12 @@
|
|||
</span>
|
||||
@endif
|
||||
<a href="{{ route('seances.console.prof.page', [$seance, $labSession]) }}" class="font-bold underline underline-offset-4">Voir sa console</a>
|
||||
@if ($seance->mode_examen)
|
||||
<span class="font-mono text-sm font-bold {{ $labSession->evenementsExamen->isNotEmpty() ? 'text-[#A63D2A]' : '' }}">{{ $labSession->evenementsExamen->count() }} sortie(s)</span>
|
||||
@if ($labSession->minutesRestantes() !== null)
|
||||
<span class="font-mono text-sm font-bold">{{ $labSession->minutesRestantes() }} min restantes</span>
|
||||
@endif
|
||||
@endif
|
||||
@break
|
||||
@case($etats::ECHEC)
|
||||
<span class="rounded-lg border border-[#A63D2A] bg-[#fce8e6] px-3 py-1 font-mono text-sm font-bold" title="{{ $labSession->raison_echec }}">Échec du lancement (3 essais)</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue