Learn this stuff in days not months. Built by fast German learners for other fast German learners. Drill the prepositions, articles, possessives, and pronouns that slow you down, then get back to actual German.
);
}
function FeatureRequestFooter() {
return (
);
}
// A hint line with a persistent hide/show toggle. Hidden stays hidden
// (across sessions) until the user shows it again — for authentic testing.
function Hideable({ hidden, onToggle, label, style, children }) {
if (hidden) {
return (
Possessives, pronouns, contractions, genitive articles, and mixed rounds. Built for people who want the case system handled, fast.
{['Possessives and pronouns', 'Mixed article rounds', 'Contractions and genitive', 'Saved progress on this device'].map(item => (
✓ {item}
))}
{STRIPE_PLANS.map(plan => (
))}
{message &&
{message}
}
No account required for v1. Stripe redirects back here and unlocks this browser.
);
}
// ═══════════════════════════════════════════
// FEEDBACK COMPONENTS
// ═══════════════════════════════════════════
// Shared 2×2 answer grid. On touch devices the number-key chips disappear
// but the buttons keep their footprint so tap targets stay big.
function AnswerGrid({ choices, onPick }) {
return (
{choices.map((choice, i) => (
))}
);
}
// A loose cloud of word chips. Sizes vary a little so it reads as a cloud
// rather than a list, but every chip keeps a full-height tap target.
function WordCloud({ words, onPick }) {
return (
{words.map((w, i) => (
))}
);
}
// One-tap correct answer: no solution shown, just a tick before auto-skip.
function QuickTick() {
return (
✓
);
}
const FB_GENDERS = ['masculine','feminine','neuter','plural'];
const FB_CASES = ['nominative','accusative','dative','genitive'];
const normAns = s => (s || '').trim().toLowerCase();
// A full declension grid (all 4 cases × 4 genders) for answer feedback.
// The correct cell is highlighted green; when the answer was wrong, the
// cell(s) matching the user's input are highlighted red — so you see both
// your pick and the right one in the whole table, not just one row.
// focusG (optional) keeps one gender column sharp and greys the rest.
function FeedbackTable({ valueFor, isCorrect, isWrong, focusG }) {
return (
{FB_GENDERS.map(g => (
{g.slice(0,4)}.
))}
{FB_CASES.map(c => (
{CL[c]}
{FB_GENDERS.map(g => {
const val = valueFor(g, c);
const correct = isCorrect(g, c, val);
const wrong = !correct && !!isWrong && isWrong(g, c, val);
const bg = correct ? GREEN + '22' : wrong ? RED + '22' : 'transparent';
const color = correct ? GREEN : wrong ? RED : (focusG && g !== focusG ? '#c8c8c8' : '#555');
return (
{val}
);
})}
))}
);
}
function FillFeedback({ q, inp, ok }) {
const valueFor = q.type === 'article'
? (g, c) => (q.artType === 'indefinite' ? INDEF : DEF)[g][c]
: (g, c) => combinePoss(q.stem, POSS_ENDINGS[g][c]);
const wrong = normAns(inp);
return (
{ok ? '✓ Correct' : <>✗ {inp}→{q.ans}}
{q.rule}
{!ok && (
{q.noun.w} is {q.noun.g}. {CL[q.cas]} + {q.noun.g} = {q.ans}
)}
g === q.noun.g && c === q.cas}
isWrong={ok ? null : (g, c, val) => g === q.noun.g && normAns(val) === wrong}
/>
{q.prepKey} + {q.article} fuses to {q.contraction} in real German.
)}
„{q.verb === 'ankommen' ? 'ankommen' : q.verb}" {q.isMotion
? 'puts something somewhere new (wohin?)'
: q.verb === 'ankommen'
? 'keeps the Dativ even though you arrive — the an- prefix already carries the arrival'
: 'just says where it all happens (wo?)'} → {CL[q.ans]}
Before this happened, was it already {PREPS[q.prepKey].en.split('/')[0]} the {q.nounEn}?
{' '}{q.isMotion
? <>No — it got there because of the action. That is Akkusativ.
: <>Yes — it was already there and stays. That is Dativ.}
{onRule && (
)}
);
}
// The wohin/wo rule, the trap, the verb pairs, and the one real exception.
function WechselRuleModal({ onClose }) {
const PAIRS = [
['legen', 'lay it down', 'liegen', 'be lying'],
['stellen', 'stand it up', 'stehen', 'be standing'],
['setzen', 'sit it down', 'sitzen', 'be sitting'],
['hängen', 'hang it up (hängte)', 'hängen', 'be hanging (hing)'],
['stecken', 'stick it in', 'stecken', 'be stuck in'],
];
return (
e.stopPropagation()}>
Wohin oder wo?
Yes — there is a rule, and it is not “is something moving?”. Ask instead:
does the phrase say where the thing ends up, or where the
whole action happens?
Akkusativ — wohin?
The action puts something into a new place. It wasn’t there before; it is now.
Er legt das Buch auf den Tisch. — the book arrives on the table.
Dativ — wo?
The phrase just locates the scene. It was already there and stays there.
Das Buch liegt auf dem Tisch. — it was already on the table.
The test that actually works
“Before this happened, was it already there?”
Already there → Dativ.
Got there because of the action → Akkusativ.
The trap: movement is not the test
Plenty of motion verbs take the Dativ, because the phrase is the arena the
movement happens in, not a destination:
Er schwimmt in dem See (im See) — swimming around in the lake.
Er springt in den See — he was out, now he’s in.
Same story with tanzen, spielen, laufen, rennen.
The verb pairs — learn these cold
The Akkusativ ones are transitive: they always have a direct object being moved.
If something is being put somewhere, the preposition takes Akkusativ too.
puts it there · Akk
is already there · Dat
{PAIRS.map(([a, aEn, d, dEn]) => (
{a}{aEn}
{d}{dEn}
))}
hängen and stecken are the mean ones — same present tense either way, so the
only clue is whether there is a direct object.
The exception worth knowing
ankommen takes the Dativ,
even though arriving is the most obvious movement there is:
Wir kommen an dem Bahnhof an (am Bahnhof).
The an- prefix already carries the arrival, so the phrase only says where
you ended up being. befestigen an + Dativ works the same way.
);
}
function ChunkFeedback({ q, inp, ok }) {
const article = DEF[q.noun.g][q.cas];
return (
{q.contracts
? 'Preferred — these fuse, so use the contraction in speech and writing.'
: <>{article} doesn’t fuse with „{q.prepKey}" — keep them as two words.}
Definite article by case — {DEF[q.noun.g].nominative} {q.noun.w}
DEF[g][c]}
focusG={q.noun.g}
isCorrect={(g, c) => g === q.noun.g && c === q.cas}
isWrong={null}
/>
);
}
function ContractionFeedback({ q, inp, ok }) {
const [gotPrep, gotArt] = (inp || '').split(' ');
const ending = q.ans.slice(-1);
const endingRule = {s:'das', m:'dem', r:'der'}[ending];
return (
{q.ans} = {q.prep} + {q.art}
{gotPrep !== q.prep && <> — the preposition is {q.prep}, not {gotPrep}.}
)}
{endingRule && (
Ending -{ending} always means{' '}
{endingRule}. That is the whole trick:
-s → das, -m → dem, -r → der.
)}
{q.pref
? 'Preferred — use this contraction in both speech and writing.'
: 'Informal — common when speaking, but the two-word form is more usual in writing.'}
Where „{q.art}" sits in the definite-article table
Strong (S): no article carries the case. Weak (W): after a definite article.
{genders.map(g =>
{g}
)}
{genders.map(g => (
S
W
))}
{cases.map(c => (
{CL[c]}
{genders.map(g => {
const hl = q && (q.type==='article'||q.type==='poss') && c === q.cas && g === q.noun?.g;
return (
{STRONG[g][c]}
{WEAK[g][c]}
);
})}
))}
Unbestimmter Artikel (ein/eine/kein)
Bestimmter Artikel (der/die/das)
}
{section === 'prep' && (
Prepositions by Case
Akkusativ: durch, für, gegen, ohne, um, bis
Dativ: aus, außer, bei, gegenüber, mit, nach, seit, von, zu
Genitiv: trotz, während, wegen, statt, anstatt, außerhalb, innerhalb
Wechsel: {PREPS_BY_CASE.wechsel.join(', ')}
Wechsel: Akkusativ when the phrase is where something ends up
(wohin?), Dativ when it is where the action happens (wo?) — movement alone does
not decide it.
{onRule && }
)}
{section === 'poss' && (
Possessive Determiners
{POSSESSIVES.map(p =>
{p.stem}-{p.en}
)}
Endings follow the ein/kein pattern. euer drops to eur- when an ending is added.
)}
{section === 'pronoun' && (
Personal Pronouns
)}
);
}
function Frag2({ children }) { return <>{children}; }
function SimpleChart({ table, highlightCase, highlightGender, active }) {
const genders = ['masculine','feminine','neuter','plural'];
const cases = ['nominative','accusative','dative','genitive'];
return (
{genders.map(g =>
{g}
)}
{cases.map(c => (
{CL[c]}
{genders.map(g => {
const hl = active && c === highlightCase && g === highlightGender;
return