`;
// Add event listeners for option selection
document.querySelectorAll('.quiz-option').forEach(label => {
label.addEventListener('click', (e) => {
document.querySelectorAll('.quiz-option').forEach(l => l.classList.remove('selected'));
e.currentTarget.classList.add('selected');
});
});
document.getElementById('submit-answer-btn').addEventListener('click', handleSubmitAnswer);
};
const handleSubmitAnswer = () => {
const selectedRadio = document.querySelector('input[name="quiz-option"]:checked');
if (selectedRadio === null) {
alert("Please select an answer.");
return;
}
const selectedAnswerIndex = parseInt(selectedRadio.value);
userAnswers[currentQuestionIndex] = selectedAnswerIndex;
// Provide feedback
const labels = document.querySelectorAll('.quiz-option');
const correctIndex = quizData.questions[currentQuestionIndex].correctAnswerIndex;
labels.forEach((label, i) => {
const input = label.querySelector('input');
input.disabled = true;
if (i === correctIndex) {
label.classList.add('correct');
} else if (i === selectedAnswerIndex) {
label.classList.add('incorrect');
}
});
document.getElementById('submit-answer-btn').textContent = 'Next';
document.getElementById('submit-answer-btn').onclick = handleNextQuestion;
};
const handleNextQuestion = () => {
currentQuestionIndex++;
if (currentQuestionIndex < quizData.questions.length) {
renderQuestion(currentQuestionIndex);
} else {
showResults();
}
};
const showResults = () => {
quizQuestionsDisplay.innerHTML = '';
let score = 0;
userAnswers.forEach((answer, index) => {
if (answer === quizData.questions[index].correctAnswerIndex) {
score++;
}
});
const percentage = ((score / quizData.questions.length) * 100).toFixed(1);
quizResultsDisplay.innerHTML = `
Quiz Complete!
You scored ${score} out of ${quizData.questions.length} (${percentage}%)
`;
quizResultsDisplay.classList.remove('hidden');
document.getElementById('download-pdf-btn').addEventListener('click', generatePdf);
};
// --- PDF Generation ---
const generatePdf = () => {
const { jsPDF } = window.jspdf;
const buildPdfReportHtml = () => {
const date = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
let score = 0;
let questionsHtml = quizData.questions.map((q, i) => {
const userAnswerIndex = userAnswers[i];
const isCorrect = userAnswerIndex === q.correctAnswerIndex;
if(isCorrect) score++;
const optionsHtml = q.options.map((opt, j) => {
let style = 'padding: 8px; border-radius: 4px; margin-bottom: 4px;';
if (j === q.correctAnswerIndex) {
style += 'background-color: #dcfce7; border: 1px solid #22c55e;';
} else if (j === userAnswerIndex) {
style += 'background-color: #fee2e2; border: 1px solid #ef4444;';
} else {
style += 'background-color: #f9fafb; border: 1px solid #e5e7eb;';
}
return `
${opt}
`;
}).join('');
return `
${i + 1}. ${q.text}
${optionsHtml}
Your answer was ${isCorrect ? 'Correct' : 'Incorrect'}.
`;
}).join('');
const percentage = ((score / quizData.questions.length) * 100).toFixed(1);
return `
Quiz Report: ${quizData.title}
Generated on: ${date}
Final Score: ${score} / ${quizData.questions.length} (${percentage}%)
${questionsHtml}
`;
};
pdfRenderContainer.innerHTML = buildPdfReportHtml();
html2canvas(pdfRenderContainer, { scale: 2, useCORS: true })
.then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
const ratio = canvasWidth / canvasHeight;
const widthInPdf = pdfWidth - 40;
const heightInPdf = widthInPdf / ratio;
pdf.addImage(imgData, 'PNG', 20, 20, widthInPdf, heightInPdf);
pdf.save(`Quiz_Report_${quizData.title.replace(/\s+/g, '_')}.pdf`);
});
};
});
