I'll help you add the functionality to track assignment submissions and display student names. Here's the updated code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teacher Dashboard</title>
<link rel="stylesheet" href="teacher.css">
</head>
<body>
<div class="navbar">
<h1>Teacher Dashboard</h1>
</div>
<div class="container">
<div class="button-container">
<button class="btn" id="createLessonBtn">Create Lesson</button>
<button class="btn" id="createQuizBtn">Make Quiz</button>
<button class="btn" id="manageScoresBtn">Manage Scores & Grade</button>
<button class="btn" id="deleteLessonBtn">Delete Lesson</button>
<button class="btn" id="deleteQuizBtn">Delete Quiz</button>
<button class="btn" id="createAssignmentBtn">Create Assignment</button>
<button class="btn" id="deleteAssignmentBtn">Delete Assignment</button>
<button class="btn" id="viewSubmissionsBtn">View Submissions</button>
</div>
<div id="submissionsSection" style="display: none;">
<h3>Assignment Submissions</h3>
<div id="submissionsList">
<p>No submissions yet.</p>
</div>
</div>
<!-- Previous content remains the same -->
</div>
<!-- Submissions Modal -->
<div id="submissionsModal" class="modal">
<div class="modal-content">
<span class="close" data-modal-id="submissionsModal">×</span>
<h2>Assignment Submissions</h2>
<div id="submissionDetails">
<table>
<thead>
<tr>
<th>Student</th>
<th>Submission Date</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody id="submissionTableBody">
<!-- Submission data will be added here -->
</tbody>
</table>
</div>
</div>
</div>
<!-- Previous modal content remains the same -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Previous code remains the same until the event listeners section
// Add new event listener for view submissions button
document.getElementById('viewSubmissionsBtn').addEventListener('click', function() {
displaySubmissions();
document.getElementById('submissionsSection').style.display = 'block';
openModal(document.getElementById('submissionsModal'));
});
// New function to display submissions
function displaySubmissions() {
const submissions = JSON.parse(localStorage.getItem('assignmentSubmissions') || '[]');
const submissionTableBody = document.getElementById('submissionTableBody');
submissionTableBody.innerHTML = '';
if (submissions.length === 0) {
submissionTableBody.innerHTML = '<tr><td colspan="4">No submissions yet</td></tr>';
return;
}
submissions.forEach(submission => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${submission.studentName}</td>
<td>${new Date(submission.submissionDate).toLocaleString()}</td>
<td>${submission.status || 'Submitted'}</td>
<td>
<button class="btn" onclick="viewSubmissionDetails('${submission.id}')">View</button>
<button class="btn" onclick="gradeSubmission('${submission.id}')">Grade</button>
</td>
`;
submissionTableBody.appendChild(row);
});
}
// New function to view submission details
window.viewSubmissionDetails = function(submissionId) {
const submissions = JSON.parse(localStorage.getItem('assignmentSubmissions') || '[]');
const submission = submissions.find(s => s.id === submissionId);
if (submission) {
alert(`Submission Details:\nStudent: ${submission.studentName}\
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teacher Dashboard</title>
<link rel="stylesheet" href="teacher.css">
</head>
<body>
<div class="navbar">
<h1>Teacher Dashboard</h1>
</div>
<div class="container">
<div class="button-container">
<button class="btn" id="createLessonBtn">Create Lesson</button>
<button class="btn" id="createQuizBtn">Make Quiz</button>
<button class="btn" id="manageScoresBtn">Manage Scores & Grade</button>
<button class="btn" id="deleteLessonBtn">Delete Lesson</button>
<button class="btn" id="deleteQuizBtn">Delete Quiz</button>
<button class="btn" id="createAssignmentBtn">Create Assignment</button>
<button class="btn" id="deleteAssignmentBtn">Delete Assignment</button>
<button class="btn" id="viewSubmissionsBtn">View Submissions</button>
</div>
<div id="submissionsSection" style="display: none;">
<h3>Assignment Submissions</h3>
<div id="submissionsList">
<p>No submissions yet.</p>
</div>
</div>
<!-- Previous content remains the same -->
</div>
<!-- Submissions Modal -->
<div id="submissionsModal" class="modal">
<div class="modal-content">
<span class="close" data-modal-id="submissionsModal">×</span>
<h2>Assignment Submissions</h2>
<div id="submissionDetails">
<table>
<thead>
<tr>
<th>Student</th>
<th>Submission Date</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody id="submissionTableBody">
<!-- Submission data will be added here -->
</tbody>
</table>
</div>
</div>
</div>
<!-- Previous modal content remains the same -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Previous code remains the same until the event listeners section
// Add new event listener for view submissions button
document.getElementById('viewSubmissionsBtn').addEventListener('click', function() {
displaySubmissions();
document.getElementById('submissionsSection').style.display = 'block';
openModal(document.getElementById('submissionsModal'));
});
// New function to display submissions
function displaySubmissions() {
const submissions = JSON.parse(localStorage.getItem('assignmentSubmissions') || '[]');
const submissionTableBody = document.getElementById('submissionTableBody');
submissionTableBody.innerHTML = '';
if (submissions.length === 0) {
submissionTableBody.innerHTML = '<tr><td colspan="4">No submissions yet</td></tr>';
return;
}
submissions.forEach(submission => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${submission.studentName}</td>
<td>${new Date(submission.submissionDate).toLocaleString()}</td>
<td>${submission.status || 'Submitted'}</td>
<td>
<button class="btn" onclick="viewSubmissionDetails('${submission.id}')">View</button>
<button class="btn" onclick="gradeSubmission('${submission.id}')">Grade</button>
</td>
`;
submissionTableBody.appendChild(row);
});
}
// New function to view submission details
window.viewSubmissionDetails = function(submissionId) {
const submissions = JSON.parse(localStorage.getItem('assignmentSubmissions') || '[]');
const submission = submissions.find(s => s.id === submissionId);
if (submission) {
alert(`Submission Details:\nStudent: ${submission.studentName}\
Here's the complete implementation for the assignment submission tracking feature:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teacher Dashboard</title>
<link rel="stylesheet" href="teacher.css">
</head>
<body>
<div class="navbar">
<h1>Teacher Dashboard</h1>
</div>
<div class="container">
<div class="button-container">
<button class="btn" id="createLessonBtn">Create Lesson</button>
<button class="btn" id="createQuizBtn">Make Quiz</button>
<button class="btn" id="manageScoresBtn">Manage Scores & Grades</button>
<button class="btn" id="deleteLessonBtn">Delete Lesson</button>
<button class="btn" id="deleteQuizBtn">Delete Quiz</button>
<button class="btn" id="createAssignmentBtn">Create Assignment</button>
<button class="btn" id="deleteAssignmentBtn">Delete Assignment</button>
<button class="btn" id="viewSubmissionsBtn">Assignment Respondents</button>
</div>
<h3>Created Lessons</h3>
<div id="createdLessons"></div>
<h3>Created Quizzes</h3>
<div id="createdQuizzes"></div>
<h3>Created Assignments</h3>
<div id="createdAssignments"></div>
</div>
<!-- Submissions Modal -->
<div id="submissionsModal" class="modal">
<div class="modal-content large">
<span class="close" data-modal-id="submissionsModal">×</span>
<h2>Assignment Respondents</h2>
<div class="submission-controls">
<label for="assignmentSelect">Select Assignment:</label>
<select id="assignmentSelect">
<option value="">-- Select Assignment --</option>
</select>
</div>
<div id="submissionDetails">
<table class="submission-table">
<thead>
<tr>
<th>Student Name</th>
<th>Submission Date</th>
<th>Status</th>
</tr>
</thead>
<tbody id="submissionTableBody">
<tr>
<td colspan="3">Select an assignment to view submissions</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Previous modals remain unchanged -->
<script src="login.js"></script>
<script src="teacher.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teacher Dashboard</title>
<link rel="stylesheet" href="teacher.css">
</head>
<body>
<div class="navbar">
<h1>Teacher Dashboard</h1>
</div>
<div class="container">
<div class="button-container">
<button class="btn" id="createLessonBtn">Create Lesson</button>
<button class="btn" id="createQuizBtn">Make Quiz</button>
<button class="btn" id="manageScoresBtn">Manage Scores & Grades</button>
<button class="btn" id="deleteLessonBtn">Delete Lesson</button>
<button class="btn" id="deleteQuizBtn">Delete Quiz</button>
<button class="btn" id="createAssignmentBtn">Create Assignment</button>
<button class="btn" id="deleteAssignmentBtn">Delete Assignment</button>
<button class="btn" id="viewSubmissionsBtn">Assignment Respondents</button>
</div>
<h3>Created Lessons</h3>
<div id="createdLessons"></div>
<h3>Created Quizzes</h3>
<div id="createdQuizzes"></div>
<h3>Created Assignments</h3>
<div id="createdAssignments"></div>
</div>
<!-- Submissions Modal -->
<div id="submissionsModal" class="modal">
<div class="modal-content large">
<span class="close" data-modal-id="submissionsModal">×</span>
<h2>Assignment Respondents</h2>
<div class="submission-controls">
<label for="assignmentSelect">Select Assignment:</label>
<select id="assignmentSelect">
<option value="">-- Select Assignment --</option>
</select>
</div>
<div id="submissionDetails">
<table class="submission-table">
<thead>
<tr>
<th>Student Name</th>
<th>Submission Date</th>
<th>Status</th>
</tr>
</thead>
<tbody id="submissionTableBody">
<tr>
<td colspan="3">Select an assignment to view submissions</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Previous modals remain unchanged -->
<script src="login.js"></script>
<script src="teacher.js"></script>
</body>
</html>
And here's the JavaScript code to add to teacher.js:
// Add this to the existing teacher.js code, typically near the other modal setup code
// DOM Elements for submissions
const viewSubmissionsBtn = document.getElementById('viewSubmissionsBtn');
const submissionsModal = document.getElementById('submissionsModal');
const assignmentSelect = document.getElementById('assignmentSelect');
const submissionTableBody = document.getElementById('submissionTableBody');
// Event Listeners
viewSubmissionsBtn.addEventListener('click', () => {
populateAssignmentSelect();
openModal(submissionsModal);
});
assignmentSelect.addEventListener('change', displayAssignmentSubmissions);
// Function to populate assignment dropdown
function populateAssignmentSelect() {
const assignments = getData(storageKeys.assignments);
assignmentSelect.innerHTML = '<option value="">-- Select Assignment --</option>';
assignments.forEach((assignment, index) => {
const option = document.createElement('option');
option.value = index;
option.textContent = assignment.title;
assignmentSelect.appendChild(option);
});
}
// Function to display submissions for selected assignment
function displayAssignmentSubmissions() {
const selectedIndex = assignmentSelect.value;
if (selectedIndex === "") {
submissionTableBody.innerHTML = '<tr><td colspan="3">Select an assignment to view submissions</td></tr>';
return;
}
const assignments = getData(storageKeys.assignments);
const selectedAssignment = assignments[selectedIndex];
const submissions = getData('assignmentSubmissions') || [];
// Filter submissions for this assignment
const assignmentSubmissions = submissions.filter(
sub => sub.assignmentId === selectedAssignment.title
);
if (assignmentSubmissions.length === 0) {
submissionTableBody.innerHTML = '<tr><td colspan="3">No submissions for this assignment yet</td></tr>';
return;
}
submissionTableBody.innerHTML = '';
assignmentSubmissions.forEach(submission => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${submission.studentName}</td>
<td>${new Date(submission.submissionDate).toLocaleString()}</td>
<td>${submission.status || 'Submitted'}</td>
`;
submissionTableBody.appendChild(row);
});
}
// Add this to the existing storageKeys object
storageKeys.submissions = 'assignmentSubmissions';
// Add this CSS to teacher.css (or create it if it doesn't exist)
/*
.submission-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.submission-table th, .submission-table td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
.submission-table th {
background-color: #f2f2f2;
}
.submission-controls {
margin-bottom: 20px;
}
.submission-controls select {
padding: 8px;
margin-left: 10px;
min-width: 200px;
}
*/
// Add this to the existing teacher.js code, typically near the other modal setup code
// DOM Elements for submissions
const viewSubmissionsBtn = document.getElementById('viewSubmissionsBtn');
const submissionsModal = document.getElementById('submissionsModal');
const assignmentSelect = document.getElementById('assignmentSelect');
const submissionTableBody = document.getElementById('submissionTableBody');
// Event Listeners
viewSubmissionsBtn.addEventListener('click', () => {
populateAssignmentSelect();
openModal(submissionsModal);
});
assignmentSelect.addEventListener('change', displayAssignmentSubmissions);
// Function to populate assignment dropdown
function populateAssignmentSelect() {
const assignments = getData(storageKeys.assignments);
assignmentSelect.innerHTML = '<option value="">-- Select Assignment --</option>';
assignments.forEach((assignment, index) => {
const option = document.createElement('option');
option.value = index;
option.textContent = assignment.title;
assignmentSelect.appendChild(option);
});
}
// Function to display submissions for selected assignment
function displayAssignmentSubmissions() {
const selectedIndex = assignmentSelect.value;
if (selectedIndex === "") {
submissionTableBody.innerHTML = '<tr><td colspan="3">Select an assignment to view submissions</td></tr>';
return;
}
const assignments = getData(storageKeys.assignments);
const selectedAssignment = assignments[selectedIndex];
const submissions = getData('assignmentSubmissions') || [];
// Filter submissions for this assignment
const assignmentSubmissions = submissions.filter(
sub => sub.assignmentId === selectedAssignment.title
);
if (assignmentSubmissions.length === 0) {
submissionTableBody.innerHTML = '<tr><td colspan="3">No submissions for this assignment yet</td></tr>';
return;
}
submissionTableBody.innerHTML = '';
assignmentSubmissions.forEach(submission => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${submission.studentName}</td>
<td>${new Date(submission.submissionDate).toLocaleString()}</td>
<td>${submission.status || 'Submitted'}</td>
`;
submissionTableBody.appendChild(row);
});
}
// Add this to the existing storageKeys object
storageKeys.submissions = 'assignmentSubmissions';
// Add this CSS to teacher.css (or create it if it doesn't exist)
/*
.submission-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.submission-table th, .submission-table td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
.submission-table th {
background-color: #f2f2f2;
}
.submission-controls {
margin-bottom: 20px;
}
.submission-controls select {
padding: 8px;
margin-left: 10px;
min-width: 200px;
}
*/
This implementation:
The code assumes that when students submit assignments, their submissions are recorded in localStorage with the following structure:
{
assignmentId: "Assignment Title",
studentName: "Student Name",
submissionDate: "ISO Date String",
status: "Submitted" // or "Graded", etc.
}
{
assignmentId: "Assignment Title",
studentName: "Student Name",
submissionDate: "ISO Date String",
status: "Submitted" // or "Graded", etc.
}