Trivia Quiz Maker
Welcome to the trivia quiz! Press Start when ready.
Add New Question
Current Questions
No questions added yet. Use the form above to create your first question.
"; return; } quizData.forEach((q) => { const item = document.createElement("div"); item.className = "tqm-question-item"; item.innerHTML = `${escapeHTML(q.question)}
Your answer: ${escapeHTML(answer.selectedAnswer)} (Correct)
`;
} else {
answerHTML = `
Your answer: ${escapeHTML(answer.selectedAnswer)} (Incorrect)
Correct answer: ${escapeHTML(answer.correctAnswer)}
`;
}
item.innerHTML = `
Q${index+1}: ${escapeHTML(answer.question)}
${answerHTML}
`;
quizSummary.appendChild(item);
});
}
/**
* Generates and downloads a PDF of the quiz results.
*/
function downloadPDF() {
if (typeof jsPDF === "undefined") {
alert("Error: PDF generation library failed to load.");
return;
}
try {
const doc = new jsPDF();
const pageMargin = 20;
const pageWidth = doc.internal.pageSize.getWidth() - pageMargin * 2;
let yPos = 25;
const title = "Quiz Results";
const score = `Final Score: ${userScore} out of ${quizData.length} (${(
(userScore / quizData.length) *
100
).toFixed(0)}%)`;
doc.setFont("helvetica", "bold");
doc.setFontSize(18);
doc.setTextColor("#34495e");
doc.text(title, pageMargin, yPos);
yPos += 10;
doc.setFontSize(14);
doc.setTextColor("#333333");
doc.text(score, pageMargin, yPos);
yPos += 15;
userAnswers.forEach((answer, index) => {
const qText = `Q${index + 1}: ${answer.question}`;
const aTextUser = `Your answer: ${answer.selectedAnswer}`;
const aTextCorrect = `Correct answer: ${answer.correctAnswer}`;
// Check for page break
if (yPos > 260) {
doc.addPage();
yPos = 20;
}
doc.setFont("helvetica", "bold");
doc.setFontSize(12);
doc.setTextColor("#34495e");
const qLines = doc.splitTextToSize(qText, pageWidth);
doc.text(qLines, pageMargin, yPos);
yPos += (qLines.length * 5) + 2; // Adjust Y pos for lines
doc.setFont("helvetica", "normal");
doc.setFontSize(11);
if (answer.isCorrect) {
doc.setTextColor("#155724"); // Green
doc.text(`${aTextUser} (Correct)`, pageMargin + 5, yPos);
yPos += 10;
} else {
doc.setTextColor("#721c24"); // Red
doc.text(`${aTextUser} (Incorrect)`, pageMargin + 5, yPos);
yPos += 7;
doc.setTextColor("#333333");
doc.text(aTextCorrect, pageMargin + 5, yPos);
yPos += 10;
}
yPos += 5; // Extra spacing
});
doc.save("Trivia-Quiz-Results.pdf");
} catch (error) {
console.error("Failed to generate PDF:", error);
alert("An error occurred while generating the PDF.");
}
}
/**
* Utility to escape HTML for safe rendering.
*/
function escapeHTML(str) {
return str
.replace(/&/g, "&")
.replace(//g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
/**
* Loads sample data (USA-based).
*/
function loadSampleData() {
quizData = [
{
id: 1,
question: "What is the capital of California?",
options: ["Los Angeles", "Sacramento", "San Francisco", "San Diego"],
correctIndex: 1
},
{
id: 2,
question: "Which U.S. state is known as the 'Sunshine State'?",
options: ["Arizona", "Texas", "Florida", "Hawaii"],
correctIndex: 2
}
];
}
// --- Event Listeners ---
if (tabButtons[1]) tabButtons[1].onclick = () => showTab(1);
if (tabButtons[2]) tabButtons[2].onclick = () => showTab(2);
if (prevBtn) prevBtn.onclick = () => showTab(currentTab - 1);
if (nextBtn) nextBtn.onclick = () => showTab(currentTab + 1);
// Tab 1 Listeners
if (startBtn) startBtn.addEventListener("click", startQuiz);
if (nextQuestionBtn) nextQuestionBtn.addEventListener("click", handleNextClick);
if (restartBtn) restartBtn.addEventListener("click", initQuiz);
if (downloadPdfBtn) downloadPdfBtn.addEventListener("click", downloadPDF);
// Tab 2 Listeners
if (questionForm) questionForm.addEventListener("submit", handleFormSubmit);
if (clearFormBtn) clearFormBtn.addEventListener("click", resetForm);
// --- Initialization ---
function init() {
loadSampleData();
renderQuestionList();
initQuiz();
showTab(1); // Set initial tab state
}
init();
});