`;
const objectivesHTML = `
Learning Objectives
${objectives.map(o => `- ${o}
`).join('')}
`;
const activitiesHTML = `
Activities, Materials, and Assessments
| Activity / Task |
Materials Needed |
Assessment Method |
${activities.map(a => `
| ${a.activity} |
${a.materials} |
${a.assessment} |
`).join('')}
`;
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();
});
