`;
explanationArea.innerHTML = explanationHTML;
explanationArea.style.display = "block";
}
// Audio read question button
function readCurrentQuestion() {
if (quizFinished) return;
const q = QUESTIONS[currentQuestionIndex];
const fullText = `Question: ${q.text}. ${q.objects} Choose the correct number.`;
speakText(fullText, 0.9, 1.05);
}
// Timer
function startTimer() {
if (timerInterval) clearInterval(timerInterval);
timerInterval = setInterval(() => {
if (!quizFinished) {
timerSeconds++;
const mins = Math.floor(timerSeconds / 60);
const secs = timerSeconds % 60;
timerDisplaySpan.innerText = `${mins.toString().padStart(2,'0')}:${secs.toString().padStart(2,'0')}`;
}
}, 1000);
}
// Number Chart 1-20 with speech synthesis
function buildNumberChart() {
numberGridDiv.innerHTML = "";
for (let i = 1; i <= 20; i++) {
const numDiv = document.createElement("div");
numDiv.classList.add("num-card");
numDiv.innerText = i;
numDiv.addEventListener("click", (e) => {
e.stopPropagation();
const numberName = i === 1 ? "one" : i===2?"two":i===3?"three":i===4?"four":i===5?"five":i===6?"six":i===7?"seven":i===8?"eight":i===9?"nine":i===10?"ten":i===11?"eleven":i===12?"twelve":i===13?"thirteen":i===14?"fourteen":i===15?"fifteen":i===16?"sixteen":i===17?"seventeen":i===18?"eighteen":i===19?"nineteen":"twenty";
speakText(`${numberName}`, 0.9, 1.1);
});
numberGridDiv.appendChild(numDiv);
}
}
// Learn example toggle
learnExampleBtn.addEventListener("click", () => {
exampleSection.classList.toggle("show");
});
// Event listeners
submitBtn.addEventListener("click", handleSubmit);
resetQuestionBtn.addEventListener("click", resetCurrentSelection);
audioReadBtn.addEventListener("click", readCurrentQuestion);
// Initialization
function initQuiz() {
buildNumberChart();
startTimer();
currentQuestionIndex = 0;
loadQuestion();
updateStats();
quizFinished = false;
// reset explanation area
explanationArea.style.display = "none";
explanationArea.innerHTML = "";
//reset user answers if needed
userAnswers = new Array(TOTAL_QS).fill(null);
answeredStatus = new Array(TOTAL_QS).fill(false);
marksEarned = 0;
selectedOptionValue = null;
updateStats();
if (timerInterval) clearInterval(timerInterval);
timerSeconds = 0;
timerDisplaySpan.innerText = "00:00";
startTimer();
}
initQuiz();
