Index HTML
Index HTML
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elective Mathematics - Year 1, Section 1</title>
<style>
/* Basic Styles */
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color:
#f4f4f4; }
header { background-color: #333; color: white; padding: 10px 0; text-align:
center; }
nav { background-color: #333; padding: 10px; color: white; }
nav ul { list-style-type: none; padding: 0; }
nav ul li { display: inline; margin-right: 15px; }
nav ul li a { color: white; text-decoration: none; }
main { padding: 20px; }
.tab { margin-top: 20px; }
.tab button { padding: 10px; background-color: #333; color: white; border:
none; cursor: pointer; }
.tab button:hover { background-color: #555; }
.tab-content { display: none; margin-top: 10px; padding: 15px; background-
color: white; border-radius: 5px; }
.active { display: block; }
</style>
<script>
function toggleTab(tabName) {
var i, tabContent, tabButtons;
tabContent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabContent.length; i++) {
tabContent[i].classList.remove("active");
}
tabButtons = document.getElementsByClassName("tab-button");
for (i = 0; i < tabButtons.length; i++) {
tabButtons[i].classList.remove("active");
}
document.getElementById(tabName).classList.add("active");
document.querySelector("[data-tab='" + tabName +
"']").classList.add("active");
}
</script>
</head>
<body>
<header>
<h1>Elective Mathematics - Year 1, Section 1</h1>
</header>
<nav>
<ul>
<li><a href="javascript:void(0);" class="tab-button" data-tab="content"
onclick="toggleTab('content')">Content</a></li>
<li><a href="javascript:void(0);" class="tab-button" data-tab="worksolutions"
onclick="toggleTab('worksolutions')">Work Solutions</a></li>
<li><a href="javascript:void(0);" class="tab-button" data-tab="quiz"
onclick="toggleTab('quiz')">Quiz</a></li>
<li><a href="javascript:void(0);" class="tab-button" data-tab="laboratory"
onclick="toggleTab('laboratory')">Laboratory</a></li>
<li><a href="javascript:void(0);" class="tab-button" data-tab="resources"
onclick="toggleTab('resources')">Resources</a></li>
<li><a href="javascript:void(0);" class="tab-button" data-tab="projects"
onclick="toggleTab('projects')">Projects</a></li>
<li><a href="javascript:void(0);" class="tab-button" data-tab="dictionary"
onclick="toggleTab('dictionary')">Dictionary</a></li>
</ul>
</nav>
<main>
<div id="content" class="tab-content active">
<h2>Content: Introduction to Algebra</h2>
<p>In this section, we will cover the basics of algebra including variables,
constants, expressions, and the principles of solving linear equations and
inequalities.</p>
<p>Algebra is a branch of mathematics that deals with variables and constants
in mathematical expressions and equations.</p>
<!-- Additional content here -->
</div>