Jb Gradebook by @jowinb - Codewith.it

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

Referenze

<hr>Inserisce una linea orizzontale
<b>Formatta il testo in grassetto
<head>Tag primario di un documento HTML
<option>Serve ad inserire una voce in un menu di selezione.
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
hrefDefinisce l'URL della risorsa/pagina di destinazione.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Basketball Legends

Prep. Esame pt.4

block zoom test

Scuola G.Galilei.html

Tabella Base con Email

Condizione esercizio 1

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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);