From dc9e4e9028e34ec2e5f068beeb56309d1556ebc0 Mon Sep 17 00:00:00 2001
From: Thomas de Roo <2+thomas@noreply.localhost>
Date: Tue, 16 Jun 2026 10:52:45 +0200
Subject: [PATCH] Update learn.php

---
 learn.php | 175 +++++++++++++++++++++++++++++++-----------------------
 1 file changed, 102 insertions(+), 73 deletions(-)
diff --git a/learn.php b/learn.php
index 678868c..769e560 100644
--- a/learn.php
+++ b/learn.php
@@ -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>
