Science Experiment Planning Sheet Generator
A structured guide for designing and documenting experiments following the scientific method.
Review the finalized experimental plan below. This sheet organizes the steps necessary to move from a scientific question to a verifiable procedure.
[Remember to keep all other factors constant (controlled variables). These must be documented separately.]
3. Materials List
-
${materialsHTML}
4. Step-by-Step Procedure
${procedureHTML}
5. Data Collection & Conclusion (To Be Completed After Experiment)
Data Collection Method:
[Describe how data will be recorded and what metrics will be used.]
Conclusion Statement:
[State whether the hypothesis was supported or refuted, and why.]
${sepg_generatePlanHTML(sepg_data)}
`;
}
/**
* Generates and downloads a PDF of the plan
*/
async function sepg_downloadPDF() {
if (!sepg_data.question || !sepg_data.hypothesis) {
alert("Please complete the Question and Hypothesis sections before downloading.");
return;
}
if (typeof jspdf === 'undefined' || typeof html2canvas === 'undefined') {
alert("Error: PDF libraries failed to load.");
return;
}
sepg_renderPdfClone();
const { jsPDF } = window.jspdf;
try {
const contentDiv = sepg_pdfRenderClone.querySelector('.pdf-content');
if (!contentDiv) return;
const canvas = await html2canvas(contentDiv, { scale: 1.5, useCORS: true });
const imgData = canvas.toDataURL('image/png');
const imgProps = { width: canvas.width, height: canvas.height };
const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const margin = 40;
const contentWidth = pdfWidth - (margin * 2);
const contentHeight = (contentWidth * imgProps.height) / imgProps.width;
let heightLeft = contentHeight;
let position = 0;
pdf.addImage(imgData, 'PNG', margin, position + margin, contentWidth, contentHeight);
heightLeft -= (pdfHeight - margin * 2);
while (heightLeft > 0) {
position -= (pdfHeight - margin * 2);
pdf.addPage();
pdf.addImage(imgData, 'PNG', margin, position + margin, contentWidth, contentHeight);
heightLeft -= (pdfHeight - margin * 2);
}
pdf.save('Science_Experiment_Plan.pdf');
} catch (error) {
console.error("PDF generation failed:", error);
alert("An error occurred while generating the PDF.");
}
}
// --- EVENT LISTENERS ---
// Tab link clicks
sepg_tabLinks.forEach((link, index) => {
link.addEventListener('click', () => sepg_switchTab(index));
});
// Next/Prev button clicks
if (sepg_prevButton) {
sepg_prevButton.addEventListener('click', () => {
if (sepg_currentTab > 0) sepg_switchTab(sepg_currentTab - 1);
});
}
if (sepg_nextButton) {
sepg_nextButton.addEventListener('click', () => {
if (sepg_currentTab === sepg_tabLinks.length - 1) {
sepg_updateDataFromConfig();
sepg_switchTab(0);
} else {
if (sepg_currentTab < sepg_tabLinks.length - 1) sepg_switchTab(sepg_currentTab + 1);
}
});
}
// PDF download
if (sepg_downloadPdfButton) {
sepg_downloadPdfButton.addEventListener('click', sepg_downloadPDF);
}
// --- Config Tab Listeners (Materials) ---
if (sepg_addMaterialButton) {
sepg_addMaterialButton.addEventListener('click', () => {
sepg_materialsContainer.appendChild(sepg_createMaterialInput());
});
}
// --- Config Tab Listeners (Procedure) ---
if (sepg_addStepButton) {
sepg_addStepButton.addEventListener('click', () => {
sepg_procedureContainer.appendChild(sepg_createStepInput());
});
}
if (sepg_configTab) {
// Handle remove for both materials and procedure
sepg_configTab.addEventListener('click', (e) => {
const removeButton = e.target.closest('.sepg-remove-item');
if (removeButton) {
removeButton.closest('.flex[data-id]').remove();
}
});
}
// --- INITIALIZATION ---
sepg_renderConfig();
sepg_renderDashboard();
// Set initial tab state
sepg_tabPanes.forEach((pane, index) => {
pane.classList.toggle('hidden', index !== 0);
pane.classList.toggle('sepg-active', index === 0);
});
sepg_tabLinks.forEach((link, index) => {
TAB_CLASSES.active.forEach(cls => link.classList.remove(cls));
TAB_CLASSES.inactive.forEach(cls => link.classList.remove(cls));
if (index === 0) {
TAB_CLASSES.active.forEach(cls => link.classList.add(cls));
} else {
TAB_CLASSES.inactive.forEach(cls => link.classList.add(cls));
}
});
});