Guide 3.15: Real Projects
Advanced Subject Selection
In a real JAMB UTME exam, students don't just take one subject. They are required to take four subjects simultaneously (English Language is compulsory, plus three others). Let's upgrade our Home Screen to support multi-subject selection.
Updating the HTML UI
3.15.1Replace the single <select> element on the Home Screen with a grid of checkboxes. This provides a much better user experience than a multi-select dropdown.
<!-- In index.html -->
<div class="form-group">
<p>English Language (Compulsory)</p>
<input type="hidden" id="englishSlug" value="english">
<label>Select 3 other subjects:</label>
<div id="subjectCheckboxGrid" style="display: grid; grid-template-columns: 1fr 1fr; text-align: left; gap: 8px; margin-top: 12px;">
<!-- Checkboxes injected here -->
</div>
</div>Populating Checkboxes
3.15.2Update your loadSubjects() function to generate checkboxes instead of options. Be sure to filter out "English" from the API response since it is already compulsory.
const grid = document.getElementById('subjectCheckboxGrid');
grid.innerHTML = ''; // Clear loading text
data.data.forEach(subject => {
// Skip english as it's mandatory
if (subject.slug === 'english') return;
const label = document.createElement('label');
label.innerHTML = `
<input type="checkbox" name="jamb_subjects" value="${subject.slug}">
${subject.name}
`;
grid.appendChild(label);
});Enforcing the 3-Subject Limit
3.15.3We must use Event Delegation to prevent the user from selecting more than 3 elective subjects. If they check a 4th, we uncheck it and alert them.
grid.addEventListener('change', (e) => {
if (e.target.type === 'checkbox') {
const checkedBoxes = document.querySelectorAll('input[name="jamb_subjects"]:checked');
if (checkedBoxes.length > 3) {
e.target.checked = false; // Undo the click
alert("You can only select a maximum of 3 elective subjects!");
}
// Enable start button only if exactly 3 are chosen
document.getElementById('startBtn').disabled = (checkedBoxes.length !== 3);
}
});