`;
explanationArea.innerHTML = explanationHTML;
explanationArea.style.display = "block";
}
function readCurrentQuestionAloud() {
if (quizFinished) return;
const q = QUESTIONS[currentQuestionIndex];
const readText = `${q.text}. The objects: ${q.objectsHtml.replace(/ /g, ' ')}. Choose the correct order.`;
speakText(readText, 0.9, 1.05);
}
// Build Number Chart 1-20 with touch sound
function buildNumberChart() {
numberGridDiv.innerHTML = "";
for (let i = 1; i <= 20; i++) {
const numDiv = document.createElement("div");
numDiv.classList.add("num-card");
numDiv.innerText = i;
// number names for speech
const numberWord = (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");
numDiv.addEventListener("click", () => {
speakText(numberWord, 0.9, 1.0);
});
numberGridDiv.appendChild(numDiv);
}
}
// 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);
}
// Learn Example toggle
learnExampleBtn.addEventListener("click", () => {
exampleSection.classList.toggle("show");
});
// Event Binding
submitBtn.addEventListener("click", handleSubmit);
resetQuestionBtn.addEventListener("click", resetCurrentSelection);
audioReadBtn.addEventListener("click", readCurrentQuestionAloud);
// Initialize everything
function initQuiz() {
buildNumberChart();
startTimer();
currentQuestionIndex = 0;
userAnswers = new Array(TOTAL_QS).fill(null);
answeredStatus = new Array(TOTAL_QS).fill(false);
marksEarned = 0;
quizFinished = false;
selectedOptionValue = null;
updateStats();
explanationArea.style.display = "none";
explanationArea.innerHTML = "";
loadCurrentQuestion();
submitBtn.disabled = false;
resetQuestionBtn.disabled = false;
}
initQuiz();
