88 lines
4.5 KiB
HTML
88 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vokabeltrainer 6a</title>
|
|
<link rel="stylesheet" href="/static/style_v2.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Vokabeltrainer 6a</h1>
|
|
|
|
<div id="setup-screen">
|
|
<div class="section-title">1. Was lernen wir?</div>
|
|
<div class="button-group">
|
|
<button onclick="selectMainMode('vocab')" id="btn-main-vocab" class="mode-btn">Vokabeln</button>
|
|
<button onclick="selectMainMode('irregular')" id="btn-main-irregular" class="mode-btn special-btn">Unregelmäßige Verben</button>
|
|
</div>
|
|
|
|
<div id="submode-vocab" class="submode-container" style="display:none;">
|
|
<div class="section-title">2. Welche Richtung?</div>
|
|
<div class="button-group">
|
|
<button onclick="selectSubMode('de-en')" class="sub-btn" id="btn-sub-de-en">Deutsch -> Englisch</button>
|
|
<button onclick="selectSubMode('en-de')" class="sub-btn" id="btn-sub-en-de">Englisch -> Deutsch</button>
|
|
<button onclick="selectSubMode('random')" class="sub-btn" id="btn-sub-random">Zufällig</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="submode-irregular" class="submode-container" style="display:none;">
|
|
<div class="section-title">2. Wie abfragen?</div>
|
|
<div class="button-group">
|
|
<button onclick="selectSubMode('start-inf')" class="sub-btn" id="btn-sub-start-inf">Gegeben: Infinitiv<br><small>(Suche: Past & Participle)</small></button>
|
|
<button onclick="selectSubMode('start-german')" class="sub-btn" id="btn-sub-start-german">Gegeben: Deutsch<br><small>(Suche: Infinitiv, Past & Participle)</small></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="page-section" style="display:none; margin-top: 30px;">
|
|
<button class="action-btn secondary" onclick="openPageOverlay()">Buchseiten wählen</button>
|
|
<div id="selected-pages-display" style="margin: 10px 0; font-weight: bold; color: red;">Keine Seiten gewählt!</div>
|
|
<button class="action-btn primary" id="btn-start" onclick="startQuiz()" disabled>Starten</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="quiz-screen" style="display:none;">
|
|
<div class="card">
|
|
<div class="label" id="q-label">Frage</div>
|
|
<div class="question" id="q-text">...</div>
|
|
<div id="q-hint" class="hint"></div>
|
|
|
|
<div id="input-container">
|
|
<input type="text" id="inp-standard" placeholder="Antwort..." autocomplete="off">
|
|
<div id="verb-inputs" style="display:none;">
|
|
<input type="text" id="inp-inf" placeholder="Infinitiv" autocomplete="off">
|
|
<input type="text" id="inp-simple" placeholder="Simple Past" autocomplete="off">
|
|
<input type="text" id="inp-part" placeholder="Past Participle" autocomplete="off">
|
|
</div>
|
|
</div>
|
|
<div id="feedback" class="feedback"></div>
|
|
</div>
|
|
|
|
<div class="quiz-controls">
|
|
<button class="action-btn" onclick="checkAnswer()" id="btn-check">Prüfen</button>
|
|
<button class="action-btn secondary" onclick="nextQuestion()" id="btn-next" style="display:none;">Weiter</button>
|
|
<button class="action-btn danger" onclick="stopQuiz()">Beenden</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="overlay" class="overlay">
|
|
<div class="overlay-content">
|
|
<h2>Seiten auswählen</h2>
|
|
<div style="display: flex; gap: 10px; margin-bottom: 10px;">
|
|
<button onclick="toggleAllPages(true)" style="padding: 10px; font-size: 0.9rem; background: #eee;">Alle auswählen</button>
|
|
<button onclick="toggleAllPages(false)" style="padding: 10px; font-size: 0.9rem; background: #eee;">Alle abwählen</button>
|
|
</div>
|
|
<div id="page-list" class="page-grid"></div>
|
|
<button class="action-btn primary" onclick="closeOverlay()">Fertig</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress-container">
|
|
<div id="stats-text">0% Richtig</div>
|
|
<div class="progress-bar-bg"><div class="progress-bar-fill" id="progress-bar"></div></div>
|
|
</div>
|
|
|
|
<script src="/static/script.js"></script>
|
|
</body>
|
|
</html> |