connect this code:
// User Management Functions
function loadAllUsers() {
// Simulated data - in a real app, this would come from an API
const users = [
{ id: 1, username: 'admin1', role: 'admin', fullName: 'Admin User', idNumber: 'ADM001', lastActive: '2023-05-15' },
{ id: 2, username: 'teacher1', role: 'teacher', fullName: 'John Smith', idNumber: 'TCH001', lastActive: '2023-05-14' },
{ id: 3, username: 'student1', role: 'student', fullName: 'Alice Johnson', idNumber: 'STU001', lastActive: '2023-05-15' },
{ id: 4, username: 'parent1', role: 'parent', fullName: 'Bob Williams', idNumber: 'PRT001', lastActive: '2023-05-13' }
];
const tbody = document.getElementById('users-tbody');
tbody.innerHTML = '';
users.forEach(user => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${user.username}</td>
<td>${user.role}</td>
<td>${user.fullName}</td>
<td>${user.idNumber}</td>
<td>${user.lastActive}</td>
<td>
<button class="btn view-user" data-id="${user.id}">View</button>
<button class="btn delete-user" data-id="${user.id}">Delete</button>
</td>
`;
tbody.appendChild(row);
});
// Add event listeners for delete buttons
document.querySelectorAll('.delete-user').forEach(btn => {
btn.addEventListener('click', function() {
const userId = this.getAttribute('data-id');
showConfirmModal(
'Delete User',
`Are you sure you want to delete user ID ${userId}?`,
() => deleteUser(userId)
);
});
});
}
function deleteUser(userId) {
// In a real app, this would call an API to delete the user
console.log(`Deleting user with ID: ${userId}`);
showAlert('User deleted successfully');
loadAllUsers(); // Refresh the user list
}
// Content Management Functions
function loadLessons() {
const lessons = [
{ id: 1, title: 'Introduction to Algebra', content: 'Basic algebraic concepts...', attachment: 'algebra.pdf', date: '2023-05-10' },
{ id: 2, title: 'History of Science', content: 'Important scientific discoveries...', attachment: 'science_history.pdf', date: '2023-05-12' }
];
const tbody = document.getElementById('lessons-tbody');
tbody.innerHTML = '';
lessons.forEach(lesson => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${lesson.title}</td>
<td>${lesson.content.substring(0, 30)}...</td>
<td>${lesson.attachment}</td>
<td>${lesson.date}</td>
<td>
<button class="btn edit-lesson" data-id="${lesson.id}">Edit</button>
<button class="btn delete-lesson" data-id="${lesson.id}">Delete</button>
</td>
`;
tbody.appendChild(row);
});
}
function loadQuizzes() {
const quizzes = [
{ id: 1, title: 'Math Quiz 1', type: 'multiple-choice', questions: 10, date: '2023-05-11' },
{ id: 2, title: 'Science Quiz 1', type: 'identification', questions: 5, date: '2023-05-13' }
];
const tbody = document.getElementById('quizzes-tbody');
tbody.innerHTML = '';
quizzes.forEach(quiz => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${quiz.title}</td>
<td>${quiz.type}</td>
<td>${quiz.questions}</td>
<td>${quiz.date}</td>
<td>
<button class="btn edit-quiz" data-id="${quiz.id}">Edit</button>
<button class="btn delete-quiz" data-id="${quiz.id}">Delete</button>
</td>
`;
tbody.appendChild(row);
});
}
// Analytics Functions
function loadAnalytics() {
const students = [
{ id: 1, name: 'Alice Johnson', progress: 85, quizzesTaken: 5 },
{ id: 2, name: 'Bob Smith', progress: 72, quizzesTaken: 4 },
{ id: 3, name: 'Charlie Brown', progress: 90, quizzesTaken: 6 }
];
const tbody = document.querySelector('#top-performers-table tbody');
tbody.innerHTML = '';
students.forEach(student => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${student.name}</td>
<td>${student.progress}%</td>
<td>${student.quizzesTaken}</td>
`;
tbody.appendChild(row);
});
// Update system statistics
document.getElementById('system-statistics').innerHTML = `
<p>Active users today: ${students.length}</p>
<p>Lessons accessed: 24</p>
<p>Quizzes completed: 15</p>
`;
}
// Utility Functions
function showConfirmModal(title, message, confirmCallback) {
document.getElementById('confirm-title').textContent = title;
document.getElementById('confirm-message').textContent = message;
const modal = document.getElementById('confirm-modal');
modal.style.display = 'block';
document.getElementById('confirm-yes').onclick = function() {
confirmCallback();
modal.style.display = 'none';
};
document.getElementById('confirm-no').onclick = function() {
modal.style.display = 'none';
};
}
function showAlert(message) {
alert(message); // In a real app, you'd use a nicer notification system
}
// Event Listeners
document.addEventListener('DOMContentLoaded', function() {
// Load initial data
loadAllUsers();
loadLessons();
loadQuizzes();
loadAnalytics();
// Section switching
document.querySelectorAll('.menu a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const section = this.getAttribute('data-section');
showSection(section);
});
});
// Tab switching
document.querySelectorAll('.tab-button').forEach(button => {
button.addEventListener('click', function() {
const tabId = this.getAttribute('data-tab');
const tabContainer = this.closest('.user-management-tabs, .content-tabs');
// Update active tab button
tabContainer.querySelectorAll('.tab-button').forEach(btn => {
btn.classList.remove('active');
});
this.classList.add('active');
// Update active tab content
const tabContents = tabContainer.nextElementSibling.querySelectorAll('.tab-content');
tabContents.forEach(content => {
content.classList.remove('active');
if (content.id === tabId) {
content.classList.add('active');
}
});
});
});
// Modal close buttons
document.querySelectorAll('.modal .close').forEach(btn => {
btn.addEventListener('click', function() {
this.closest('.modal').style.display = 'none';
});
});
// Add lesson button
document.getElementById('add-lesson-btn').addEventListener('click', function() {
document.getElementById('lesson-modal').style.display = 'block';
});
// Add quiz button
document.getElementById('add-quiz-btn').addEventListener('click', function() {
document.getElementById('quiz-modal').style.display = 'block';
});
});
function showSection(sectionId) {
// Update active menu item
document.querySelectorAll('.menu li').forEach(item => {
item.classList.remove('active');
if (item.querySelector('a').getAttribute('data-section') === sectionId) {
item.classList.add('active');
}
});
// Show the selected section
document.querySelectorAll('.section').forEach(section => {
section.classList.remove('active');
if (section.id === `${sectionId}-section`) {
section.classList.add('active');
}
});
}