In my holidays overview I want a German vocabulary trainer, similar to the existing quiz feature. For destinations in German-speaking places (currently Lübeck and Vienna) users should be able to practice a few basic German words before they travel: the holiday card shows an icon when a vocabulary test is available, and opening it lets the user translate words.
Do a full-stack implementation (backend + frontend) following the structure and conventions of the existing quiz feature (architecture, feat folder, backend entity/repository/controller). The app must be accessible, and the accessible names below are required. Create and run e2e tests for the feature.
1Successful Verification
- The frontend build check is
pnpm ng build --optimization false. - Start any required application dependencies using the project's existing setup, then start the backend with
./gradlew bootRun. - Wait for the backend to become ready and verify that both the existing
/heartbeatand/holidayendpoints respond successfully. Starting the process alone is not sufficient. - Start the frontend on port
4200and run the vocabulary feature's e2e tests with the project's Playwright setup. - If compilation, application startup, an endpoint request, or an e2e test fails, diagnose the failure, fix the implementation, and repeat the relevant checks. Do not finish while a required check is failing.
- Stop all application processes and temporary services that you started after verification, including when a check fails.
2Vocabulary Data
- A vocabulary test consists of exactly 5 words. Each is an English word the user must translate into German.
- Use exactly these 5 English -> German pairs, stored verbatim (capitalization and umlauts matter):
squirrel -> Eichhörnchenturtle -> Schildkröterefrigerator -> Kühlschranktoothbrush -> ZahnbürsteGermany -> Deutschland
- The same 5 words are used for every destination that offers the test. Seed this data (e.g. a Flyway migration) for the German-speaking destinations Lübeck and Vienna.
3Discovery on the Holiday Card
- A destination that has vocabulary data shows a vocabulary icon/link on its holiday card in the holidays overview, exactly like the quiz icon. Drive this off the presence of vocabulary data — do NOT hardcode a list of cities.
- The control is an accessible link with the accessible name
"Vocabulary Test". - Destinations without vocabulary data must not show it.
4The Vocabulary Test
- Opening the
"Vocabulary Test"link shows the 5 questions and a status area. Navigation, dialog, or inline panel — your choice. - For each question, show the English word and provide a free-text input for the German translation. Each input's accessible name must contain its English word (e.g. an input labelled
"squirrel"), so every input is individually identifiable regardless of order or layout. - A status area shows three counts, each exposed with exactly these accessible names (value included):
"Unanswered: N","Correct: N","Incorrect: N". - The three counts are mutually exclusive and always sum to 5. Initial state:
Unanswered: 5,Correct: 0,Incorrect: 0.
5Answering
- An answer is evaluated when the user leaves (blurs) a non-empty input. There is no submit button — the counts update live on blur.
- Blurring an empty input does nothing; the question stays unanswered.
- Comparison is exact and case- and umlaut-sensitive: the typed text must exactly equal the stored German word.
"Kühlschrank"is correct;"kühlschrank","Kuhlschrank", and"Kühlschrank "are all incorrect. No trimming or normalization. - Once a non-empty input has been evaluated it is locked (cannot be edited again). The counts update accordingly: Unanswered decreases by 1, and Correct or Incorrect increases by 1.




Google
OpenAI
Anthropic
Apple
Meta
Microsoft
NVIDIA
Mistral AI
Alibaba · Qwen
DeepSeek
Z.ai · GLM
Moonshot · Kimi
MiniMax
xAI

