Materials: ${act.materials}

Assessment: ${act.assessment}

`; list.appendChild(item); }); } function renderPlanPreview(planData) { const previewContainer = document.getElementById('planPreview'); const pdfContainer = document.getElementById('pdf-lesson-plan'); if (!planData) { previewContainer.innerHTML = '

Click "Preview Lesson Plan" to generate.

'; pdfContainer.innerHTML = ''; return; } const { details, objectives, activities } = planData; const headerHTML = ` `; const objectivesHTML = ` `; const activitiesHTML = ` `; const fullHTML = headerHTML + objectivesHTML + activitiesHTML; previewContainer.innerHTML = fullHTML; pdfContainer.innerHTML = fullHTML; } // --- LOGIC & EVENT HANDLERS --- function updateTabs() { tabs.forEach(tab => tab.classList.toggle('active', parseInt(tab.dataset.tab) === currentTab)); tabPanes.forEach(pane => pane.classList.toggle('hidden', parseInt(pane.id.split('-')[1]) !== currentTab)); prevBtn.disabled = currentTab === 1; nextBtn.disabled = currentTab === totalTabs; } function goToTab(tabNumber) { if (tabNumber >= 1 && tabNumber <= totalTabs) { currentTab = tabNumber; updateTabs(); } } function addObjective() { const input = document.getElementById('newObjective'); const text = input.value.trim(); if (text) { appData.objectives.push(text); input.value = ''; renderObjectives(); } } function addActivity() { const activityInput = document.getElementById('newActivity'); const materialsInput = document.getElementById('newMaterials'); const assessmentInput = document.getElementById('newAssessment'); const activity = activityInput.value.trim(); const materials = materialsInput.value.trim(); const assessment = assessmentInput.value.trim(); if (activity) { appData.activities.push({ activity, materials, assessment }); activityInput.value = ''; materialsInput.value = ''; assessmentInput.value = ''; renderActivities(); } } function generatePlan() { // Update details from inputs appData.details.title = document.getElementById('lessonTitle').value; appData.details.subject = document.getElementById('subject').value; appData.details.gradeLevel = document.getElementById('gradeLevel').value; appData.details.duration = document.getElementById('duration').value; appData.details.topic = document.getElementById('lessonTopic').value; appData.generatedPlan = { ...appData }; renderPlanPreview(appData.generatedPlan); document.getElementById('downloadPdfBtn').disabled = false; } function downloadPdf() { if (!appData.generatedPlan) { alert('Please generate the plan first.'); return; } const elementToCapture = document.getElementById('pdf-lesson-plan'); html2canvas(elementToCapture, { scale: 2 }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'portrait', unit: 'in', format: 'letter' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const imgProps = pdf.getImageProperties(imgData); const imgRatio = imgProps.width / imgProps.height; let finalImgWidth = pdfWidth; let finalImgHeight = pdfWidth / imgRatio; pdf.addImage(imgData, 'PNG', 0, 0, finalImgWidth, finalImgHeight); pdf.save(`${appData.details.title.replace(/\s+/g, '-')}-Lesson-Plan.pdf`); }); } // --- EVENT LISTENERS --- tabs.forEach(tab => tab.addEventListener('click', (e) => goToTab(parseInt(e.currentTarget.dataset.tab)))); prevBtn.addEventListener('click', () => goToTab(currentTab - 1)); nextBtn.addEventListener('click', () => goToTab(currentTab + 1)); document.getElementById('addObjectiveBtn').addEventListener('click', addObjective); document.getElementById('addActivityBtn').addEventListener('click', addActivity); document.getElementById('generatePlanBtn').addEventListener('click', generatePlan); document.getElementById('downloadPdfBtn').addEventListener('click', downloadPdf); document.getElementById('objectivesList').addEventListener('click', (e) => { if (e.target.classList.contains('delete-objective-btn')) { appData.objectives.splice(e.target.dataset.index, 1); renderObjectives(); } }); document.getElementById('activitiesList').addEventListener('click', (e) => { if (e.target.classList.contains('delete-activity-btn')) { appData.activities.splice(e.target.dataset.index, 1); renderActivities(); } }); // --- INITIALIZATION --- renderAll(); updateTabs(); });