Student Marks – Simple

Leave a Comment / CS - Skills - Level 4 / By

Student Marks

Create a Create a html file and add the following code

HTML / CSS / JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Year 10 Student Data Tracker</title>
    <style>
        body { font-family: sans-serif; padding: 20px; background-color: #f4f4f4; }
        .container { max-width: 700px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        
        /* Graph Styling */
        #graph-container {
            display: flex;
            align-items: flex-end;
            height: 250px;
            border-bottom: 2px solid #333;
            border-left: 2px solid #333;
            padding: 10px;
            margin-top: 20px;
            gap: 15px;
            background-color: #fafafa;
            overflow-x: auto; /* Adds scrollbar if too many students are added */
        }

        .bar-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 60px;
        }

        .bar {
            background-color: #3498db;
            width: 100%;
            text-align: center;
            color: white;
            font-size: 11px;
            transition: height 0.3s;
            border-radius: 2px 2px 0 0;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 5px;
        }

        .bar-label { font-size: 10px; margin-top: 5px; font-weight: bold; text-align: center; }

        /* Table Styling */
        table { width: 100%; margin-top: 20px; border-collapse: collapse; }
        th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; }
        
        .delete-btn {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 4px;
        }
        
        .controls { display: flex; gap: 10px; margin-bottom: 20px; }
        input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
    </style>
</head>
<body>

<div class="container">
    <h2>Student Performance Tracker</h2>
    
    <div class="controls">
        <input type="text" id="nameInput" placeholder="Student Name">
        <input type="number" id="scoreInput" placeholder="Score (0-100)">
        <button onclick="addData()">Add Record</button>
    </div>

    <h3>Class Results</h3>
    <div id="graph-container"></div>

    <table>
        <thead>
            <tr>
                <th>Student</th>
                <th>Score</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="tableBody"></tbody>
    </table>
</div>

<script>
    // 1. The Array now stores Objects { name: "Text", score: Number }
    let studentData = [
        { name: "Alex", score: 75 },
        { name: "Sam", score: 90 }
    ];

    function updateDisplay() {
        const tableBody = document.getElementById('tableBody');
        const graphContainer = document.getElementById('graph-container');
        
        tableBody.innerHTML = '';
        graphContainer.innerHTML = '';

        studentData.forEach((item, index) => {
            // Update Table
            let row = `<tr>
                <td>${item.name}</td>
                <td>${item.score}</td>
                <td><button class="delete-btn" onclick="deleteData(${index})">Delete</button></td>
            </tr>`;
            tableBody.innerHTML += row;

            // Update Graph
            // Create a wrapper for the bar and its label
            let barGroup = document.createElement('div');
            barGroup.className = 'bar-group';

            let bar = document.createElement('div');
            bar.className = 'bar';
            bar.style.height = item.score*2 + 'px';
            bar.innerText = item.score;

            let label = document.createElement('div');
            label.className = 'bar-label';
            label.innerText = item.name;

            barGroup.appendChild(bar);
            barGroup.appendChild(label);
            graphContainer.appendChild(barGroup);
        });
    }

    function addData() {
        const nameInput = document.getElementById('nameInput');
        const scoreInput = document.getElementById('scoreInput');
        
        const name = nameInput.value;
        const score = parseInt(scoreInput.value);

        if (name !== '' && !isNaN(score)) {
            // Push a new object into the array
            studentData.push({ name: name, score: score });
            
            // Clear inputs
            nameInput.value = '';
            scoreInput.value = '';
            
            updateDisplay();
        } else {
            alert("Please enter both a name and a number.");
        }
    }

    function deleteData(index) {
        studentData.splice(index, 1);
        updateDisplay();
    }

    updateDisplay();
</script>

</body>
</html>

Identify the following components in your code

HTML

  • head
  • input fields
  • button
  • Graph holder
  • Table

CSS

  • Type Selector
  • CSS class
  • CSS for background colour
  • CSS for foreground colour
  • CSS for borders
  • CSS for rounded corners

JavaScript

  • dictionary declaration
  • Update display function
  • forEach – what does it do
  • Code which updates the Table
  • Code which updates the Graph
  • Code that lets you add data

Modifications

HTML

Change the Page Title to 10CompSci Results

Change the Heading to Yr 10 Comp Sci 2026

Change the column names to Student Name, Mark, Action

Change the text of the Delete button to X

CSS

Change the background Colour of the Graph

Give the graph rounded corners

Change the colour of the bars in the graph

JavaScript

Modify the dictionary so their are marks for FOUR students

Display the student name in UpperCase

Add a % sign to the label for each bar in the graph

Advanced

Modify the JavaScript to set different CSS styles so that the bars in the graph are different colours based on their values.

mark = XXXX

switch (true):
{
  case (mark < 50):
    // set colour of bar for students who are failing
    break;
  case (mark < 65):
   // set colour of bar for students getting a C
    break;  
  case (mark < 80):
   // set colour of bar for students getting a B
    break;  
  default:
   // set colour of bar for students getting a A
    break;        
}