export function impactAssessmentSurvey(form: FormTs) {
// Program Impact Survey - Before/After Assessment for Nonprofits
// Demonstrates: Multi-page wizard, Sliders, MatrixQuestion, StarRating, RatingScale (NPS), computed gap analysis
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Program Impact Assessment',
computedValue: () => 'Help us measure our program\'s effectiveness by sharing your experience.',
customStyles: {
background: 'linear-gradient(135deg, #059669 0%, #10b981 100%)',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center',
fontSize: '15px'
}
});
});
// ============================================
// PHASE SELECTOR
// ============================================
const phaseSection = form.addSubform('phaseSection', {
title: 'Assessment Phase'
});
phaseSection.addRow(row => {
row.addRadioButton('assessmentPhase', {
label: 'When are you completing this survey?',
options: [
{ id: 'before', name: 'Before the program (Baseline)' },
{ id: 'after', name: 'After the program (Outcomes)' }
],
orientation: 'vertical',
isRequired: true
});
});
// ============================================
// BEFORE PHASE - BASELINE ASSESSMENT
// ============================================
const beforeSection = form.addSubform('beforeSection', {
title: 'Baseline Assessment',
isVisible: () => phaseSection.radioButton('assessmentPhase')?.value() === 'before',
customStyles: { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' }
});
beforeSection.addRow(row => {
row.addTextPanel('beforeInstructions', {
computedValue: () => 'Please rate your current situation BEFORE starting the program. This helps us measure the impact later.',
customStyles: {
backgroundColor: '#d1fae5',
padding: '12px',
borderRadius: '6px',
borderLeft: '4px solid #059669',
marginBottom: '16px'
}
});
});
beforeSection.addRow(row => {
row.addMatrixQuestion('baselineRatings', {
label: 'Rate your current level in each area (1 = Very Low, 5 = Very High)',
rows: [
{ id: 'knowledge', label: 'Knowledge in this area', isRequired: true },
{ id: 'skills', label: 'Practical skills', isRequired: true },
{ id: 'confidence', label: 'Confidence level', isRequired: true },
{ id: 'resources', label: 'Access to resources', isRequired: true },
{ id: 'network', label: 'Support network', isRequired: true }
],
columns: [
{ id: '1', label: '1' },
{ id: '2', label: '2' },
{ id: '3', label: '3' },
{ id: '4', label: '4' },
{ id: '5', label: '5' }
],
striped: true,
fullWidth: true
});
});
beforeSection.addSpacer();
beforeSection.addRow(row => {
row.addTextarea('baselineGoals', {
label: 'What do you hope to achieve through this program?',
placeholder: 'Describe your goals and expectations...',
rows: 3,
autoExpand: true
});
});
beforeSection.addRow(row => {
row.addCheckboxList('baselineChallenges', {
label: 'What challenges are you currently facing? (Select all that apply)',
options: [
{ id: 'lack-knowledge', name: 'Lack of knowledge/information' },
{ id: 'lack-skills', name: 'Lack of practical skills' },
{ id: 'lack-resources', name: 'Limited access to resources' },
{ id: 'lack-confidence', name: 'Low confidence' },
{ id: 'lack-network', name: 'Limited support network' },
{ id: 'lack-time', name: 'Time constraints' },
{ id: 'lack-funding', name: 'Financial barriers' }
],
orientation: 'vertical'
});
});
// ============================================
// AFTER PHASE - OUTCOMES ASSESSMENT
// ============================================
const afterSection = form.addSubform('afterSection', {
title: 'Outcomes Assessment',
isVisible: () => phaseSection.radioButton('assessmentPhase')?.value() === 'after',
customStyles: { backgroundColor: '#eff6ff', padding: '16px', borderRadius: '8px' }
});
afterSection.addRow(row => {
row.addTextPanel('afterInstructions', {
computedValue: () => 'Please rate your current situation AFTER completing the program. Compare with how you felt before.',
customStyles: {
backgroundColor: '#dbeafe',
padding: '12px',
borderRadius: '6px',
borderLeft: '4px solid #2563eb',
marginBottom: '16px'
}
});
});
afterSection.addRow(row => {
row.addMatrixQuestion('outcomeRatings', {
label: 'Rate your current level in each area (1 = Very Low, 5 = Very High)',
rows: [
{ id: 'knowledge', label: 'Knowledge in this area', isRequired: true },
{ id: 'skills', label: 'Practical skills', isRequired: true },
{ id: 'confidence', label: 'Confidence level', isRequired: true },
{ id: 'resources', label: 'Access to resources', isRequired: true },
{ id: 'network', label: 'Support network', isRequired: true }
],
columns: [
{ id: '1', label: '1' },
{ id: '2', label: '2' },
{ id: '3', label: '3' },
{ id: '4', label: '4' },
{ id: '5', label: '5' }
],
striped: true,
fullWidth: true
});
});
afterSection.addSpacer();
// Overall Impact Rating
afterSection.addRow(row => {
row.addStarRating('overallImpact', {
label: 'How would you rate the overall impact of this program on your life?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
afterSection.addRow(row => {
row.addEmojiRating('satisfactionEmoji', {
label: 'How satisfied are you with the program outcomes?',
preset: 'satisfaction',
size: 'lg',
alignment: 'center',
showLabels: true
});
});
// ============================================
// OUTCOMES ACHIEVED (After Phase)
// ============================================
const outcomesSection = form.addSubform('outcomesSection', {
title: 'Outcomes Achieved',
isVisible: () => phaseSection.radioButton('assessmentPhase')?.value() === 'after'
});
outcomesSection.addRow(row => {
row.addCheckboxList('achievedOutcomes', {
label: 'Which outcomes did you achieve through this program? (Select all that apply)',
options: [
{ id: 'new-knowledge', name: 'Gained new knowledge or information' },
{ id: 'new-skills', name: 'Developed new practical skills' },
{ id: 'new-connections', name: 'Made valuable connections/network' },
{ id: 'increased-confidence', name: 'Increased confidence' },
{ id: 'changed-behavior', name: 'Changed behaviors or habits' },
{ id: 'achieved-goal', name: 'Achieved a specific goal' },
{ id: 'improved-situation', name: 'Improved overall situation' },
{ id: 'new-opportunities', name: 'Gained access to new opportunities' }
],
orientation: 'vertical'
});
});
outcomesSection.addSpacer();
outcomesSection.addRow(row => {
row.addTextarea('successStory', {
label: () => {
const impact = afterSection.starRating('overallImpact')?.value();
if (impact && impact >= 4) {
return 'Please share your success story! How has this program changed your life?';
}
return 'Please share your experience with the program';
},
placeholder: 'Your story can inspire others and help us improve...',
rows: 4,
autoExpand: true
});
});
// ============================================
// RECOMMENDATION (After Phase)
// ============================================
const recommendSection = form.addSubform('recommendSection', {
title: 'Recommendation',
isVisible: () => phaseSection.radioButton('assessmentPhase')?.value() === 'after',
customStyles: () => {
const category = recommendSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (category === 'passive') return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
if (category === 'detractor') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
recommendSection.addRow(row => {
row.addRatingScale('npsScore', {
preset: 'nps',
label: 'How likely are you to recommend this program to others in a similar situation?',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true
});
});
recommendSection.addRow(row => {
row.addTextarea('recommendReason', {
label: () => {
const category = recommendSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return 'What would you tell someone about this program?';
if (category === 'detractor') return 'What could we do to improve the program?';
return 'Any additional comments?';
},
placeholder: 'Share your thoughts...',
rows: 3,
isVisible: () => recommendSection.ratingScale('npsScore')?.value() !== null
});
});
// ============================================
// IMPACT SUMMARY (After Phase)
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Your Impact Summary',
isVisible: () => {
const phase = phaseSection.radioButton('assessmentPhase')?.value();
const hasRatings = afterSection.matrixQuestion('outcomeRatings')?.areAllRequiredRowsAnswered() === true;
return phase === 'after' && hasRatings;
}
});
summarySection.addRow(row => {
row.addTextPanel('impactSummary', {
computedValue: () => {
const outcomes = afterSection.matrixQuestion('outcomeRatings')?.value();
const impact = afterSection.starRating('overallImpact')?.value();
const satisfaction = afterSection.emojiRating('satisfactionEmoji')?.value();
const achieved = outcomesSection.checkboxList('achievedOutcomes')?.value() || [];
const nps = recommendSection.ratingScale('npsScore')?.value();
const category = recommendSection.ratingScale('npsScore')?.npsCategory();
if (!outcomes) return '';
let summary = '📊 IMPACT SUMMARY\n';
summary += '═'.repeat(30) + '\n\n';
// Calculate average outcome score
const outcomeValues = Object.values(outcomes).map(v => parseInt(v as string) || 0);
const avgScore = outcomeValues.length > 0
? (outcomeValues.reduce((a, b) => a + b, 0) / outcomeValues.length).toFixed(1)
: 'N/A';
summary += `📈 Average Outcome Score: ${avgScore}/5\n`;
if (impact) {
summary += `⭐ Overall Impact: ${impact}/5 stars\n`;
}
if (satisfaction) {
const labels: Record<string, string> = {
'very-bad': 'Very Dissatisfied',
'bad': 'Dissatisfied',
'neutral': 'Neutral',
'good': 'Satisfied',
'excellent': 'Very Satisfied'
};
summary += `😊 Satisfaction: ${labels[satisfaction] || satisfaction}\n`;
}
if (achieved.length > 0) {
summary += `\n✅ Outcomes Achieved: ${achieved.length}\n`;
}
if (nps !== null && nps !== undefined) {
const emoji = category === 'promoter' ? '🎉' : category === 'passive' ? '🤔' : '📝';
summary += `\n${emoji} NPS Score: ${nps}/10 (${category?.charAt(0).toUpperCase()}${category?.slice(1)})\n`;
}
return summary;
},
customStyles: () => {
const category = recommendSection.ratingScale('npsScore')?.npsCategory();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (category === 'promoter') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (category === 'passive') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (category === 'detractor') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f1f5f9', borderLeft: '4px solid #64748b' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: () => {
const phase = phaseSection.radioButton('assessmentPhase')?.value();
return phase === 'before' ? 'Submit Baseline Assessment' : 'Submit Outcomes Assessment';
},
isVisible: () => phaseSection.radioButton('assessmentPhase')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: () => {
const phase = phaseSection.radioButton('assessmentPhase')?.value();
return phase === 'before' ? 'Baseline Assessment Recorded!' : 'Thank You for Sharing Your Impact!';
},
message: () => {
const phase = phaseSection.radioButton('assessmentPhase')?.value();
if (phase === 'before') {
return 'Your baseline assessment has been recorded. We look forward to measuring your progress after the program!';
}
return 'Your feedback helps us demonstrate program effectiveness and improve future offerings. Your story matters!';
}
});
}