Correct!

`; } else { selectedBtn.classList.add('incorrect'); feedbackArea.innerHTML = `

Incorrect. The correct answer is ${correctAnswer}.

`; } userAnswers.push({ question: questions[currentQuestionIndex].question, selected: answer, correct: correctAnswer, isCorrect: answer === correctAnswer }); scoreCounter.textContent = `Score: ${score}`; nextBtn.classList.remove('hidden'); if (currentQuestionIndex === questions.length - 1) { nextBtn.textContent = 'Show Results'; } else { nextBtn.textContent = 'Next Question'; } } function showNextQuestion() { currentQuestionIndex++; if (currentQuestionIndex < questions.length) { showQuestion(); } else { showResults(); } } function showResults() { quizScreen.classList.add('hidden'); resultsScreen.classList.remove('hidden'); finalScoreEl.textContent = `${score} / ${questions.length}`; const percentage = (score / questions.length) * 100; let feedbackText = ''; if (percentage >= 90) feedbackText = "Excellent! You're a geology expert!"; else if (percentage >= 70) feedbackText = "Great job! You know your rocks."; else if (percentage >= 50) feedbackText = "Good effort! A little more practice will help."; else feedbackText = "Keep studying! You'll get there."; scoreFeedbackEl.textContent = feedbackText; // Populate summary summaryList.innerHTML = ''; userAnswers.forEach((ua, index) => { const item = document.createElement('div'); item.className = 'p-4 border rounded-lg'; item.innerHTML = `

${index + 1}. ${ua.question}

Your answer: ${ua.selected} ${!ua.isCorrect ? ` | Correct answer: ${ua.correct}` : ''}

`; summaryList.appendChild(item); }); } async function downloadPDF() { if (typeof window.jspdf === 'undefined' || typeof window.html2canvas === 'undefined') { alert("PDF generation library not loaded. Please check connection."); return; } pdfLoader.classList.remove('hidden'); pdfDownloadBtn.disabled = true; restartBtn.disabled = true; try { const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const elementToCapture = document.getElementById('results-summary'); pdf.setFontSize(22); pdf.setFont('helvetica', 'bold'); pdf.text('Rock Identification Quiz Results', 105, 20, { align: 'center' }); pdf.setFontSize(16); pdf.setFont('helvetica', 'normal'); pdf.text(`Final Score: ${score} / ${questions.length}`, 105, 30, { align: 'center' }); const canvas = await html2canvas(elementToCapture, { scale: 2 }); const imgData = canvas.toDataURL('image/png'); const imgProps = pdf.getImageProperties(imgData); const pdfWidth = pdf.internal.pageSize.getWidth() - 20; // with margin const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; pdf.addImage(imgData, 'PNG', 10, 40, pdfWidth, pdfHeight); pdf.save('rock-quiz-results.pdf'); } catch (error) { console.error("PDF Generation Error:", error); alert("Sorry, an error occurred while generating the PDF."); } finally { pdfLoader.classList.add('hidden'); pdfDownloadBtn.disabled = false; restartBtn.disabled = false; } } // --- EVENT LISTENERS --- startBtn.addEventListener('click', startQuiz); nextBtn.addEventListener('click', showNextQuestion); restartBtn.addEventListener('click', startQuiz); pdfDownloadBtn.addEventListener('click', downloadPDF); });