Your Score: ${score} / ${total}
`;
ui.resultsSummaryList.innerHTML = quizData.questions.map((q, qIndex) => {
const userAnswerIndex = userAnswers[qIndex];
const isCorrect = userAnswerIndex === q.correct;
const userAnswerText = userAnswerIndex !== undefined ? q.options[userAnswerIndex] : "
No answer";
const correctAnswerText = q.options[q.correct];
return `
${qIndex + 1}. ${q.text}
Your Answer: ${userAnswerText}
${!isCorrect ? `
Correct Answer: ${correctAnswerText}
` : ''}
`;
}).join('');
}
// --- EVENT HANDLERS ---
function handleSetupInteraction(e) {
const card = e.target.closest('.pqg-question-card');
if (!card) return;
const id = parseInt(card.dataset.id);
const question = quizData.questions.find(q => q.id === id);
const action = e.target.dataset.action;
switch(action) {
case 'remove-question': quizData.questions = quizData.questions.filter(q => q.id !== id); break;
case 'add-option': question.options.push(''); break;
case 'remove-option': question.options.splice(e.target.dataset.optionIndex, 1); break;
case 'set-correct': question.correct = parseInt(e.target.dataset.optionIndex); return; // No re-render needed
}
renderSetup();
}
function handleSetupInput(e) {
const card = e.target.closest('.pqg-question-card');
if (!card) return;
const id = parseInt(card.dataset.id);
const question = quizData.questions.find(q => q.id === id);
const field = e.target.dataset.field;
if(field === 'text') question.text = e.target.value;
if(field === 'option') question.options[e.target.dataset.optionIndex] = e.target.value;
}
// 7. USA-relevant sample data
function loadSample() {
quizData = {
title: "U.S. Civics Pop Quiz",
questions: [
{ id: 0, text: 'How many amendments does the Constitution have?', options: ['10', '27', '33'], correct: 1 },
{ id: 1, text: 'What are the two parts of the U.S. Congress?', options: ['The Supreme Court and the House', 'The Senate and House of Representatives', 'The President and the Cabinet'], correct: 1 },
{ id: 2, text: 'Who is the "Father of Our Country"?', options: ['Abraham Lincoln', 'Thomas Jefferson', 'George Washington'], correct: 2 },
]
};
nextQuestionId = 3;
renderSetup();
}
function generateQuiz() {
quizData.title = ui.quizTitleInput.value.trim() || "Pop Quiz";
if (quizData.questions.length === 0) {
alert('Please add at least one question.');
return;
}
renderQuiz();
ui.tabs.forEach(t => t.disabled = (t.dataset.tab === 'results'));
switchTab('quiz');
}
function submitQuiz() {
userAnswers = quizData.questions.map((q, qIndex) => {
const selected = container.querySelector(`input[name="answer_q${qIndex}"]:checked`);
return selected ? parseInt(selected.value) : undefined;
});
let score = 0;
userAnswers.forEach((answer, index) => {
if (answer === quizData.questions[index].correct) score++;
});
renderResults(score, quizData.questions.length);
ui.tabs.forEach(t => t.disabled = false);
switchTab('results');
}
function resetQuiz() {
quizData = { title: "", questions: [] };
userAnswers = [];
nextQuestionId = 0;
renderSetup();
ui.tabs.forEach(t => t.disabled = (t.dataset.tab !== 'setup'));
switchTab('setup');
}
async function downloadPDF() {
const originalBtnText = ui.pdfDownloadBtn.textContent;
ui.pdfDownloadBtn.textContent = "Generating...";
ui.pdfDownloadBtn.disabled = true;
try {
const { jsPDF } = window.jspdf;
container.classList.add("pqg-pdf-export-mode");
const canvas = await html2canvas(ui.resultsArea, { scale: 2 });
container.classList.remove("pqg-pdf-export-mode");
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPDF({ orientation: "p", unit: "mm", format: "a4" });
const contentWidth = pdf.internal.pageSize.getWidth() - 20;
const imgHeight = (canvas.height * contentWidth) / canvas.width;
pdf.text(quizData.title, 105, 15, { align: 'center' });
pdf.addImage(imgData, "PNG", 10, 25, contentWidth, imgHeight);
pdf.save(`${quizData.title.replace(/ /g, "_")}_Results.pdf`);
} catch (e) {
console.error("PDF Error:", e);
alert("Could not generate PDF.");
} finally {
ui.pdfDownloadBtn.textContent = originalBtnText;
ui.pdfDownloadBtn.disabled = false;
}
}
// --- Initial Setup & Event Listeners ---
ui.tabs.forEach(tab => tab.addEventListener('click', () => switchTab(tab.dataset.tab)));
ui.addQuestionBtn.addEventListener('click', () => {
quizData.questions.push({ id: nextQuestionId++, text: '', options: ['', ''], correct: 0 });
renderSetup();
});
ui.loadSampleBtn.addEventListener('click', loadSample);
ui.generateQuizBtn.addEventListener('click', generateQuiz);
ui.submitQuizBtn.addEventListener('click', submitQuiz);
ui.newQuizBtn.addEventListener('click', resetQuiz);
ui.pdfDownloadBtn.addEventListener('click', downloadPDF);
// Event delegation for dynamic elements
ui.questionList.addEventListener('click', handleSetupInteraction);
ui.questionList.addEventListener('input', handleSetupInput);
// Initial render
renderSetup();
});
