`;
summaryEl.innerHTML += `
${icon}
${index + 1}. ${byoq_escapeHTML(answer.question)}
${answerSummary}
`;
});
}
}
/**
* Renders a clone for PDF generation
*/
function byoq_renderPdfClone() {
byoq_pdfRenderClone.innerHTML = `
Quiz Results
Review Your Answers
`;
byoq_renderResults(byoq_pdfRenderClone, true);
}
/**
* Generates and downloads a PDF of the results
*/
async function byoq_downloadPDF() {
if (typeof jspdf === 'undefined' || typeof html2canvas === 'undefined') {
console.error("BYOQ Tool Error: jsPDF or html2canvas library not loaded.");
alert("Error: PDF libraries failed to load. Please check console.");
return;
}
byoq_renderPdfClone();
const { jsPDF } = window.jspdf;
try {
const canvas = await html2canvas(byoq_pdfRenderClone, {
scale: 2,
useCORS: true,
});
const imgData = canvas.toDataURL('image/png');
const imgWidth = canvas.width;
const imgHeight = canvas.height;
const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const ratio = imgHeight / imgWidth;
const scaledImgHeight = (pdfWidth / imgWidth) * imgHeight;
let heightLeft = scaledImgHeight;
let position = 0;
const margin = 40;
const contentWidth = pdfWidth - (margin * 2);
const contentHeight = (contentWidth * imgHeight) / imgWidth;
pdf.addImage(imgData, 'PNG', margin, position + margin, contentWidth, contentHeight);
heightLeft -= (pdfHeight - margin * 2);
while (heightLeft > 0) {
position -= (pdfHeight - margin * 2);
pdf.addPage();
pdf.addImage(imgData, 'PNG', margin, position + margin, contentWidth, contentHeight);
heightLeft -= (pdfHeight - margin * 2);
}
const safeName = (byoq_data.title || 'quiz_results').replace(/[^a-z0-9]/gi, '_').toLowerCase();
pdf.save(`${safeName}.pdf`);
} catch (error) {
console.error("BYOQ Tool Error: PDF generation failed.", error);
alert("An error occurred while generating the PDF. Please try again.");
}
}
// --- EVENT LISTENERS ---
// Tab link clicks
byoq_tabLinks.forEach((link, index) => {
link.addEventListener('click', () => byoq_switchTab(index));
});
// Next/Prev button clicks
if (byoq_prevButton) {
byoq_prevButton.addEventListener('click', () => {
if (byoq_currentTab > 0) byoq_switchTab(byoq_currentTab - 1);
});
}
if (byoq_nextButton) {
byoq_nextButton.addEventListener('click', () => {
if (byoq_currentTab < byoq_tabLinks.length - 1) byoq_switchTab(byoq_currentTab + 1);
});
}
// PDF download
if (byoq_downloadPdfButton) {
byoq_downloadPdfButton.addEventListener('click', byoq_downloadPDF);
}
// --- Config Tab Listeners ---
if (byoq_addQuestionButton) {
byoq_addQuestionButton.addEventListener('click', () => {
const newQ = { id: byoq_questionIdCounter++, type: 'Multiple Choice', text: '', options: ['', '', '', ''], correctAnswer: '' };
byoq_data.questions.push(newQ);
byoq_questionsContainer.appendChild(byoq_createQuestionInput(newQ));
});
}
if (byoq_configTab) {
// Handle remove & type change
byoq_configTab.addEventListener('click', (e) => {
if (e.target.classList.contains('byoq-remove-question')) {
const entryDiv = e.target.closest('[data-id]');
const id = parseInt(entryDiv.getAttribute('data-id'), 10);
byoq_data.questions = byoq_data.questions.filter(q => q.id !== id);
entryDiv.remove();
}
});
byoq_configTab.addEventListener('change', (e) => {
if (e.target.classList.contains('byoq-question-type')) {
// Re-render the answer options for this question
const entryDiv = e.target.closest('[data-id]');
const id = parseInt(entryDiv.getAttribute('data-id'), 10);
const q = byoq_data.questions.find(q => q.id === id) || {}; // Find or create temp
q.type = e.target.value; // Update type
// Reset options/answer when type changes
q.options = (q.type === 'Multiple Choice') ? ['', '', '', ''] : ['True', 'False'];
q.correctAnswer = '';
const optionsContainer = entryDiv.querySelector('.byoq-options-container');
if (optionsContainer) {
optionsContainer.innerHTML = byoq_renderAnswerOptions(q);
}
}
// Any change updates the data
byoq_updateDataFromConfig();
});
}
// --- Dashboard (Quiz) Listeners ---
if (byoq_startButton) {
byoq_startButton.addEventListener('click', byoq_startQuiz);
}
if (byoq_submitAnswerButton) {
byoq_submitAnswerButton.addEventListener('click', byoq_submitAnswer);
}
// --- INITIALIZATION ---
byoq_initSampleData();
byoq_renderConfig();
byoq_renderQuizState('start');
// Set initial tab state
byoq_tabPanes.forEach((pane, index) => {
pane.classList.toggle('hidden', index !== 0);
pane.classList.toggle('byoq-active', index === 0);
});
});
