Build the CBT Home Screen
Before a student can take an exam, they need a clean, intuitive landing page where they can select the subjects they want to practice. Let's build the HTML structure for our home screen.
The HTML Structure
3.2.1Open your index.html file and add the following markup. We are creating a container that will hold a dropdown menu for subject selection and a "Start Exam" button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JAMB CBT Simulator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="homeScreen" class="screen active">
<h1>JAMB CBT Practice</h1>
<p>Select a subject to begin your mock examination.</p>
<div class="form-group">
<label for="subjectSelect">Select Subject:</label>
<select id="subjectSelect" disabled>
<option value="">Loading subjects...</option>
</select>
</div>
<button id="startBtn" disabled>Start Exam</button>
</div>
<!-- We will add the exam screen HTML later! -->
<script src="app.js"></script>
</body>
</html>Basic CSS Styling
3.2.2Open style.css and add some basic resets and utility classes. The most important class here is .screen. We will use this to toggle between the home screen and the exam screen later.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f4f7f6;
color: #333;
margin: 0;
padding: 40px;
display: flex;
justify-content: center;
}
.screen {
display: none; /* Hidden by default */
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
width: 100%;
max-width: 600px;
text-align: center;
}
.screen.active {
display: block; /* Only the active screen is shown */
}
select, button {
width: 100%;
padding: 12px;
margin-top: 12px;
border-radius: 6px;
border: 1px solid #ddd;
font-size: 16px;
}
button {
background: #007bff;
color: white;
border: none;
cursor: pointer;
font-weight: bold;
margin-top: 24px;
}
button:disabled {
background: #ccc;
cursor: not-allowed;
}Why Disabled?
3.2.3Notice that we set both the <select> and the <button> to be disabled by default in the HTML. This is because we haven't fetched the subjects from SdashAPI yet. We don't want the user clicking "Start" before the API has populated the dropdown!