99 lines
4.8 KiB
PHP
99 lines
4.8 KiB
PHP
@php
|
|
$q = $this->currentQuestion();
|
|
$progressPercent = $totalSteps > 0 ? (int) round(($currentStep / $totalSteps) * 100) : 0;
|
|
@endphp
|
|
|
|
<div data-testid="task-runner-modal">
|
|
|
|
<header class="flex items-center justify-between gap-4 p-5 border-b border-line">
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<div class="w-10 h-10 rounded-lg bg-primary-soft text-primary-ink grid place-items-center font-bold text-lg shrink-0">
|
|
{{ $task['icon'] ?? '∑' }}
|
|
</div>
|
|
<div class="min-w-0">
|
|
<div class="text-[10px] uppercase tracking-[0.12em] text-ink-3 font-semibold">{{ $task['meta'] ?? '' }}</div>
|
|
<div class="font-bold text-base text-ink-1 truncate">{{ $task['title'] ?? 'Aufgabe' }}</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" wire:click="closeModal" aria-label="Schließen" class="text-ink-3 hover:text-ink-1 transition-colors p-1 shrink-0">
|
|
<x-heroicon-o-x-mark class="w-5 h-5" />
|
|
</button>
|
|
</header>
|
|
|
|
@if(! $finished)
|
|
{{-- Progress bar --}}
|
|
<div class="px-5 pt-4">
|
|
<div class="flex justify-between items-baseline mb-2">
|
|
<span class="text-xs font-semibold text-ink-2 font-mono tabular-nums">Frage {{ $currentStep }} / {{ $totalSteps }}</span>
|
|
<span class="text-xs font-semibold text-amber-ink font-mono tabular-nums">+{{ (int) ($task['points'] ?? 0) }} Pkt.</span>
|
|
</div>
|
|
<div class="h-1.5 rounded-full bg-bg-base overflow-hidden">
|
|
<div class="h-full rounded-full bg-primary-ink transition-all duration-500" style="width:{{ $progressPercent }}%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Question --}}
|
|
<div class="p-5">
|
|
<div class="text-[11px] uppercase tracking-[0.12em] text-ink-3 font-semibold mb-2">Aufgabe</div>
|
|
<div class="text-xl font-bold tracking-tight text-ink-1 mb-5" data-testid="runner-question">
|
|
{{ $q['question'] }}
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3" wire:key="step-{{ $currentStep }}">
|
|
@foreach($q['options'] as $i => $opt)
|
|
<button
|
|
type="button"
|
|
wire:click="submitAnswer({{ $i }})"
|
|
wire:loading.attr="disabled"
|
|
wire:target="submitAnswer"
|
|
class="px-4 py-4 rounded-lg bg-bg-soft border-2 border-line text-ink-1 font-semibold text-base hover:border-primary hover:bg-primary-soft transition-all cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
|
|
data-testid="runner-option-{{ $i }}"
|
|
>
|
|
{{ $opt }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="px-5 pb-5 pt-2 flex justify-between items-center text-xs text-ink-3">
|
|
<span>Klick eine Antwort an, um fortzufahren.</span>
|
|
<button type="button" wire:click="closeModal" class="hover:text-ink-1 underline">Abbrechen</button>
|
|
</footer>
|
|
@else
|
|
{{-- Finished state --}}
|
|
@php
|
|
$passed = $correctAnswers >= (int) ceil($totalSteps / 2);
|
|
$percent = $totalSteps > 0 ? (int) round(($correctAnswers / $totalSteps) * 100) : 0;
|
|
@endphp
|
|
<div class="p-8 text-center" data-testid="runner-finished">
|
|
<div class="w-16 h-16 rounded-full grid place-items-center mx-auto mb-4 {{ $passed ? 'bg-green-soft text-green-ink' : 'bg-amber-soft text-amber-ink' }}">
|
|
@if($passed)
|
|
<x-heroicon-s-trophy class="w-8 h-8" />
|
|
@else
|
|
<x-heroicon-s-arrow-path class="w-8 h-8" />
|
|
@endif
|
|
</div>
|
|
|
|
<div class="text-xl font-bold text-ink-1 mb-1">
|
|
@if($passed) Super gemacht! @else Fast geschafft @endif
|
|
</div>
|
|
<p class="text-sm text-ink-2 mb-2">
|
|
Du hast <span class="font-mono tabular-nums font-bold text-ink-1">{{ $correctAnswers }}</span>
|
|
von <span class="font-mono tabular-nums font-bold text-ink-1">{{ $totalSteps }}</span> Aufgaben richtig.
|
|
</p>
|
|
<p class="text-xs text-ink-3 mb-6 font-mono tabular-nums">{{ $percent }} % Erfolgsquote</p>
|
|
|
|
<div class="flex gap-2">
|
|
<x-btn wire:click="restart" class="flex-1 justify-center">
|
|
<x-heroicon-o-arrow-path class="w-4 h-4" />
|
|
Nochmal
|
|
</x-btn>
|
|
<x-btn variant="primary" wire:click="closeModal" class="flex-1 justify-center">
|
|
@if($passed) Punkte holen @else Fertig @endif
|
|
</x-btn>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|