Final Score

${score}/${totalQuestions}

${((score / totalQuestions) * 100).toFixed(0)}%

`; const detailsDiv = document.getElementById('results-details'); detailsDiv.innerHTML = ''; quizResults.forEach((res, i) => { const resultEl = document.createElement('div'); resultEl.className = `p-3 border rounded-lg ${res.isCorrect ? 'bg-green-50' : 'bg-red-50'}`; resultEl.innerHTML = `

${i + 1}. ${res.question}

Your answer: ${res.userAnswer} ${res.isCorrect ? '✔️' : '❌'}

${!res.isCorrect ? `

Correct answer: ${res.correctAnswer}

` : ''} `; detailsDiv.appendChild(resultEl); }); }; // --- EVENT LISTENERS --- startBtn.addEventListener('click', startQuiz); restartBtn.addEventListener('click', () => showView('setup')); // --- PDF DOWNLOAD --- downloadPdfBtn.addEventListener('click', () => { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFontSize(22); doc.text('Quiz Report', 105, 20, { align: 'center' }); doc.setFontSize(14); doc.text(`Final Score: ${score} / ${totalQuestions} (${((score / totalQuestions) * 100).toFixed(0)}%)`, 105, 28, { align: 'center' }); const tableData = quizResults.map((res, i) => [ i + 1, res.question, res.userAnswer, res.correctAnswer, res.isCorrect ? 'Correct' : 'Incorrect' ]); doc.autoTable({ head: [['#', 'Question', 'Your Answer', 'Correct Answer', 'Result']], body: tableData, startY: 40, theme: 'grid', headStyles: { fillColor: [37, 99, 235] } }); doc.save('quiz-report.pdf'); }); });