Grading System

body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; flex-direction: column; } #login-container, #grades-container { width: 80%; max-width: 600px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; text-align: center; } #login-form { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } #login-form input, #login-form button { padding: 10px; border-radius: 5px; border: 1px solid #ddd; } #admin-login { margin-top: 15px; } #admin-passcode { display: none; flex-direction: column; gap: 10px; margin-top: 10px; } #admin-passcode input, #admin-passcode button { padding: 10px; border-radius: 5px; border: 1px solid #ddd; } #students-container { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .student { display: flex; justify-content: space-between; align-items: center; } .student input[type="number"] { width: 50px; } #student-grade { display: none; } #student-grade input[type="number"] { display: block; /* Only show for student view */ } const validUsernames = [ "amos-born", "aubrey-green", "avery-jung", "bo-visintainer", "danielle-booker", "delia-jack", "edward-moore", "ezra-murphy", "gabriel-woolridge", "hans-millitzer", "iris-tudor", "jb-brocks", "jacob-hooker", "julia-clark", "kamori-gilmore", "kenna-mekkonen", "lamarr-burgess", "liam-williamson", "lilah-mcmillin", "maizie-ellingsen", "max-casey", "miles-rosenberg", "remi-bonsu", "rylee-miller", "willow-sawyer" ]; const adminPasscode = "teacher"; let isAdmin = false; let currentUsername = ''; let grades = {}; // Function to load grades from local storage function loadLocalGrades() { const storedGrades = localStorage.getItem('studentGrades'); if (storedGrades) { grades = JSON.parse(storedGrades); } } // Function to save grades to local storage function saveLocalGrades() { localStorage.setItem('studentGrades', JSON.stringify(grades)); } function login() { const usernameInput = document.getElementById('username'); const username = usernameInput.value.toLowerCase().replace(/\s+/g, '-'); const loginError = document.getElementById('login-error'); if (validUsernames.includes(username)) { currentUsername = username; showGradesContainer(false); // Show student grade view loginError.textContent = ''; } else { loginError.textContent = 'Invalid username.'; } } function showAdminLogin() { document.getElementById('admin-passcode').style.display = 'block'; } function loginAdmin() { const adminPasswordInput = document.getElementById('adminPassword'); const adminPassword = adminPasswordInput.value; const loginError = document.getElementById('login-error'); if (adminPassword === adminPasscode) { isAdmin = true; showGradesContainer(true); // Show admin grade view loginError.textContent = ''; } else { loginError.textContent = 'Invalid admin passcode.'; } } function showGradesContainer(isAdminView) { document.getElementById('login-container').style.display = 'none'; document.getElementById('grades-container').style.display = 'block'; loadLocalGrades(); // Load grades from local storage when grades container is shown if (isAdminView) { document.getElementById('admin-grades').style.display = 'block'; document.getElementById('student-grade').style.display = 'none'; loadGradesForAdmin(); } else { document.getElementById('admin-grades').style.display = 'none'; document.getElementById('student-grade').style.display = 'block'; document.getElementById('student-name').textContent = currentUsername.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase()); document.getElementById('grade-input').dataset.student = currentUsername; displayStudentGrade(); } } function loadGradesForAdmin() { validUsernames.forEach(username => { const inputField = document.querySelector(`#admin-grades input[data-student="${username}"]`); if (inputField && grades[username] !== undefined) { inputField.value = grades[username]; } }); } function displayStudentGrade() { const gradeInput = document.getElementById('grade-input'); const storedGrade = grades[currentUsername]; if (storedGrade !== undefined) { gradeInput.value = storedGrade; } else { gradeInput.value = ''; // Clear grade if not set } } document.addEventListener('input', function(event) { if (isAdmin && event.target.matches('#admin-grades input[type="number"]')) { const studentUsername = event.target.dataset.student; grades[studentUsername] = event.target.value; saveLocalGrades(); // Save grades to local storage on input } });