export function recreationProgramFeedback(form: FormTs) {
// Recreation Program Feedback Form
// Demonstrates: StarRating, MatrixQuestion, RatingScale (NPS), Slider, EmojiRating, multi-page wizard, dynamic labels
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Recreation Program Feedback',
computedValue: () => 'Help us create better programs for our community!',
customStyles: {
background: 'linear-gradient(135deg, #059669 0%, #10b981 100%)',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// MULTI-PAGE WIZARD
// ============================================
const pages = form.addPages('programFeedback');
// ============================================
// PAGE 1: Program Information
// ============================================
const page1 = pages.addPage('programInfo');
page1.addRow(row => {
row.addTextPanel('page1Title', {
label: 'Step 1 of 4: Program Details',
customStyles: {
fontSize: '18px',
fontWeight: 'bold',
color: '#059669',
marginBottom: '16px'
}
});
});
page1.addRow(row => {
row.addDropdown('programType', {
label: 'What type of program did you participate in?',
isRequired: true,
options: [
{ id: 'fitness', name: 'Fitness & Wellness (Yoga, Pilates, Zumba, etc.)' },
{ id: 'sports', name: 'Sports & Athletics (Basketball, Tennis, Swimming)' },
{ id: 'arts', name: 'Arts & Crafts (Painting, Pottery, Music)' },
{ id: 'youth', name: 'Youth Programs (Camps, After-school)' },
{ id: 'seniors', name: 'Senior Programs' },
{ id: 'aquatics', name: 'Aquatics (Swim Lessons, Water Aerobics)' },
{ id: 'outdoor', name: 'Outdoor Recreation (Hiking, Nature walks)' },
{ id: 'special', name: 'Special Events (Workshops, Clinics)' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select program type...'
});
});
page1.addRow(row => {
row.addTextbox('programName', {
label: 'Program/Class Name',
placeholder: 'e.g., Monday Morning Yoga, Youth Basketball League',
isRequired: true
});
});
page1.addRow(row => {
row.addTextbox('instructorName', {
label: 'Instructor/Coach Name (if applicable)',
placeholder: 'Enter instructor name...'
});
});
page1.addRow(row => {
row.addDropdown('participantType', {
label: 'Who participated?',
isRequired: true,
options: [
{ id: 'self', name: 'Myself' },
{ id: 'child', name: 'My child' },
{ id: 'family', name: 'Family member' },
{ id: 'group', name: 'Group' }
]
});
});
page1.addRow(row => {
row.addRadioButton('firstTime', {
label: 'Was this your first time in this program?',
orientation: 'horizontal',
options: [
{ id: 'yes', name: 'Yes, first time' },
{ id: 'no', name: 'No, returning participant' }
]
});
});
// ============================================
// PAGE 2: Instructor & Content
// ============================================
const page2 = pages.addPage('instructorContent');
page2.addRow(row => {
row.addTextPanel('page2Title', {
label: () => `Step 2 of 4: ${page1.textbox('instructorName')?.value() ? 'Instructor & ' : ''}Program Quality`,
customStyles: {
fontSize: '18px',
fontWeight: 'bold',
color: '#059669',
marginBottom: '16px'
}
});
});
// Instructor Rating Section (only if instructor provided)
const instructorSection = page2.addSubform('instructorSection', {
title: () => `Rate Your Instructor: ${page1.textbox('instructorName')?.value() || 'N/A'}`,
isVisible: () => {
const name = page1.textbox('instructorName')?.value();
return name !== null && name !== undefined && name.trim() !== '';
}
});
instructorSection.addRow(row => {
row.addMatrixQuestion('instructorRatings', {
label: 'How would you rate your instructor in these areas?',
rows: [
{ id: 'knowledge', label: 'Knowledge & expertise', isRequired: true },
{ id: 'communication', label: 'Clear communication', isRequired: true },
{ id: 'enthusiasm', label: 'Enthusiasm & energy', isRequired: true },
{ id: 'attention', label: 'Individual attention', isRequired: false },
{ id: 'punctuality', label: 'Punctuality', isRequired: false },
{ id: 'safety', label: 'Safety awareness', isRequired: true }
],
columns: [
{ id: '1', label: 'Poor' },
{ id: '2', label: 'Fair' },
{ id: '3', label: 'Good' },
{ id: '4', label: 'Very Good' },
{ id: '5', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
instructorSection.addRow(row => {
row.addStarRating('instructorOverall', {
label: 'Overall instructor rating',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
// Program Content Section
const contentSection = page2.addSubform('contentSection', {
title: 'Program Content & Structure'
});
contentSection.addRow(row => {
row.addStarRating('contentQuality', {
label: 'Quality of program content',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
row.addStarRating('difficultyLevel', {
label: 'Appropriate difficulty level',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
});
contentSection.addRow(row => {
row.addRatingScale('paceRating', {
label: 'How was the pace of the program?',
preset: 'custom',
min: 1,
max: 5,
lowLabel: 'Too slow',
highLabel: 'Too fast',
alignment: 'center',
variant: 'segmented'
});
});
contentSection.addRow(row => {
row.addSlider('skillImprovement', {
label: 'How much did your skills improve?',
min: 0,
max: 100,
step: 10,
unit: '%',
showValue: true,
defaultValue: 50
});
});
// ============================================
// PAGE 3: Facilities & Logistics
// ============================================
const page3 = pages.addPage('facilities');
page3.addRow(row => {
row.addTextPanel('page3Title', {
label: 'Step 3 of 4: Facilities & Logistics',
customStyles: {
fontSize: '18px',
fontWeight: 'bold',
color: '#059669',
marginBottom: '16px'
}
});
});
page3.addRow(row => {
row.addMatrixQuestion('facilityRatings', {
label: 'Rate the facility and logistics',
rows: [
{ id: 'cleanliness', label: 'Cleanliness', isRequired: true },
{ id: 'equipment', label: 'Equipment quality', isRequired: true },
{ id: 'space', label: 'Adequate space', isRequired: true },
{ id: 'parking', label: 'Parking availability', isRequired: false },
{ id: 'accessibility', label: 'Accessibility', isRequired: false }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' },
{ id: 'na', label: 'N/A' }
],
striped: true,
fullWidth: true
});
});
page3.addRow(row => {
row.addRadioButton('scheduleConvenience', {
label: 'How convenient was the program schedule?',
orientation: 'horizontal',
options: [
{ id: 'very-inconvenient', name: 'Very Inconvenient' },
{ id: 'inconvenient', name: 'Inconvenient' },
{ id: 'neutral', name: 'Neutral' },
{ id: 'convenient', name: 'Convenient' },
{ id: 'very-convenient', name: 'Very Convenient' }
]
});
});
page3.addRow(row => {
row.addCheckboxList('schedulePreferences', {
label: 'What schedule changes would work better for you?',
orientation: 'vertical',
isVisible: () => {
const val = page3.radioButton('scheduleConvenience')?.value();
return val === 'very-inconvenient' || val === 'inconvenient';
},
options: [
{ id: 'earlier', name: 'Earlier time slots' },
{ id: 'later', name: 'Later time slots' },
{ id: 'weekdays', name: 'More weekday options' },
{ id: 'weekends', name: 'More weekend options' },
{ id: 'shorter', name: 'Shorter sessions' },
{ id: 'longer', name: 'Longer sessions' }
]
});
});
page3.addRow(row => {
row.addRatingScale('valueForMoney', {
label: 'How would you rate the value for money?',
preset: 'satisfaction',
alignment: 'center',
size: 'lg'
});
});
// ============================================
// PAGE 4: Overall & Recommendations
// ============================================
const page4 = pages.addPage('overall');
page4.addRow(row => {
row.addTextPanel('page4Title', {
label: 'Step 4 of 4: Overall Experience',
customStyles: {
fontSize: '18px',
fontWeight: 'bold',
color: '#059669',
marginBottom: '16px'
}
});
});
page4.addRow(row => {
row.addEmojiRating('overallExperience', {
label: 'How would you rate your overall experience?',
preset: 'satisfaction',
size: 'lg',
alignment: 'center',
showLabels: true
});
});
const npsSection = page4.addSubform('npsSection', {
customStyles: () => {
const category = npsSection.ratingScale('recommendScore')?.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' };
}
});
npsSection.addRow(row => {
row.addRatingScale('recommendScore', {
label: 'How likely are you to recommend this program to a friend or family member?',
preset: 'nps',
showCategoryLabel: true,
showSegmentColors: true,
alignment: 'center'
});
});
page4.addRow(row => {
row.addRadioButton('wouldReturn', {
label: 'Would you participate in this program again?',
orientation: 'horizontal',
options: [
{ id: 'definitely', name: 'Definitely' },
{ id: 'probably', name: 'Probably' },
{ id: 'not-sure', name: 'Not sure' },
{ id: 'probably-not', name: 'Probably not' },
{ id: 'definitely-not', name: 'Definitely not' }
]
});
});
page4.addRow(row => {
row.addSuggestionChips('highlights', {
label: 'What were the highlights of the program? (Select all that apply)',
suggestions: [
{ id: 'instructor', name: 'Great instructor' },
{ id: 'fun', name: 'Fun & enjoyable' },
{ id: 'skills', name: 'Learned new skills' },
{ id: 'social', name: 'Social connections' },
{ id: 'facilities', name: 'Excellent facilities' },
{ id: 'value', name: 'Good value' },
{ id: 'schedule', name: 'Convenient schedule' },
{ id: 'challenge', name: 'Good challenge' }
],
alignment: 'center'
});
});
page4.addSpacer();
page4.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any additional comments or suggestions?',
placeholder: 'Share what you loved, what could be improved, or ideas for new programs...',
rows: 4,
autoExpand: true
});
});
// Contact section
const contactSection = page4.addSubform('contactSection', {
title: 'Stay Informed (Optional)'
});
contactSection.addRow(row => {
row.addCheckbox('notifyNewPrograms', {
label: 'Notify me about similar programs'
});
});
contactSection.addRow(row => {
row.addEmail('email', {
label: 'Email address',
placeholder: 'your@email.com',
isVisible: () => contactSection.checkbox('notifyNewPrograms')?.value() === true,
isRequired: () => contactSection.checkbox('notifyNewPrograms')?.value() === true
});
});
// ============================================
// SUMMARY SECTION
// ============================================
const summarySection = page4.addSubform('summarySection', {
title: 'Feedback Summary',
isVisible: () => {
const nps = npsSection.ratingScale('recommendScore')?.value();
return nps !== null && nps !== undefined;
}
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const programType = page1.dropdown('programType')?.value();
const programName = page1.textbox('programName')?.value();
const instructorName = page1.textbox('instructorName')?.value();
const overallExp = page4.emojiRating('overallExperience')?.value();
const nps = npsSection.ratingScale('recommendScore')?.value();
const npsCategory = npsSection.ratingScale('recommendScore')?.npsCategory();
const wouldReturn = page4.radioButton('wouldReturn')?.value();
const highlights = page4.suggestionChips('highlights')?.value() || [];
let summary = `Recreation Program Feedback\n`;
summary += `${'═'.repeat(30)}\n\n`;
summary += `Program: ${programName || 'N/A'}\n`;
if (instructorName) {
summary += `Instructor: ${instructorName}\n`;
}
if (overallExp) {
const expLabels: Record<string, string> = {
'very-bad': 'Very Unsatisfied',
'bad': 'Unsatisfied',
'neutral': 'Neutral',
'good': 'Satisfied',
'excellent': 'Very Satisfied'
};
summary += `Experience: ${expLabels[overallExp] || overallExp}\n`;
}
if (nps !== null && nps !== undefined) {
summary += `NPS Score: ${nps}/10 (${npsCategory})\n`;
}
if (wouldReturn) {
summary += `Would Return: ${wouldReturn.replace('-', ' ')}\n`;
}
if (highlights.length > 0) {
summary += `\nHighlights: ${highlights.length} selected`;
}
return summary;
},
customStyles: () => {
const npsCategory = npsSection.ratingScale('recommendScore')?.npsCategory();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (npsCategory === 'promoter') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (npsCategory === 'detractor') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback'
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your feedback helps us create better recreation programs for our community. We appreciate you taking the time to share your experience!'
});
}