Guide 3.16: Real Projects
Add Year Selection
Sometimes students don't want a randomized test covering two decades of questions. They want to sit down and take the exact JAMB exam from a specific year, like 2018. Let's add a year filter to our home screen.
Updating the API Call
3.16.1We need to dynamically fetch the available years from SdashAPI so we aren't hardcoding values. Add this to your app.js initialization logic.
async function loadYears() {
const yearSelect = document.getElementById('yearSelect');
try {
const response = await fetch(`${API_BASE}/years`, {
headers: { 'AccessToken': API_KEY }
});
const data = await response.json();
// Default option for "Random / Mixed Years"
yearSelect.innerHTML = '<option value="random">Random (All Years)</option>';
data.data.forEach(year => {
const option = document.createElement('option');
option.value = year;
option.textContent = year;
yearSelect.appendChild(option);
});
} catch (err) {
console.error("Failed to load years", err);
}
}
// Call it alongside loadSubjects()
loadYears();Modifying the Fetch URL
3.16.2When the Start Exam button is clicked, we need to check if the user selected a specific year, and if so, append it to our API query string.
// Inside the startBtn click listener
const selectedYear = document.getElementById('yearSelect').value;
const selectedSlug = "physics"; // Example from earlier
// Start building the URL
let fetchUrl = `${API_BASE}/q?subject=${selectedSlug}&type=utme&limit=40`;
// Append the year filter ONLY if they didn't select "Random"
if (selectedYear !== 'random') {
fetchUrl += `&year=${selectedYear}`;
}
const response = await fetch(fetchUrl, { headers });
// ... continue with exam startup