WebFund 2024F: Tutorial 7

In this tutorial you will be playing with Submission Demo, which is an integration of the code from Tutorial 5 and Tutorial 6.

Tasks

Create a file that validates correctly and upload it. Then, check the listing and analysis pages: is your upload reflected there?
Create a file that does not validate and attempt to upload it. What happens? Why?
Are the validation and error messages the same as in Tutorial 6?
Change the app so it accepts a field "Section: " at the top of of the assignment just after the Student ID. This section should be added to the output of the validation, the output after a submission is uploaded, and the submission listing. What files did you change? How did you change them?

Code

Code for Submission Demo

submitdemo.js

static/index.html

static/upload.html

static/validator.js

static/list.html

<!DOCTYPE html>
<html>
  <head>
    <title>COMP 2406 Submission Demo: Submission Listing</title>
    <link rel="stylesheet" href="/style.css">
    <script src="/list.js" defer></script>
  </head>
  <body>
    <h1>Submission Listing</h1>
    <div>
      <div></div>
      <table>
        <thead>
          <th>DB ID</th>
          <th>Student ID</th>
          <th>Name</th>
          <th>Question 1</th>
          <th>Question 2</th>
          <th>Question 3</th>
          <th>Question 4</th>
          <th>Question 5</th>
        </thead>
        <tbody id="table"/>
      </table>
    </div>
    <form method="get" action="/">
      <button type="submit">Home</button>
    </form>
  </body>
</html>

static/list.js

// SPDX-License-Identifier: GPL-3.0-or-later
// Copyright (C) 2024 Anil Somayaji
//
// list.js, part of submitdemo
// for COMP 2406 (Fall 2024), Carleton University
// 
// Initial version: November 6, 2024
//

function insertTableData(tableData) {
    var t = document.querySelector("#table");
    var row = [];
   
    function rowMarkup(s) {
        return "<td>" + s + "</td>";
    }

    for (let r of tableData) {
        row.push("<tr>")
        row.push(rowMarkup(r.id));
        row.push(rowMarkup(r.studentID));
        row.push(rowMarkup(r.name));
        row.push(rowMarkup(r.q1));
        row.push(rowMarkup(r.q2));
        row.push(rowMarkup(r.q3));
        row.push(rowMarkup(r.q4));
        row.push(rowMarkup(r.q5));
        row.push("</tr>")
    }

    t.innerHTML = row.join("\n");
}


async function updateTable() {
    console.log("Updating Table...");
    
    try {
        const response = await fetch("/list");
        if (response.ok) {
            const tableData = await response.json();
            insertTableData(tableData);
        } else {
            console.error("Table loading error response: " + response.status);
        }
    } catch (error) {
        console.error("Table loading fetch error: " + error.message);
    }
}

updateTable().then(() => {console.log("Table updated!");});

static/style.css

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}