208 lines
7.6 KiB
HTML
208 lines
7.6 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<meta name="color-scheme" content="dark light">
|
||
<title>LAPractice – LAP Lernkarten</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎓</text></svg>">
|
||
<link rel="stylesheet" href="/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
|
||
<header class="topbar">
|
||
<div class="brand"><span class="logo">LP</span> LAPractice</div>
|
||
<nav>
|
||
<button class="tab ghost" data-nav="library">Fragensets</button>
|
||
<button class="tab ghost" data-nav="setup" id="nav-setup" hidden>Üben</button>
|
||
<button class="tab ghost" data-nav="stats" id="nav-stats" hidden>Statistik</button>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- ------------------------------------------------------------ library -->
|
||
<section class="view" id="view-library">
|
||
<div class="section-head">
|
||
<h2>Fragenset importieren</h2>
|
||
<span class="hint">JSON-Datei mit Kategorien, Unterkategorien und Fragen</span>
|
||
</div>
|
||
|
||
<div class="dropzone" id="dropzone">
|
||
<h3>Datei hierher ziehen</h3>
|
||
<p class="muted">oder</p>
|
||
<button class="primary" id="pick-file">Datei auswählen</button>
|
||
<input type="file" id="file-input" accept=".json,application/json" hidden multiple>
|
||
<p class="faint" style="margin-top:14px">
|
||
Erwartetes Format:
|
||
<code>{ "title": …, "categories": [ { "title": …, "subcategories": [ { "name": …, "questions": [ { "q": …, "a": … } ] } ] } ] }</code><br>
|
||
Ein Set mit gleichem Titel erneut importieren aktualisiert die Fragen und behält die Statistik.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="section-head">
|
||
<h2>Meine Fragensets</h2>
|
||
<div class="spacer"></div>
|
||
</div>
|
||
<div class="set-list" id="set-list"></div>
|
||
</section>
|
||
|
||
<!-- -------------------------------------------------------------- setup -->
|
||
<section class="view" id="view-setup">
|
||
<div class="section-head">
|
||
<h2 id="setup-title">Übung zusammenstellen</h2>
|
||
<div class="spacer"></div>
|
||
<button class="ghost" id="setup-all">Alle wählen</button>
|
||
<button class="ghost" id="setup-none">Keine</button>
|
||
</div>
|
||
|
||
<div class="setup-grid">
|
||
<div class="card options">
|
||
<div class="option-row">
|
||
<span class="label">Fragen</span>
|
||
<select id="filter">
|
||
<option value="all">Alle ausgewählten Fragen</option>
|
||
<option value="wrong">Nur zuletzt falsch beantwortete</option>
|
||
<option value="unseen">Nur noch nie gesehene</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="option-row">
|
||
<span class="label">Reihenfolge</span>
|
||
<label class="toggle">
|
||
<input type="checkbox" id="shuffle" checked>
|
||
<span>Fragen mischen</span>
|
||
<span class="faint">– zufällige Reihenfolge statt Skriptum</span>
|
||
</label>
|
||
</div>
|
||
<div class="option-row">
|
||
<span class="label"></span>
|
||
<label class="toggle">
|
||
<input type="checkbox" id="smart" checked>
|
||
<span>Schwächen zuerst</span>
|
||
<span class="faint">– neue und falsch beantwortete Fragen nach vorne</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="option-row">
|
||
<span class="label">Umfang</span>
|
||
<label class="toggle">
|
||
<input type="checkbox" id="endless">
|
||
<span>Endlos üben</span>
|
||
<span class="faint">– wiederholt, bis ich die Runde beende</span>
|
||
</label>
|
||
</div>
|
||
<div class="option-row" id="limit-row">
|
||
<span class="label">Anzahl</span>
|
||
<select id="limit">
|
||
<option value="10">10 Karten</option>
|
||
<option value="20" selected>20 Karten</option>
|
||
<option value="30">30 Karten</option>
|
||
<option value="50">50 Karten</option>
|
||
<option value="0">Alle</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tree" id="tree"></div>
|
||
</div>
|
||
|
||
<div class="start-bar">
|
||
<span class="muted" id="selection-info">Nichts ausgewählt</span>
|
||
<div class="spacer"></div>
|
||
<button class="ghost" data-nav="library">Zurück</button>
|
||
<button class="primary big" id="start">Übung starten</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ----------------------------------------------------------- practice -->
|
||
<section class="view" id="view-practice">
|
||
<div class="practice-head">
|
||
<div class="row">
|
||
<span class="counter muted" id="p-position">–</span>
|
||
<span class="pill good" id="p-correct">✓ 0</span>
|
||
<span class="pill bad" id="p-wrong">✗ 0</span>
|
||
<div class="spacer"></div>
|
||
<button class="ghost" id="p-quit">Beenden</button>
|
||
</div>
|
||
<div class="progress"><span id="p-progress" style="width:0%"></span></div>
|
||
</div>
|
||
|
||
<div class="flashcard">
|
||
<div class="crumbs">
|
||
<span class="pill accent" id="p-category">–</span>
|
||
<span class="pill" id="p-subcategory">–</span>
|
||
<span class="spacer"></span>
|
||
<span class="pill" id="p-history" hidden></span>
|
||
</div>
|
||
|
||
<div class="question" id="p-question"></div>
|
||
|
||
<div class="answer" id="p-answer" hidden>
|
||
<span class="lbl">Antwort</span>
|
||
<div id="p-answer-text"></div>
|
||
</div>
|
||
|
||
<div class="card-actions">
|
||
<button class="primary big" id="p-reveal" style="flex:1">Antwort aufdecken</button>
|
||
<div class="judge" id="p-judge" hidden>
|
||
<button class="wrong big" id="p-no">✗ Falsch</button>
|
||
<button class="correct big" id="p-yes">✓ Richtig</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="keyhints">
|
||
<span><kbd>Leertaste</kbd> aufdecken</span>
|
||
<span><kbd>1</kbd> / <kbd>←</kbd> falsch</span>
|
||
<span><kbd>2</kbd> / <kbd>→</kbd> richtig</span>
|
||
<span><kbd>S</kbd> überspringen</span>
|
||
<span><kbd>Esc</kbd> Runde beenden</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ------------------------------------------------------------ summary -->
|
||
<section class="view" id="view-summary">
|
||
<div class="section-head"><h2>Runde beendet</h2></div>
|
||
<div class="score-grid" id="summary-scores"></div>
|
||
|
||
<div class="section-head">
|
||
<h2>Durchgang</h2>
|
||
<div class="spacer"></div>
|
||
<button class="primary" id="again-wrong">Falsche wiederholen</button>
|
||
<button class="ghost" id="again-same">Neue Runde</button>
|
||
<button class="ghost" data-nav="setup">Auswahl ändern</button>
|
||
</div>
|
||
<div class="review-list" id="summary-list"></div>
|
||
</section>
|
||
|
||
<!-- -------------------------------------------------------------- stats -->
|
||
<section class="view" id="view-stats">
|
||
<div class="section-head">
|
||
<h2 id="stats-title">Statistik</h2>
|
||
<div class="spacer"></div>
|
||
<button class="danger ghost" id="stats-reset">Fortschritt zurücksetzen</button>
|
||
</div>
|
||
<div class="score-grid" id="stats-scores"></div>
|
||
|
||
<div class="section-head"><h2>Letzte 14 Tage</h2></div>
|
||
<div class="card"><div class="days" id="stats-days"></div></div>
|
||
|
||
<div class="section-head">
|
||
<h2>Kategorien</h2>
|
||
<span class="hint">Anteil der Fragen, die zuletzt richtig beantwortet wurden</span>
|
||
</div>
|
||
<div class="stat-rows" id="stats-categories"></div>
|
||
|
||
<div class="section-head">
|
||
<h2>Schwächste Fragen</h2>
|
||
<span class="hint">nach Anzahl falscher Antworten</span>
|
||
</div>
|
||
<div class="stat-rows" id="stats-weakest"></div>
|
||
</section>
|
||
|
||
</div>
|
||
<div class="toasts" id="toasts"></div>
|
||
<script type="module" src="/app.js"></script>
|
||
</body>
|
||
</html>
|