When you put all this code together, all the buttons must function and you just stay in the gui of the code I gave you earlier. I need the full code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grade 8 - Section 1 Dashboard</title>
<link rel="stylesheet" href="student.css">
<style>
.section-banner {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
margin-bottom: 20px;
border-radius: 5px;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.notification-container {
position: relative;
}
.notification-btn {
background-color: #3498db;
color: white;
border: none;
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.notification-btn:hover {
background-color: #2980b9;
}
.notification-badge {
position: absolute;
top: -5px;
right: -5px;
background-color: #e74c3c;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
}
.notification-dropdown {
position: absolute;
right: 0;
top: 100%;
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
width: 300px;
padding: 10px;
z-index: 100;
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="section-banner">
<h1>Grade 8 - Section 1 Dashboard</h1>
</div>
<div class="header-container">
<h1>Student Dashboard</h1>
<div class="notification-container">
<button id="notificationBtn" class="notification-btn">
<span>Notifications</span>
</button>
<div id="notificationBadge" class="notification-badge" style="display: none;">0</div>
<div id="notificationDropdown" class="notification-dropdown">
<p>No new notifications.</p>
</div>
</div>
</div>
<!-- Quiz Completion Status Message -->
<div id="quiz-completion-status" class="completion-notice hidden">
<p>Please complete all available quizzes to view your performance analytics.</p>
</div>
<!-- Display Created Lessons -->
<section id="lessons-section">
<h2>Available Lessons</h2>
<div id="createdLessons">
<p>Loading lessons...</p>
</div>
</section>
<!-- Display Created Quizzes -->
<section id="quizzes-section">
<h2>Available Quizzes</h2>
<div id="createdQuizzes">
<p>Loading quizzes...</p>
</div>
</section>
<!-- Display Created Assignments -->
<section id="assignments-section">
<h2>Available Assignments</h2>
<div id="createdAssignments">
<p>Loading assignments...</p>
</div>
</section>
<!-- Performance Analytics Button -->
<button id="analyticsBtn" class="analytics-btn" enabled>View Performance & Analytics</button>
<!-- Performance Analytics Modal -->
<div id="analyticsModal" class="modal">
<div class="modal-content">
<h2>Performance & Analytics</h2>
<div class="analytics-section">
<h3>Activity</h3>
<p><strong>Last Accessed:</strong> <span id="lastAccessed">N/A</span></p>
</div>
<div class="analytics-section">
<h3>Lesson Progress</h3>
<ul id="lessonProgressList">
<li>Loading lesson status...</li>
</ul>
</div>
<div class="analytics-section">
<h3>Quiz Scores</h3>
<ul id="quizScoresList">
<li>No quizzes taken yet.</li>
</ul>
</div>
<div class="analytics-section">
<h3>Assignment Status</h3>
<ul id="assignmentStatusList">
<li>No assignments yet.</li>
</ul>
</div>
<div class="analytics-section">
<h3>Overall Grade</h3>
<p><strong id="overallGrade">N/A</strong></p>
</div>
<div class="modal-navigation">
<button id="modalDashboardBtn" class="modal-nav-btn dashboard">Back to Dashboard</button>
<button id="modalHomeBtn" class="modal-nav-btn home">Homepage</button>
<button id="modalLogoutBtn" class="modal-nav-btn logout">Logout</button>
</div>
</div>
</div>
</div>
<script>
// JavaScript to handle the notification button functionality
document.addEventListener("DOMContentLoaded", function() {
const notificationBtn = document.getElementById("notificationBtn");
const notificationDropdown = document.getElementById("notificationDropdown");
notificationBtn.addEventListener("click", function() {
// Toggle the visibility of the notification dropdown
if (notificationDropdown.style.display === "none" || notificationDropdown.style.display === "") {
notificationDropdown.style.display = "block";
} else {
notificationDropdown.style.display = "none";
}
});
// Optional: Close dropdown if clicked outside
document.addEventListener("click", function(event) {
if (!notificationBtn.contains(event.target) && !notificationDropdown.contains(event.target)) {
notificationDropdown.style.display = "none";
}
});
});
</script>
<script src="login.js"></script>
<script src="student.js"></script>
</body>
</html>
and this is what you will put in the first code above it