Your answer: ${cpg_escapeHTML(answer.userAnswer)}

` : `

Your answer: ${cpg_escapeHTML(answer.userAnswer)}

Correct answer: ${cpg_escapeHTML(answer.correctAnswer)}

`; summaryEl.innerHTML += ` `; }); } } /** * Renders a clone for PDF generation */ function cpg_renderPdfClone() { cpg_pdfRenderClone.innerHTML = `

Continent Puzzle Results

Answer Review

`; cpg_renderResults(cpg_pdfRenderClone, true); // Render data into the clone } /** * Generates and downloads a PDF of the results */ async function cpg_downloadPDF() { if (typeof jspdf === 'undefined' || typeof html2canvas === 'undefined') { console.error("CPG Tool Error: jsPDF or html2canvas library not loaded."); alert("Error: PDF libraries failed to load. Please check console."); return; } cpg_renderPdfClone(); // Create and populate the clone const { jsPDF } = window.jspdf; try { const canvas = await html2canvas(cpg_pdfRenderClone, { scale: 2, // High resolution 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(); // Scale image to fit pdf width with margins const margin = 40; const ratio = Math.min((pdfWidth - margin * 2) / imgWidth, (pdfHeight - margin * 2) / imgHeight); const w = imgWidth * ratio; const h = imgHeight * ratio; const x = (pdfWidth - w) / 2; // Center horizontally const y = margin; // Top margin pdf.addImage(imgData, 'PNG', x, y, w, h); pdf.save('Continent_Puzzle_Results.pdf'); } catch (error) { console.error("CPG Tool Error: PDF generation failed.", error); alert("An error occurred while generating the PDF. Please try again."); } } // --- EVENT LISTENERS --- // Tab link clicks cpg_tabLinks.forEach((link, index) => { link.addEventListener('click', () => cpg_switchTab(index)); }); // Next/Prev button clicks if (cpg_prevButton) { cpg_prevButton.addEventListener('click', () => { if (cpg_currentTab > 0) cpg_switchTab(cpg_currentTab - 1); }); } if (cpg_nextButton) { cpg_nextButton.addEventListener('click', () => { if (cpg_currentTab < cpg_tabLinks.length - 1) cpg_switchTab(cpg_currentTab + 1); }); } // PDF download if (cpg_downloadPdfButton) { cpg_downloadPdfButton.addEventListener('click', cpg_downloadPDF); } // Game Controls if (cpg_startButton) { cpg_startButton.addEventListener('click', cpg_startGame); } if (cpg_nextQuestionButton) { cpg_nextQuestionButton.addEventListener('click', cpg_nextQuestion); } if (cpg_playAgainButton) { cpg_playAgainButton.addEventListener('click', () => cpg_renderGameState('start')); } // --- INITIALIZATION --- cpg_loadContinents(); cpg_renderConfig(); // Populate config tab on load cpg_renderGameState('start'); // Show start screen // Set initial tab state cpg_tabPanes.forEach((pane, index) => { pane.classList.toggle('hidden', index !== 0); pane.classList.toggle('cpg-active', index === 0); }); cpg_tabLinks.forEach((link, index) => { TAB_CLASSES.active.forEach(cls => link.classList.remove(cls)); TAB_CLASSES.inactive.forEach(cls => link.classList.remove(cls)); if (index === 0) { TAB_CLASSES.active.forEach(cls => link.classList.add(cls)); } else { TAB_CLASSES.inactive.forEach(cls => link.classList.add(cls)); } }); });