When user clicks an EN word, the corresponding image (Wikipedia
photo or emoji) appears below the match grid. Emoji shown as
large text (6xl), Wikipedia photos as max-h 160px image.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- exerciseType prop for correct explanation lookup (was using title)
- Vertical divider line between work area and native helper
- Cyan-tinted explanation card with lightbulb icon
- Padding between sections (pr-6 / pl-6 around divider)
- Explanation card has distinct background for visibility
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ExerciseLayout.tsx: Reusable layout component for all exercises.
- Left 2/3: Standard exercise area (EN + DE)
- Right 1/3: Native language helper (explanation + word list)
- Only shows right panel for non-DE/EN speakers
- Explanation card describes what the child should do
- Column headers are trilingual (TR · English · Deutsch)
Match page rebuilt using ExerciseLayout:
- EN+DE cards in 2/3 left area with equal height + audio
- Native words in 1/3 right panel with audio buttons
- Highlights native word when EN word is selected
- Progress bar with count, score counter
ExerciseLayout can be reused for flashcards, quiz, type, etc.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
All cards (EN/DE/native) now have min-h-[48px] for consistent height.
Progress bar shows "4/12" count next to the fill bar.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Progress bar under header (fills as pairs are matched)
- Counter with symbols: ✓ first-try, ↻ retry, ✗ errors
- EN column now also has audio buttons (small speaker icon)
- All 3 columns have consistent height (flex layout)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Major improvements:
1. Third column shows native language translation (TR/AR/UK/RU)
2. Clicking EN word flashes native translation briefly (2s overlay)
3. German column has audio button on each word (speaker icon)
4. Native column has audio button for each translation
5. Scoring: tracks first-try correct vs retry vs errors separately
6. Full points only for error-free completion
7. "Nochmal" button always available to repeat the unit
8. Header shows live score: green/yellow/red counters
9. All buttons use translation system (t('back'), t('match'), etc.)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
All exercise pages now use useNativeLanguage() hook:
- Buttons show text in user's native language (Richtig→Dogru, etc.)
- Instructions translated (Geschafft→Bitti, Nochmal→Tekrar, etc.)
- wordInNative() available for vocab translations (needs data)
Pages updated: flashcards, quiz, type, listen, match, pronounce, story.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Next.js route-level layouts provide Sidebar + gradient background
automatically for all sub-pages. Individual pages no longer need
their own wrapper divs or Sidebar imports.
- learn/layout.tsx: Sidebar + purple gradient for all learning pages
- parent/layout.tsx: Same for all parent portal pages
- LearnLayout.tsx: Reusable component for other pages
- Fixed broken <LearnLayout>}> artifacts from previous refactoring
- Removed duplicate Sidebar/wrapper code from 9 sub-pages
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
