When the admin dashboard creates an assignment, he needs to be able to select the grade & section, not the student. For example, the section I chose is Grade 8 - Section 1. When will the assignment I created go there? In the admin dashboard, only they need to be able to see the assignment I created. I need the full code for it and it all needs to function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Admin Dashboard - KNHS</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--primary: #4f46e5;
--primary-hover: #4338ca;
--muted: #6b7280;
--card-bg: rgba(255,255,255,0.9);
}
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 24px;
background: linear-gradient(180deg,#eef2ff 0%, #ffffff 100%);
}
header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 18px;
}
header h1 { margin: 0; color: #0f172a; }
.btn {
background: var(--primary);
color: white;
border: none;
padding: 10px 14px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
}
.btn.secondary {
background: white;
color: var(--primary);
border: 1px solid rgba(79,70,229,0.15);
}
.layout {
display: grid;
grid-template-columns: 320px 1fr;
gap: 20px;
}
.sidebar {
background: var(--card-bg);
padding: 16px;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}
.content {
background: var(--card-bg);
padding: 18px;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}
.stat {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.nav {
display: flex;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.tab-btn { padding: 8px 10px; background: transparent; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.tab-btn.active { background: var(--primary); color: white; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 14px; }
.actions { display:flex; gap:6px; }
.modal { display:none; position: fixed; left:0; top:0; right:0; bottom:0; background: rgba(0,0,0,0.4); align-items:center; justify-content:center; z-index:50; }
.modal .panel { background: white; padding:16px; border-radius:10px; width: 720px; max-width:95%; max-height:90vh; overflow:auto; }
.close { float:right; border:none; background:transparent; font-size:18px; cursor:pointer; }
input, textarea, select { width:100%; padding:8px; margin:6px 0 12px; border:1px solid #e6e6f0; border-radius:6px; box-sizing:border-box; }
.hidden { display:none; }
.small { font-size:13px; color:var(--muted); }
</style>
</head>
<body>
<header>
<div>
<h1>Admin Dashboard — Kalayaan NHS</h1>
<div class="small">Manage users, lessons, quizzes, assignments & grades</div>
</div>
<div style="display:flex;gap:8px;align-items:center">
<button id="create-assignment-btn" class="btn">Create Assignment</button>
<button id="manage-grades-btn" class="btn secondary">Manage Scores & Grades</button>
<button id="logout-btn" class="btn">Logout</button>
</div>
</header>
<div class="layout">
<aside class="sidebar">
<div class="stat"><div>Total Users</div><div id="total-users">0</div></div>
<div class="stat"><div>Teachers</div><div id="teacher-count">0</div></div>
<div class="stat"><div>Students</div><div id="student-count">0</div></div>
<div class="stat"><div>Parents</div><div id="parent-count">0</div></div>
<hr />
<div style="margin-top:12px">
<input type="text" id="user-search" placeholder="Search users..." />
<button id="refresh-users" class="btn" style="width:100%;margin-top:8px">Refresh</button>
</div>
</aside>
<main class="content">
<div class="nav" id="tabs">
<button class="tab-btn active" data-tab="users-tab">Users</button>
<button class="tab-btn" data-tab="lessons-tab">Lessons</button>
<button class="tab-btn" data-tab="quizzes-tab">Quizzes</button>
<button class="tab-btn" data-tab="assignments-tab">Assignments</button>
</div>
<section id="users-tab" class="tab-content active">
<h3>Users</h3>
<table id="users-table">
<thead>
<tr><th>Username</th><th>Role</th><th>ID</th><th>Full Name</th><th>Actions</th></tr>
</thead>
<tbody></tbody>
</table>
</section>
<section id="lessons-tab" class="tab-content hidden">
<h3>Lessons</h3>
<button id="add-lesson-btn" class="btn">Add Lesson</button>
<table>
<thead><tr><th>Title</th><th>Preview</th><th>File</th><th>Actions</th></tr></thead>
<tbody id="lessons-table-body"></tbody>
</table>
</section>
<section id="quizzes-tab" class="tab-content hidden">
<h3>Quizzes</h3>
<button id="add-quiz-btn" class="btn">Add Quiz</button>
<table>
<thead><tr><th>Title</th><th>Type</th><th>#Questions</th><th>Actions</th></tr></thead>
<tbody id="quizzes-table-body"></tbody>
</table>
</section>
<section id="assignments-tab" class="tab-content hidden">
<h3>Assignments</h3>
<table>
<thead><tr><th>Title</th><th>Assigned To</th><th>Due Date</th><th>Actions</th></tr></thead>
<tbody id="assignments-table-body"></tbody>
</table>
</section>
</main>
</div>
<!-- Lesson Modal -->
<div id="lesson-modal" class="modal">
<div class="panel">
<button class="close" id="close-lesson-modal">×</button>
<h3 id="lesson-modal-title">Add New Lesson</h3>
<form id="lesson-form">
<input type="hidden" id="lesson-edit-index" value="-1">
<label>Lesson Title</label>
<input id="lesson-title" required />
<label>Content</label>
<textarea id="lesson-content" rows="6" required></textarea>
<label>Attach File (optional)</label>
<input id="lesson-file" type="file" />
<div id="current-file-info" class="hidden">Current File: <span id="current-file-name"></span> <button id="remove-file-btn" type="button">Remove</button></div>
<button class="btn" type="submit">Save Lesson</button>
</form>
</div>
</div>
<!-- Quiz Modal -->
<div id="quiz-modal" class="modal">
<div class="panel">
<button class="close" id="close-quiz-modal">×</button>
<h3 id="quiz-modal-title">Add New Quiz</h3>
<form id="quiz-form">
<input type="hidden" id="quiz-edit-index" value="-1">
<label>Quiz Title</label>
<input id="quiz-title" required />
<label>Type</label>
<select id="quiz-type">
<option value="multiple-choice">Multiple Choice</option>
<option value="short-answer">Short Answer</option>
</select>
<div id="questions-container"></div>
<button id="add-question-btn" type="button" class="btn secondary">Add Question</button>
<div style="margin-top:12px">
<button type="submit" class="btn">Save Quiz</button>
</div>
</form>
</div>
</div>
<!-- Assignment Modal -->
<div id="assignment-modal" class="modal">
<div class="panel">
<button class="close" id="close-assignment-modal">×</button>
<h3 id="assignment-modal-title">Create Assignment</h3>
<form id="assignment-form">
<input type="hidden" id="assignment-edit-id" value="">
<label>Title</label>
<input id="assignment-title" required />
<label>Description</label>
<textarea id="assignment-desc" rows="4"></textarea>
<label>Assign To</label>
<select id="assignment-assigned-to">
<option value="all">All Students</option>
</select>
<label>Due Date</label>
<input id="assignment-due" type="date" required />
<button class="btn" type="submit">Save Assignment</button>
</form>
</div>
</div>
<!-- Manage Grades Modal -->
<div id="grades-modal" class="modal">
<div class="panel">
<button class="close" id="close-grades-modal">×</button>
<h3>Manage Scores & Grades</h3>
<div>
<label>Select Assignment</label>
<select id="grades-assignment-select"></select>
</div>
<div style="margin-top:12px">
<table id="grades-table">
<thead><tr><th>Student</th><th>Student ID</th><th>Grade</th><th>Actions</th></tr></thead>
<tbody></tbody>
</table>
<div style="margin-top:10px">
<button id="save-grades-btn" class="btn">Save Grades</button>
</div>
</div>
</div>
</div>
<script src="admin.js"></script>
</body>
</html>
// Admin dashboard script: users, lessons, quizzes, assignments & grades
// Utility helpers
function getUsers() {
return JSON.parse(localStorage.getItem('users') || '{}');
}
function saveUsers(users) {
localStorage.setItem('users', JSON.stringify(users));
}
function ensureDemoData() {
// Ensure demo users already created by login page, but double-check
const users = getUsers();
if (!users.admin) {
users.admin = { username: 'admin', password: 'knhs25', role: 'admin', fullName: 'Administrator' };
}
if (!users.student1) {
users.student1 = { username: 'student1', password: 'studentpass', role: 'student', fullName: 'Juan Dela Cruz', studentId: 'S-001' };
}
if (!users.student2) {
users.student2 = { username: 'student2', password: 'studentpass', role: 'student', fullName: 'Maria Santos', studentId: 'S-002' };
}
if (!users.teacher1) {
users.teacher1 = { username: 'teacher1', password: 'teacherpass', role: 'teacher', fullName: 'Mrs. Reyes', teacherId: 'T-01' };
}
saveUsers(users);
// Ensure arrays exist
if (!localStorage.getItem('createdLessons')) localStorage.setItem('createdLessons', JSON.stringify([]));
if (!localStorage.getItem('createdQuizzes')) localStorage.setItem('createdQuizzes', JSON.stringify([]));
if (!localStorage.getItem('assignments')) localStorage.setItem('assignments', JSON.stringify([]));
if (!localStorage.getItem('grades')) localStorage.setItem('grades', JSON.stringify({}));
}
// DOM Elements
const totalUsersEl = document.getElementById('total-users');
const teacherCountEl = document.getElementById('teacher-count');
const studentCountEl = document.getElementById('student-count');
const parentCountEl = document.getElementById('parent-count');
const usersTableBody = document.querySelector('#users-table tbody');
const userSearchInput = document.getElementById('user-search');
const refreshBtn = document.getElementById('refresh-users');
const addLessonBtn = document.getElementById('add-lesson-btn');
const addQuizBtn = document.getElementById('add-quiz-btn');
const lessonsTableBody = document.getElementById('lessons-table-body');
const quizzesTableBody = document.getElementById('quizzes-table-body');
const tabBtns = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
// Assignment and Grades elements
const createAssignmentBtn = document.getElementById('create-assignment-btn');
const manageGradesBtn = document.getElementById('manage-grades-btn');
const assignmentsTableBody = document.getElementById('assignments-table-body');
const assignmentModal = document.getElementById('assignment-modal');
const closeAssignmentModalBtn = document.getElementById('close-assignment-modal');
const assignmentForm = document.getElementById('assignment-form');
const assignmentAssignedToSel = document.getElementById('assignment-assigned-to');
const gradesModal = document.getElementById('grades-modal');
const closeGradesModalBtn = document.getElementById('close-grades-modal');
const gradesAssignmentSelect = document.getElementById('grades-assignment-select');
const gradesTableBody = document.querySelector('#grades-table tbody');
const saveGradesBtn = document.getElementById('save-grades-btn');
// Lesson & Quiz modals existing
const lessonModal = document.getElementById('lesson-modal');
const quizModal = document.getElementById('quiz-modal');
const closeLessonModalBtn = document.getElementById('close-lesson-modal');
const closeQuizModalBtn = document.getElementById('close-quiz-modal');
const lessonForm = document.getElementById('lesson-form');
const quizForm = document.getElementById('quiz-form');
const addQuestionBtn = document.getElementById('add-question-btn');
const questionsContainer = document.getElementById('questions-container');
// Close buttons for lesson & quiz
document.getElementById('close-lesson-modal').addEventListener('click', () => lessonModal.style.display = 'none');
document.getElementById('close-quiz-modal').addEventListener('click', () => quizModal.style.display = 'none');
// Build initial data and UI
ensureDemoData();
updateDashboard();
setInterval(updateDashboard, 5000);
// Event listeners
refreshBtn.addEventListener('click', updateDashboard);
userSearchInput.addEventListener('input', filterUsers);
addLessonBtn && addLessonBtn.addEventListener('click', () => openLessonModal());
addQuizBtn && addQuizBtn.addEventListener('click', () => openQuizModal());
// Tabs
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
const tabId = btn.dataset.tab;
switchTab(tabId);
});
});
// Logout
const logoutBtn = document.getElementById('logout-btn');
if (logoutBtn) {
logoutBtn.addEventListener('click', () => {
sessionStorage.clear();
window.location.href = 'login.html';
});
}
// Lesson & Quiz modal behavior
window.addEventListener('click', (e) => {
if (e.target === lessonModal) lessonModal.style.display = 'none';
if (e.target === quizModal) quizModal.style.display = 'none';
if (e.target === assignmentModal) assignmentModal.style.display = 'none';
if (e.target === gradesModal) gradesModal.style.display = 'none';
});
// Lesson & Quiz forms
lessonForm.addEventListener('submit', handleLessonSubmit);
quizForm.addEventListener('submit', handleQuizSubmit);
addQuestionBtn.addEventListener('click', addQuestion);
// Assignment buttons
createAssignmentBtn.addEventListener('click', openAssignmentModal);
closeAssignmentModalBtn.addEventListener('click', () => assignmentModal.style.display = 'none');
assignmentForm.addEventListener('submit', handleAssignmentSubmit);
// Grades buttons
manageGradesBtn.addEventListener('click', openGradesModal);
closeGradesModalBtn.addEventListener('click', () => gradesModal.style.display = 'none');
gradesAssignmentSelect.addEventListener('change', populateGradesTable);
saveGradesBtn.addEventListener('click', saveGrades);
// Functions for dashboard
function updateDashboard() {
updateUserStats();
populateUsersTable();
populateLessonsTable();
populateQuizzesTable();
populateAssignmentsTable();
populateAssignmentSelectors();
}
function updateUserStats() {
const users = getUsers();
const counts = { total: 0, teacher: 0, student: 0, parent: 0 };
for (const k in users) {
counts.total++;
if (users[k].role === 'teacher') counts.teacher++;
if (users[k].role === 'student') counts.student++;
if (users[k].role === 'parent') counts.parent++;
}
totalUsersEl.textContent = counts.total;
teacherCountEl.textContent = counts.teacher;
studentCountEl.textContent = counts.student;
parentCountEl.textContent = counts.parent;
}
function populateUsersTable() {
const users = getUsers();
usersTableBody.innerHTML = '';
for (const username in users) {
const user = users[username];
const row = document.createElement('tr');
row.innerHTML = `
<td>${username}</td>
<td>${user.role}</td>
<td>${user.teacherId || user.studentId || 'N/A'}</td>
<td>${user.fullName || 'N/A'}</td>
<td class="actions">
<button class="btn secondary edit-user" data-username="${username}">Edit</button>
<button class="btn" data-username="${username}" style="background:#ef4444">Delete</button>
</td>
`;
usersTableBody.appendChild(row);
}
document.querySelectorAll('#users-table .edit-user').forEach(btn => {
btn.addEventListener('click', (e) => {
const username = e.target.dataset.username;
editUser(username);
});
});
document.querySelectorAll('#users-table button[style]').forEach(btn => {
btn.addEventListener('click', (e) => {
const username = e.target.dataset.username;
if (confirm(`Delete user ${username}?`)) {
const users = getUsers();
delete users[username];
saveUsers(users);
updateDashboard();
alert('User deleted');
}
});
});
}
function filterUsers() {
const searchTerm = userSearchInput.value.toLowerCase();
const rows = usersTableBody.querySelectorAll('tr');
rows.forEach(row => {
const username = row.cells[0].textContent.toLowerCase();
const role = row.cells[1].textContent.toLowerCase();
const id = row.cells[2].textContent.toLowerCase();
const name = row.cells[3].textContent.toLowerCase();
if (username.includes(searchTerm) || role.includes(searchTerm) || id.includes(searchTerm) || name.includes(searchTerm)) {
row.style.display = '';
} else row.style.display = 'none';
});
}
function switchTab(tabId) {
tabBtns.forEach(b => b.classList.remove('active'));
tabContents.forEach(c => c.classList.add('hidden'));
document.querySelector(`.tab-btn[data-tab="${tabId}"]`).classList.add('active');
document.getElementById(tabId).classList.remove('hidden');
}
// Lessons
function populateLessonsTable() {
const lessons = JSON.parse(localStorage.getItem('createdLessons') || '[]');
lessonsTableBody.innerHTML = '';
if (lessons.length === 0) {
lessonsTableBody.innerHTML = '<tr><td colspan="4">No lessons available</td></tr>';
return;
}
lessons.forEach((lesson, i) => {
const contentPreview = lesson.content ? (lesson.content.length > 50 ? lesson.content.substring(0,50) + '...' : lesson.content) : 'N/A';
const row = document.createElement('tr');
row.innerHTML = `<td>${lesson.title || 'Untitled'}</td><td>${contentPreview}</td><td>${lesson.fileName || 'None'}</td><td class="actions"><button class="btn secondary edit-lesson" data-index="${i}">Edit</button><button class="btn" style="background:#ef4444" data-index="${i}">Delete</button></td>`;
lessonsTableBody.appendChild(row);
});
document.querySelectorAll('.edit-lesson').forEach(btn => {
btn.addEventListener('click', (e) => editLesson(e.target.dataset.index));
});
document.querySelectorAll('#lessons-table-body button[style]').forEach(btn => {
btn.addEventListener('click', (e) => {
const idx = e.target.dataset.index;
if (confirm('Delete this lesson?')) {
const lessons = JSON.parse(localStorage.getItem('createdLessons') || '[]');
lessons.splice(idx, 1);
localStorage.setItem('createdLessons', JSON.stringify(lessons));
updateDashboard();
}
});
});
}
function openLessonModal(index = -1) {
const modalTitle = document.getElementById('lesson-modal-title');
const editIndexInput = document.getElementById('lesson-edit-index');
const titleInput = document.getElementById('lesson-title');
const contentInput = document.getElementById('lesson-content');
const fileInput = document.getElementById('lesson-file');
const currentFileInfo = document.getElementById('current-file-info');
const currentFileName = document.getElementById('current-file-name');
lessonForm.reset();
currentFileInfo.classList.add('hidden');
fileInput.value = '';
if (index >= 0) {
const lessons = JSON.parse(localStorage.getItem('createdLessons') || '[]');
const lesson = lessons[index];
if (lesson) {
modalTitle.textContent = 'Edit Lesson';
editIndexInput.value = index;
titleInput.value = lesson.title || '';
contentInput.value = lesson.content || '';
if (lesson.fileName) {
currentFileName.textContent = lesson.fileName;
currentFileInfo.classList.remove('hidden');
}
}
} else {
modalTitle.textContent = 'Add New Lesson';
editIndexInput.value = -1;
}
lessonModal.style.display = 'flex';
}
function handleLessonSubmit(e) {
e.preventDefault();
const editIndex = Number(document.getElementById('lesson-edit-index').value);
const title = document.getElementById('lesson-title').value;
const content = document.getElementById('lesson-content').value;
const fileInput = document.getElementById('lesson-file');
const lessons = JSON.parse(localStorage.getItem('createdLessons') || '[]');
const lessonData = { title, content, fileName: null, fileDataUrl: null };
if (fileInput.files.length > 0) {
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function(ev) {
lessonData.fileName = file.name;
lessonData.fileDataUrl = ev.target.result;
saveLesson(lessons, lessonData, editIndex);
};
reader.readAsDataURL(file);
} else {
// keep existing file if editing
if (editIndex >= 0 && lessons[editIndex]) {
lessonData.fileName = lessons[editIndex].fileName;
lessonData.fileDataUrl = lessons[editIndex].fileDataUrl;
}
saveLesson(lessons, lessonData, editIndex);
}
}
function saveLesson(lessons, lessonData, editIndex) {
if (editIndex >= 0 && editIndex < lessons.length) lessons[editIndex] = lessonData;
else lessons.push(lessonData);
localStorage.setItem('createdLessons', JSON.stringify(lessons));
lessonModal.style.display = 'none';
updateDashboard();
alert('Lesson saved!');
}
function editLesson(index) {
openLessonModal(Number(index));
}
// Quizzes
function populateQuizzesTable() {
const quizzes = JSON.parse(localStorage.getItem('createdQuizzes') || '[]');
quizzesTableBody.innerHTML = '';
if (quizzes.length === 0) {
quizzesTableBody.innerHTML = '<tr><td colspan="4">No quizzes available</td></tr>';
return;
}
quizzes.forEach((quiz, i) => {
const row = document.createElement('tr');
row.innerHTML = `<td>${quiz.quizTitle || 'Untitled'}</td><td>${quiz.quizType || 'N/A'}</td><td>${quiz.questions ? quiz.questions.length : 0}</td><td class="actions"><button class="btn secondary edit-quiz" data-index="${i}">Edit</button><button class="btn" style="background:#ef4444" data-index="${i}">Delete</button></td>`;
quizzesTableBody.appendChild(row);
});
document.querySelectorAll('.edit-quiz').forEach(btn => { btn.addEventListener('click', (e) => openQuizModal(Number(e.target.dataset.index)))});
document.querySelectorAll('#quizzes-table-body button[style]').forEach(btn => {
btn.addEventListener('click', (e) => {
const idx = e.target.dataset.index;
if (confirm('Delete this quiz?')) {
const quizzes = JSON.parse(localStorage.getItem('createdQuizzes') || '[]');
quizzes.splice(idx,1);
localStorage.setItem('createdQuizzes', JSON.stringify(quizzes));
updateDashboard();
}
});
});
}
function openQuizModal(quizIndex = -1) {
const modalTitle = document.getElementById('quiz-modal-title');
const editIndexInput = document.getElementById('quiz-edit-index');
const titleInput = document.getElementById('quiz-title');
const typeInput = document.getElementById('quiz-type');
quizForm.reset();
questionsContainer.innerHTML = '';
if (quizIndex >= 0) {
const quizzes = JSON.parse(localStorage.getItem('createdQuizzes') || '[]');
const quiz = quizzes[quizIndex];
if (quiz) {
modalTitle.textContent = 'Edit Quiz';
editIndexInput.value = quizIndex;
titleInput.value = quiz.quizTitle || '';
typeInput.value = quiz.quizType || 'multiple-choice';
if (quiz.questions && quiz.questions.length) {
quiz.questions.forEach((q, idx) => {
addQuestion({ questionText: q.questionText, correctAnswer: q.correctAnswer, choices: q.choices || [], qIndex: idx + 1 });
});
}
}
} else {
modalTitle.textContent = 'Add New Quiz';
editIndexInput.value = -1;
addQuestion();
}
quizModal.style.display = 'flex';
}
function addQuestion(questionData = null) {
const questionCount = questionsContainer.querySelectorAll('.question-container').length + 1;
const qText = questionData ? questionData.questionText : '';
const qAnswer = questionData ? questionData.correctAnswer : '';
const qChoices = questionData ? questionData.choices : ['', '', '', ''];
const qIndex = questionData ? questionData.qIndex : questionCount;
const questionDiv = document.createElement('div');
questionDiv.className = 'question-container';
questionDiv.innerHTML = `
<h4>Question ${qIndex}</h4>
<div class="form-group">
<label>Question Text:</label>
<input type="text" class="q-text" value="${qText}" required>
</div>
<div class="form-group">
<label>Correct Answer:</label>
<input type="text" class="q-answer" value="${qAnswer}" required>
</div>
<div class="choices-container">
<label>Choices (for multiple choice)</label>
<input type="text" class="q-choice" value="${qChoices[0] || ''}" placeholder="Choice 1">
<input type="text" class="q-choice" value="${qChoices[1] || ''}" placeholder="Choice 2">
<input type="text" class="q-choice" value="${qChoices[2] || ''}" placeholder="Choice 3">
<input type="text" class="q-choice" value="${qChoices[3] || ''}" placeholder="Choice 4">
</div>
<button type="button" class="btn" style="background:#ef4444" data-action="remove-question">Remove Question</button>
`;
questionsContainer.appendChild(questionDiv);
questionDiv.querySelector('[data-action="remove-question"]').addEventListener('click', () => {
questionDiv.remove();
const rem = questionsContainer.querySelectorAll('.question-container');
rem.forEach((r, idx) => r.querySelector('h4').textContent = `Question ${idx + 1}`);
});
}
function handleQuizSubmit(e) {
e.preventDefault();
const editIndex = Number(document.getElementById('quiz-edit-index').value);
const title = document.getElementById('quiz-title').value;
const type = document.getElementById('quiz-type').value;
const containers = questionsContainer.querySelectorAll('.question-container');
if (!title || containers.length === 0) return alert('Please provide title and at least one question.');
const questions = [];
let valid = true;
containers.forEach(c => {
const qText = c.querySelector('.q-text').value.trim();
const qAnswer = c.querySelector('.q-answer').value.trim();
if (!qText || !qAnswer) valid = false;
const q = { questionText: qText, correctAnswer: qAnswer, choices: [] };
if (type === 'multiple-choice') {
c.querySelectorAll('.q-choice').forEach(ci => { if (ci.value.trim()) q.choices.push(ci.value.trim()); });
if (q.choices.length === 0) valid = false;
}
questions.push(q);
});
if (!valid) return alert('Please fill all question fields.');
const quizzes = JSON.parse(localStorage.getItem('createdQuizzes') || '[]');
const quizData = { quizTitle: title, quizType: type, questions };
if (editIndex >= 0 && editIndex < quizzes.length) quizzes[editIndex] = quizData; else quizzes.push(quizData);
localStorage.setItem('createdQuizzes', JSON.stringify(quizzes));
quizModal.style.display = 'none';
updateDashboard();
alert('Quiz saved!');
}
// Assignments
function openAssignmentModal(editId = '') {
const assignTo = document.getElementById('assignment-assigned-to');
assignTo.innerHTML = '<option value="all">All Students</option>';
const users = getUsers();
for (const u in users) {
if (users[u].role === 'student') {
const opt = document.createElement('option');
opt.value = u;
opt.textContent = `${users[u].fullName || u} (${users[u].studentId || u})`;
assignTo.appendChild(opt);
}
}
document.getElementById('assignment-edit-id').value = editId || '';
if (editId) {
const assignments = JSON.parse(localStorage.getItem('assignments') || '[]');
const a = assignments.find(x => x.id === editId);
if (a) {
document.getElementById('assignment-title').value = a.title;
document.getElementById('assignment-desc').value = a.description;
document.getElementById('assignment-due').value = a.dueDate;
document.getElementById('assignment-assigned-to').value = a.assignedTo || 'all';
}
} else {
assignmentForm.reset();
}
assignmentModal.style.display = 'flex';
}
function handleAssignmentSubmit(e) {
e.preventDefault();
const id = document.getElementById('assignment-edit-id').value || String(Date.now());
const title = document.getElementById('assignment-title').value.trim();
const description = document.getElementById('assignment-desc').value.trim();
const assignedTo = document.getElementById('assignment-assigned-to').value;
const dueDate = document.getElementById('assignment-due').value;
if (!title || !dueDate) return alert('Please provide title and due date.');
const assignments = JSON.parse(localStorage.getItem('assignments') || '[]');
const existingIndex = assignments.findIndex(a => a.id === id);
const data = { id, title, description, assignedTo, dueDate, createdAt: new Date().toISOString() };
if (existingIndex >= 0) assignments[existingIndex] = data; else assignments.push(data);
localStorage.setItem('assignments', JSON.stringify(assignments));
assignmentModal.style.display = 'none';
updateDashboard();
alert('Assignment saved!');
}
function populateAssignmentsTable() {
const assignments = JSON.parse(localStorage.getItem('assignments') || '[]');
assignmentsTableBody.innerHTML = '';
if (assignments.length === 0) {
assignmentsTableBody.innerHTML = '<tr><td colspan="4">No assignments</td></tr>';
return;
}
const users = getUsers();
assignments.forEach((a, i) => {
const assignedToLabel = (a.assignedTo === 'all') ? 'All Students' : (users[a.assignedTo] ? users[a.assignedTo].fullName : a.assignedTo);
const row = document.createElement('tr');
row.innerHTML = `<td>${a.title}</td><td>${assignedToLabel}</td><td>${a.dueDate}</td><td class="actions"><button class="btn secondary edit-assignment" data-id="${a.id}">Edit</button><button class="btn" style="background:#ef4444" data-id="${a.id}">Delete</button></td>`;
assignmentsTableBody.appendChild(row);
});
document.querySelectorAll('.edit-assignment').forEach(btn => {
btn.addEventListener('click', (e) => openAssignmentModal(e.target.dataset.id));
});
document.querySelectorAll('#assignments-table-body button[style]').forEach(btn => {
btn.addEventListener('click', (e) => {
const id = e.target.dataset.id;
if (confirm('Delete this assignment?')) {
const assignments = JSON.parse(localStorage.getItem('assignments') || '[]');
const idx = assignments.findIndex(x => x.id === id);
if (idx >= 0) assignments.splice(idx,1);
localStorage.setItem('assignments', JSON.stringify(assignments));
updateDashboard();
}
});
});
}
function populateAssignmentSelectors() {
const assignments = JSON.parse(localStorage.getItem('assignments') || '[]');
gradesAssignmentSelect.innerHTML = '';
if (assignments.length === 0) {
const opt = document.createElement('option');
opt.value = '';
opt.textContent = 'No assignments';
gradesAssignmentSelect.appendChild(opt);
return;
}
assignments.forEach(a => {
const opt = document.createElement('option');
opt.value = a.id;
opt.textContent = `${a.title} — due ${a.dueDate}`;
gradesAssignmentSelect.appendChild(opt);
});
}
// Grades management
function openGradesModal() {
populateAssignmentSelectors();
gradesModal.style.display = 'flex';
// Auto-select first assignment if any
if (gradesAssignmentSelect.options.length > 0) {
gradesAssignmentSelect.selectedIndex = 0;
populateGradesTable();
}
}
function populateGradesTable() {
const assignmentId = gradesAssignmentSelect.value;
gradesTableBody.innerHTML = '';
if (!assignmentId) return;
const users = getUsers();
const assignments = JSON.parse(localStorage.getItem('assignments') || '[]');
const assignment = assignments.find(a => a.id === assignmentId);
if (!assignment) return;
const students = [];
for (const u in users) if (users[u].role === 'student') students.push(users[u]);
// filter if assigned to specific student
const filtered = (assignment.assignedTo === 'all') ? students : students.filter(s => s.username === assignment.assignedTo || s.username === assignment.assignedTo);
const grades = JSON.parse(localStorage.getItem('grades') || '{}');
filtered.forEach(s => {
const tr = document.createElement('tr');
const existing = (grades[s.username] && grades[s.username][assignmentId] !== undefined) ? grades[s.username][assignmentId] : '';
tr.innerHTML = `<td>${s.fullName || s.username}</td><td>${s.studentId || ''}</td><td><input type="text" data-student="${s.username}" class="grade-input" value="${existing}"></td><td><button class="btn secondary clear-grade" data-student="${s.username}">Clear</button></td>`;
gradesTableBody.appendChild(tr);
});
document.querySelectorAll('.clear-grade').forEach(b => {
b.addEventListener('click', (e) => {
const stu = e.target.dataset.student;
const input = document.querySelector(`.grade-input[data-student="${stu}"]`);
if (input) input.value = '';
});
});
}
function saveGrades() {
const assignmentId = gradesAssignmentSelect.value;
if (!assignmentId) return alert('Select assignment first.');
const inputs = document.querySelectorAll('.grade-input');
const gradesData = JSON.parse(localStorage.getItem('grades') || '{}');
inputs.forEach(inp => {
const student = inp.dataset.student;
const val = inp.value.trim();
if (!gradesData[student]) gradesData[student] = {};
if (val === '') delete gradesData[student][assignmentId];
else gradesData[student][assignmentId] = val;
});
localStorage.setItem('grades', JSON.stringify(gradesData));
alert('Grades saved.');
gradesModal.style.display = 'none';
}
// Simple edit user placeholder
function editUser(username) {
alert(`Edit user: ${username} — (not implemented full form in this prototype)`);
}