Build a survey in the 'Build Survey' tab to see a preview here.
`;
return;
}
surveyPreviewArea.innerHTML = `
${surveyData.title || "Untitled Survey"}
${surveyData.questions.map((q, index) => {
let content = '';
switch (q.type) {
case 'mc':
content = q.options.map(opt => `
${opt}
`).join('');
break;
case 'scale':
content = `
Strongly Disagree
Strongly Agree
`;
break;
case 'open':
content = `
`;
break;
}
return `
${index + 1}. ${q.text || "No question text entered."}
${content}
`;
}).join('')}
`;
}
// --- EVENT HANDLERS ---
function handleAddQuestion() {
surveyData.questions.push({
id: nextQuestionId++,
type: 'mc',
text: '',
options: ['', '']
});
renderBuilder();
}
// Using event delegation for dynamic elements
function handleBuilderInteraction(e) {
const target = e.target;
const action = target.dataset.action;
if (!action) return;
const questionId = parseInt(target.dataset.questionId);
const question = surveyData.questions.find(q => q.id === questionId);
if (!question) return;
switch(action) {
case 'remove-question':
surveyData.questions = surveyData.questions.filter(q => q.id !== questionId);
break;
case 'change-type':
question.type = target.value;
break;
case 'update-text':
question.text = target.value;
// No re-render needed for text update
return;
case 'add-option':
question.options.push('');
break;
case 'remove-option':
const optIndexToRemove = parseInt(target.dataset.optionIndex);
question.options.splice(optIndexToRemove, 1);
break;
default:
// Handle option text update
if (target.matches('.posg-option-input input')) {
const optIndex = parseInt(target.dataset.optionIndex);
question.options[optIndex] = target.value;
// No re-render needed
return;
}
}
renderBuilder();
}
// 7. USA-relevant sample data
function loadSampleData() {
surveyData.title = "National Priorities Survey (USA)";
surveyData.questions = [
{ id: 0, type: 'mc', text: 'What do you believe is the most pressing issue facing the United States today?', options: ['The Economy', 'Healthcare Costs', 'Climate Change', 'Political Polarization', 'Other'] },
{ id: 1, type: 'scale', text: 'On a scale of 1 to 5, how would you rate the current state of the U.S. economy?', options: [] },
{ id: 2, type: 'open', text: 'In your own words, what is one policy change you would like to see enacted by the federal government?', options: [] }
];
nextQuestionId = 3;
renderBuilder();
}
async function handleDownloadPDF() {
renderPreview(); // Ensure preview is up to date
const originalBtnText = pdfDownloadBtn.textContent;
pdfDownloadBtn.textContent = "Generating PDF...";
pdfDownloadBtn.disabled = true;
try {
const { jsPDF } = window.jspdf;
container.classList.add("posg-pdf-export-mode");
const canvas = await html2canvas(container.querySelector("#posg-survey-preview-wrapper"), {
scale: 2, backgroundColor: "#ffffff"
});
container.classList.remove("posg-pdf-export-mode");
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPDF({ orientation: "p", unit: "mm", format: "a4" });
const pdfWidth = pdf.internal.pageSize.getWidth();
const margin = 15;
const contentWidth = pdfWidth - margin * 2;
const imgHeight = (canvas.height * contentWidth) / canvas.width;
pdf.addImage(imgData, "PNG", margin, margin, contentWidth, imgHeight);
pdf.save(`${(surveyData.title || "Survey").replace(/ /g, "_")}.pdf`);
} catch (error) {
console.error("PDF Generation Error:", error);
alert("An error occurred while creating the PDF.");
} finally {
pdfDownloadBtn.textContent = originalBtnText;
pdfDownloadBtn.disabled = false;
}
}
// --- Initial Setup & Event Listeners ---
surveyTitleInput.addEventListener('input', e => surveyData.title = e.target.value);
addQuestionBtn.addEventListener('click', handleAddQuestion);
loadSampleBtn.addEventListener('click', loadSampleData);
questionListDiv.addEventListener('input', handleBuilderInteraction);
questionListDiv.addEventListener('change', handleBuilderInteraction);
questionListDiv.addEventListener('click', handleBuilderInteraction);
previewBtn.addEventListener('click', () => {
renderPreview();
previewTabBtn.click();
});
editSurveyBtn.addEventListener('click', () => {
builderTabBtn.click();
});
pdfDownloadBtn.addEventListener('click', handleDownloadPDF);
// Initial render
renderBuilder();
});
