Jb Gradebook by @jowinb - Codewith.it

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

Referenze

<input>Definisce un area di input per l'invio di dati e informazioni
typeSpecifica la tipologia/funzione di un elemento.
<b>Formatta il testo in grassetto
<textarea>Area di testo libero espandibile per form HTML
Inserisce un commento nel codice
<tfoot>Definisce il footer o sezione inferiore di una tabella.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercitazione 1

inserimento immagini in un testo

La volpe e la cicogna(2)

Lezione 4 (terza parte)

JS Oggetti ed eventi es2

X-Dsigner (Blu Eletric) – WebKin

5/10/24 es. 2 - conta Parole

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