DEROO/woordjes
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Update learn.php

Browse Source
This commit is contained in:
Thomas de Roo
2026-06-16 10:52:45 +02:00
parent 5923f329cb
commit dc9e4e9028
1 changed files with 102 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
learn.php
+92 -63
View File
@@ -1,30 +1,26 @@
<?php <?php
session_start(); require_once __DIR__ . '/includes/config.php';
require_once __DIR__ . '/includes/auth.php';
if (!isset($_SESSION['session_stats'])) {
$_SESSION['session_stats'] = [
'correct' => 0,
'wrong' => 0
];
}
require_once 'includes/config.php';
require_once 'includes/auth.php';
requireLogin(); requireLogin();
$lang = $_GET['lang'] ?? ''; $lang = $_GET['lang'] ?? 'latijn';
$list = $_GET['list'] ?? ''; $list = $_GET['list'] ?? 'test';
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="nl">
<head> <head>
<title>Oefenen</title> <meta charset="UTF-8">
<link rel="stylesheet" href="assets/css/style.css"> <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"> <link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#2b2b2b"> <link rel="stylesheet" href="/assets/css/style.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@@ -35,93 +31,126 @@ $list = $_GET['list'] ?? '';
<p> <p>
Vertaal: Vertaal:
<strong id="question">...</strong> <strong id="question">laden...</strong>
</p> </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="result"></p>
<p id="stats"></p> <p id="stats"></p>
</div> </div>
</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; let currentWord = null;
/**
* INIT: import woordenlijst naar IndexedDB
*/
await importList(lang, list);
/**
* WORD LOAD
*/
async function loadWord() { async function loadWord() {
const res = await fetch( currentWord = await getNextWord(lang, list);
"api/next.php?lang=<?= $lang ?>&list=<?= $list ?>"
);
const data = await res.json(); if (!currentWord) {
document.getElementById("question").innerText =
if (!data.word) { "Geen woorden gevonden";
document.getElementById('question').innerText =
"Geen woordenlijst gevonden";
return; return;
} }
currentWord = data.word; document.getElementById("question").innerText =
document.getElementById('question').innerText =
currentWord.question; currentWord.question;
document.getElementById('answer').value = ''; document.getElementById("answer").value = "";
document.getElementById('result').innerText = ''; document.getElementById("result").innerText = "";
updateStats();
} }
async function check() { /**
* CHECK ANSWER
*/
window.check = async function () {
const answer = const input =
document.getElementById('answer').value; document.getElementById("answer").value;
const res = await fetch('api/answer.php', { if (!currentWord) return;
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
lang: "<?= $lang ?>",
list: "<?= $list ?>",
wordId: currentWord.id,
answer: answer
})
});
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.innerText = "Goed";
result.style.color = "green"; result.style.color = "green";
} else { } else {
result.innerText = "Fout"; result.innerText = "Fout";
result.style.color = "red"; result.style.color = "red";
} }
const stats = document.getElementById('stats');
stats.innerText =
`Sessie → Goed: ${data.session.correct} | Fout: ${data.session.wrong}`;
setTimeout(loadWord, 700);
}
loadWord(); loadWord();
};
document.getElementById('answer').addEventListener('keydown', function (e) { /**
if (e.key === 'Enter') { * SESSION STATS
e.preventDefault(); */
async function updateStats() {
const stats =
await getSessionStats();
document.getElementById("stats").innerText =
`Sessie → Goed: ${stats.correct} | Fout: ${stats.wrong}`;
}
/**
* ENTER SUPPORT
*/
document.getElementById("answer").addEventListener("keydown", (e) => {
if (e.key === "Enter") {
check(); check();
} }
}); });
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js'); /**
} * INIT FIRST WORD
*/
loadWord();
/**
* SYNC WHEN ONLINE
*/
window.addEventListener("online", () => {
syncQueue();
});
</script> </script>
</body> </body>