65 lines
2.2 KiB
HTML
65 lines
2.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>User Tests</title>
|
||
|
|
<link rel="stylesheet" href="styles.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<nav id="navbar">
|
||
|
|
<a href="/typing/pages/account/index.html">Account</a>
|
||
|
|
<a href="/typing/pages/test/index.html">Test</a>
|
||
|
|
<a href="/typing/pages/leaderboard/index.html">Leaderboard</a>
|
||
|
|
<a href="/typing/pages/test-settings/index.html">Test Settings</a>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<h1>User Tests</h1>
|
||
|
|
<table id="userTestsTable">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Test Type</th>
|
||
|
|
<th>Test Length</th>
|
||
|
|
<th>Test Time</th>
|
||
|
|
<th>WPM</th>
|
||
|
|
<th>Accuracy</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="userTestsBody">
|
||
|
|
<!-- Table body will be filled by JavaScript -->
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
async function fetchUserTests() {
|
||
|
|
const userId = localStorage.getItem("userId"); // Replace with the actual user ID
|
||
|
|
const secret = localStorage.getItem("secret"); // Replace with the actual secret key
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/api/user/tests/${userId}/${secret}`);
|
||
|
|
const tests = await response.json();
|
||
|
|
populateUserTests(tests);
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error fetching user tests:', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function populateUserTests(tests) {
|
||
|
|
const tableBody = document.getElementById('userTestsBody');
|
||
|
|
tableBody.innerHTML = ''; // Clear existing rows
|
||
|
|
tests.forEach(test => {
|
||
|
|
const row = document.createElement('tr');
|
||
|
|
row.innerHTML = `
|
||
|
|
<td>${test.test_type}</td>
|
||
|
|
<td>${test.test_length}</td>
|
||
|
|
<td>${test.test_time}</td>
|
||
|
|
<td>${test.wpm ? test.wpm : 'N/A'}</td>
|
||
|
|
<td>${test.accuracy ? test.accuracy + '%' : 'N/A'}</td>
|
||
|
|
`;
|
||
|
|
tableBody.appendChild(row);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
fetchUserTests(); // Fetch and populate user tests when the page loads
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|