import { Table, Inputs } from "@observablehq/inputs";

// Load the CSV data and ensure Student_ID is a string with leading zeros
data = FileAttachment("homework_scores.csv")
  .csv({ typed: true })
  .then(rows =>
    rows.map(row => ({
      ...row,
      Student_ID: String(row.Student_ID).padStart(9, '0')
    }))
  );

// Create a flexbox container to align input and custom button in the same row
viewof inputContainer = html`<div style="
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
"></div>`;

// Create the input box
viewof studentID = Inputs.text({
  placeholder: "Enter Student ID (e.g., 012345667)"
});

// Create a custom HTML button (not using Inputs.button)
viewof confirmButton = Inputs.button("Confirm");

// Append the input box and custom button to the flexbox row
inputContainer.append(viewof studentID, viewof confirmButton);

  import {Table as Table, Inputs as Inputs} from "@observablehq/inputs"

OJS Error

Error: Unable to load file: homework_scores.csv

studentID = ""

confirmButton = 0

filteredData = {
  if (confirmButton) {
    return data.filter(d => d.Student_ID === studentID);
  }
  return [];
};

// Display the filtered data in a table with custom styling
Table(filteredData, {
  columns: ["Student_ID","Name","Bonus","HW1_Grade","HW2_Grade","HW3_Grade","raw_Grade","Scaled_Grade"]
});

OJS Runtime Error

Unable to load file

OJS Runtime Error

Unable to load file

Back to top