adam/Paillasse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ajoute Quiz flash (chantier vrai cockpit, étape 2) : QCM et vrai/faux, lancé en direct, indépendant d'une séance de lab

Browse source 
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Adam Belkacemi 2026-10-13 12:14:30 +02:00
parent 45f8a69e26
commit 16d1293911
24 changed files with 1249 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

99
portail/resources/views/quiz/show.blade.php Normal file
View file

@ -0,0 +1,99 @@
@extends('layouts.vitrine')
@section('titre', $quiz->titre)
@section('contenu')
<div class="mx-auto max-w-4xl px-5 py-14 lg:px-10">
<p class="font-mono text-sm font-semibold"><a href="{{ route('mes-classes.quiz.index', $classe) }}" class="underline underline-offset-4">Quiz · {{ $classe->nom }}</a></p>
<div class="mt-1 flex flex-wrap items-center justify-between gap-4">
<h1 class="text-4xl font-extrabold tracking-tight">{{ $quiz->titre }}</h1>
<form action="{{ route('mes-classes.quiz.lancer', [$classe, $quiz]) }}" method="post">
@csrf
<button type="submit" class="inline-flex h-11 items-center rounded-full bg-black px-5 font-bold text-white" @disabled($quiz->questions->isEmpty())>Lancer ce quiz</button>
</form>
</div>
@error('questions')<p class="mt-2 font-bold text-[#A63D2A]">Ajoute au moins une question avant de lancer.</p>@enderror
<section class="mt-8" aria-labelledby="t-questions">
<h2 id="t-questions" class="text-xl font-extrabold">Questions ({{ $quiz->questions->count() }})</h2>
@if ($quiz->questions->isEmpty())
<p class="mt-2 font-semibold">Aucune question pour l'instant.</p>
@else
<ol class="mt-4 grid gap-3">
@foreach ($quiz->questions as $question)
<li class="rounded-2xl border border-[#e3e5e8] bg-white p-5">
<div class="flex flex-wrap items-start justify-between gap-3">
<p class="text-lg font-extrabold">{{ $loop->iteration }}. {{ $question->enonce }}</p>
<form action="{{ route('mes-classes.quiz.questions.destroy', [$classe, $quiz, $question]) }}" method="post" data-confirmer="Supprimer cette question ?">
@csrf
<button type="submit" class="font-bold text-[#A63D2A] underline underline-offset-4">Supprimer</button>
</form>
</div>
@if ($question->type === \App\Models\QuestionQuiz::VRAI_FAUX)
<p class="mt-2 font-mono text-sm font-semibold">Bonne réponse : {{ $question->reponse_vrai_faux ? 'Vrai' : 'Faux' }}</p>
@else
<ul class="mt-2 grid gap-1 font-semibold">
@foreach ($question->choix as $choix)
<li class="{{ $choix->est_correct ? 'text-[#3C8A5A]' : '' }}">{{ $choix->est_correct ? '✓' : '·' }} {{ $choix->texte }}</li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ol>
@endif
</section>
<section class="mt-8 rounded-2xl border border-[#e3e5e8] bg-white p-6" aria-labelledby="t-ajout">
<h2 id="t-ajout" class="text-xl font-extrabold">Ajouter une question</h2>
<form action="{{ route('mes-classes.quiz.questions.store', [$classe, $quiz]) }}" method="post" class="mt-4 grid gap-4" id="form-question">
@csrf
<label class="grid gap-1 font-bold">Énoncé
<textarea name="enonce" required rows="2" class="rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold"></textarea>
</label>
<fieldset class="grid gap-1 font-bold">
<legend>Type de question</legend>
<label class="inline-flex items-center gap-2 font-semibold"><input type="radio" name="type" value="qcm" data-type-radio checked> QCM (une bonne réponse)</label>
<label class="inline-flex items-center gap-2 font-semibold"><input type="radio" name="type" value="vrai_faux" data-type-radio> Vrai / Faux</label>
</fieldset>
<div data-bloc-qcm class="grid gap-2">
<p class="font-bold">Choix (coche la bonne réponse)</p>
@for ($i = 0; $i < 4; $i++)
<label class="flex items-center gap-2 font-semibold">
<input type="radio" name="bonne_reponse" value="{{ $i }}" @required($i === 0) aria-label="Choix {{ $i + 1 }} correct">
<input name="choix[]" placeholder="Choix {{ $i + 1 }}{{ $i < 2 ? '' : ' (facultatif)' }}" @required($i < 2) class="flex-1 rounded-xl border border-[#c4c7c5] bg-white px-3 py-2 font-semibold">
</label>
@endfor
</div>
<div data-bloc-vrai-faux class="grid gap-1 font-bold">
<p>Bonne réponse</p>
<label class="inline-flex items-center gap-2 font-semibold"><input type="radio" name="reponse_vrai_faux" value="1"> Vrai</label>
<label class="inline-flex items-center gap-2 font-semibold"><input type="radio" name="reponse_vrai_faux" value="0"> Faux</label>
</div>
<button type="submit" class="inline-flex h-11 w-fit items-center rounded-full bg-[#0b57d0] px-5 font-bold text-white">Ajouter la question</button>
</form>
</section>
</div>
<script nonce="{{ Vite::cspNonce() }}">
(function () {
var form = document.getElementById('form-question');
var blocQcm = form.querySelector('[data-bloc-qcm]');
var blocVraiFaux = form.querySelector('[data-bloc-vrai-faux]');
var champsQcm = blocQcm.querySelectorAll('input');
function appliquer() {
var qcm = form.querySelector('[data-type-radio]:checked').value === 'qcm';
blocQcm.hidden = !qcm;
blocVraiFaux.hidden = qcm;
champsQcm.forEach(function (c) { c.disabled = !qcm; });
}
form.querySelectorAll('[data-type-radio]').forEach(function (r) { r.addEventListener('change', appliquer); });
appliquer();
})();
document.querySelectorAll('form[data-confirmer]').forEach(function (f) {
f.addEventListener('submit', function (e) { if (!window.confirm(f.dataset.confirmer)) e.preventDefault(); });
});
</script>
@endsection