feat(tasks): separate Runner modal — Start actually runs the task
Before: Both info-icon (Details) and Start button opened the same
modal (tasks.modals.detail). Made no sense — Start should DO the task,
not just show metadata.
Now:
- Info-icon (i) -> tasks.modals.detail (read-only metadata)
- Start / Wiederholen-> tasks.modals.runner (interactive quiz)
New: App\Livewire\Tasks\Modals\Runner
Multi-step quiz modal with:
- 4-step progress bar (Frage X / Y + colored bar)
- Question + 4 answer options (2x2 grid, Tailwind cards)
- submitAnswer(int $option) advances step + tallies correctAnswers
- finished state shows trophy (passed) or arrow-path (partial)
- restart() resets quiz to step 1
- closeModalOnClickAway() = false (forces explicit cancel/finish)
- 2xl max-width for comfortable reading
Tasks/Index::startTask() now dispatches tasks.modals.runner via
$this->js("Livewire.dispatch('openModal', ...)") — same dispatch pattern
as before, different target component.
Placeholder data: 4 multiplication questions hardcoded. Future iteration
should load task content from DB (TaskItem / Question models).
Tests:
- TasksRunnerModalTest (10 tests, 25 assertions):
* Runner extends ModalComponent + alias resolves
* Step 1 renders question + 4 options
* Correct answer increments correctAnswers + advances step
* Wrong answer advances step without point
* Final step sets finished=true
* restart() resets state
* closeModalOnClickAway = false
* Progress label "Frage X / Y"
* Success path shows trophy
- TasksStartButtonTest updated:
* Asserts startTask emits dispatch with 'tasks.modals.runner'
(NOT 'tasks.modals.detail')
* Asserts info-button still routes to detail
- 167 tests passed, 0 failed, 0 skipped
Verification:
- All 8 modal aliases resolve via livewire.finder
- All 8 page routes return 302 unauth
- npm build OK
- No HTTP / no console errors expected
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Boban Blaskovic
7c6ea8d9f0