{scr !== 'home' && scr !== 'menu'
?
setScr('menu')}>← back
:
Beug
}
{scr === 'practice' && setChart(true)}>charts }
{PAYMENTS_ENABLED && hasPaidAccess && Unlocked }
🔥 {st.streak||0}
{/* HOME */}
{scr === 'home' && (
setScr('menu')}
/>
)}
{/* MENU */}
{scr === 'menu' && (
{TABS.map(t => (
setTab(t.id)}>
{t.label}
))}
{tab === 'prep' && (
{ setLearnStep(0); setScr('learn'); }}>
📚 Lernen
Chunk the lists first — Akkusativ, Dativ, Wechsel, Genitiv
)}
{LEVELS.filter(l => l.tab === tab).sort((a,b)=>a.id-b.id).map(l => {
const u = unlocked(l.id);
const s = st.sc[l.id];
const p = s ? Math.round(s.c/s.t*100) : null;
return (
startLv(l.id)}>
{l.name}
{l.desc}
{s &&
{s.c}/{s.t}
}
{p !== null &&
=70?GREEN:RED}}>{p}%
}
);
})}
setChart(true)}>
View {TABS.find(t=>t.id===tab).label.toLowerCase()} charts
)}
{/* PAYWALL */}
{PAYMENTS_ENABLED && scr === 'paywall' && (
setScr('menu')}
/>
)}
{/* LEARN: chunked study cards for prepositions */}
{scr === 'learn' && (() => {
const card = LEARN_CARDS[learnStep];
const isLast = learnStep === LEARN_CARDS.length - 1;
return (
{LEARN_CARDS.map((c,i)=>(
))}
{card.label}
{card.desc}
{card.words.map(w=>(
{w.de}
{w.en}
))}
{card.mnemonics.length > 0 && (
Merkhilfe
{card.mnemonics.map((m,i)=>(
{m.label}
{m.text}
))}
)}
{card.note && (
{card.note}
)}
{card.audio.length > 0 && (
)}
{learnStep > 0 && (
setLearnStep(s=>s-1)}>← Zurück
)}
{!isLast
? setLearnStep(s=>s+1)}>Weiter →
: setScr('menu')}>Fertig ✓ }
);
})()}
{/* PRACTICE: sentence-based (article, poss, pronoun) */}
{scr === 'practice' && (q?.type === 'article' || q?.type === 'chunk' || q?.type === 'poss' || q?.type === 'pronoun') && (
{q.sentence.split('_____').map((part,i,a)=>(
{part}
{i < a.length-1 && (
{rev ? q.ans : (inp || '\u00A0\u00A0\u00A0\u00A0\u00A0')}
)}
))}
{q.translation}
{(q.type === 'article' || q.type === 'chunk') && <>
{DEF[q.noun.g].nominative}
{' '}{q.noun.w}
({q.noun.en})
}
{q.type === 'poss' && <>
{q.stem}-
({q.possMeaning})
}
{q.type === 'pronoun' && <>
{q.pron.nom}
({q.pron.en})
· {q.pron.tag}
}
{CL[q.cas]}
{q.prepKey && <> · {q.prepKey} ({PREPS[q.prepKey].en})}
{q.tw !== null && q.tw !== undefined && <> · {q.tw ? '→ motion' : '● location'}}
{q.type === 'poss' && <> · {DEF[q.noun.g].nominative} {q.noun.w}}
{!rev ? (
(q.type === 'article' || q.type === 'chunk') ? (
{q.choices.map((choice, i) => (
doSubmit(choice)}>
{choice}
{i+1}
))}
) : (
)
) : (
q.type === 'pronoun'
?
: q.type === 'chunk'
?
:
)}
)}
{/* PRACTICE: preposition (which case?) */}
{scr === 'practice' && q?.type === 'prep' && (
Which case does this preposition take?
{q.prepKey}
{q.prepEn}
{!rev ? (
{[
['accusative','Akkusativ','1'],['dative','Dativ','2'],
['genitive','Genitiv','3'],['wechsel','Wechsel','4'],
].map(([val,lab,key]) => (
doSubmit(val)}>
{lab}
{key}
))}
) : (
)}
)}
{/* PRACTICE: wechsel in context */}
{scr === 'practice' && q?.type === 'wechselContext' && (
{q.sentence}
{q.translation}
{q.prepKey}
({PREPS[q.prepKey].en})
Wechselpräposition · motion or location?
{!rev ? (
{[['accusative','Akkusativ','1','motion'],['dative','Dativ','2','location']].map(([val,lab,key,hint]) => (
doSubmit(val)}>
{lab}
{hint} · {key}
))}
) : (
)}
)}
{/* PRACTICE: contractions */}
{scr === 'practice' && q?.type === 'contraction' && (
Contract the preposition and article
{q.prep} + {q.art} = ?
{CL[q.cas]}
{!rev ? (
) : (
)}
)}
{scr === 'practice' && (
{Array.from({length:ROUND},(_,i)=>(
))}
{Math.min(res.length+(rev?0:1), ROUND)}/{ROUND} · {cur?.name}
{res.length >= ROUND ? 'See results' : 'Next'} ↵
)}
{/* SUMMARY */}
{scr === 'summary' && (
Complete
{rc}/{ROUND}
{res.map((r,i)=>
)}
=7?GREEN:'#d97706', fontSize:15, fontWeight:600, margin:'24px 0'}}>
{rc>=9?'Ausgezeichnet!':rc>=7?'Gut gemacht!':rc>=5?'Keep practicing.':'Review the charts.'}
{rc>=7 && nextInTab && unlocked(nextInTab.id) && (
{nextInTab.name} unlocked.
)}
startLv(lv)}>Play again
{rc>=7 && nextInTab && unlocked(nextInTab.id) && (
startLv(nextInTab.id)}>
Next: {nextInTab.name} →
)}
setScr('menu')}>back to menu
)}
{chart && setChart(false)}/>}
);
}
function HomeScreen({ onStart }) {
return (
der · den · dem
Learn German cases by feel.
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.
Get started
);
}
function FeatureRequestFooter() {
return (
);
}
function CoreReference() {
const prepositionGroups = [
['accusative', 'Akkusativ', PREPS_BY_CASE.accusative],
['dative', 'Dativ', PREPS_BY_CASE.dative],
['wechsel', 'Two-way', PREPS_BY_CASE.wechsel],
['genitive', 'Genitiv', PREPS_BY_CASE.genitive],
];
const genders = ['masculine','feminine','neuter','plural'];
return (
Case map
Prepositions
{prepositionGroups.map(([key, label, words]) => (
{label}: {words.join(', ')}
))}
Definite Articles
{g.slice(0,4)} )}
{CORE_ARTICLE_CASES.map(c => (
{CL[c]}
{genders.map(g => {DEF[g][c]} )}
))}
);
}
function PaywallScreen({ message, onCheckout, onBack }) {
return (
Beug Premium
Take the whole thing.
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 => (
onCheckout(plan)}>
{plan.note}
{plan.name}
{plan.price}
{plan.cadence}
))}
{message &&
{message}
}
No account required for v1. Stripe redirects back here and unlocks this browser.
Maybe later
);
}
// ═══════════════════════════════════════════
// FEEDBACK COMPONENTS
// ═══════════════════════════════════════════
function FillFeedback({ q, inp, ok }) {
const genders = ['masculine','feminine','neuter','plural'];
const stripCells = genders.map(g => {
if (q.type === 'article') {
const tbl = q.artType === 'indefinite' ? INDEF : DEF;
return tbl[g][q.cas];
}
return combinePoss(q.stem, POSS_ENDINGS[g][q.cas]);
});
const stripLabel = q.type === 'article'
? (q.artType === 'indefinite' ? 'ein…' : 'der/die')
: `${q.stem}-`;
return (
{ok ? '✓ Correct' : <>✗ {inp} → {q.ans} }
{q.rule}
{!ok && (
{q.noun.w} is {q.noun.g} . {CL[q.cas]} + {q.noun.g} = {q.ans}
)}
{CL[q.cas]}
{genders.map(g => {g.slice(0,4)}. )}
{stripLabel}
{genders.map((g, i) => {
const hl = g === q.noun.g;
return {stripCells[i]} ;
})}
);
}
function PrepFeedback({ q, inp, ok }) {
const motEx = q.ans === 'wechsel' ? wechselExample(q.prepKey, true) : null;
const locEx = q.ans === 'wechsel' ? wechselExample(q.prepKey, false) : null;
return (
{ok ? <>✓ {CL[q.ans]} : <>✗ {CL[inp]||inp} → {CL[q.ans]} }
„{q.prepKey}" → {q.ans === 'wechsel' ? 'Wechselpräposition (Akkusativ for motion, Dativ for location)' : `always ${CL[q.ans]}`}
{q.ans !== 'wechsel' && (
Example: {q.example} ({q.prepEn} the {q.exampleEn})
)}
{q.ans === 'wechsel' && (
Motion: Er geht {motEx.de} (Akk ) — "{motEx.en}"
Location: Er ist {locEx.de} (Dat ) — "{locEx.en}"
)}
);
}
function WechselContextFeedback({ q, inp, ok }) {
return (
{ok ? <>✓ {CL[q.ans]} : <>✗ {CL[inp]||inp} → {CL[q.ans]} }
„{q.verb}" {q.isMotion ? 'implies motion (wohin?)' : 'implies location (wo?)'} → {CL[q.ans]}
Wechselpräpositionen take Akkusativ with motion verbs (gehen, fahren, laufen, kommen) and Dativ with location verbs (sein, stehen, sitzen, warten).
);
}
function ChunkFeedback({ q, inp, ok }) {
const article = DEF[q.noun.g][q.cas];
return (
{ok
? <>✓ {q.ans}
: <>✗ {inp} → {q.ans} }
{q.contracts
? <>{q.prepKey} + {article} = {q.ans}
: <>„{q.prepKey}" + {CL[q.cas]} → {q.ans} }
{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.}
);
}
function ContractionFeedback({ q, inp, ok }) {
return (
{ok
? <>✓ {q.prep} + {q.art} = {q.ans}
: <>✗ {inp} → {q.ans} }
{q.prep} + {q.art} = {q.ans}
{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.'}
);
}
function PronounFeedback({ q, inp, ok }) {
const cases = ['nominative','accusative','dative'];
const labels = { nominative:'Nom', accusative:'Acc', dative:'Dat' };
const keys = { nominative:'nom', accusative:'acc', dative:'dat' };
return (
{ok ? '✓ Correct' : <>✗ {inp} → {q.ans} }
{q.pron.en} ({q.pron.tag}) — {CL[q.cas]} form
{q.pron.nom}
{cases.map(c => {labels[c]} )}
{q.pron.en}
{cases.map(c => {
const hl = c === q.cas;
return {q.pron[keys[c]]} ;
})}
);
}
// ═══════════════════════════════════════════
// CHART MODAL
// ═══════════════════════════════════════════
function ChartModal({ section, q, onClose }) {
const genders = ['masculine','feminine','neuter','plural'];
const cases = ['nominative','accusative','dative','genitive'];
return (
e.stopPropagation()}>
{section==='article'?'Articles':section==='prep'?'Prepositions':section==='poss'?'Possessives':section==='pronoun'?'Personal Pronouns':'Charts'}
✕
{section === 'article' && <>
All-in-One Declension Chart
Strong (S): no article carries the case. Weak (W): after a definite article.
{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 : accusative for motion (wohin?), dative for location (wo?).
)}
{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' && (
)}
Close esc
);
}
function Frag2({ children }) { return <>{children}; }
function SimpleChart({ table, highlightCase, highlightGender, active }) {
const genders = ['masculine','feminine','neuter','plural'];
const cases = ['nominative','accusative','dative','genitive'];
return (
{g} )}
{cases.map(c => (
{CL[c]}
{genders.map(g => {
const hl = active && c === highlightCase && g === highlightGender;
return {table[g][c]} ;
})}
))}
);
}
function PossessiveChart({ highlightCase, highlightGender, active, highlightStem }) {
const genders = ['masculine','feminine','neuter','plural'];
const cases = ['nominative','accusative','dative','genitive'];
const stem = highlightStem || 'mein';
return (
{g} )}
{cases.map(c => (
{CL[c]}
{genders.map(g => {
const hl = active && c === highlightCase && g === highlightGender;
const display = combinePoss(stem, POSS_ENDINGS[g][c]);
return {display} ;
})}
))}
Showing forms for {stem}- . Same endings apply to all possessive bases.
);
}
function PronounsChartCombined({ highlightCase, highlightKey, active }) {
const cases = ['nominative','accusative','dative'];
const labels = { nominative:'Nom', accusative:'Acc', dative:'Dat' };
const keys = { nominative:'nom', accusative:'acc', dative:'dat' };
return (
english
person
{cases.map(c => {labels[c]} )}
{PRONOUNS.map((p, idx) => {
const sep = idx === 6;
return (
{p.en}
{p.tag}
{cases.map(c => {
const hl = active && c === highlightCase && p.key === highlightKey;
return {p[keys[c]]} ;
})}
);
})}
);
}
// ═══════════════════════════════════════════
// STYLES
// ═══════════════════════════════════════════
const S = {
wrap: { background:'#f7f7f7', minHeight:'100vh', color:'#1a1a1a', fontFamily:'"DM Sans",system-ui,sans-serif' },
inner: { maxWidth:520, margin:'0 auto', padding:'16px 20px 100px' },
hdr: { display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 0 8px', position:'sticky', top:0, background:'#f7f7f7', zIndex:10 },
logo: { fontSize:17, fontWeight:700, color:'#1a1a1a' },
linkBtn: { background:'none', border:'none', color:'#999', fontSize:13, cursor:'pointer', padding:0, fontWeight:500, fontFamily:'inherit' },
stat: { fontSize:13, color:'#999', fontWeight:500 },
tabs: { display:'flex', gap:0, borderBottom:'1px solid #eee', marginTop:6, marginBottom:12 },
tab: { flex:1, background:'none', border:'none', padding:'12px 8px', cursor:'pointer', color:'#999', fontSize:13, fontWeight:600, fontFamily:'inherit', borderBottomWidth:2, borderBottomStyle:'solid', borderBottomColor:'transparent', marginBottom:-1, transition:'all 0.15s' },
tabActive: { color:'#1a1a1a', borderBottomColor:GREEN },
hero: { background:'#fff', border:'1px solid #eee', borderRadius:12, padding:'24px 22px', textAlign:'left' },
heroMark: { fontSize:12, color:GREEN, fontWeight:800, textTransform:'uppercase', letterSpacing:0.8, marginBottom:10 },
heroTitle: { fontSize:38, lineHeight:1.05, margin:'0 0 12px', color:'#1a1a1a', letterSpacing:0, fontWeight:800 },
heroCopy: { fontSize:15, lineHeight:1.55, color:'#666', margin:'0 0 20px' },
heroActions: { display:'flex', gap:10, flexWrap:'wrap' },
sectionTitle: { fontSize:12, color:'#999', textTransform:'uppercase', letterSpacing:1, fontWeight:800, margin:'0 0 8px' },
coreGrid: { display:'grid', gridTemplateColumns:'1fr', gap:10 },
corePanel: { background:'#fff', border:'1px solid #eee', borderRadius:10, padding:'16px 16px' },
miniChart: { width:'100%', borderCollapse:'collapse', marginTop:10 },
miniTh: { padding:'5px 4px', fontSize:10, color:'#aaa', textAlign:'center', textTransform:'uppercase', fontWeight:700 },
miniTd: { padding:'7px 4px', fontSize:13, color:'#444', borderBottom:'1px solid #f3f3f3', textAlign:'center' },
lvRow: { display:'flex', alignItems:'center', gap:14, padding:'13px 16px', marginBottom:6, background:'#fff', borderRadius:10, border:'1px solid #eee' },
lvRowBlurred: { filter:'blur(0.8px)', opacity:0.82 },
lvName: { fontSize:14, fontWeight:700, color:'#1a1a1a' },
lvDesc: { fontSize:12, color:'#999', marginTop:1 },
lvPct: { fontSize:14, fontWeight:700 },
chartLinkBtn: { width:'100%', padding:12, marginTop:20, background:'#fff', border:'1px solid #eee', borderRadius:10, color:'#888', fontSize:13, cursor:'pointer', fontFamily:'inherit' },
sentence: { fontSize:26, fontWeight:600, color:'#1a1a1a', lineHeight:1.5, margin:'0 0 10px', letterSpacing:'-0.3px' },
blank: { display:'inline-block', minWidth:80, borderBottom:'2px solid', textAlign:'center', padding:'0 6px', margin:'0 2px', fontWeight:700, transition:'all 0.15s' },
translation: { fontSize:14, color:'#999', marginBottom:10 },
keyInfo: { fontSize:16, color:'#333', fontWeight:600, marginBottom:4 },
keyInfoMute: { color:'#aaa', fontWeight:400 },
secondaryContext: { fontSize:12, color:'#aaa', marginBottom:16, lineHeight:1.5 },
inputWrap: { display:'flex', flexDirection:'column', alignItems:'center', gap:6 },
inputRow: { display:'flex', gap:8, alignItems:'center' },
input: { width:170, padding:'12px 14px', borderRadius:8, border:'1.5px solid #ddd', background:'#fff', color:'#1a1a1a', fontSize:18, fontWeight:600, outline:'none', textAlign:'center', fontFamily:'inherit' },
checkBtn: { padding:'12px 20px', borderRadius:8, background:GREEN, color:'#fff', border:'none', fontSize:14, fontWeight:700, cursor:'pointer', fontFamily:'inherit' },
hintText: { fontSize:11, color:'#bbb' },
kbd: { background:'#f0f0f0', padding:'1px 5px', borderRadius:3, fontSize:10, color:'#888', border:'1px solid #e0e0e0' },
kbdSmall: { background:'#f0f0f0', padding:'1px 4px', borderRadius:3, fontSize:9, color:'#888', border:'1px solid #e0e0e0' },
articleGrid: { display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, maxWidth:320, margin:'12px auto 0' },
articleBtn: { padding:'18px 16px', borderRadius:10, border:'1.5px solid #ddd', background:'#fff', color:'#1a1a1a', cursor:'pointer', fontFamily:'inherit', textAlign:'center', transition:'all 0.12s' },
choiceBtn: { flex:'1 1 auto', minWidth:90, padding:'14px 16px', borderRadius:10, border:'1.5px solid', background:'#fff', color:'#1a1a1a', cursor:'pointer', fontSize:14, fontFamily:'inherit', textAlign:'center', transition:'all 0.12s' },
feedback: { textAlign:'left', background:'#fff', borderRadius:10, padding:'14px 18px', margin:'0 auto', maxWidth:400, border:'1px solid #eee' },
stripTbl: { width:'100%', borderCollapse:'collapse', marginTop:10 },
stripH: { padding:'4px 6px', fontSize:10, fontWeight:600, textTransform:'uppercase', letterSpacing:0.3, color:'#bbb', textAlign:'center' },
stripD: { padding:'6px', textAlign:'center', fontSize:13 },
dotsRow: { display:'flex', gap:5, justifyContent:'center', alignItems:'center', position:'fixed', bottom:20, left:0, right:0 },
dotsLabel: { fontSize:11, color:'#aaa', marginLeft:10 },
dot: { width:7, height:7, borderRadius:4, transition:'background 0.2s' },
nextBtn: { padding:'11px 22px', borderRadius:8, border:'none', background:GREEN, color:'#fff', fontSize:14, fontWeight:700, cursor:'pointer', fontFamily:'inherit' },
paywallCard: { background:'#fff', border:'1px solid #eee', borderRadius:12, padding:'24px 20px', textAlign:'left' },
payTitle: { fontSize:30, lineHeight:1.1, margin:'0 0 10px', color:'#1a1a1a', letterSpacing:0, fontWeight:800 },
payCopy: { fontSize:14, lineHeight:1.55, color:'#666', margin:'0 0 16px' },
benefits: { display:'grid', gap:7, margin:'0 0 18px' },
benefit: { fontSize:13, color:'#444', fontWeight:600 },
planGrid: { display:'grid', gridTemplateColumns:'1fr', gap:10 },
planCard: { position:'relative', display:'grid', gridTemplateColumns:'1fr auto', alignItems:'end', gap:'2px 12px', width:'100%', padding:'15px 14px', borderRadius:10, border:'1.5px solid #e6e6e6', background:'#fff', color:'#1a1a1a', cursor:'pointer', fontFamily:'inherit', textAlign:'left' },
planFeatured: { borderColor:GREEN, background:'#f3ffe8', boxShadow:'0 0 0 3px rgba(88,167,0,0.14)' },
planNote: { gridColumn:'1 / -1', fontSize:10, fontWeight:800, letterSpacing:0.6, textTransform:'uppercase', color:GREEN, marginBottom:2 },
planName: { fontSize:14, fontWeight:800 },
planPrice: { fontSize:20, fontWeight:800, textAlign:'right' },
planCadence: { fontSize:11, color:'#999' },
payMsg: { marginTop:12, border:'1px solid #f5d0d0', background:'#fff7f7', color:'#b91c1c', borderRadius:8, padding:'10px 12px', fontSize:12, lineHeight:1.4 },
payFine: { marginTop:12, fontSize:11, color:'#aaa', lineHeight:1.4 },
footerContact: { borderTop:'1px solid #e9e9e9', marginTop:28, paddingTop:18, display:'flex', gap:12, justifyContent:'space-between', alignItems:'center', color:'#777', fontSize:12, lineHeight:1.4 },
footerMail: { flex:'0 0 auto', color:GREEN, fontSize:12, fontWeight:800, textDecoration:'none' },
overlay: { position:'fixed', inset:0, background:'rgba(0,0,0,0.35)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:100, padding:16 },
modal: { background:'#fff', borderRadius:14, padding:'22px 22px', maxWidth:520, width:'100%', maxHeight:'88vh', overflow:'auto', boxShadow:'0 8px 30px rgba(0,0,0,0.12)' },
chartH: { fontSize:13, fontWeight:700, color:'#1a1a1a', marginBottom:6 },
fullChart: { width:'100%', borderCollapse:'collapse', fontSize:14 },
fcTh: { padding:'6px 4px', fontSize:11, fontWeight:600, textAlign:'center', color:'#888', textTransform:'capitalize' },
fcTd: { padding:'7px 4px', textAlign:'center', fontSize:14, borderBottom:'1px solid #f3f3f3' },
};