create an admin page (html, css, js) that is functional and make sure that it is integrated to the code below and the info on admin page is updating in real time: Login

Login

Don't have an account? Sign up

/* Reset default margin and padding */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; /* Ensure html and body take full height */ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Body layout - Fullscreen background using CORRECT Imgur link */ body { /* --- Use the direct image link (i.imgur.com and file extension) --- */ background: url("https://scontent.fmnl17-2.fna.fbcdn.net/v/t1.15752-9/486754266_1224005149440673_6902108939050329715_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=0024fc&_nc_eui2=AeG50dP5j8VNrTBnJACPMCd-kqE1idO8TmiSoTWJ07xOaD9-E6lwaerGMjWUoLCeM8eTxL11fluQ8amwPaauMxYR&_nc_ohc=eyQP1Opy8lEQ7kNvwFaqx9m&_nc_oc=Adn0oApER6Og4knvroCsu298eiyXdreCpe7nB3nY5y_ZXdwCJjLGBaOraukLkZTg9bE&_nc_ad=z-m&_nc_cid=0&_nc_zt=23&_nc_ht=scontent.fmnl17-2.fna&oh=03_Q7cD2QHfdN4hjkX_lAgqbaAgW1CBx97gTVJJw3ZpsTglDhEuCA&oe=68423BF1") no-repeat center center fixed; /* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */ background-size: cover; display: flex; flex-direction: column; /* Stack header and login vertically */ align-items: center; /* Center login container horizontally */ justify-content: flex-start; /* Align header to top */ min-height: 100vh; /* Ensure it covers viewport height */ padding: 0; /* Remove padding */ text-align: center; } /* Logo Styling */ .logo-image { width: 150px; /* Adjust width as needed */ height: auto; /* Maintain aspect ratio */ display: block; margin: 20px auto; /* Center the logo */ } /* Responsive Design */ @media (max-width: 768px) { .logo-image { width: 100px; /* Smaller size for mobile screens */ } } /* Header styles - Full width at the top */ .header { width: 100%; background: rgba(0, 51, 102, 0.85); /* Dark blue, semi-transparent */ color: white; padding: 15px 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); text-align: center; } .header h1 { font-size: 20px; color: white; margin-bottom: 5px; } .header p { font-size: 14px; color: #ddd; /* Lighter text for address */ margin: 0; } /* Login & Sign Up Containers - Positioned over the background */ .login-container, .signup-container { background: rgba(255, 255, 255, 0.95); /* Semi-transparent white */ padding: 30px; border-radius: 12px; width: 90%; max-width: 400px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); margin-top: 5vh; margin-bottom: 5vh; } /* Form Elements */ h2 { color: #003366; margin-bottom: 25px; } input, select, button { width: 100%; padding: 12px; margin: 12px 0; border-radius: 8px; border: 1px solid #ccc; font-size: 16px; } input:focus, select:focus { outline: none; border-color: #990000; box-shadow: 0 0 8px rgba(153, 0, 0, 0.3); } /* Button Styles */ button { background: #990000; color: white; border: none; font-weight: bold; cursor: pointer; transition: background 0.3s ease; padding: 14px; } button:hover { background: #cc0000; } /* Links */ a { color: #0056b3; text-decoration: none; font-weight: 500; } a:hover { text-decoration: underline; } /* Hidden class for dynamic elements */ .hidden { display: none; } /* Error & Signup Messages */ .error-message, .signup-message { color: red; font-size: 14px; margin-top: 10px; min-height: 1em; font-weight: 500; } /* Responsive Design */ @media (max-width: 600px) { .header h1 { font-size: 18px; } .header p { font-size: 12px; } .login-container, .signup-container { width: 95%; max-width: 95%; padding: 20px; margin-top: 3vh; margin-bottom: 3vh; } input, select, button { padding: 10px; font-size: 14px; margin: 10px 0; } h2 { font-size: 20px; margin-bottom: 20px; } } // Retrieve users from localStorage function getUsers() { return JSON.parse(localStorage.getItem("users")) || {}; } // Save users to localStorage function saveUsers(users) { localStorage.setItem("users", JSON.stringify(users)); } function login() { const username = document.getElementById("username").value.trim(); const password = document.getElementById("password").value.trim(); const role = document.getElementById("role").value; const errorMessage = document.getElementById("errorMessage"); errorMessage.textContent = ''; // Clear previous error // Get potential ID values const teacherId = document.getElementById("loginTeacherId")?.value.trim(); const studentId = document.getElementById("loginStudentId")?.value.trim(); if (!username || !password || !role) { errorMessage.textContent = "Please fill in username, password, and select a role."; return; } // Role-specific ID validation if (role === 'teacher' && !teacherId) { errorMessage.textContent = "Please enter your Teacher ID Number."; return; } if (role === 'student' && !studentId) { errorMessage.textContent = "Please enter your Student ID Number."; return; } const users = getUsers(); const userData = users[username]; // Check if user exists and credentials match let credentialsMatch = userData && userData.password === password && userData.role === role; // Check ID if applicable if (credentialsMatch && role === 'teacher') { credentialsMatch = userData.teacherId === teacherId; } if (credentialsMatch && role === 'student') { credentialsMatch = userData.studentId === studentId; } if (credentialsMatch) { // Store user info in sessionStorage sessionStorage.setItem('loggedInUsername', username); sessionStorage.setItem('loggedInRole', role); // Store full name if user is a student if (role === 'student' && userData.fullName) { sessionStorage.setItem('loggedInFullName', userData.fullName); } // Optionally store ID if needed later if (role === 'teacher') sessionStorage.setItem('loggedInTeacherId', teacherId); if (role === 'student') sessionStorage.setItem('loggedInStudentId', studentId); // Redirect to the homepage (assuming homepage.html exists) // Make sure you have a homepage.html file or change this destination window.location.href = "homepage.html"; } else { errorMessage.textContent = "Incorrect username, password, role, or ID. Please try again."; } } function signup() { const newUsername = document.getElementById("newUsername").value.trim(); const newPassword = document.getElementById("newPassword").value.trim(); const newRole = document.getElementById("newRole").value; const signupMessage = document.getElementById("signupMessage"); signupMessage.textContent = ''; // Clear previous message // Get potential ID and name values const teacherId = document.getElementById("signupTeacherId")?.value.trim(); const studentId = document.getElementById("signupStudentId")?.value.trim(); const fullName = document.getElementById("fullName")?.value.trim(); if (!newUsername || !newPassword || !newRole) { signupMessage.textContent = "Please fill in username, password, and select a role."; return; } // Basic password validation if (newPassword.length < 4) { signupMessage.textContent = "Password must be at least 4 characters long."; return; } // Role-specific field validation if (newRole === 'teacher' && !teacherId) { signupMessage.textContent = "Teacher ID Number is required for teachers."; return; } if (newRole === 'student' && (!fullName || !studentId)) { signupMessage.textContent = "Full Name and Student ID Number are required for students."; return; } const users = getUsers(); if (users[newUsername]) { signupMessage.textContent = "Username already exists. Please choose a different one."; return; } // Store new user in localStorage const newUser = { password: newPassword, role: newRole }; if (newRole === 'teacher') { newUser.teacherId = teacherId; } if (newRole === 'student') { newUser.fullName = fullName; newUser.studentId = studentId; } users[newUsername] = newUser; saveUsers(users); alert(`Account created successfully for ${newUsername}! Please log in.`); // Switch back to login form showLogin(); } function showSignup() { document.getElementById("signup-container").classList.remove("hidden"); document.getElementById("login-container").classList.add("hidden"); document.getElementById("errorMessage").textContent = ''; document.getElementById("signupMessage").textContent = ''; // Reset signup form fields document.getElementById("newUsername").value = ''; document.getElementById("newPassword").value = ''; document.getElementById("newRole").value = ''; document.getElementById("signupTeacherId").value = ''; document.getElementById("fullName").value = ''; document.getElementById("signupStudentId").value = ''; // Hide role-specific fields initially document.getElementById("signupTeacherIdContainer").classList.add("hidden"); document.getElementById("signupStudentInfoContainer").classList.add("hidden"); } function showLogin() { document.getElementById("login-container").classList.remove("hidden"); document.getElementById("signup-container").classList.add("hidden"); document.getElementById("errorMessage").textContent = ''; document.getElementById("signupMessage").textContent = ''; // Reset login form fields document.getElementById("username").value = ''; document.getElementById("password").value = ''; document.getElementById("role").value = ''; document.getElementById("loginTeacherId").value = ''; document.getElementById("loginStudentId").value = ''; // Hide role-specific fields initially document.getElementById("loginTeacherIdContainer").classList.add("hidden"); document.getElementById("loginStudentIdContainer").classList.add("hidden"); } // Event listener for role change in LOGIN form document.getElementById('role')?.addEventListener('change', function() { const teacherIdContainer = document.getElementById('loginTeacherIdContainer'); const studentIdContainer = document.getElementById('loginStudentIdContainer'); const teacherIdInput = document.getElementById('loginTeacherId'); const studentIdInput = document.getElementById('loginStudentId'); // Hide both first teacherIdContainer?.classList.add('hidden'); studentIdContainer?.classList.add('hidden'); if(teacherIdInput) teacherIdInput.value = ''; // Clear value when hidden if(studentIdInput) studentIdInput.value = ''; // Clear value when hidden if (this.value === 'teacher') { teacherIdContainer?.classList.remove('hidden'); } else if (this.value === 'student') { studentIdContainer?.classList.remove('hidden'); } }); // Event listener for role change in SIGNUP form document.getElementById('newRole')?.addEventListener('change', function() { const teacherIdContainer = document.getElementById('signupTeacherIdContainer'); const studentInfoContainer = document.getElementById('signupStudentInfoContainer'); const teacherIdInput = document.getElementById('signupTeacherId'); const studentIdInput = document.getElementById('signupStudentId'); const fullNameInput = document.getElementById('fullName'); // Hide all role-specific containers first teacherIdContainer?.classList.add('hidden'); studentInfoContainer?.classList.add('hidden'); // Clear values when hidden if(teacherIdInput) teacherIdInput.value = ''; if(studentIdInput) studentIdInput.value = ''; if(fullNameInput) fullNameInput.value = ''; if (this.value === 'teacher') { teacherIdContainer?.classList.remove('hidden'); } else if (this.value === 'student') { studentInfoContainer?.classList.remove('hidden'); } }); // Clear session storage on login page load and ensure correct form is shown document.addEventListener('DOMContentLoaded', () => { // Only run login page specific logic if login container exists if (document.getElementById('login-container')) { sessionStorage.clear(); // Clear all session storage on login page load showLogin(); // Ensure login form is shown by default and fields are reset/hidden } }); Welcome - KNHS

Kalayaan National High School

Q2JJ+GV9, 1428 Langit Rd, Caloocan, Metro Manila

Welcome!

You have successfully logged in. Click the button below to proceed to your dashboard.

View School Location on Map

About KNHS

Kalayaan National High School (KNHS) is a public secondary school located in Bagong Silang, Caloocan City, Philippines. Established to address the educational needs of the growing population in the area, the school has a rich history of development and community involvement.

In 1997, the creation of Kalayaan National High School was approved to cater to the educational demands of the youth in Kalayaan Village and surrounding communities. The school officially opened in November 2002 under the leadership of Dr. Lourdes V. Venturina, who served as the Officer-In-Charge. Initially, classes were held in five rooms of Building D at Kalayaan Elementary School, accommodating four first-year classes with 254 students and seven teachers. After two years, the school relocated to its current site in Phase 10, Bagong Silang, Caloocan City.

Mission & Vision

Mission: To provide a nurturing and inclusive learning environment that promotes critical thinking, creativity, and lifelong learning among students, while instilling the core values of integrity, respect, and social responsibility.

Vision: To be a leading educational institution that produces competent and responsible individuals equipped with the necessary skills and values to contribute positively to society.

Teacher Dashboard

Created Lessons

Created Quizzes

body { font-family: Arial, sans-serif; background-color: #f2f2f2; padding: 0 20px 80px 20px; /* Remove top padding, ensure bottom padding for fixed button */ margin: 0; line-height: 1.6; } /* Prevent body scroll when fullscreen modal is open */ body.modal-open { overflow: hidden; } .navbar { background-color: #18387c; color: white; padding: 15px 20px; /* Slightly more padding */ margin-bottom: 25px; /* More space */ border-radius: 0 0 5px 5px; /* Rounded bottom corners */ box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .navbar h1 { margin: 0; text-align: center; font-size: 1.8em; } .container { background-color: #fff; padding: 25px; border-radius: 8px; /* More rounded */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); max-width: 1000px; /* Wider container */ margin: 0 auto 20px auto; /* Center container, reduce bottom margin */ } .hidden { display: none; } /* --- Standard Modal Styles --- */ .modal:not(.fullscreen) { /* Apply only to non-fullscreen modals */ display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); /* Darker overlay */ padding-top: 50px; } .modal:not(.fullscreen) .modal-content { background-color: #fff; margin: 3% auto; /* Adjust vertical margin */ padding: 25px 30px; /* More padding */ border: 1px solid #ccc; border-radius: 8px; width: 90%; max-width: 650px; /* Default max-width */ box-shadow: 0 5px 15px rgba(0,0,0,0.2); position: relative; /* For close button */ animation-name: animatetop; animation-duration: 0.4s; } /* Larger modal variant */ .modal:not(.fullscreen) .modal-content.large { max-width: 850px; } @keyframes animatetop { from {top: -300px; opacity: 0} to {top: 0; opacity: 1} } .close { color: #aaa; position: absolute; /* Position relative to modal-content */ top: 10px; right: 15px; font-size: 30px; font-weight: bold; line-height: 1; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } /* --- Fullscreen Modal Styles --- */ .modal.fullscreen { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: #f8f9fa; /* Light background */ } .modal.fullscreen .modal-content { background-color: transparent; margin: 0; padding: 40px; /* More padding */ border: none; width: 100%; height: 100%; max-width: none; border-radius: 0; box-shadow: none; position: relative; overflow-y: auto; box-sizing: border-box; } .modal.fullscreen h2 { text-align: center; color: #6f42c1; /* Keep purple for analytics title */ margin-top: 10px; margin-bottom: 40px; /* More space */ font-size: 2em; /* Larger title */ border-bottom: none; /* Remove border */ } .modal.fullscreen .analytics-section { margin-bottom: 30px; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #fff; /* White background for sections */ max-width: 900px; margin-left: auto; margin-right: auto; } .modal.fullscreen .analytics-section:last-of-type { border-bottom: 1px solid #e0e0e0; /* Keep border */ } .modal.fullscreen .analytics-section h3 { color: #555; margin-top: 0; margin-bottom: 15px; font-size: 1.4em; border-bottom: 1px solid #eee; padding-bottom: 10px; } .modal.fullscreen .analytics-section p { font-size: 1.1em; margin-bottom: 10px; } .modal.fullscreen .analytics-section span { font-weight: normal; color: #333; } /* Styles for Navigation Buttons inside Fullscreen Modal */ .modal.fullscreen .modal-navigation { margin-top: 40px; padding-top: 30px; border-top: 1px solid #ccc; text-align: center; display: flex; justify-content: center; gap: 25px; max-width: 900px; margin-left: auto; margin-right: auto; } .modal.fullscreen .modal-nav-btn { padding: 12px 30px; border: none; border-radius: 6px; cursor: pointer; font-size: 1.1em; font-weight: bold; transition: background-color 0.3s ease, transform 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .modal.fullscreen .modal-nav-btn.dashboard { background-color: #ffc107; color: #333; } .modal.fullscreen .modal-nav-btn.dashboard:hover { background-color: #e0a800; transform: translateY(-1px); } .modal.fullscreen .modal-nav-btn.home { background-color: #17a2b8; color: white; } .modal.fullscreen .modal-nav-btn.home:hover { background-color: #138496; transform: translateY(-1px); } .modal.fullscreen .modal-nav-btn.logout { background-color: #dc3545; color: white; } .modal.fullscreen .modal-nav-btn.logout:hover { background-color: #c82333; transform: translateY(-1px); } /* --- Other Styles --- */ .button-container { margin-bottom: 30px; text-align: center; /* Center buttons */ } .btn { padding: 12px 25px; /* Larger buttons */ background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; /* Adjust font size */ margin: 5px; /* Use margin for spacing */ transition: background-color 0.3s ease, box-shadow 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .btn:hover { background-color: #45a049; box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .btn.delete { /* Consistent naming */ background-color: #f44336; } .btn.delete:hover { background-color: #da190b; } .btn.edit { /* Style for edit buttons */ background-color: #ffc107; color: #333; padding: 5px 10px; /* Smaller edit buttons */ font-size: 0.8em; margin-left: 10px; vertical-align: middle; } .btn.edit:hover { background-color: #e0a800; } label { display: block; margin-bottom: 8px; /* More space */ font-weight: bold; color: #555; } input[type="text"], textarea, select, input[type="file"] { /* Added file input */ width: 100%; /* Use 100% width */ padding: 12px; /* More padding */ margin-bottom: 18px; /* More space */ border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 1em; } /* Specific style adjustment for file input padding */ input[type="file"] { padding: 8px 12px; } textarea { resize: vertical; min-height: 100px; /* Minimum height */ } select { margin-bottom: 25px; } .question-container { border: 1px solid #e0e0e0; padding: 20px; margin-bottom: 20px; border-radius: 5px; background-color: #f9f9f9; } .question-container h4 { margin-top: 0; margin-bottom: 15px; color: #666; font-size: 0.9em; text-transform: uppercase; } .question-container input[type="text"] { margin-bottom: 12px; } .multiple-choice-container { margin-top: 15px; padding-left: 15px; border-left: 3px solid #4CAF50; } .multiple-choice-container label { font-weight: normal; margin-bottom: 8px; } .multiple-choice-container input[type="text"] { width: calc(100% - 15px); /* Adjust width */ margin-left: 0; /* Remove indent */ } /* Display Area Styling */ #createdLessons, #createdQuizzes { margin-top: 15px; } #createdLessons div, #createdQuizzes div { background-color: #fff; /* White background */ padding: 15px; margin-bottom: 15px; border-radius: 5px; border: 1px solid #e0e0e0; display: flex; /* Use flexbox for layout */ justify-content: space-between; /* Space out content and button */ align-items: center; /* Vertically align items */ } #createdLessons div > div, #createdQuizzes div > div { flex-grow: 1; /* Allow text content to take available space */ margin-right: 15px; /* Add space between text and button (if any) */ } #createdLessons p, #createdQuizzes p { margin: 0 0 5px 0; /* Adjust margins */ } #createdLessons p strong, #createdQuizzes p strong { font-size: 1.1em; color: #333; } /* Manage Scores Modal Specific Styles */ .manage-scores-container { padding: 10px; } .scores-display-area { margin-top: 20px; border: 1px solid #ccc; padding: 15px; min-height: 100px; max-height: 400px; /* Limit height and allow scroll */ overflow-y: auto; background-color: #f9f9f9; } .scores-display-area table { width: 100%; border-collapse: collapse; margin-top: 10px; /* Add space above table */ } .scores-display-area th, .scores-display-area td { border: 1px solid #ddd; padding: 10px 12px; /* Adjust padding */ text-align: left; font-size: 0.95em; /* Slightly smaller font */ } .scores-display-area th { background-color: #e9e9e9; font-weight: bold; position: sticky; /* Make header sticky */ top: 0; /* Stick to the top of the scrollable area */ z-index: 1; /* Ensure header stays above table content */ } .scores-display-area h4 { /* Style for the quiz title */ margin-bottom: 15px; font-size: 1.2em; color: #333; } .scores-display-area .no-scores-message { font-style: italic; color: #666; text-align: center; padding: 20px; } /* --- Analytics Button (Bottom Right, Red) --- */ .analytics-btn { position: fixed; /* Fixed position */ bottom: 20px; /* Distance from bottom */ right: 20px; /* Distance from right */ padding: 12px 25px; background-color: #dc3545; /* Red color */ color: white; border: none; border-radius: 25px; /* Pill shape */ cursor: pointer; font-size: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 999; /* Ensure it's above most content but below modals */ transition: background-color 0.3s ease, transform 0.2s ease; } .analytics-btn:hover { background-color: #c82333; /* Darker red on hover */ transform: translateY(-2px); /* Slight lift on hover */ } document.addEventListener('DOMContentLoaded', () => { // --- Login Check --- const loggedInUsername = sessionStorage.getItem('loggedInUsername'); const loggedInRole = sessionStorage.getItem('loggedInRole'); if (!loggedInUsername || !loggedInRole || loggedInRole !== 'teacher') { alert('Access denied. Please log in as a teacher.'); window.location.href = 'login.html'; // Redirect to login if not a teacher return; } // --- End Login Check --- // --- DOM Elements --- const lessonModal = document.getElementById('lessonModal'); const quizModal = document.getElementById('quizModal'); const deleteModal = document.getElementById('deleteModal'); const manageScoresModal = document.getElementById('manageScoresModal'); const analyticsModal = document.getElementById('analyticsModal'); const createLessonBtn = document.getElementById('createLessonBtn'); const createQuizBtn = document.getElementById('createQuizBtn'); const deleteLessonBtn = document.getElementById('deleteLessonBtn'); const deleteQuizBtn = document.getElementById('deleteQuizBtn'); const manageScoresBtn = document.getElementById('manageScoresBtn'); const analyticsBtn = document.getElementById('analyticsBtn'); const closeButtons = document.querySelectorAll('.close'); // Lesson Form Elements const lessonForm = document.getElementById('lessonForm'); const lessonModalTitle = document.getElementById('lessonModalTitle'); const editLessonIndexInput = document.getElementById('editLessonIndex'); const lessonTitleInput = document.getElementById('lessonTitle'); const lessonContentInput = document.getElementById('lessonContent'); const lessonFileInput = document.getElementById('lessonFile'); // Added file input const currentFileNameSpan = document.getElementById('currentFileName').querySelector('span'); // Added for edit const currentFileNameDisplay = document.getElementById('currentFileName'); // Added for edit const lessonSubmitBtn = document.getElementById('lessonSubmitBtn'); // Quiz Form Elements const quizForm = document.getElementById('quizForm'); const quizModalTitle = document.getElementById('quizModalTitle'); const editQuizIndexInput = document.getElementById('editQuizIndex'); const quizTypeSelect = document.getElementById('quizType'); const quizTitleInput = document.getElementById('quizTitle'); const questionsContainer = document.getElementById('questionsContainer'); const addQuestionBtn = document.getElementById('addQuestionBtn'); const quizSubmitBtn = document.getElementById('quizSubmitBtn'); // Delete Modal Elements const deleteTypeSelect = document.getElementById('deleteType'); const deleteChoiceSelect = document.getElementById('deleteChoice'); const deleteBtn = document.getElementById('deleteBtn'); // Manage Scores Modal Elements const quizSelectForScores = document.getElementById('quizSelectForScores'); const studentScoresDisplay = document.getElementById('studentScoresDisplay'); // Analytics Modal Elements const lessonCountSpan = document.getElementById('lessonCount'); const quizCountSpan = document.getElementById('quizCount'); const averageQuizScoreSpan = document.getElementById('averageQuizScore'); const modalDashboardBtn = document.getElementById('modalDashboardBtn'); const modalHomeBtn = document.getElementById('modalHomeBtn'); const modalLogoutBtn = document.getElementById('modalLogoutBtn'); // Display Areas const createdLessonsDiv = document.getElementById('createdLessons'); const createdQuizzesDiv = document.getElementById('createdQuizzes'); let questionCount = 0; const storageKeys = { lessons: 'createdLessons', quizzes: 'createdQuizzes', users: 'registeredUsers' // Key for all registered users (replaces studentResultPrefix) }; // --- Utility Functions --- const openModal = (modal) => { modal.style.display = "block"; if (modal.classList.contains('fullscreen')) { document.body.classList.add('modal-open'); } }; const closeModal = (modal) => { modal.style.display = "none"; if (modal.classList.contains('fullscreen')) { document.body.classList.remove('modal-open'); } // Reset forms/content on modal close if (modal.id === 'lessonModal') resetLessonForm(); if (modal.id === 'quizModal') resetQuizForm(); if (modal.id === 'manageScoresModal') { studentScoresDisplay.innerHTML = '

Select a quiz to view student scores.

'; quizSelectForScores.value = ""; } if (modal.id === 'deleteModal') { deleteTypeSelect.value = 'lesson'; deleteChoiceSelect.innerHTML = ''; } }; // Gets array data (lessons, quizzes) const getData = (key) => { const data = localStorage.getItem(key); if (data && data.startsWith('[')) { try { return JSON.parse(data); } catch (e) { console.error("Error parsing JSON array from localStorage for key:", key, e); return []; } } return []; }; // Gets object data (registered users) - Reusing getUsers from login.js // Ensure login.js is loaded first and getUsers is available globally if (typeof getUsers !== 'function') { console.error("Error: getUsers function not found. Make sure login.js is included before teacher.js"); alert("A critical error occurred. Please try refreshing the page or logging in again."); // Optionally disable functionality or redirect return; } const setData = (key, data) => { try { localStorage.setItem(key, JSON.stringify(data)); } catch (e) { console.error("Error setting data to localStorage for key:", key, e); // Check for QuotaExceededError specifically if (e.name === 'QuotaExceededError') { alert('Error: Could not save data. Local storage quota exceeded. This might be due to a large file upload.'); } else { alert('An error occurred while saving data.'); } } }; // --- Lesson Functions --- const resetLessonForm = () => { lessonForm.reset(); // Resets text inputs and file input editLessonIndexInput.value = "-1"; lessonModalTitle.textContent = "Create Lesson"; lessonSubmitBtn.textContent = "Create Lesson"; currentFileNameDisplay.style.display = 'none'; // Hide current file name display currentFileNameSpan.textContent = ''; }; const updateCreatedLessons = () => { const lessons = getData(storageKeys.lessons); createdLessonsDiv.innerHTML = ''; lessons.forEach((lesson, index) => { const lessonDiv = document.createElement('div'); const contentDiv = document.createElement('div'); // Display title, content snippet, and file name if exists let fileInfo = ''; if (lesson.fileName) { fileInfo = `

Attachment: ${lesson.fileName}

`; } contentDiv.innerHTML = `

${lesson.title}

${lesson.content.substring(0, 100)}${lesson.content.length > 100 ? '...' : ''}

${fileInfo}`; lessonDiv.appendChild(contentDiv); const editBtn = document.createElement('button'); editBtn.textContent = 'Edit'; editBtn.classList.add('btn', 'edit'); editBtn.dataset.index = index; editBtn.addEventListener('click', () => editLesson(index)); lessonDiv.appendChild(editBtn); createdLessonsDiv.appendChild(lessonDiv); }); updateDeleteChoices(); // Update delete dropdown after lessons update }; const editLesson = (index) => { const lessons = getData(storageKeys.lessons); if (index >= 0 && index < lessons.length) { const lesson = lessons[index]; resetLessonForm(); // Reset form first editLessonIndexInput.value = index; lessonTitleInput.value = lesson.title; lessonContentInput.value = lesson.content; // Display current file name if it exists if (lesson.fileName) { currentFileNameSpan.textContent = lesson.fileName; currentFileNameDisplay.style.display = 'block'; } else { currentFileNameDisplay.style.display = 'none'; } // Note: We don't repopulate the file input itself for security reasons. // The user must re-select the file if they want to change it. lessonModalTitle.textContent = "Edit Lesson"; lessonSubmitBtn.textContent = "Save Changes"; openModal(lessonModal); } }; const handleLessonFormSubmit = (event) => { event.preventDefault(); const file = lessonFileInput.files[0]; const editIndex = parseInt(editLessonIndexInput.value, 10); let lessons = getData(storageKeys.lessons); let existingLessonData = (editIndex > -1 && editIndex < lessons.length) ? lessons[editIndex] : {}; const lessonData = { title: lessonTitleInput.value, content: lessonContentInput.value, // Preserve existing file data if no new file is selected during edit fileName: existingLessonData.fileName || null, fileDataUrl: existingLessonData.fileDataUrl || null, }; // Function to save data after file processing (or immediately if no file) const saveData = () => { if (editIndex > -1 && editIndex < lessons.length) { lessons[editIndex] = lessonData; // Update existing alert('Lesson Updated!'); } else { lessons.push(lessonData); // Add new alert('Lesson Created!'); } setData(storageKeys.lessons, lessons); closeModal(lessonModal); updateCreatedLessons(); }; if (file) { // Check file size (e.g., limit to 2MB) const maxSizeMB = 2; if (file.size > maxSizeMB * 1024 * 1024) { alert(`File is too large. Maximum size is ${maxSizeMB}MB.`); lessonFileInput.value = ''; // Clear the input return; // Stop processing } const reader = new FileReader(); reader.onloadend = function() { // File reading finished, update lessonData and save lessonData.fileName = file.name; lessonData.fileDataUrl = reader.result; // This is the Base64 Data URL console.log(`Read file: ${file.name}, size: ${file.size} bytes`); saveData(); } reader.onerror = function() { alert('Error reading file.'); console.error("File reading error:", reader.error); // Optionally clear file input or allow retry } reader.readAsDataURL(file); // Read the file as Data URL } else { // No new file selected. If editing, check if user wants to remove existing file (optional feature, not implemented here) // For now, just save the text data (preserving existing file if editing) if (editIndex > -1 && !existingLessonData.fileName) { // If editing and there was no previous file, ensure file fields are null lessonData.fileName = null; lessonData.fileDataUrl = null; } saveData(); } }; // --- Quiz Functions --- const resetQuizForm = () => { quizForm.reset(); editQuizIndexInput.value = "-1"; questionsContainer.innerHTML = ''; questionCount = 0; quizModalTitle.textContent = "Create Quiz"; quizSubmitBtn.textContent = "Create Quiz"; quizTypeSelect.disabled = false; // Re-enable type select toggleMultipleChoiceFields(); // Ensure fields match default type }; const toggleMultipleChoiceFields = () => { const selectedType = quizTypeSelect.value; const allQuestionContainers = questionsContainer.querySelectorAll('.question-container'); allQuestionContainers.forEach(qContainer => { const mcContainer = qContainer.querySelector('.multiple-choice-container'); const choiceInputs = mcContainer ? mcContainer.querySelectorAll('input[type="text"]') : []; const answerInput = qContainer.querySelector('input[name$="-correct-answer"]'); const answerLabel = answerInput ? answerInput.previousElementSibling : null; if (mcContainer) { mcContainer.style.display = selectedType === 'multiple-choice' ? 'block' : 'none'; // Set required only if multiple choice is selected choiceInputs.forEach(input => input.required = (selectedType === 'multiple-choice')); } if (answerLabel && answerLabel.tagName === 'LABEL') { answerLabel.textContent = selectedType === 'identification' ? 'Correct Answer:' : 'Correct Answer (must match one choice):'; } }); }; const addQuestion = (questionData = null) => { const currentQIndex = questionData ? questionData.qIndex : ++questionCount; const questionDiv = document.createElement('div'); questionDiv.classList.add('question-container'); questionDiv.dataset.qIndex = currentQIndex; const qText = questionData ? questionData.questionText : ''; const qAnswer = questionData ? questionData.correctAnswer : ''; const qChoices = questionData ? questionData.choices : ['', '', '', '']; // Default empty choices questionDiv.innerHTML = `

Question ${currentQIndex}

Question Text:

Choices:

${quizTypeSelect.value === 'identification' ? 'Correct Answer:' : 'Correct Answer (must match one choice):'}
`; questionsContainer.appendChild(questionDiv); if (!questionData) questionCount = currentQIndex; // Update global count only for new questions // No need to call toggleMultipleChoiceFields here as it's called on type change and form reset }; const updateCreatedQuizzes = () => { const quizzes = getData(storageKeys.quizzes); createdQuizzesDiv.innerHTML = ''; quizzes.forEach((quiz, index) => { const quizDiv = document.createElement('div'); const contentDiv = document.createElement('div'); // Basic validation before displaying const title = quiz.quizTitle || 'Untitled Quiz'; const type = quiz.quizType || 'N/A'; const numQuestions = Array.isArray(quiz.questions) ? quiz.questions.length : 0; contentDiv.innerHTML = `

${title}

(Type: ${type}, Questions: ${numQuestions})

`; quizDiv.appendChild(contentDiv); // No Edit button for quizzes currently createdQuizzesDiv.appendChild(quizDiv); }); updateDeleteChoices(); // Update delete dropdown after quizzes update populateQuizSelectForScores(); // Update scores dropdown after quizzes update }; // Edit Quiz function remains but is not called from UI const editQuiz = (index) => { const quizzes = getData(storageKeys.quizzes); if (index >= 0 && index < quizzes.length) { const quiz = quizzes[index]; resetQuizForm(); editQuizIndexInput.value = index; quizTitleInput.value = quiz.quizTitle; quizTypeSelect.value = quiz.quizType; quizTypeSelect.disabled = true; // Disable type change when editing questionCount = 0; // Reset count for adding existing questions quiz.questions.forEach((q, qIndex) => { addQuestion({ ...q, qIndex: qIndex + 1 }); // Pass existing data }); quizModalTitle.textContent = "Edit Quiz"; quizSubmitBtn.textContent = "Save Changes"; openModal(quizModal); toggleMultipleChoiceFields(); // Ensure fields match loaded quiz type } }; const handleQuizFormSubmit = (event) => { event.preventDefault(); const editIndex = parseInt(editQuizIndexInput.value, 10); const quizType = quizTypeSelect.value; const quizTitle = quizTitleInput.value; const questions = []; const questionElements = questionsContainer.querySelectorAll('.question-container'); const currentQuestionCount = questionElements.length; // Use actual number of question divs for (let i = 0; i < currentQuestionCount; i++) { const qContainer = questionElements[i]; const qIndex = qContainer.dataset.qIndex; // Get index from data attribute const questionText = qContainer.querySelector(`[name='question-${qIndex}']`)?.value.trim(); const correctAnswer = qContainer.querySelector(`[name='question-${qIndex}-correct-answer']`)?.value.trim(); const choices = []; if (!questionText || correctAnswer === undefined || correctAnswer === null || correctAnswer === "") { alert(`Please fill out question text and correct answer for Question ${qIndex}.`); return; } if (quizType === 'multiple-choice') { const choiceInputs = qContainer.querySelectorAll(`.multiple-choice-container input[type="text"]`); let choicesComplete = true; choiceInputs.forEach(input => { const choiceValue = input.value.trim(); if (!choiceValue) choicesComplete = false; choices.push(choiceValue); }); if (!choicesComplete) { alert(`Please fill out all choices for Question ${qIndex}.`); return; } // Ensure the correct answer is one of the choices provided if (!choices.includes(correctAnswer)) { alert(`The correct answer for Question ${qIndex} ("${correctAnswer}") must exactly match one of the provided choices.`); return; } } questions.push({ questionText, choices: quizType === 'multiple-choice' ? choices : [], correctAnswer }); } if (questions.length === 0) { alert('Please add at least one question to the quiz.'); return; } const quizData = { quizType, quizTitle, questions }; let quizzes = getData(storageKeys.quizzes); if (editIndex > -1 && editIndex < quizzes.length) { quizzes[editIndex] = quizData; alert('Quiz Updated!'); } else { quizzes.push(quizData); alert('Quiz Created!'); } setData(storageKeys.quizzes, quizzes); closeModal(quizModal); updateCreatedQuizzes(); }; // --- Delete Functions (Handles both Lessons and Quizzes) --- const updateDeleteChoices = () => { const deleteType = deleteTypeSelect.value; // Read the selected type deleteChoiceSelect.innerHTML = ''; const items = getData(deleteType === "lesson" ? storageKeys.lessons : storageKeys.quizzes); items.forEach((item, index) => { const option = document.createElement('option'); option.value = index; // Use 'title' for lessons and 'quizTitle' for quizzes, provide fallback option.textContent = item.title || item.quizTitle || `${deleteType.charAt(0).toUpperCase() + deleteType.slice(1)} ${index + 1}`; deleteChoiceSelect.appendChild(option); }); deleteBtn.disabled = items.length === 0; // Disable button if no items }; const handleDelete = () => { const selectedIndex = deleteChoiceSelect.value; const deleteType = deleteTypeSelect.value; // Get the type from the dropdown if (selectedIndex === "") { alert('Please select an item to delete.'); return; } const storageKey = deleteType === 'lesson' ? storageKeys.lessons : storageKeys.quizzes; let items = getData(storageKey); const itemToDelete = items[selectedIndex]; const itemName = itemToDelete?.title || itemToDelete?.quizTitle || `${deleteType} ${parseInt(selectedIndex)+1}`; if (confirm(`Are you sure you want to delete ${deleteType} "${itemName}"? This cannot be undone.`)) { items.splice(selectedIndex, 1); setData(storageKey, items); alert(`${deleteType.charAt(0).toUpperCase() + deleteType.slice(1)} Deleted!`); // Update the correct display area if (deleteType === 'lesson') { updateCreatedLessons(); } else { updateCreatedQuizzes(); // This also updates score/delete dropdowns } closeModal(deleteModal); // Close and reset the modal } }; // --- Manage Scores Functions --- const populateQuizSelectForScores = () => { const quizzes = getData(storageKeys.quizzes); quizSelectForScores.innerHTML = ''; quizzes.forEach((quiz, index) => { const option = document.createElement('option'); option.value = index; // Use the index as the value option.textContent = quiz.quizTitle || `Quiz ${index + 1}`; // Fallback title quizSelectForScores.appendChild(option); }); }; const displayStudentScores = () => { const selectedQuizIndex = quizSelectForScores.value; studentScoresDisplay.innerHTML = ''; // Clear previous content console.log(`[DEBUG] displayStudentScores called. Selected Quiz Index: '${selectedQuizIndex}'`); if (selectedQuizIndex === "") { studentScoresDisplay.innerHTML = '

Select a quiz to view student scores.

'; console.log("[DEBUG] No quiz selected. Aborting."); return; } const quizzes = getData(storageKeys.quizzes); const selectedQuiz = quizzes[selectedQuizIndex]; if (!selectedQuiz || !selectedQuiz.quizTitle) { console.error(`[DEBUG] Error: Could not find valid quiz data or title for index ${selectedQuizIndex}`); studentScoresDisplay.innerHTML = '

Error: Could not find selected quiz data.

'; return; } const selectedQuizTitle = selectedQuiz.quizTitle; console.log("[DEBUG] Selected Quiz Data:", selectedQuiz); // --- Get ALL registered users --- const registeredUsers = getUsers(); // Use function from login.js console.log("[DEBUG] Raw Registered Users Data from getUsers():", registeredUsers); if (Object.keys(registeredUsers).length === 0) { console.warn("[DEBUG] No registered users found."); studentScoresDisplay.innerHTML = '

No registered users found.

'; return; } // --- Filter for users with role 'student' --- const studentUsernames = Object.keys(registeredUsers).filter(username => { const user = registeredUsers[username]; const isStudent = user && user.role === 'student'; if (!isStudent) { console.log(`[DEBUG] Filtering out user '${username}'. Role is not 'student' or user data is malformed. User data:`, user); } return isStudent; }); console.log("[DEBUG] Filtered Student Usernames:", studentUsernames); if (studentUsernames.length === 0) { console.warn("[DEBUG] No users with role 'student' found after filtering."); studentScoresDisplay.innerHTML = '

No registered students found.

'; return; } let tableHTML = `

Scores for: ${selectedQuizTitle}

`; let scoresFound = false; // --- Iterate through each student username --- studentUsernames.forEach(username => { const studentData = registeredUsers[username]; console.log(`[DEBUG] Checking results for student: '${username}'`); // Check if the student has a quizScores array if (studentData && Array.isArray(studentData.quizScores)) { // Find the result for the SPECIFICALLY selected quiz TITLE const result = studentData.quizScores.find(score => score.quizName === selectedQuizTitle); console.log(`[DEBUG] Result for quiz title '${selectedQuizTitle}' for student '${username}':`, result); // Validate the result structure before using it if (result && typeof result.score === 'number') { scoresFound = true; const scorePercentage = result.score; // Score is already stored as percentage const dateTaken = result.timestamp ? new Date(result.timestamp).toLocaleString() : 'N/A'; console.log(`[DEBUG] Adding row for '${username}': Score=${scorePercentage}%, Date=${dateTaken}`); tableHTML += ` `; } else { console.log(`[DEBUG] No valid result found for quiz title '${selectedQuizTitle}' for student '${username}' or result format is incorrect.`); } } else { console.log(`[DEBUG] No quizScores array found for student '${username}'. Skipping.`); } }); // End of studentUsernames.forEach if (!scoresFound) { console.warn("[DEBUG] No scores found for any student for this specific quiz title:", selectedQuizTitle); tableHTML += ''; } tableHTML += '

Student	Score (%)	Date Taken
${username}	${scorePercentage}%	${dateTaken}
No students have taken this quiz yet or results are missing.

'; studentScoresDisplay.innerHTML = tableHTML; console.log("[DEBUG] displayStudentScores finished."); }; // --- Analytics Modal Functions --- const openAnalyticsModal = () => { populateTeacherAnalytics(); openModal(analyticsModal); }; const closeAnalyticsModal = () => { closeModal(analyticsModal); }; const populateTeacherAnalytics = () => { const lessons = getData(storageKeys.lessons); const quizzes = getData(storageKeys.quizzes); lessonCountSpan.textContent = lessons.length; quizCountSpan.textContent = quizzes.length; let totalPercentageSum = 0; let totalQuizzesTakenCount = 0; const registeredUsers = getUsers(); // Use function from login.js const studentUsernames = Object.keys(registeredUsers).filter(username => registeredUsers[username]?.role === 'student'); studentUsernames.forEach(username => { const studentData = registeredUsers[username]; if (studentData && Array.isArray(studentData.quizScores)) { // Iterate through results for this student studentData.quizScores.forEach(result => { if (result && typeof result.score === 'number') { // Score is already percentage totalPercentageSum += result.score; totalQuizzesTakenCount++; } }); } }); if (totalQuizzesTakenCount > 0) { averageQuizScoreSpan.textContent = (totalPercentageSum / totalQuizzesTakenCount).toFixed(1) + '%'; } else { averageQuizScoreSpan.textContent = 'N/A'; } }; // --- Navigation Logic --- function goToHomepage() { window.location.href = 'homepage.html'; // Assuming homepage.html exists } function logout() { sessionStorage.removeItem('loggedInUsername'); sessionStorage.removeItem('loggedInRole'); alert('You have been logged out.'); window.location.href = 'login.html'; // Redirect to login page } // --- Event Listeners --- // Standard Modals Open/Close createLessonBtn.addEventListener('click', () => { resetLessonForm(); openModal(lessonModal); }); createQuizBtn.addEventListener('click', () => { resetQuizForm(); addQuestion(); openModal(quizModal); }); // Add one question by default deleteLessonBtn.addEventListener('click', () => { deleteTypeSelect.value = "lesson"; // Set type updateDeleteChoices(); // Populate choices for lessons openModal(deleteModal); }); deleteQuizBtn.addEventListener('click', () => { deleteTypeSelect.value = "quiz"; // Set type updateDeleteChoices(); // Populate choices for quizzes openModal(deleteModal); }); manageScoresBtn.addEventListener('click', () => { populateQuizSelectForScores(); // Ensure dropdown is up-to-date studentScoresDisplay.innerHTML='

Select a quiz to view student scores.

'; // Reset display openModal(manageScoresModal); }); closeButtons.forEach(button => { button.addEventListener('click', () => { const modalId = button.getAttribute('data-modal-id'); if (modalId) { const modalToClose = document.getElementById(modalId); if (modalToClose) closeModal(modalToClose); } }); }); // Close modal if clicking outside the content (but not on fullscreen modals) window.addEventListener('click', (event) => { if (event.target.classList.contains('modal') && !event.target.classList.contains('fullscreen')) { closeModal(event.target); } }); // Form Submissions lessonForm.addEventListener('submit', handleLessonFormSubmit); quizForm.addEventListener('submit', handleQuizFormSubmit); // Quiz Form - Add Question & Type Change addQuestionBtn.addEventListener('click', () => addQuestion()); quizTypeSelect.addEventListener('change', toggleMultipleChoiceFields); // Delete Modal - Type Change & Delete Button deleteTypeSelect.addEventListener('change', updateDeleteChoices); // Update choices when type changes deleteBtn.addEventListener('click', handleDelete); // Manage Scores Modal - Quiz Selection Change quizSelectForScores.addEventListener('change', displayStudentScores); // Analytics Modal Open/Close/Navigation analyticsBtn.addEventListener('click', openAnalyticsModal); modalDashboardBtn.addEventListener('click', closeAnalyticsModal); modalHomeBtn.addEventListener('click', goToHomepage); modalLogoutBtn.addEventListener('click', logout); // --- Initial Load --- updateCreatedLessons(); updateCreatedQuizzes(); // Load existing quizzes on page load }); Student Dashboard

Student Dashboard

Available Lessons

Loading lessons...

Available Quizzes

Loading quizzes...

/* Navbar Styles Removed */ /* Existing styles below... */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px 20px 80px 20px; /* Re-added top padding, kept side/bottom */ line-height: 1.6; } /* Prevent body scroll when modal is open */ body.modal-open { overflow: hidden; } .container { max-width: 900px; margin: 20px auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } h1, h2, h3, h4 { color: #333; } h1 { text-align: center; color: #4CAF50; margin-bottom: 30px; } h2 { border-bottom: 2px solid #4CAF50; padding-bottom: 5px; margin-top: 30px; } section { margin-bottom: 30px; } /* Quiz Completion Notice */ .completion-notice { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; padding: 15px; margin-bottom: 20px; border-radius: 5px; text-align: center; } .completion-notice p { margin: 0; font-weight: bold; } .lesson, .quiz { border: 1px solid #ddd; background-color: #f9f9f9; padding: 15px; margin-bottom: 15px; border-radius: 5px; position: relative; /* Needed for absolute positioning of button if desired */ } .lesson h4, .quiz h4 { margin-top: 0; color: #555; } /* Lesson Read Button */ .mark-read-btn { padding: 6px 12px; background-color: #17a2b8; /* Teal */ color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; margin-top: 10px; transition: background-color 0.3s ease, opacity 0.3s ease; display: inline-block; /* Or block if needed */ } .mark-read-btn:hover:not(:disabled) { background-color: #138496; } .mark-read-btn:disabled { background-color: #a6d8de; /* Lighter teal */ cursor: not-allowed; opacity: 0.7; } /* Lesson File Download Link */ .lesson-file-link { display: block; /* Put link on its own line */ margin-top: 10px; font-size: 0.9em; color: #007bff; text-decoration: none; } .lesson-file-link:hover { text-decoration: underline; } .lesson-file-link::before { content: '📎 '; /* Add a paperclip icon */ margin-right: 4px; } .btn { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-top: 10px; transition: background-color 0.3s ease; } .btn:hover:not(:disabled) { /* Ensure hover only applies when not disabled */ background-color: #45a049; } .btn:disabled { background-color: #ccc; cursor: not-allowed; opacity: 0.6; /* Slightly adjust opacity */ } .submit-quiz-btn { background-color: #007bff; } .submit-quiz-btn:hover:not(:disabled) { background-color: #0056b3; } .quiz-question { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; } .quiz-question p strong { display: inline-block; /* Allow span to sit next to it */ margin-bottom: 10px; } /* Answer Input Styling */ .quiz-question input[type="text"] { width: calc(100% - 22px); padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .quiz-question .choices label { display: block; margin-bottom: 8px; cursor: pointer; padding: 8px; border-radius: 4px; background-color: #e9e9e9; transition: background-color 0.2s ease; } .quiz-question .choices label:hover { background-color: #dcdcdc; } .quiz-question .choices input[type="radio"] { margin-right: 10px; vertical-align: middle; } /* Score Display */ .quiz-score-area { margin-top: 20px; padding: 15px; background-color: #e3f2fd; border: 1px solid #bbdefb; border-radius: 5px; text-align: center; } .quiz-score-area h3 { margin: 0; color: #0d47a1; } /* Hide elements */ .hidden { display: none; } /* --- Feedback Styles --- */ .feedback-mark { /* Container for the mark */ display: inline-block; /* Allows margin */ margin-left: 8px; font-size: 1.2em; font-weight: bold; vertical-align: middle; /* Align with text */ } .correct-mark { color: green; } .incorrect-mark { color: red; } .correct-answer-highlight { background-color: #c8e6c9 !important; border: 1px solid #a5d6a7; font-weight: bold; } .correct-answer-text { display: block; margin-top: 5px; color: #2e7d32; font-style: italic; font-size: 0.9em; } .incorrect-answer-input { border-color: #e57373 !important; background-color: #ffebee; } .incorrect-choice-selected { background-color: #ffcdd2 !important; border: 1px solid #ef9a9a; text-decoration: line-through; } .quiz-question .choices label.correct-answer-highlight, .quiz-question .choices label.incorrect-choice-selected { opacity: 1; color: #333; } /* --- Analytics Button Style --- */ .analytics-btn { position: fixed; bottom: 20px; right: 20px; padding: 12px 25px; background-color: #6f42c1; /* Purple color */ color: white; border: none; border-radius: 25px; /* Pill shape */ cursor: pointer; font-size: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; /* Ensure it's above other content */ transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease; } .analytics-btn:hover:not(:disabled) { background-color: #5a379b; transform: translateY(-2px); /* Slight lift on hover */ } .analytics-btn:disabled { background-color: #b3a1d1; /* Lighter purple when disabled */ cursor: not-allowed; opacity: 0.7; transform: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* --- Fullscreen Modal Styles --- */ .modal { display: none; /* Hidden by default */ position: fixed; z-index: 1001; /* Above the button */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: hidden; /* Prevent body scroll when modal is open */ background-color: #fefefe; /* Use solid background instead of overlay */ } .modal-content { background-color: transparent; /* Make content background transparent */ margin: 0; /* Remove margin */ padding: 30px; /* Adjust padding for fullscreen */ border: none; /* Remove border */ width: 100%; /* Full width */ height: 100%; /* Full height */ max-width: none; /* Remove max-width */ border-radius: 0; /* Remove border-radius */ box-shadow: none; /* Remove box-shadow */ position: relative; overflow-y: auto; /* Allow content scrolling */ box-sizing: border-box; /* Include padding in height/width */ } /* Close Button Styles Removed */ /* .close-btn { ... } */ .modal h2 { text-align: center; color: #6f42c1; margin-top: 10px; /* Add some top margin */ margin-bottom: 30px; /* Increase bottom margin */ font-size: 1.8em; /* Larger title */ } .analytics-section { margin-bottom: 25px; /* Increase spacing */ padding-bottom: 20px; border-bottom: 1px solid #eee; max-width: 800px; /* Limit width of content sections */ margin-left: auto; /* Center content sections */ margin-right: auto; } .analytics-section:last-of-type { /* Remove border from last section before nav */ border-bottom: none; } .analytics-section h3 { color: #444; margin-bottom: 15px; font-size: 1.3em; /* Larger section titles */ } #quizScoresList, #lessonProgressList { /* Apply to both lists */ list-style: none; padding: 0; max-height: 30vh; /* Adjust max height relative to viewport */ overflow-y: auto; } #quizScoresList li, #lessonProgressList li { /* Apply to both lists */ background-color: #f9f9f9; padding: 10px 15px; /* Increase padding */ margin-bottom: 8px; /* Increase spacing */ border-radius: 4px; border: 1px solid #eee; font-size: 1em; /* Slightly larger font */ display: flex; /* Use flex for alignment */ justify-content: space-between; /* Space out title and status/score */ align-items: center; } #quizScoresList li strong, #lessonProgressList li strong { /* Apply to both lists */ color: #333; margin-right: 10px; /* Add space between title and value */ } /* Lesson Progress Specific Styles in Modal */ #lessonProgressList .status-completed, #lessonProgressList .status-read { color: green; font-weight: bold; } #lessonProgressList .status-not-started { color: grey; } #overallGrade { font-size: 1.4em; /* Larger grade font */ font-weight: bold; color: #28a745; } /* Styles for Navigation Buttons inside Modal */ .modal-navigation { margin-top: 30px; /* Increase space */ padding-top: 25px; border-top: 1px solid #ccc; /* Slightly darker border */ text-align: center; display: flex; justify-content: center; gap: 20px; /* Increase gap */ max-width: 800px; /* Limit width */ margin-left: auto; margin-right: auto; } .modal-nav-btn { padding: 12px 25px; /* Larger buttons */ border: none; border-radius: 5px; cursor: pointer; font-size: 1em; /* Larger font */ font-weight: bold; transition: background-color 0.3s ease, transform 0.2s ease; } .modal-nav-btn.dashboard { /* Style for the new dashboard button */ background-color: #ffc107; /* Yellow/Orange color */ color: #333; } .modal-nav-btn.dashboard:hover { background-color: #e0a800; transform: translateY(-1px); } .modal-nav-btn.home { background-color: #17a2b8; color: white; } .modal-nav-btn.home:hover { background-color: #138496; transform: translateY(-1px); } .modal-nav-btn.logout { background-color: #dc3545; color: white; } .modal-nav-btn.logout:hover { background-color: #c82333; transform: translateY(-1px); } document.addEventListener('DOMContentLoaded', () => { // --- Login Check --- const loggedInUsername = sessionStorage.getItem('loggedInUsername'); const loggedInRole = sessionStorage.getItem('loggedInRole'); if (!loggedInUsername || !loggedInRole || loggedInRole !== 'student') { alert('Access denied. Please log in as a student.'); // Ensure login.js is loaded if redirecting to index.html which might be the login page window.location.href = 'login.html'; // Redirect if not a student return; } // --- End Login Check --- // --- DOM Elements --- const createdLessonsDiv = document.getElementById('createdLessons'); const createdQuizzesDiv = document.getElementById('createdQuizzes'); const quizCompletionStatusDiv = document.getElementById('quiz-completion-status'); // Analytics Elements const analyticsBtn = document.getElementById('analyticsBtn'); const analyticsModal = document.getElementById('analyticsModal'); const lastAccessedSpan = document.getElementById('lastAccessed'); const lessonProgressListUl = document.getElementById('lessonProgressList'); // Added for modal const quizScoresListUl = document.getElementById('quizScoresList'); const overallGradeSpan = document.getElementById('overallGrade'); // Modal Navigation Elements const modalDashboardBtn = document.getElementById('modalDashboardBtn'); const modalHomeBtn = document.getElementById('modalHomeBtn'); const modalLogoutBtn = document.getElementById('modalLogoutBtn'); // --- Storage Keys --- const storageKeys = { users: 'registeredUsers', // Key for the main user object containing all users lessons: 'createdLessons', // Global lessons created by teacher quizzes: 'createdQuizzes', // Global quizzes created by teacher lastAccessed: `studentLastAccessed_${loggedInUsername}` // Student-specific last access }; // --- Utility Functions (Ensure login.js is included for getUsers/saveUsers) --- // getUsers() and saveUsers() are assumed to be available from login.js if (typeof getUsers !== 'function' || typeof saveUsers !== 'function') { console.error("Error: getUsers or saveUsers function not found. Make sure login.js is included before student.js"); alert("A critical error occurred. Please try refreshing the page or logging in again."); // Optionally redirect or disable functionality return; } // --- Get Current Student Data --- // Helper to safely get the current student's data object from the main users store function getCurrentStudentData() { const users = getUsers(); const studentData = users[loggedInUsername]; if (studentData && studentData.role === 'student') { // Initialize progress arrays if they don't exist (robustness) if (!Array.isArray(studentData.quizScores)) { studentData.quizScores = []; } if (!Array.isArray(studentData.lessonProgress)) { studentData.lessonProgress = []; } return studentData; } console.error("Could not find valid student data for username:", loggedInUsername); // Maybe redirect or show error if student data is corrupted/missing alert("Error: Could not load your data. Please try logging in again."); logout(); // Log out if data is missing return null; // Return null to indicate failure } // --- Track Last Accessed --- function recordLastAccessed() { const now = new Date(); localStorage.setItem(storageKeys.lastAccessed, now.toISOString()); } // --- Lesson Display & Tracking --- function updateCreatedLessons() { const globalLessons = JSON.parse(localStorage.getItem(storageKeys.lessons) || '[]'); const studentData = getCurrentStudentData(); if (!studentData) return; // Stop if student data failed to load createdLessonsDiv.innerHTML = ''; // Clear existing lessons if (globalLessons.length === 0) { createdLessonsDiv.innerHTML = '

No lessons available.

'; return; } globalLessons.forEach((lesson, index) => { // Basic validation const title = lesson.title || 'Untitled Lesson'; const content = lesson.content || 'No content.'; const lessonId = `lesson-${index}`; // Simple ID based on index // Check student's progress for this lesson const progressEntry = studentData.lessonProgress.find(p => p.lessonName === title); const isRead = progressEntry && (progressEntry.status === 'read' || progressEntry.status === 'completed'); // Consider both 'read' and 'completed' as read // Check for attached file let fileLinkHtml = ''; if (lesson.fileName && lesson.fileDataUrl) { // Create a download link using the Data URL fileLinkHtml = ` Download: ${lesson.fileName} `; } const lessonDiv = document.createElement('div'); lessonDiv.classList.add('lesson'); lessonDiv.innerHTML = `

${title}

${content}

${fileLinkHtml} `; createdLessonsDiv.appendChild(lessonDiv); }); } // --- Event Delegation for Lesson Buttons --- createdLessonsDiv.addEventListener('click', (event) => { const target = event.target; if (target.classList.contains('mark-read-btn') && !target.disabled) { const lessonTitle = target.dataset.lessonTitle; markLessonAsRead(lessonTitle, target); } // No action needed for clicking the download link (handled by browser) }); function markLessonAsRead(lessonTitle, buttonElement) { const users = getUsers(); const studentData = users[loggedInUsername]; // Get current data again if (!studentData) { alert("Error updating lesson status."); return; } // Ensure lessonProgress array exists if (!Array.isArray(studentData.lessonProgress)) { studentData.lessonProgress = []; } // Find the progress entry or create it let progressEntry = studentData.lessonProgress.find(p => p.lessonName === lessonTitle); if (progressEntry) { progressEntry.status = 'read'; // Update status to 'read' } else { // Add new entry if it doesn't exist studentData.lessonProgress.push({ lessonName: lessonTitle, status: 'read' }); } // Save the updated users object saveUsers(users); // Update the button state buttonElement.disabled = true; buttonElement.textContent = 'Read'; console.log(`Lesson "${lessonTitle}" marked as read for ${loggedInUsername}`); // Optionally, update the analytics modal if it's open if (analyticsModal.style.display === 'block') { populateAnalyticsData(); } } // --- Quiz Display and Taking Logic --- function updateCreatedQuizzes() { console.log("Updating created quizzes display for student:", loggedInUsername); const globalQuizzes = JSON.parse(localStorage.getItem(storageKeys.quizzes) || '[]'); const studentData = getCurrentStudentData(); if (!studentData) return; // Stop if student data failed to load createdQuizzesDiv.innerHTML = ''; // Clear previous content if (globalQuizzes.length === 0) { createdQuizzesDiv.innerHTML = '

No quizzes available.

'; checkAndEnforceQuizCompletion(); // Check even if no quizzes return; } globalQuizzes.forEach((quiz, index) => { // Basic validation of quiz structure if (!quiz || typeof quiz.quizTitle === 'undefined' || !Array.isArray(quiz.questions)) { console.warn(`Skipping invalid quiz data at index ${index}:`, quiz); return; // Skip rendering this invalid quiz } const quizTitle = quiz.quizTitle || 'Untitled Quiz'; // Check if this student has taken this quiz by looking in their main data const resultData = studentData.quizScores.find(score => score.quizName === quizTitle); const hasTaken = !!resultData; // True if resultData is found console.log(`Quiz Index: ${index}, Title: ${quizTitle}, Has Taken: ${hasTaken}`); const quizDiv = document.createElement('div'); quizDiv.classList.add('quiz'); quizDiv.id = `quiz-${index}`; quizDiv.innerHTML = `

${quizTitle}

Type: ${quiz.quizType || 'N/A'}

Number of questions: ${quiz.questions.length}

${hasTaken && resultData ? `

Your Score: ${resultData.score}%

` : ''}

`; createdQuizzesDiv.appendChild(quizDiv); }); checkAndEnforceQuizCompletion(); // Check completion after rendering quizzes } // --- Event Delegation for Quiz Buttons --- createdQuizzesDiv.addEventListener('click', (event) => { const target = event.target; // The element that was actually clicked // Check if the clicked element is a "take-quiz-btn" or inside one const takeButton = target.closest('.take-quiz-btn'); if (takeButton && !takeButton.disabled) { console.log("Take Quiz button clicked via delegation for index:", takeButton.dataset.quizIndex); startQuiz(takeButton); // Pass the button element itself return; // Stop further processing for this click } // Check if the clicked element is a "submit-quiz-btn" or inside one const submitButton = target.closest('.submit-quiz-btn'); if (submitButton && !submitButton.disabled) { console.log("Submit Quiz button clicked via delegation for index:", submitButton.dataset.quizIndex); submitQuiz(submitButton); // Pass the button element itself return; // Stop further processing for this click } }); function startQuiz(buttonElement) { // Accepts the button element directly const quizIndex = buttonElement.dataset.quizIndex; console.log('startQuiz called for index:', quizIndex); const globalQuizzes = JSON.parse(localStorage.getItem(storageKeys.quizzes) || '[]'); // Validate quiz index and data if (quizIndex === undefined || !globalQuizzes[quizIndex] || !Array.isArray(globalQuizzes[quizIndex].questions)) { console.error(`Invalid quiz index or data for index ${quizIndex}`); alert("Error: Could not load quiz data."); return; } const quiz = globalQuizzes[quizIndex]; const questionsArea = document.getElementById(`quiz-area-${quizIndex}`); const scoreArea = document.getElementById(`score-area-${quizIndex}`); const takeQuizButton = buttonElement; // The button that was clicked if (!questionsArea || !scoreArea) { console.error(`Could not find questionsArea or scoreArea for quiz index ${quizIndex}`); alert("Error: Could not display quiz."); return; } // Hide other open quiz forms if any, and show their "Take Quiz" buttons document.querySelectorAll('.quiz-questions-area').forEach(area => { if (area.id !== `quiz-area-${quizIndex}`) { area.style.display = 'none'; const otherQuizIndex = area.id.split('-')[2]; const otherTakeButton = document.querySelector(`.take-quiz-btn[data-quiz-index="${otherQuizIndex}"]`); // Check if the other quiz has been taken using the main student data const studentData = getCurrentStudentData(); const otherQuizTitle = globalQuizzes[otherQuizIndex]?.quizTitle; const otherQuizTaken = studentData?.quizScores.some(s => s.quizName === otherQuizTitle); if (otherTakeButton && !otherQuizTaken) { // Only show if not already taken otherTakeButton.style.display = 'inline-block'; } } }); questionsArea.innerHTML = ''; // Clear previous content if any scoreArea.innerHTML = ''; // Clear score area scoreArea.style.display = 'none'; // Hide score area questionsArea.style.display = 'block'; // Show questions area takeQuizButton.style.display = 'none'; // Hide the clicked "Take Quiz" button quiz.questions.forEach((question, qIndex) => { // Basic validation of question structure if (!question || typeof question.questionText === 'undefined') { console.warn(`Skipping invalid question data at qIndex ${qIndex} for quiz ${quizIndex}:`, question); return; // Skip rendering invalid question } const questionDiv = document.createElement('div'); questionDiv.classList.add('quiz-question'); let answerHtml = ''; if (quiz.quizType === 'identification') { answerHtml = `Your Answer:`; } else if (quiz.quizType === 'multiple-choice') { answerHtml = '

'; const choices = Array.isArray(question.choices) ? question.choices : []; if (choices.length === 0) { console.warn(`No choices found for multiple-choice question qIndex ${qIndex} in quiz ${quizIndex}`); } // Shuffle choices before displaying (optional, but good practice) const shuffledChoices = [...choices].sort(() => Math.random() - 0.5); shuffledChoices.forEach((choice, cIndex) => { // Ensure choice text is displayed correctly, even if null/undefined const choiceText = (choice !== null && choice !== undefined) ? choice : `Choice ${cIndex + 1}`; // Use the original choice value for the radio button's value attribute const choiceValue = (choice !== null && choice !== undefined) ? choice : `__choice_${cIndex}__`; // Handle potential null/undefined values answerHtml += ` ${choiceText}`; }); answerHtml += '

'; } else { console.warn(`Unsupported quiz type "${quiz.quizType}" for question qIndex ${qIndex} in quiz ${quizIndex}`); answerHtml = '

Unsupported question type.

'; } questionDiv.innerHTML = `

${qIndex + 1}. ${question.questionText}

${answerHtml}`; questionsArea.appendChild(questionDiv); }); // Add submit button only if valid questions were rendered if (questionsArea.children.length > 0 && !questionsArea.querySelector('.submit-quiz-btn')) { const submitButton = document.createElement('button'); submitButton.textContent = 'Submit Quiz'; submitButton.classList.add('btn', 'submit-quiz-btn'); submitButton.dataset.quizIndex = quizIndex; // Listener is handled by delegation, no need to add here questionsArea.appendChild(submitButton); } else if (questionsArea.children.length === 0) { // Handle case where a quiz has no valid questions questionsArea.innerHTML = '

No valid questions found for this quiz. Cannot submit.

'; // Optionally re-display the "Take Quiz" button or show a message takeQuizButton.style.display = 'inline-block'; // Show button again takeQuizButton.disabled = true; // Disable it as it's problematic takeQuizButton.textContent = 'Quiz Error'; } } function submitQuiz(buttonElement) { // Accepts the button element directly const quizIndex = buttonElement.dataset.quizIndex; console.log('submitQuiz called for index:', quizIndex); const globalQuizzes = JSON.parse(localStorage.getItem(storageKeys.quizzes) || '[]'); // Validate quiz index and data if (quizIndex === undefined || !globalQuizzes[quizIndex] || !Array.isArray(globalQuizzes[quizIndex].questions)) { console.error(`Invalid quiz index or data for submission: ${quizIndex}`); alert("Error: Could not submit quiz data."); return; } const quiz = globalQuizzes[quizIndex]; const questionsArea = buttonElement.closest('.quiz-questions-area'); // Find parent question area const scoreArea = document.getElementById(`score-area-${quizIndex}`); if (!questionsArea || !scoreArea) { console.error("Could not find questions or score area for quiz index:", quizIndex); alert("Error submitting quiz. Please try again."); return; } let score = 0; let allAnswered = true; // Filter out potentially invalid questions from the quiz data before counting/iterating const validQuestions = quiz.questions.filter(q => q && typeof q.questionText !== 'undefined'); const totalValidQuestions = validQuestions.length; // Clear previous feedback before evaluating questionsArea.querySelectorAll('.feedback-mark, .correct-answer-text').forEach(el => el.remove()); questionsArea.querySelectorAll('.correct-answer-highlight, .incorrect-choice-selected, .incorrect-answer-input').forEach(el => { el.classList.remove('correct-answer-highlight', 'incorrect-choice-selected', 'incorrect-answer-input'); if (el.tagName === 'LABEL') { el.style.textDecoration = 'none'; } }); // Re-enable inputs temporarily for validation, disable later questionsArea.querySelectorAll('input[type="text"], input[type="radio"]').forEach(input => input.disabled = false); // Iterate through each *valid* question defined in the quiz data validQuestions.forEach((question, qIndex) => { let studentAnswer = null; const correctAnswer = question.correctAnswer; // Find the corresponding question element in the DOM based on its position among valid questions const questionElement = questionsArea.querySelector(`.quiz-question:nth-child(${qIndex + 1})`); // Assumes DOM order matches validQuestions order const questionNumberElement = questionElement ? questionElement.querySelector('p strong') : null; if (!questionElement || !questionNumberElement) { console.warn(`Could not find question element in DOM for valid qIndex ${qIndex} during submission in quiz ${quizIndex}`); allAnswered = false; // Consider it unanswered if the element is missing return; // Skip this question } // --- Get Student Answer and Validate --- if (quiz.quizType === 'identification') { const inputElement = questionElement.querySelector(`input[type="text"]`); if (!inputElement) { console.warn(`Missing input element for identification qIndex ${qIndex}`); allAnswered = false; return; } studentAnswer = inputElement.value.trim(); if (studentAnswer === "") allAnswered = false; else if (correctAnswer !== undefined && correctAnswer !== null && studentAnswer.toLowerCase() === String(correctAnswer).toLowerCase()) score++; } else if (quiz.quizType === 'multiple-choice') { const checkedRadio = questionElement.querySelector(`input[type="radio"]:checked`); if (!checkedRadio) allAnswered = false; else { studentAnswer = checkedRadio.value; if (studentAnswer === String(correctAnswer)) score++; } } }); // End of validQuestions.forEach for validation // --- Check if all questions were answered --- if (!allAnswered) { alert('Please answer all questions before submitting.'); questionsArea.querySelectorAll('input[type="text"], input[type="radio"]').forEach(input => input.disabled = false); // Re-enable return; // Stop submission } // --- If all answered, proceed to show feedback and save --- // Disable all inputs now that submission is final questionsArea.querySelectorAll('input[type="text"], input[type="radio"]').forEach(input => input.disabled = true); // Iterate again through valid questions to apply feedback styles validQuestions.forEach((question, qIndex) => { const questionElement = questionsArea.querySelector(`.quiz-question:nth-child(${qIndex + 1})`); if (!questionElement) return; const questionNumberElement = questionElement.querySelector('p strong'); const correctAnswer = question.correctAnswer; let studentAnswer = null; let isCorrect = false; // Re-evaluate for feedback if (quiz.quizType === 'identification') { const inputElement = questionElement.querySelector(`input[type="text"]`); studentAnswer = inputElement ? inputElement.value.trim() : ''; isCorrect = (correctAnswer !== undefined && correctAnswer !== null && studentAnswer.toLowerCase() === String(correctAnswer).toLowerCase()); if (!isCorrect && inputElement) { inputElement.classList.add('incorrect-answer-input'); if (correctAnswer !== undefined && correctAnswer !== null) { const correctAnswerSpan = document.createElement('span'); correctAnswerSpan.classList.add('correct-answer-text'); correctAnswerSpan.textContent = `Correct answer: ${correctAnswer}`; inputElement.parentNode.insertBefore(correctAnswerSpan, inputElement.nextSibling); } } } else if (quiz.quizType === 'multiple-choice') { const radioButtons = questionElement.querySelectorAll(`input[type="radio"]`); const checkedRadio = questionElement.querySelector(`input[type="radio"]:checked`); studentAnswer = checkedRadio ? checkedRadio.value : null; isCorrect = (studentAnswer === String(correctAnswer)); radioButtons.forEach(radio => { const choiceLabel = radio.closest('label'); if (!choiceLabel) return; // Highlight the correct answer's label if (radio.value === String(correctAnswer)) { choiceLabel.classList.add('correct-answer-highlight'); } // If this radio was checked and it's incorrect, style it if (radio.checked && !isCorrect) { choiceLabel.classList.add('incorrect-choice-selected'); choiceLabel.style.textDecoration = 'line-through'; // Add line-through } }); } // Add checkmark or cross if (questionNumberElement) { const feedbackMark = document.createElement('span'); feedbackMark.classList.add('feedback-mark'); feedbackMark.textContent = isCorrect ? '✓' : '✗'; feedbackMark.classList.add(isCorrect ? 'correct-mark' : 'incorrect-mark'); // Ensure no duplicate marks const existingMark = questionNumberElement.querySelector('.feedback-mark'); if (existingMark) existingMark.remove(); questionNumberElement.appendChild(feedbackMark); } }); // End of feedback loop // --- Display Final Score and Save --- const percentageScore = totalValidQuestions > 0 ? Math.round((score / totalValidQuestions) * 100) : 0; scoreArea.innerHTML = `

Your Score: ${percentageScore}%

`; // Show percentage scoreArea.style.display = 'block'; buttonElement.disabled = true; // Disable the submit button permanently buttonElement.textContent = 'Submitted'; // Find the original "Take Quiz" button again and ensure it's disabled and text updated const originalTakeButton = document.querySelector(`.take-quiz-btn[data-quiz-index="${quizIndex}"]`); if (originalTakeButton) { originalTakeButton.disabled = true; originalTakeButton.textContent = 'Quiz Taken'; originalTakeButton.style.display = 'inline-block'; // Ensure it's visible again } // Save the result (percentage score) to the main student data saveQuizResult(quiz.quizTitle || 'Untitled Quiz', percentageScore); checkAndEnforceQuizCompletion(); // Update analytics button status } function saveQuizResult(quizTitle, percentageScore) { const users = getUsers(); const studentData = users[loggedInUsername]; if (!studentData) { console.error("Cannot save quiz result: Student data not found."); return; } // Ensure quizScores array exists if (!Array.isArray(studentData.quizScores)) { studentData.quizScores = []; } // Find if a result for this quiz already exists const existingResultIndex = studentData.quizScores.findIndex(q => q.quizName === quizTitle); const newResult = { quizName: quizTitle, score: percentageScore, // Store the percentage score timestamp: new Date().toISOString() }; if (existingResultIndex > -1) { // Update existing result studentData.quizScores[existingResultIndex] = newResult; console.log("Quiz result updated for:", quizTitle, "for student:", loggedInUsername); } else { // Add new result studentData.quizScores.push(newResult); console.log("Quiz result saved for:", quizTitle, "for student:", loggedInUsername); } // Save the entire updated users object back to localStorage saveUsers(users); } // --- Quiz Completion Enforcement --- function checkAndEnforceQuizCompletion() { const globalQuizzes = JSON.parse(localStorage.getItem(storageKeys.quizzes) || '[]'); const studentData = getCurrentStudentData(); if (!studentData) return; // Can't check if data is missing let allValidQuizzesTaken = true; // Filter global quizzes to only include valid ones const validGlobalQuizzes = globalQuizzes.filter(quiz => quiz && typeof quiz.quizTitle !== 'undefined' && Array.isArray(quiz.questions)); if (validGlobalQuizzes.length === 0) { allValidQuizzesTaken = true; // No valid quizzes to take } else { for (const quiz of validGlobalQuizzes) { const quizTitle = quiz.quizTitle; // Check if THIS student has taken this VALID quiz by looking in their data const hasTaken = studentData.quizScores.some(score => score.quizName === quizTitle); if (!hasTaken) { allValidQuizzesTaken = false; break; // Found an untaken, valid quiz } } } console.log("All valid quizzes taken by", loggedInUsername, ":", allValidQuizzesTaken); if (allValidQuizzesTaken) { quizCompletionStatusDiv.classList.add('hidden'); analyticsBtn.disabled = false; // Enable button console.log("Analytics button enabled for", loggedInUsername); } else { quizCompletionStatusDiv.classList.remove('hidden'); analyticsBtn.disabled = true; // Disable button console.log("Analytics button disabled for", loggedInUsername); } } // --- Analytics Modal Logic --- function openAnalyticsModal() { checkAndEnforceQuizCompletion(); // Re-check before opening if (analyticsBtn.disabled) { alert("Please complete all available quizzes before viewing analytics."); return; } populateAnalyticsData(); analyticsModal.style.display = 'block'; document.body.classList.add('modal-open'); // Prevent body scroll } function closeAnalyticsModal() { analyticsModal.style.display = 'none'; document.body.classList.remove('modal-open'); // Allow body scroll again } function populateAnalyticsData() { const studentData = getCurrentStudentData(); if (!studentData) return; // Stop if data is missing // Get last accessed time for this student const lastAccessedISO = localStorage.getItem(storageKeys.lastAccessed); lastAccessedSpan.textContent = lastAccessedISO ? new Date(lastAccessedISO).toLocaleString() : 'Not recorded yet.'; // --- Populate Lesson Progress --- lessonProgressListUl.innerHTML = ''; // Clear previous list const globalLessons = JSON.parse(localStorage.getItem(storageKeys.lessons) || '[]'); if (globalLessons.length > 0) { // Ensure studentData.lessonProgress exists const lessonProgress = Array.isArray(studentData.lessonProgress) ? studentData.lessonProgress : []; globalLessons.forEach(lesson => { const title = lesson.title || 'Untitled Lesson'; const progressEntry = lessonProgress.find(p => p.lessonName === title); const status = progressEntry ? progressEntry.status : 'not started'; const statusClass = `status-${status.toLowerCase().replace(' ', '-')}`; const listItem = document.createElement('li'); listItem.innerHTML = `${title}: ${status}`; lessonProgressListUl.appendChild(listItem); }); } else { lessonProgressListUl.innerHTML = '

No lessons available.

'; } // --- Populate Quiz Scores --- quizScoresListUl.innerHTML = ''; // Clear previous list const quizScores = studentData.quizScores; // Get scores directly from student data if (quizScores.length === 0) { quizScoresListUl.innerHTML = '

No quizzes taken yet.

'; overallGradeSpan.textContent = 'N/A'; return; // Exit early if no scores } let totalPercentage = 0; let numberOfQuizzesTaken = 0; // Sort scores alphabetically by quiz name for consistent display quizScores.sort((a, b) => a.quizName.localeCompare(b.quizName)); quizScores.forEach(result => { // Ensure result has expected properties before calculating if (result && typeof result.quizName !== 'undefined' && typeof result.score === 'number') { const listItem = document.createElement('li'); listItem.innerHTML = `${result.quizName}: ${result.score}%`; quizScoresListUl.appendChild(listItem); totalPercentage += result.score; numberOfQuizzesTaken++; } else { console.warn(`Invalid score data found in student results:`, result); } }); // Calculate overall grade as the average of the percentage scores of quizzes taken overallGradeSpan.textContent = numberOfQuizzesTaken > 0 ? `${(totalPercentage / numberOfQuizzesTaken).toFixed(1)}%` : 'N/A'; } // --- Navigation Logic --- function goToHomepage() { // Determine homepage based on role if necessary, or assume a general one window.location.href = 'homepage.html'; // Assuming homepage.html exists } function logout() { sessionStorage.removeItem('loggedInUsername'); sessionStorage.removeItem('loggedInRole'); // Also clear student-specific items if desired localStorage.removeItem(storageKeys.lastAccessed); alert('You have been logged out.'); window.location.href = 'login.html'; // Redirect to login page (index.html) } // --- Event Listeners --- if (analyticsBtn) analyticsBtn.addEventListener('click', openAnalyticsModal); if (modalDashboardBtn) modalDashboardBtn.addEventListener('click', closeAnalyticsModal); if (modalHomeBtn) modalHomeBtn.addEventListener('click', goToHomepage); if (modalLogoutBtn) modalLogoutBtn.addEventListener('click', logout); // --- Initial Load --- recordLastAccessed(); // Record access time on load updateCreatedLessons(); updateCreatedQuizzes(); // Initial population and completion check for this student }); Parent Access - Find Student

Find Student Record

Please enter the student's details to view their progress.

Back to Login

Parent Access - Find Student

Find Student Record

Please enter the student's details to view their progress.

Back to Login

/* Reusing and adapting styles from login.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #e2a2a2, #f4f4f4); /* Slightly different gradient for parent section */ display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .access-container { background: #fff; width: 100%; max-width: 450px; /* Keep access container similar to login */ padding: 30px 40px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); text-align: center; /* Center align access form */ } h2 { color: #333; margin-bottom: 25px; /* More space below heading */ font-weight: bold; font-size: 24px; text-align: center; /* Center main headings */ color: #c82333; /* Parent theme color */ } input, button { /* Styles for access page */ width: 100%; padding: 15px; margin: 12px 0; /* Slightly more margin */ border-radius: 8px; border: 1px solid #ddd; font-size: 16px; outline: none; transition: all 0.3s ease; } input:focus { border-color: #c82333; /* Parent theme color */ box-shadow: 0 0 8px rgba(200, 35, 51, 0.3); } button { background: #c82333; /* Parent theme color */ color: white; border: none; cursor: pointer; font-weight: bold; transition: background 0.3s ease; margin-top: 20px; /* More space above button */ } button:hover { background: #a81d2a; /* Darker shade on hover */ } .error-message { color: red; font-size: 14px; margin-top: 15px; /* More space above error */ min-height: 1.2em; /* Reserve space */ text-align: center; font-weight: bold; } p { font-size: 14px; color: #666; margin-top: 15px; line-height: 1.6; } .access-container p { text-align: center; /* Center paragraph text in access container */ } p a { color: #c82333; /* Parent theme color */ text-decoration: none; font-weight: bold; } p a:hover { text-decoration: underline; } Student Progress Dashboard

Student Progress Dashboard

Student Information

Name: Loading...

ID Number: Loading...

Quiz Scores

Loading scores...

Lesson Progress

Loading progress...

/* Reusing and adapting styles from parent.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #a2c4e2, #f4f4f4); /* Slightly different gradient */ display: flex; justify-content: center; align-items: flex-start; /* Align top */ min-height: 100vh; padding: 30px 20px; /* Add more padding */ } .dashboard-container { background: #fff; width: 100%; max-width: 700px; /* Wider for dashboard content */ padding: 30px 40px; /* More padding inside */ border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); text-align: left; /* Align text left for dashboard content */ } h2, h3 { color: #333; margin-bottom: 20px; font-weight: bold; } h2 { font-size: 26px; /* Larger title */ text-align: center; /* Center main heading */ color: #2a6a9e; /* Theme color */ margin-bottom: 30px; } h3 { font-size: 20px; margin-top: 30px; /* Add space above subheadings */ border-bottom: 2px solid #2a6a9e; /* Separator line */ padding-bottom: 10px; color: #444; } .student-info p { font-size: 16px; color: #555; margin-top: 10px; line-height: 1.6; } .student-info p strong { display: inline-block; width: 100px; /* Align labels */ } .student-info span { font-weight: normal; color: #333; } .dashboard-container div[class$="-info"], .dashboard-container div[class$="-scores"], .dashboard-container div[class$="-progress"] { margin-bottom: 30px; /* Space between sections */ } .dashboard-container ul { list-style: none; padding-left: 0; margin-top: 15px; max-height: 300px; /* Limit height and allow scroll */ overflow-y: auto; /* Add scroll if needed */ border: 1px solid #eee; /* Optional border around list */ border-radius: 5px; padding: 10px; /* Padding inside the list area */ } .dashboard-container li { background-color: #f9f9f9; border: 1px solid #eee; padding: 12px 18px; /* More padding in list items */ margin-bottom: 10px; /* Space between items */ border-radius: 4px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; } .dashboard-container li:last-child { margin-bottom: 0; } .dashboard-container li span { font-weight: bold; padding: 3px 8px; /* Padding around status/score */ border-radius: 4px; /* Rounded corners for status/score */ font-size: 0.9em; min-width: 80px; /* Ensure minimum width for status/score */ text-align: center; } /* Lesson Progress Status Styling */ .lesson-progress .status-completed, .lesson-progress .status-read { color: #1e7e34; /* Darker green */ background-color: #d4edda; /* Light green background */ border: 1px solid #c3e6cb; } .lesson-progress .status-not-started { color: #6c757d; /* Grey */ background-color: #e2e3e5; /* Light grey background */ border: 1px solid #d6d8db; } /* Quiz Score Styling */ .quiz-scores li span { color: #004085; /* Dark blue */ background-color: #cce5ff; /* Light blue background */ border: 1px solid #b8daff; } /* Empty list message */ .dashboard-container ul li:only-child { /* Style if only the 'loading' or 'no items' message is present */ background-color: transparent; border: none; font-style: italic; color: #888; justify-content: center; padding: 20px; /* Add padding to center message */ } /* Navigation Buttons */ .navigation-buttons { margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd; text-align: center; display: flex; justify-content: center; gap: 20px; } .navigation-buttons button { padding: 12px 25px; border-radius: 8px; border: none; font-size: 16px; cursor: pointer; font-weight: bold; transition: background 0.3s ease, transform 0.2s ease; } .navigation-buttons button:first-child { /* Find Another Student */ background: #ffc107; /* Yellow */ color: #333; } .navigation-buttons button:first-child:hover { background: #e0a800; transform: translateY(-1px); } .navigation-buttons button:last-child { /* Logout */ background: #dc3545; /* Red */ color: white; } .navigation-buttons button:last-child:hover { background: #c82333; transform: translateY(-1px); }

Kalayaan National High School

Login

Sign Up

Welcome!

About KNHS

Mission & Vision

Teacher Dashboard

Created Lessons

Created Quizzes

Create Lesson

Create Quiz

Delete Item

Manage Scores and Grades

Teacher Performance & Analytics

Overview

Class Performance

Question ${currentQIndex}

Scores for: ${selectedQuizTitle}

Student Dashboard

Available Lessons

Available Quizzes

Performance & Analytics

Activity

Lesson Progress

Quiz Scores

Overall Grade

${title}

${quizTitle}

Your Score: ${resultData.score}%

Your Score: ${percentageScore}%

Find Student Record

Find Student Record

Student Progress Dashboard

Student Information

Quiz Scores

Lesson Progress