Add Wortbaukasten, Preposition+Case trainer, and Listening Dictation modules
This commit is contained in:
chrisf committed
1 parent
e636350940
commit
5f013dbdfe
5 files changed
+1646
-23
No files matched your search
+106
-22
@@ -7,7 +7,7 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css?v=4" />
|
||||
<link rel="stylesheet" href="styles.css?v=5" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -30,9 +30,18 @@
|
||||
<span>📊</span> Übersicht
|
||||
</button>
|
||||
<button class="nav-tab" data-view="trainer" onclick="app.switchView('trainer')">
|
||||
<span>⚡</span> Wortschatz-Trainer
|
||||
<span>⚡</span> Trainer
|
||||
<span class="nav-badge" id="nav-due-badge">0</span>
|
||||
</button>
|
||||
<button class="nav-tab" data-view="builder" onclick="app.switchView('builder')">
|
||||
<span>🧱</span> Wortbaukasten
|
||||
</button>
|
||||
<button class="nav-tab" data-view="prepositions" onclick="app.switchView('prepositions')">
|
||||
<span>🎯</span> Präpositionen
|
||||
</button>
|
||||
<button class="nav-tab" data-view="listening" onclick="app.switchView('listening')">
|
||||
<span>🎧</span> Hörtraining
|
||||
</button>
|
||||
<button class="nav-tab" data-view="reader" onclick="app.switchView('reader')">
|
||||
<span>📖</span> Leseecke
|
||||
</button>
|
||||
@@ -68,7 +77,7 @@
|
||||
<p>
|
||||
After 1,400 days on Duolingo, you already have a strong intuition for basic German structure.
|
||||
<strong>WortKraft</strong> bridges the A2→B1 plateau by training <em>active recall with articles</em>,
|
||||
<em>compound word logic</em>, and <em>real-world production</em>.
|
||||
<em>compound word logic</em>, <em>verb + preposition cases</em>, and <em>native listening & production</em>.
|
||||
</p>
|
||||
<div class="gender-legend-bar">
|
||||
<span class="gender-badge gender-der">der • Maskulin</span>
|
||||
@@ -81,8 +90,8 @@
|
||||
<button class="btn btn-primary" onclick="app.switchView('trainer')">
|
||||
⚡ Jetzt trainieren (<span id="hero-due-count">0</span> fällig)
|
||||
</button>
|
||||
<button class="btn btn-light" onclick="app.switchView('reader')">
|
||||
📖 Geschichte lesen
|
||||
<button class="btn btn-light" onclick="app.switchView('builder')">
|
||||
🧱 Wortbaukasten
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,26 +108,26 @@
|
||||
<div class="stat-sub" id="stat-mastered-sub">0 gemeistert • 0 im Training</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Artikel-Trefferquote</div>
|
||||
<div class="stat-label">Artikel- & Übungsquote</div>
|
||||
<div class="stat-value" id="stat-accuracy">—</div>
|
||||
<div class="stat-sub">der / die / das & aktive Eingabe</div>
|
||||
<div class="stat-sub">der / die / das & Präpositionen</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Aktive Sätze geschrieben</div>
|
||||
<div class="stat-label">Aktive Sätze produziert</div>
|
||||
<div class="stat-value" id="stat-sentences">0</div>
|
||||
<div class="stat-sub">In der Sprachpraxis produziert</div>
|
||||
<div class="stat-sub">Sprachpraxis & Hörtraining</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-columns">
|
||||
<div class="panel-card">
|
||||
<div class="panel-header">
|
||||
<h2 class="panel-title">Dein täglicher 3-Schritte-Workflow</h2>
|
||||
<h2 class="panel-title">Deine 6 Trainings-Module (A2 → B1)</h2>
|
||||
</div>
|
||||
<div class="module-launcher-list">
|
||||
<div class="launcher-item" onclick="app.startTrainerMode('cloze')">
|
||||
<div class="launcher-left">
|
||||
<div class="launcher-icon">🎯</div>
|
||||
<div class="launcher-icon">⚡</div>
|
||||
<div>
|
||||
<div class="launcher-title">1. Aktiver Abruf im Kontext (SRS-Trainer)</div>
|
||||
<div class="launcher-desc">Lückensätze, Englisch → Deutsch mit Artikel & Plural-Drill statt Multiple-Choice.</div>
|
||||
@@ -127,12 +136,45 @@
|
||||
<span>→</span>
|
||||
</div>
|
||||
|
||||
<div class="launcher-item" onclick="app.switchView('builder')">
|
||||
<div class="launcher-left">
|
||||
<div class="launcher-icon">🧱</div>
|
||||
<div>
|
||||
<div class="launcher-title">2. Wortbaukasten (Komposita & Präfix-Labor)</div>
|
||||
<div class="launcher-desc">Verstehe trennbare/untrennbare Verben (nehmen, stellen, kommen) & lange zusammengesetzte Nomen.</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>→</span>
|
||||
</div>
|
||||
|
||||
<div class="launcher-item" onclick="app.switchView('prepositions')">
|
||||
<div class="launcher-left">
|
||||
<div class="launcher-icon">🎯</div>
|
||||
<div>
|
||||
<div class="launcher-title">3. Verben mit Präposition & Kasus (Rektion + Da-/Wo-)</div>
|
||||
<div class="launcher-desc">Meistere warten auf (+Akk), teilnehmen an (+Dat), sich kümmern um (+Akk) & darauf/worauf.</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>→</span>
|
||||
</div>
|
||||
|
||||
<div class="launcher-item" onclick="app.switchView('listening')">
|
||||
<div class="launcher-left">
|
||||
<div class="launcher-icon">🎧</div>
|
||||
<div>
|
||||
<div class="launcher-title">4. Hörtraining & Aussprache-Check (Diktat & Mikrofon)</div>
|
||||
<div class="launcher-desc">Höre echte Alltagssätze ohne Text, tippe was du hörst, oder sprich den Satz selbst ins Mikrofon.</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>→</span>
|
||||
</div>
|
||||
|
||||
<div class="launcher-item" onclick="app.switchView('reader')">
|
||||
<div class="launcher-left">
|
||||
<div class="launcher-icon">📖</div>
|
||||
<div>
|
||||
<div class="launcher-title">2. Interaktive Leseecke (A2/B1 Geschichten & Alltag)</div>
|
||||
<div class="launcher-desc">Klicke auf jedes Wort für Artikel, Stammform, Audio & 1-Klick-Speichern ins SRS-Deck.</div>
|
||||
<div class="launcher-title">5. Interaktive Leseecke (A2/B1 Geschichten & Alltag)</div>
|
||||
<div class="launcher-desc">Hover-Übersetzer + Klick auf jedes Wort für Artikel, Stammform, Audio & 1-Klick-SRS-Speichern.</div>
|
||||
</div>
|
||||
</div>
|
||||
<span>→</span>
|
||||
@@ -142,7 +184,7 @@
|
||||
<div class="launcher-left">
|
||||
<div class="launcher-icon">💬</div>
|
||||
<div>
|
||||
<div class="launcher-title">3. Sprachpraxis mit Zielwörtern</div>
|
||||
<div class="launcher-title">6. Sprachpraxis mit Zielwörtern</div>
|
||||
<div class="launcher-desc">Löse echte Alltagssituationen (Arzt, Bürgeramt, Feierabend) und nutze gezielt 5 Zielwörter.</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -197,7 +239,48 @@
|
||||
<div id="trainer-stage-container"></div>
|
||||
</section>
|
||||
|
||||
<!-- 3. INTERACTIVE READER (LESEECKE) -->
|
||||
<!-- 3. WORTBAUKASTEN (COMPOUND WORD & PREFIX LAB) -->
|
||||
<section id="view-builder" class="view-section">
|
||||
<div class="trainer-controls">
|
||||
<div class="mode-pills">
|
||||
<button class="mode-pill active" id="builder-tab-prefixes" onclick="app.setBuilderSubmode('prefixes')">
|
||||
🔀 Verb-Stämme & Präfix-Labor (trennbar vs. untrennbar)
|
||||
</button>
|
||||
<button class="mode-pill" id="builder-tab-compounds" onclick="app.setBuilderSubmode('compounds')">
|
||||
🧱 Komposita-Knacker (Zusammengesetzte Nomen)
|
||||
</button>
|
||||
<button class="mode-pill" id="builder-tab-quiz" onclick="app.setBuilderSubmode('quiz')">
|
||||
⚡ Präfix- & Komposita-Quiz
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="builder-stage-container"></div>
|
||||
</section>
|
||||
|
||||
<!-- 4. VERBEN MIT PRÄPOSITION (REKTION & DA-/WO- TRAINER) -->
|
||||
<section id="view-prepositions" class="view-section">
|
||||
<div class="trainer-controls">
|
||||
<div class="mode-pills">
|
||||
<button class="mode-pill active" id="prep-tab-drill" onclick="app.setPrepSubmode('drill')">
|
||||
🎯 Präposition + Kasus-Trainer (auf den / am / um das)
|
||||
</button>
|
||||
<button class="mode-pill" id="prep-tab-dawo" onclick="app.setPrepSubmode('dawo')">
|
||||
🔗 Da- & Wo-Baukasten (darauf, worauf, darum, daran)
|
||||
</button>
|
||||
<button class="mode-pill" id="prep-tab-reference" onclick="app.setPrepSubmode('reference')">
|
||||
📋 Übersichtstabelle (Akkusativ vs. Dativ)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="prepositions-stage-container"></div>
|
||||
</section>
|
||||
|
||||
<!-- 5. HÖRTRAINING & AUSSPRACHE (LISTENING DICTATION & SHADOWING) -->
|
||||
<section id="view-listening" class="view-section">
|
||||
<div id="listening-stage-container"></div>
|
||||
</section>
|
||||
|
||||
<!-- 6. INTERACTIVE READER (LESEECKE) -->
|
||||
<section id="view-reader" class="view-section">
|
||||
<div class="reader-layout">
|
||||
<aside class="story-sidebar">
|
||||
@@ -216,7 +299,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. CONVERSATION & WRITING PRACTICE (SPRACHPRAXIS) -->
|
||||
<!-- 7. CONVERSATION & WRITING PRACTICE (SPRACHPRAXIS) -->
|
||||
<section id="view-practice" class="view-section">
|
||||
<div class="scenario-layout">
|
||||
<aside class="story-sidebar">
|
||||
@@ -231,7 +314,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. VOCABULARY BANK (WÖRTERBUCH) -->
|
||||
<!-- 8. VOCABULARY BANK (WÖRTERBUCH) -->
|
||||
<section id="view-dictionary" class="view-section">
|
||||
<div class="panel-header" style="margin-bottom: 1.25rem; flex-wrap: wrap;">
|
||||
<div>
|
||||
@@ -408,10 +491,11 @@
|
||||
<div id="toast" class="toast-notification"></div>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<script src="data/vocabulary.js?v=4"></script>
|
||||
<script src="data/stories.js?v=4"></script>
|
||||
<script src="data/scenarios.js?v=4"></script>
|
||||
<script src="data/hover_dict.js?v=4"></script>
|
||||
<script src="app.js?v=4"></script>
|
||||
<script src="data/vocabulary.js?v=5"></script>
|
||||
<script src="data/stories.js?v=5"></script>
|
||||
<script src="data/scenarios.js?v=5"></script>
|
||||
<script src="data/hover_dict.js?v=5"></script>
|
||||
<script src="data/labs.js?v=5"></script>
|
||||
<script src="app.js?v=5"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user