Update learn.php

2026-06-16 10:52:45 +02:00
parent 5923f329cb
commit dc9e4e9028
1 changed files with 102 additions and 73 deletions
@@ -1,127 +1,156 @@
 <?php
-session_start();
-
-if (!isset($_SESSION['session_stats'])) {
-    $_SESSION['session_stats'] = [
-        'correct' => 0,
-        'wrong' => 0
-    ];
-}
-require_once 'includes/config.php';
-require_once 'includes/auth.php';
+require_once __DIR__ . '/includes/config.php';
+require_once __DIR__ . '/includes/auth.php';

 requireLogin();

-$lang = $_GET['lang'] ?? '';
-$list = $_GET['list'] ?? '';
-
+$lang = $_GET['lang'] ?? 'latijn';
+$list = $_GET['list'] ?? 'test';
 ?>

 <!DOCTYPE html>
-<html>
+<html lang="nl">
 <head>
-    <title>Oefenen</title>
-    <link rel="stylesheet" href="assets/css/style.css">
+    <meta charset="UTF-8">
+    <title>Woordjes oefenen</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#222">
+
    <link rel="manifest" href="/manifest.json">
-    <meta name="theme-color" content="#2b2b2b">
+    <link rel="stylesheet" href="/assets/css/style.css">
 </head>
+
 <body>

 <div class="container">

-<div class="card">
+    <div class="card">

-<h1>Oefenen</h1>
+        <h1>Oefenen</h1>

-<p>
-Vertaal:
-<strong id="question">...</strong>
-</p>
+        <p>
+            Vertaal:
+            <strong id="question">laden...</strong>
+        </p>

-<input id="answer" autocomplete="off">
+        <input id="answer" autocomplete="off" placeholder="Typ je antwoord">

-<button onclick="check()">Controleer</button>
+        <button onclick="check()">Controleer</button>

-<p id="result"></p>
-<p id="stats"></p>
-</div>
+        <p id="result"></p>
+
+        <p id="stats"></p>
+
+    </div>

 </div>

-<script>
+<script type="module">
+
+import { initDB } from "/assets/js/db.js";
+import {
+    importList,
+    getNextWord,
+    answerWord,
+    getSessionStats
+} from "/assets/js/offline-engine.js";
+
+import { syncQueue } from "/assets/js/sync.js";
+
+await initDB();
+
+const lang = "<?= $lang ?>";
+const list = "<?= $list ?>";

 let currentWord = null;

+/**
+ * INIT: import woordenlijst naar IndexedDB
+ */
+await importList(lang, list);
+
+/**
+ * WORD LOAD
+ */
 async function loadWord() {

-    const res = await fetch(
-        "api/next.php?lang=<?= $lang ?>&list=<?= $list ?>"
-    );
+    currentWord = await getNextWord(lang, list);

-    const data = await res.json();
-
-    if (!data.word) {
-        document.getElementById('question').innerText =
-            "Geen woordenlijst gevonden";
+    if (!currentWord) {
+        document.getElementById("question").innerText =
+            "Geen woorden gevonden";
        return;
    }

-    currentWord = data.word;
-
-    document.getElementById('question').innerText =
+    document.getElementById("question").innerText =
        currentWord.question;

-    document.getElementById('answer').value = '';
-    document.getElementById('result').innerText = '';
+    document.getElementById("answer").value = "";
+    document.getElementById("result").innerText = "";
+
+    updateStats();
 }

-async function check() {
+/**
+ * CHECK ANSWER
+ */
+window.check = async function () {

-    const answer =
-        document.getElementById('answer').value;
+    const input =
+        document.getElementById("answer").value;

-    const res = await fetch('api/answer.php', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-            lang: "<?= $lang ?>",
-            list: "<?= $list ?>",
-            wordId: currentWord.id,
-            answer: answer
-        })
-    });
+    if (!currentWord) return;

-    const data = await res.json();
+    const res =
+        await answerWord(currentWord, input);

-    const result = document.getElementById('result');
+    const result = document.getElementById("result");

-    if (data.correct) {
+    if (res.correct) {
        result.innerText = "Goed";
        result.style.color = "green";
    } else {
        result.innerText = "Fout";
        result.style.color = "red";
    }
-    const stats = document.getElementById('stats');
-    stats.innerText =
-        `Sessie → Goed: ${data.session.correct} | Fout: ${data.session.wrong}`;
-    
-    setTimeout(loadWord, 700);
+
+    loadWord();
+};
+
+/**
+ * SESSION STATS
+ */
+async function updateStats() {
+
+    const stats =
+        await getSessionStats();
+
+    document.getElementById("stats").innerText =
+        `Sessie → Goed: ${stats.correct} | Fout: ${stats.wrong}`;
 }

-loadWord();
-
-document.getElementById('answer').addEventListener('keydown', function (e) {
-    if (e.key === 'Enter') {
-        e.preventDefault();
+/**
+ * ENTER SUPPORT
+ */
+document.getElementById("answer").addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
        check();
    }
 });
-if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('/service-worker.js');
-}
+
+/**
+ * INIT FIRST WORD
+ */
+loadWord();
+
+/**
+ * SYNC WHEN ONLINE
+ */
+window.addEventListener("online", () => {
+    syncQueue();
+});
+
 </script>

 </body>