Problem-Based Learning Scenario Writer

None specified.

'; // 3. Populate Scenario Content (using a template) scenarioContent.innerHTML = `

${subject}: ${topic} - PBL Scenario

Target Audience

${audience}

Learning Objectives

${objectivesHTML}

Scenario Context

${context.replace(/\n/g, '
')}

The Challenge

${challenge.replace(/\n/g, '
')}

Constraints & Resources

${constraintsHTML}

Your Task

As a group, analyze the situation, identify the key issues, research relevant information, and develop a well-reasoned solution or response to the challenge. Prepare to present your findings and recommendations.

`; // Enable PDF button pdfBtn.disabled = false; pdfBtn.classList.remove('disabled:opacity-50', 'disabled:cursor-not-allowed'); // 4. Move to Dashboard Tab showTab(0); }); // --- Event Listener for PDF Download --- pdfBtn.addEventListener('click', function() { if (this.disabled) return; // Don't run if disabled const { jsPDF } = window.jspdf; // Capture the wrapper which includes padding and border const contentToCapture = document.getElementById('pbl-scenario-content-wrapper'); // Temporarily add a title inside the captured area for the PDF const pdfTitle = document.createElement('h3'); pdfTitle.className = "text-center text-xl font-bold text-gray-800 mb-4"; pdfTitle.textContent = "Problem-Based Learning Scenario"; contentToCapture.prepend(pdfTitle); // Add title at the beginning html2canvas(contentToCapture, { scale: 2, backgroundColor: "#ffffff", // Use wrapper's background onclone: (doc) => { // Ensure styles are applied in the cloned document doc.getElementById('pbl-scenario-content-wrapper').style.display = 'block'; } }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const imgWidth = canvas.width; const imgHeight = canvas.height; const ratio = imgWidth / pdfWidth; let scaledHeight = imgHeight / ratio; let yPos = 10; // Initial Y position const margin = 10; // Add image, potentially spanning multiple pages if (scaledHeight < pdfHeight - (margin * 2)) { pdf.addImage(imgData, 'PNG', margin, yPos, pdfWidth - (margin * 2), scaledHeight); } else { // Handle multiple pages let remainingHeight = imgHeight; let currentY = 0; // Y position within the source canvas while(remainingHeight > 0) { // Calculate height for this page let pageImgHeight = (pdfHeight - (margin * 2)) * ratio; // Max image height for one PDF page // Create a temporary canvas to draw the slice const tempCanvas = document.createElement('canvas'); tempCanvas.width = imgWidth; tempCanvas.height = Math.min(pageImgHeight, remainingHeight); const tempCtx = tempCanvas.getContext('2d'); tempCtx.drawImage(canvas, 0, currentY, imgWidth, tempCanvas.height, 0, 0, imgWidth, tempCanvas.height); // Add slice to PDF const pageImgData = tempCanvas.toDataURL('image/png'); pdf.addImage(pageImgData, 'PNG', margin, yPos, pdfWidth - (margin * 2), tempCanvas.height / ratio); remainingHeight -= pageImgHeight; currentY += pageImgHeight; if (remainingHeight > 0) { pdf.addPage(); yPos = margin; // Reset yPos for new page } } } pdf.save('pbl_scenario.pdf'); // Clean up: remove the title we added contentToCapture.removeChild(pdfTitle); }).catch(err => { console.error("PDF generation failed:", err); // Optionally re-enable button or show error contentToCapture.removeChild(pdfTitle); // Still remove title on error }); }); // --- Initial Setup --- pdfBtn.disabled = true; // Disable PDF initially showTab(0); });