Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Test - English Vocabulary</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 50px auto;
padding: 20px;
}
.test-section {
background: #f5f5f5;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
}
button {
background: #4f46e5;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin: 5px;
}
button:hover {
background: #4338ca;
}
pre {
background: white;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
}
.success { color: green; }
.error { color: red; }
</style>
</head>
<body>
<h1>๐งช API Test Page</h1>
<div class="test-section">
<h2>Test 1: Database Connection</h2>
<button onclick="testConnection()">Test Connection</button>
<pre id="connection-result">Click button to test...</pre>
</div>
<div class="test-section">
<h2>Test 2: Get Words</h2>
<button onclick="testGetWords()">Get Words</button>
<pre id="words-result">Click button to test...</pre>
</div>
<div class="test-section">
<h2>Test 3: Get Categories</h2>
<button onclick="testGetCategories()">Get Categories</button>
<pre id="categories-result">Click button to test...</pre>
</div>
<div class="test-section">
<h2>Test 4: Check Answer</h2>
<p>This will test checking the answer "kat" for word_id 1 (cat)</p>
<button onclick="testCheckAnswer()">Check Answer</button>
<pre id="check-result">Click button to test...</pre>
</div>
<script>
async function testConnection() {
const result = document.getElementById('connection-result');
result.textContent = 'Testing...';
try {
const response = await fetch('php/debug.php');
const data = await response.json();
result.className = 'success';
result.textContent = JSON.stringify(data, null, 2);
} catch (error) {
result.className = 'error';
result.textContent = 'Error: ' + error.message;
}
}
async function testGetWords() {
const result = document.getElementById('words-result');
result.textContent = 'Testing...';
try {
const response = await fetch('php/get_words.php?limit=3');
const data = await response.json();
result.className = data.success ? 'success' : 'error';
result.textContent = JSON.stringify(data, null, 2);
} catch (error) {
result.className = 'error';
result.textContent = 'Error: ' + error.message;
}
}
async function testGetCategories() {
const result = document.getElementById('categories-result');
result.textContent = 'Testing...';
try {
const response = await fetch('php/get_categories.php');
const data = await response.json();
result.className = data.success ? 'success' : 'error';
result.textContent = JSON.stringify(data, null, 2);
} catch (error) {
result.className = 'error';
result.textContent = 'Error: ' + error.message;
}
}
async function testCheckAnswer() {
const result = document.getElementById('check-result');
result.textContent = 'Testing...';
const testData = {
word_id: 1,
answer: "kat",
session_id: "test_session_" + Date.now()
};
console.log('Sending:', testData);
try {
const response = await fetch('php/check_answer.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(testData)
});
console.log('Response status:', response.status);
const data = await response.json();
console.log('Response data:', data);
result.className = data.success ? 'success' : 'error';
result.textContent = JSON.stringify(data, null, 2);
} catch (error) {
result.className = 'error';
result.textContent = 'Error: ' + error.message;
console.error('Full error:', error);
}
}
</script>
</body>
</html>