Quiz: auto-submit on answer click, no confirm button for MC/exclusion/true_false

This commit is contained in:
root
2026-05-06 06:52:07 +00:00
parent 6c6dd26823
commit c96f22fdc7
@@ -82,8 +82,9 @@
@foreach($question->answerOptions as $opt)
<label class="flex items-center gap-3 p-4 border-2 border-slate-200 rounded-xl cursor-pointer
hover:border-violet-300 hover:bg-violet-50 has-[:checked]:border-violet-500 has-[:checked]:bg-violet-50
transition-colors">
<input type="radio" name="answer" value="{{ $opt->id }}" required class="w-4 h-4 text-violet-600 shrink-0">
active:scale-95 transition-all">
<input type="radio" name="answer" value="{{ $opt->id }}" class="sr-only"
@change="$el.closest('form').submit()">
<span class="text-slate-700 font-medium text-sm">{{ $opt->text }}</span>
</label>
@endforeach
@@ -94,14 +95,16 @@
<label class="flex items-center justify-center gap-3 p-5 border-2 border-slate-200 rounded-xl cursor-pointer
hover:border-green-400 hover:bg-green-50 has-[:checked]:border-green-500 has-[:checked]:bg-green-50
transition-colors">
<input type="radio" name="answer" value="true" required class="sr-only">
<input type="radio" name="answer" value="true" class="sr-only"
@change="$el.closest('form').submit()">
<span class="text-2xl"></span>
<span class="font-bold text-slate-700">Wahr</span>
</label>
<label class="flex items-center justify-center gap-3 p-5 border-2 border-slate-200 rounded-xl cursor-pointer
hover:border-red-400 hover:bg-red-50 has-[:checked]:border-red-500 has-[:checked]:bg-red-50
transition-colors">
<input type="radio" name="answer" value="false" required class="sr-only">
<input type="radio" name="answer" value="false" class="sr-only"
@change="$el.closest('form').submit()">
<span class="text-2xl"></span>
<span class="font-bold text-slate-700">Falsch</span>
</label>
@@ -114,9 +117,11 @@
</div>
@endif
@if($question->type === 'free_text')
<button type="submit" class="w-full bg-violet-600 hover:bg-violet-700 text-white py-3 rounded-xl font-bold text-base">
Antworten
</button>
@endif
</form>
</div>
</div>