We need to be able to sort items to grade by date of submission. I just noticed that a student who resubmitted an assignment was at the top of the list because of her name spelling. It should not be hard to code given the example below from ChatGPT which can be pasted into the W3 Schools 'try it yourself" tools.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sortable Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
</style>
</head>
<body>
<h2>Sortable Table</h2>
<table id="sortableTable">
<thead>
<tr>
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Date of Submission</th>
<th onclick="sortTable(2)">Age</th>
<th onclick="sortTable(3)">Birthdate</th>
<th onclick="sortTable(4)">Homeroom</th>
</tr>
</thead>
<tbody>
<tr>
<td>Student 1</td>
<td>2025-01-01</td>
<td>16</td>
<td>2007-03-15</td>
<td>HR-3</td>
</tr>
<tr>
<td>Student 2</td>
<td>2024-12-15</td>
<td>15</td>
<td>2008-05-10</td>
<td>HR-1</td>
</tr>
<tr>
<td>Student 3</td>
<td>2024-11-30</td>
<td>14</td>
<td>2009-07-22</td>
<td>HR-4</td>
</tr>
<tr>
<td>Student 4</td>
<td>2024-10-20</td>
<td>17</td>
<td>2006-12-05</td>
<td>HR-2</td>
</tr>
<tr>
<td>Student 5</td>
<td>2024-09-10</td>
<td>13</td>
<td>2010-02-18</td>
<td>HR-5</td>
</tr>
</tbody>
</table>
<script>
let sortDirection = true; // true for ascending, false for descending
function sortTable(columnIndex) {
const table = document.getElementById("sortableTable");
const rows = Array.from(table.rows).slice(1);
const isDateColumn = columnIndex === 1 || columnIndex === 3;
rows.sort((rowA, rowB) => {
let cellA = rowA.cells[columnIndex].innerText;
let cellB = rowB.cells[columnIndex].innerText;
if (isDateColumn) {
cellA = new Date(cellA);
cellB = new Date(cellB);
} else if (!isNaN(cellA) && !isNaN(cellB)) {
cellA = parseFloat(cellA);
cellB = parseFloat(cellB);
}
if (cellA < cellB) return sortDirection ? -1 : 1;
if (cellA > cellB) return sortDirection ? 1 : -1;
return 0;
});
sortDirection = !sortDirection;
rows.forEach(row => table.tBodies[0].appendChild(row));
}
</script>
</body>
</html>