Virtual Animal Cell Explorer

Virtual Animal Cell Explorer

Select an Organelle

Click on a part of the animal cell diagram to learn more about its function. You can edit these descriptions in the 'Data Configuration' tab.

Virtual Animal Cell Explorer - Summary

${item.description}

`; pdfSummaryContent.appendChild(entry); } } if (pdfBtn) pdfBtn.addEventListener("click", () => { // IV.B.2. Null check if (!window.jspdf || !window.html2canvas) { alert("Error: PDF generation libraries are not loaded."); return; } // Target the hidden summary div (Other #9) const pdfContent = document.getElementById("cell-pdf-summary"); if (!pdfContent) return; // Temporarily make it visible for html2canvas pdfContent.style.display = 'block'; const { jsPDF } = window.jspdf; html2canvas(pdfContent, { scale: 2, // Improve resolution backgroundColor: "#ffffff", }).then((canvas) => { // Hide it again pdfContent.style.display = 'none'; const imgData = canvas.toDataURL("image/png"); const pdf = new jsPDF("p", "mm", "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; let imgWidth = pdfWidth - 20; // A4 width with 10mm margins let imgHeight = imgWidth / ratio; // Check if it fits height-wise if (imgHeight > pdfHeight - 20) { imgHeight = pdfHeight - 20; // A4 height with 10mm margins imgWidth = imgHeight * ratio; } const x = (pdfWidth - imgWidth) / 2; // Center horizontally const y = 10; // 10mm margin from top pdf.addImage(imgData, "PNG", x, y, imgWidth, imgHeight); pdf.save("Animal-Cell-Summary.pdf"); }); }); // --- V.A. Initial Setup --- renderEditor(); renderPrintableSummary(); setupSVGListeners(); updateNavButtons(); // Set initial button state });