Lesson Plan Generator
Create structured lesson plans with AI
Lesson Details
Generated Lesson Plan
Your lesson plan will appear here.
Fill in the details and click "Generate Plan".
Generating your lesson plan...
/g, '').replace(/<\/h2><\/p>/g, '
');
return html;
}
async function handleGeneration() {
const subject = subjectInput.value.trim();
const gradeLevel = gradeLevelInput.value.trim();
const topic = topicInput.value.trim();
const duration = durationInput.value.trim();
if (!subject || !gradeLevel || !topic || !duration) {
alert('Please fill in all fields to generate a lesson plan.');
return;
}
// Update UI state
placeholder.classList.add('hidden');
loader.classList.remove('hidden');
lessonPlanOutput.innerHTML = '';
generateBtn.disabled = true;
generateBtn.querySelector('span').textContent = 'Generating...';
downloadPdfBtn.disabled = true;
const systemPrompt = "You are an expert curriculum designer. Generate a clear, structured, and comprehensive lesson plan based on the user's request. The plan should be practical and easy for a teacher to follow.";
const userQuery = `
Generate a lesson plan with the following details:
- Subject: ${subject}
- Grade Level: ${gradeLevel}
- Topic: ${topic}
- Lesson Duration: ${duration} minutes
Please structure the response with the following sections using markdown headings (e.g., '### Section Title'):
### Learning Objectives
(List 2-3 clear, measurable objectives that students should be able to achieve by the end of the lesson.)
### Materials & Resources
(List all necessary materials, handouts, or digital tools.)
### Lesson Activities & Pacing
(Provide a step-by-step breakdown of activities, including estimated timings that add up to the total duration. Include an introduction/hook, instructional period, practice, and a conclusion/wrap-up.)
### Differentiated Instruction
(Suggest specific strategies for supporting students who may struggle and for challenging advanced learners.)
### Assessment
(Describe how the teacher can assess student understanding of the learning objectives, e.g., exit ticket, observation, questioning.)
`;
const apiKey = "";
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;
const payload = {
contents: [{ parts: [{ text: userQuery }] }],
systemInstruction: { parts: [{ text: systemPrompt }] },
};
try {
const response = await fetch(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if (!response.ok) {
throw new Error(`API request failed with status ${response.status}`);
}
const result = await response.json();
const candidate = result.candidates?.[0];
if (candidate && candidate.content?.parts?.[0]?.text) {
const generatedText = candidate.content.parts[0].text;
lessonPlanOutput.innerHTML = simpleMarkdownToHtml(generatedText);
downloadPdfBtn.disabled = false;
} else {
throw new Error("Invalid response structure from API.");
}
} catch (error) {
console.error("Error generating lesson plan:", error);
lessonPlanOutput.innerHTML = `Error: Failed to generate lesson plan. Please check your connection and try again.`;
} finally {
loader.classList.add('hidden');
generateBtn.disabled = false;
generateBtn.querySelector('span').textContent = 'Generate Plan';
}
}
async function handlePdfDownload() {
const pdfTitleEl = document.getElementById('pdf-title');
const pdfMetaEl = document.getElementById('pdf-meta');
const pdfContentEl = document.getElementById('pdf-content');
const contentToPrint = document.getElementById('pdf-output');
pdfTitleEl.textContent = `Lesson Plan: ${topicInput.value}`;
pdfMetaEl.innerHTML = `
Subject: ${subjectInput.value} | Grade Level: ${gradeLevelInput.value} | Duration: ${durationInput.value} mins
`; pdfContentEl.innerHTML = lessonPlanOutput.innerHTML.replace(/