Jb Gradebook by @jowinb - Codewith.it

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

References

<address> Definisce una sezione contenente indirizzi, contatti e informazioni
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
minImposta il valore numerico o temporale minimo per un elemento input
<h6>Titolo di intestazione di sesto livello
multipart/form-dataCodifica dei caratteri di un form
<aside>Definisce un contenuto separato dal testo perincipale

Users

Log in to search for users

Explore

Find inspiration

Pro Vercelli LB

LEZIONE 1 AULAB

esercitazione 1

esercitazione simona

Esercizio (02/02/2024)

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>Gradebook</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .passing { background-color: green; color: white; }
    .warning { background-color: darkgoldenrod; color: black; }
    .failing { background-color: red; color: white; }
    .border-bottom-2 { border-bottom: 2px solid #000; }
  </style>
</head>
<body>

<div class="container mt-5">
  <h1 class="text-center">Gradebook</h1>

  <form id="grade-form" class="mb-4">
    <div class="mb-3">
      <label for="gradeInput" class="form-label">Enter Grade:</label>
      <input type="number" class="form-control" id="gradeInput" required>
    </div>
    <button type="submit" class="btn btn-primary">Add Grade</button>
    <button type="button" id="reset-btn" class="btn btn-danger ms-3">Reset Gradebook</button>
  </form>

  <h3>Grades List</h3>
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">Grade</th>
        <th scope="col">Letter Grade</th>
      </tr>
    </thead>
    <tbody id="grade-list">
      <!-- Grades will be appended here -->
    </tbody>
  </table>

  <h3>Statistics</h3>
  <div id="statistics">
    <p>Average Grade: <span id="average-grade">0</span></p>
    <p>Median Grade: <span id="median-grade">0</span></p>
    <p>Passing Grades: <span id="passing-count">0</span></p>
    <p>Failing Grades: <span id="failing-count">0</span></p>
  </div>
</div>

<script src="app.js"></script>
</body>
</html>

// app.js
const gradeForm = document.getElementById('grade-form');
const gradeInput = document.getElementById('gradeInput');
const gradeList = document.getElementById('grade-list');
const averageGrade = document.getElementById('average-grade');
const medianGrade = document.getElementById('median-grade');
const passingCount = document.getElementById('passing-count');
const failingCount = document.getElementById('failing-count');
const resetBtn = document.getElementById('reset-btn');

// College 4.0 scale for letter grades
const gradeScale = {
  A: [90, 100],
  B: [80, 89],
  C: [70, 79],
  D: [60, 69],
  F: [0, 59]
};

let grades = [];

// Function to save grades to IndexedDB
function saveGrades() {
  const dbRequest = indexedDB.open("gradebookDB", 1);

  dbRequest.onupgradeneeded = function(e) {
    const db = e.target.result;
    if (!db.objectStoreNames.contains("grades")) {
      const store = db.createObjectStore("grades", { keyPath: "id", autoIncrement: true });
      store.createIndex("grade", "grade", { unique: false });
    }
  };

  dbRequest.onsuccess = function(e) {
    const db = e.target.result;
    const transaction = db.transaction(["grades"], "readwrite");
    const store = transaction.objectStore("grades");

    store.clear(); // Clear previous data
    grades.forEach(grade => store.add({ grade }));
    transaction.oncomplete = function() {
      console.log("Grades saved.");
    };
  };
}

// Function to load grades from IndexedDB
function loadGrades() {
  const dbRequest = indexedDB.open("gradebookDB", 1);

  dbRequest.onsuccess = function(e) {
    const db = e.target.result;
    const transaction = db.transaction(["grades"], "readonly");
    const store = transaction.objectStore("grades");
    const gradeRequest = store.getAll();

    gradeRequest.onsuccess = function() {
      grades = gradeRequest.result.map(item => item.grade);
      displayGrades();
      calculateStatistics();
    };
  };
}

// Function to display the grades in the table
function displayGrades() {
  gradeList.innerHTML = "";
  grades.forEach((grade, index) => {
    const row = document.createElement('tr');
    const cellGrade = document.createElement('td');
    const cellLetter = document.createElement('td');

    let gradeClass = '';
    let letterGrade = getLetterGrade(grade);

    if (grade >= 85) {
      gradeClass = 'passing';
    } else if (grade >= 75) {
      gradeClass = 'warning';
    } else if (grade >= 65) {
      gradeClass = 'failing';
    } else {
      gradeClass = 'failing';
    }

    cellGrade.textContent = grade;
    cellLetter.textContent = letterGrade;
    row.classList.add(gradeClass);
    row.appendChild(cellGrade);
    row.appendChild(cellLetter);
    gradeList.appendChild(row);
  });
}

// Function to calculate the average, median, passing, and failing grades
function calculateStatistics() {
  if (grades.length === 0) return;

  // Calculate Average
  const average = grades.reduce((sum, grade) => sum + grade, 0) / grades.length;
  averageGrade.textContent = average.toFixed(2);

  // Calculate Median
  const sortedGrades = [...grades].sort((a, b) => a - b);
  const median = sortedGrades.length % 2 === 0
    ? (sortedGrades[sortedGrades.length / 2 - 1] + sortedGrades[sortedGrades.length / 2]) / 2
    : sortedGrades[Math.floor(sortedGrades.length / 2)];
  medianGrade.textContent = median.toFixed(2);

  // Count Passing and Failing
  const passing = grades.filter(grade => grade >= 85).length;
  const failing = grades.filter(grade => grade < 65).length;
  passingCount.textContent = passing;
  failingCount.textContent = failing;
}

// Function to get the letter grade based on the grade
function getLetterGrade(grade) {
  for (const [letter, range] of Object.entries(gradeScale)) {
    if (grade >= range[0] && grade <= range[1]) {
      return letter;
    }
  }
  return 'F';
}

// Event listener for the grade form
gradeForm.addEventListener('submit', function(e) {
  e.preventDefault();
  const grade = parseInt(gradeInput.value, 10);
  if (!isNaN(grade) && grade >= 0 && grade <= 100) {
    grades.push(grade);
    displayGrades();
    calculateStatistics();
    saveGrades();
  }
  gradeInput.value = ''; // Clear the input field
});

// Reset button to clear gradebook and storage
resetBtn.addEventListener('click', function() {
  grades = [];
  gradeList.innerHTML = '';
  averageGrade.textContent = '0';
  medianGrade.textContent = '0';
  passingCount.textContent = '0';
  failingCount.textContent = '0';

  // Clear data from IndexedDB
  const dbRequest = indexedDB.open("gradebookDB", 1);
  dbRequest.onsuccess = function(e) {
    const db = e.target.result;
    const transaction = db.transaction(["grades"], "readwrite");
    const store = transaction.objectStore("grades");
    store.clear();
  };
});

// Load grades when the page is loaded
window.addEventListener('load', loadGrades);