Class Gradebook by @SoranyiL - Codewith.it

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

Referenze

<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
multipart/form-dataCodifica dei caratteri di un form
<option>Serve ad inserire una voce in un menu di selezione.
<h4>Titolo di intestazione di quarto livello
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
application-x-www-form-urlencodedCodifica dei caratteri di un form

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

5/10/24 es. 8 - conta alfabeto

esercizio ripilogativo 1

SEMI al FUTURO [Immagine Home]

WebDeveloper 2025 - Portfolio Wave

Quiz ristrutturazione

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>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Class Gradebook</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class="container">
		<h2 class="my-4">Gradebook</h2>

		<div class="form-group">
			<label for="gradeInput">Enter Grade:</label>
			<input type="number" class="form-control" id="gradeInput" placeholder="Enter a grade">
		</div>
		<button class="btn btn-primary" onclick="addGrade(parseInt(document.getElementById('gradeInput').value))">Add Grade</button>

		<h4 class="my-4">Grades:</h4>
		<ul id="grade-list" class="list-group"></ul>

		<h4 class="my-4" id="average">Average: 0</h4>
		<h4 id="median">Median: 0</h4>
    <h4 id="college">College 4.0 Scale: 0</h4>
	</div>

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

</html>

html {
  height: 100%;
  width: 100%;
}

var grades = [];
var sorted = [];
var gradeTestData = [100, 97, 96, 93, 92, 90, 89, 87, 86, 83, 82, 80, 79, 77, 76, 73, 72, 70, 69, 67, 66, 65];
var avg = 0;

const gradeScale = [
    { letter: 'A', min: 90 },
    { letter: 'A-', min: 87 },
    { letter: 'B+', min: 83 },
    { letter: 'B', min: 80 },
    { letter: 'B-', min: 77 },
    { letter: 'C+', min: 73 },
    { letter: 'C', min: 70 },
    { letter: 'C-', min: 67 },
    { letter: 'D+', min: 65 },
    { letter: 'D', min: 60 },
    { letter: 'F', min: 0 }
];

function average() {
    if (grades.length === 0) return 0;
    var sum = grades.reduce((acc, grade) => acc + grade, 0);
    avg = sum / grades.length;
    return avg.toFixed(2);
}

function median() {
    sorted = [...grades].sort((a, b) => a - b); 
    var mid = Math.floor(sorted.length / 2);
    if (sorted.length % 2 === 0) {
        return ((sorted[mid - 1] + sorted[mid]) / 2).toFixed(2);
    } else {
        return sorted[mid];
    }
}

function fourPoint() {
    
    let totalGpa = 0;

    for (let i = 0; i < grades.length; i++) {
        const grade = grades[i];
        if (grade >= 96) totalGpa += 4.0;
        else if (grade >= 90) totalGpa += 3.7;
        else if (grade >= 87) totalGpa += 3.3;
        else if (grade >= 83) totalGpa += 3.0;
        else if (grade >= 80) totalGpa += 2.7;
        else if (grade >= 77) totalGpa += 2.3;
        else if (grade >= 73) totalGpa += 2.0;
        else if (grade >= 70) totalGpa += 1.7;
        else if (grade >= 67) totalGpa += 1.3;
        else if (grade >= 60) totalGpa += 1.0;
        else totalGpa += 0.0;
    }

    return (totalGpa / grades.length).toFixed(2);
}

function collegeScale(grade) {
    for (let scale of gradeScale) {
        if (grade >= scale.min) {
            return scale.letter;
        }
    }
    return 'F';
}

function display() {
    const gradeList = document.getElementById("grade-list");
    gradeList.innerHTML = '';  

    grades.forEach(grade => {
        let gradeColor = '';
        if (grade >= 85) {
            gradeColor = 'bg-success'; 
        } else if (grade >= 75) {
            gradeColor = 'bg-warning'; 
        } else if (grade >= 65) {
            gradeColor = 'bg-orange'; 
        } else {
            gradeColor = 'bg-danger'; 
        }

        const li = document.createElement("li");
        li.classList.add('list-group-item', gradeColor);
        li.textContent = `${grade} - ${collegeScale(grade)}`;
        gradeList.appendChild(li);
    });

    document.getElementById("average").textContent = `Average: ${average()}`;
    document.getElementById("median").textContent = `Median: ${median()}`;
    document.getElementById("college").textContent = `College 4.0 Scale: ${fourPoint()}`;
}

function addGrade(grade) {
    grades.push(grade);
    display();
}