feat: Lernapp mit Mathe/Deutsch/Englisch, Münzsystem und Belohnungen

2026-05-05 14:41:09 +00:00
parent 21e40cd2da
commit bd1640994c
45 changed files with 1522 additions and 58 deletions
@@ -0,0 +1,34 @@
+@extends('layouts.child')
+@section('content')
+<div class="mb-4 flex items-center gap-3">
+  <a href="{{ route('learn.subjects') }}" class="text-slate-400 hover:text-slate-600 text-sm">← Fächer</a>
+  <span class="text-lg">{{ $subject->icon }}</span>
+  <span class="font-bold text-slate-700">{{ $subject->name }}</span>
+  <span class="ml-auto text-sm text-slate-400">{{ $question->difficultyStars() }}</span>
+</div>
+<div class="bg-white rounded-2xl shadow-md border border-slate-200 p-6 mb-6">
+  <div class="text-xs text-slate-400 mb-3 font-medium">
+    {{ ['','⭐ Leicht — 5 Münzen','⭐⭐ Mittel — 10 Münzen','⭐⭐⭐ Schwer — 20 Münzen'][$question->difficulty] }}
+  </div>
+  <p class="text-xl font-bold text-slate-800 leading-snug">{{ $question->question_text }}</p>
+</div>
+<form method="POST" action="{{ route('learn.answer', $subject->slug) }}">
+  @csrf
+  <input type="hidden" name="question_id" value="{{ $question->id }}">
+  <div class="grid gap-3">
+  @foreach($question->answerOptions as $opt)
+  <label class="cursor-pointer">
+    <input type="radio" name="answer" value="{{ $opt->id }}" class="sr-only peer" required>
+    <div class="bg-white border-2 border-slate-200 rounded-2xl px-5 py-4 text-base font-medium text-slate-700
+        peer-checked:border-indigo-500 peer-checked:bg-indigo-50 peer-checked:text-indigo-700
+        hover:border-indigo-300 hover:bg-slate-50 transition-all">
+      {{ $opt->text }}
+    </div>
+  </label>
+  @endforeach
+  </div>
+  <button type="submit" class="mt-6 w-full bg-indigo-600 hover:bg-indigo-700 text-white text-lg font-bold py-4 rounded-2xl shadow-md transition-colors">
+    Antworten ✓
+  </button>
+</form>
+@endsection
@@ -0,0 +1,41 @@
+@extends('layouts.child')
+@section('content')
+<div class="text-center">
+  @if($isRight)
+    <div class="text-7xl mb-4 animate-bounce">🎉</div>
+    <h1 class="text-3xl font-black text-green-600 mb-2">Richtig!</h1>
+    <p class="text-slate-600 mb-4">Super gemacht!</p>
+    <div class="inline-flex items-center gap-2 bg-amber-100 text-amber-700 font-black text-2xl rounded-2xl px-6 py-3 mb-4">
+      +{{ $earned }} 🪙
+    </div>
+    @if($earned > $question->points_value)
+    <p class="text-orange-600 font-bold text-sm mb-4">🔥 Serien-Bonus inklusive!</p>
+    @endif
+    @if($newStreak >= 3)
+    <div class="bg-orange-50 border border-orange-200 rounded-xl px-4 py-2 text-orange-700 font-bold text-sm mb-4 inline-block">
+      🔥 {{ $newStreak }}er-Serie! Weiter so!
+    </div>
+    @endif
+  @else
+    <div class="text-7xl mb-4">😅</div>
+    <h1 class="text-3xl font-black text-red-500 mb-2">Leider falsch</h1>
+    <p class="text-slate-600 mb-4">Die richtige Antwort war:</p>
+    <div class="bg-green-100 border border-green-300 text-green-800 font-bold text-lg rounded-2xl px-6 py-3 mb-4 inline-block">
+      {{ $correct->text }}
+    </div>
+  @endif
+
+  <div class="mt-6 flex gap-3 justify-center">
+    <a href="{{ route('learn.quiz', $subject->slug) }}" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-8 py-3 rounded-2xl text-base shadow-md transition-colors">
+      Nächste Frage ▶
+    </a>
+    <a href="{{ route('learn.subjects') }}" class="bg-slate-200 hover:bg-slate-300 text-slate-700 font-bold px-6 py-3 rounded-2xl text-base transition-colors">
+      Fächer
+    </a>
+  </div>
+
+  <div class="mt-6 text-slate-500 text-sm">
+    Dein Kontostand: <span class="font-bold text-amber-600">🪙 {{ auth()->user()->fresh()->points }}</span>
+  </div>
+</div>
+@endsection
@@ -0,0 +1,19 @@
+@extends('layouts.child')
+@section('content')
+<h1 class="text-2xl font-bold text-indigo-700 mb-6 text-center">📚 Welches Fach?</h1>
+<div class="grid gap-5">
+@foreach($subjects as $s)
+@php $colors = ['green'=>'from-green-400 to-emerald-500','blue'=>'from-blue-400 to-indigo-500','orange'=>'from-orange-400 to-amber-500'] @endphp
+<a href="{{ route('learn.quiz', $s->slug) }}" class="bg-gradient-to-r {{ $colors[$s->color] ?? 'from-violet-400 to-purple-500' }} rounded-2xl p-6 text-white flex items-center justify-between hover:scale-[1.02] transition-transform shadow-md">
+  <div class="flex items-center gap-5">
+    <span class="text-5xl">{{ $s->icon }}</span>
+    <div>
+      <div class="text-2xl font-black">{{ $s->name }}</div>
+      <div class="text-white/80 text-sm mt-0.5">{{ $s->total }} Fragen · {{ $s->correct }} richtig beantwortet</div>
+    </div>
+  </div>
+  <div class="text-4xl">▶</div>
+</a>
+@endforeach
+</div>
+@endsection