Jb Gradebook(2) by @jowinb - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

crossoriginGestisce richieste tra documenti provenienti da origini differenti.
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
<h5>Titolo di intestazione di quinto livello
idIdentifica univocamente un elemento HTML
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.

Users

Log in to search for users

Explore

Find inspiration

esercitazione 1

Inserimento immagini in un testo

pagina_personale

AoIT Dashboard 2024 v1

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>College Gradebook</title>
    <!-- Bootstrap for styling -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="container">
    <h1 class="my-4 text-center">College Gradebook</h1>

    <!-- Form for entering grades -->
    <form id="gradeForm" class="mb-3">
        <div class="mb-3">
            <label for="gradeInput" class="form-label">Enter Grade (%)</label>
            <input type="number" class="form-control" id="gradeInput" placeholder="Enter grade">
        </div>
        <button type="submit" class="btn btn-primary">Add Grade</button>
    </form>

    <!-- Display grades table -->
    <h3>Grades List</h3>
    <table class="table table-striped" id="gradesTable">
        <thead>
            <tr>
                <th>#</th>
                <th>Grade</th>
                <th>Letter Grade</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="gradesTableBody"></tbody>
    </table>

    <!-- Summary Section -->
    <h3>Grade Summary</h3>
    <ul id="gradeSummary">
        <li>Average: <span id="averageGrade">N/A</span></li>
        <li>Median: <span id="medianGrade">N/A</span></li>
        <li>Passing: <span id="passingGrade">N/A</span></li>
        <li>Failing: <span id="failingGrade">N/A</span></li>
    </ul>

    <button id="resetBtn" class="btn btn-danger">Reset Gradebook</button>
</div>

<!-- Add Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="app.js"></script>
</body>
</html>

body {
    background-color: #f8f9fa;
    font-family: Arial, sans-serif;
}

h1, h3 {
    color: #2d2d2d;
}

table {
    width: 100%;
}

#gradesTable td {
    padding: 8px;
    text-align: center;
}

#gradesTable td.passing {
    background-color: green;
    color: white;
}

#gradesTable td.warning {
    background-color: darkgoldenrod;
    color: white;
}

#gradesTable td.warning-low {
    background-color: orange;
    color: white;
}

#gradesTable td.failing {
    background-color: red;
    color: white;
}

#resetBtn {
    margin-top: 20px;
    width: 100%;
}

// Gradebook structure: Array to store grades
let grades = [];

// Function to handle grade submission
document.getElementById("gradeForm").addEventListener("submit", function(event) {
    event.preventDefault();

    // Get the input grade
    const gradeInput = document.getElementById("gradeInput");
    const grade = parseInt(gradeInput.value);

    if (grade >= 0 && grade <= 100) {
        // Add the grade to the array
        grades.push(grade);
        // Save to IndexedDB
        saveToIndexedDB();
        // Update the grade table
        updateGradeTable();
        // Reset the input field
        gradeInput.value = '';
    } else {
        alert('Please enter a valid grade between 0 and 100');
    }
});

// Function to determine the letter grade based on the College 4.0 Scale
function getLetterGrade(grade) {
    if (grade >= 85) return 'A (4.0)';
    if (grade >= 80) return 'B+ (3.5)';
    if (grade >= 75) return 'B (3.0)';
    if (grade >= 70) return 'C+ (2.5)';
    if (grade >= 65) return 'C (2.0)';
    if (grade >= 60) return 'D+ (1.5)';
    if (grade >= 50) return 'D (1.0)';
    return 'F (0.0)';
}

// Function to get grade color
function getGradeColor(grade) {
    if (grade >= 85) return 'passing';
    if (grade >= 75) return 'warning';
    if (grade >= 65) return 'warning-low';
    return 'failing';
}

// Function to update the grade table
function updateGradeTable() {
    const tableBody = document.getElementById("gradesTableBody");
    tableBody.innerHTML = '';

    grades.forEach((grade, index) => {
        const row = document.createElement('tr');
        const letterGrade = getLetterGrade(grade);
        const gradeColor = getGradeColor(grade);

        row.innerHTML = `
            <td>${index + 1}</td>
            <td class="${gradeColor}">${grade}</td>
            <td>${letterGrade}</td>
            <td><button class="btn btn-danger btn-sm" onclick="removeGrade(${index})">Remove</button></td>
        `;
        tableBody.appendChild(row);
    });

    updateSummary();
}

// Function to update grade summary
function updateSummary() {
    const average = calculateAverage(grades);
    const median = calculateMedian(grades);
    const passing = grades.filter(grade => grade >= 75).length;
    const failing = grades.filter(grade => grade < 75).length;

    document.getElementById("averageGrade").innerText = average.toFixed(2);
    document.getElementById("medianGrade").innerText = median.toFixed(2);
    document.getElementById("passingGrade").innerText = passing;
    document.getElementById("failingGrade").innerText = failing;
}

// Function to calculate the average grade
function calculateAverage(grades) {
    const sum = grades.reduce((total, grade) => total + grade, 0);
    return sum / grades.length;
}

// Function to calculate the median grade
function calculateMedian(grades) {
    const sortedGrades = [...grades].sort((a, b) => a - b);
    const mid = Math.floor(sortedGrades.length / 2);
    return sortedGrades.length % 2 === 0
        ? (sortedGrades[mid - 1] + sortedGrades[mid]) / 2
        : sortedGrades[mid];
}

// Function to remove a grade
function removeGrade(index) {
    grades.splice(index, 1);
    saveToIndexedDB();
    updateGradeTable();
}

// Function to reset the gradebook
document.getElementById("resetBtn").addEventListener("click", function() {
    grades = [];
    localStorage.clear();
    updateGradeTable();
});

// Function to save data to IndexedDB
function saveToIndexedDB() {
    const dbRequest = indexedDB.open('Gradebook', 1);

    dbRequest.onupgradeneeded = function() {
        const db = dbRequest.result;
        if (!db.objectStoreNames.contains('grades')) {
            db.createObjectStore('grades', { keyPath: 'id', autoIncrement: true });
        }
    };

    dbRequest.onsuccess = function() {
        const db = dbRequest.result;
        const transaction = db.transaction('grades', 'readwrite');
        const store = transaction.objectStore('grades');
        store.clear();
        grades.forEach((grade, index) => {
            store.add({ id: index, grade });
        });
    };
}

// Function to load data from IndexedDB on page load
window.addEventListener('load', function() {
    const dbRequest = indexedDB.open('Gradebook', 1);

    dbRequest.onsuccess = function() {
        const db = dbRequest.result;
        const transaction = db.transaction('grades', 'readonly');
        const store = transaction.objectStore('grades');
        const request = store.getAll();

        request.onsuccess = function() {
            grades = request.result.map(item => item.grade);
            updateGradeTable();
        };
    };
});