108 lines
6.9 KiB
PHP
108 lines
6.9 KiB
PHP
@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>
|
|
<span class="flex flex-wrap gap-2">
|
|
<form action="{{ route('mes-classes.quiz.partager', [$classe, $quiz]) }}" method="post">
|
|
@csrf
|
|
<button type="submit" class="inline-flex h-11 items-center rounded-full border border-[#dadce0] px-5 font-bold hover:bg-[#f8f9fa]">{{ $quiz->partage ? 'Retirer de la banque' : 'Partager dans la banque' }}</button>
|
|
</form>
|
|
<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>
|
|
</span>
|
|
</div>
|
|
@if ($quiz->partage)
|
|
<p class="mt-2 font-mono text-sm font-semibold text-[#0b57d0]">Partagé dans la banque de quiz : les autres profs peuvent le dupliquer.</p>
|
|
@endif
|
|
@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
|