export function youthSportsParentFeedback(form: FormTs) {
// Youth Sports Parent Feedback Form
// Demonstrates: RatingScale (NPS), StarRating, MatrixQuestion, EmojiRating, Dropdown, Slider, SuggestionChips, Pages
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Youth Sports Program Feedback',
computedValue: () => 'Help us create the best experience for young athletes.',
customStyles: {
backgroundColor: '#059669',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// MULTI-PAGE WIZARD
// ============================================
const pages = form.addPages('surveyPages', { heightMode: 'current-page' });
// ============================================
// PAGE 1: Program Details
// ============================================
const page1 = pages.addPage('programDetails');
page1.setTitle(() => 'Step 1: Program Information');
page1.addRow(row => {
row.addDropdown('sport', {
label: 'Which sport is your child enrolled in?',
options: [
{ id: 'soccer', name: 'Soccer' },
{ id: 'basketball', name: 'Basketball' },
{ id: 'baseball', name: 'Baseball/Softball' },
{ id: 'football', name: 'Football' },
{ id: 'hockey', name: 'Hockey' },
{ id: 'swimming', name: 'Swimming' },
{ id: 'gymnastics', name: 'Gymnastics' },
{ id: 'tennis', name: 'Tennis' },
{ id: 'volleyball', name: 'Volleyball' },
{ id: 'track', name: 'Track & Field' },
{ id: 'martial-arts', name: 'Martial Arts' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select sport',
isRequired: true
}, '1fr');
row.addDropdown('ageGroup', {
label: "Child's age group",
options: [
{ id: 'u6', name: 'Under 6' },
{ id: 'u8', name: '6-8 years' },
{ id: 'u10', name: '9-10 years' },
{ id: 'u12', name: '11-12 years' },
{ id: 'u14', name: '13-14 years' },
{ id: 'u16', name: '15-16 years' },
{ id: 'u18', name: '17-18 years' }
],
placeholder: 'Select age group',
isRequired: true
}, '1fr');
});
page1.addRow(row => {
row.addRadioButton('seasonParticipation', {
label: 'How long has your child been in this program?',
options: [
{ id: 'first', name: 'First season' },
{ id: 'one-year', name: '1 year' },
{ id: 'two-years', name: '2-3 years' },
{ id: 'veteran', name: '4+ years' }
],
orientation: 'horizontal'
});
});
page1.addRow(row => {
row.addButton('nextPage1', {
label: 'Next: Safety & Coaching',
onClick: () => pages.goToPage('safetyCoaching'),
isDisabled: () => !page1.dropdown('sport')?.value() || !page1.dropdown('ageGroup')?.value()
});
});
// ============================================
// PAGE 2: Safety & Coaching
// ============================================
const page2 = pages.addPage('safetyCoaching');
page2.setTitle(() => 'Step 2: Safety & Coaching');
const safetySubform = page2.addSubform('safety', {
title: 'Safety Assessment',
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
safetySubform.addRow(row => {
row.addStarRating('overallSafety', {
label: 'Overall safety of the program',
maxStars: 5,
size: 'lg',
alignment: 'center',
tooltip: 'Consider equipment, facilities, supervision, and injury prevention'
});
});
safetySubform.addRow(row => {
row.addMatrixQuestion('safetyMatrix', {
label: 'Please rate the following safety aspects:',
rows: [
{ id: 'equipment', label: 'Equipment quality & condition', isRequired: true },
{ id: 'facilities', label: 'Facility safety', isRequired: true },
{ id: 'supervision', label: 'Adult supervision during activities' },
{ id: 'emergency', label: 'Emergency preparedness' },
{ id: 'weather', label: 'Weather-related decision making' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
page2.addSpacer();
const coachingSubform = page2.addSubform('coaching', {
title: 'Coaching Quality'
});
coachingSubform.addRow(row => {
row.addStarRating('coachRating', {
label: "Coach's overall effectiveness",
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
coachingSubform.addRow(row => {
row.addMatrixQuestion('coachingMatrix', {
label: 'Rate your child\'s coach on:',
rows: [
{ id: 'knowledge', label: 'Sport knowledge & skills', isRequired: true },
{ id: 'communication', label: 'Communication with children' },
{ id: 'fairness', label: 'Fair treatment of all players' },
{ id: 'patience', label: 'Patience & encouragement' },
{ id: 'organization', label: 'Practice organization' },
{ id: 'parentComm', label: 'Communication with parents' }
],
columns: [
{ id: 'needs-improvement', label: 'Needs Work' },
{ id: 'satisfactory', label: 'Satisfactory' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
page2.addRow(row => {
row.addButton('prevPage2', {
label: 'Back',
onClick: () => pages.goToPage('programDetails')
}, 'auto');
row.addEmpty('1fr');
row.addButton('nextPage2', {
label: 'Next: Child Experience',
onClick: () => pages.goToPage('childExperience')
}, 'auto');
});
// ============================================
// PAGE 3: Child Experience & Development
// ============================================
const page3 = pages.addPage('childExperience');
page3.setTitle(() => 'Step 3: Your Child\'s Experience');
const enjoymentSubform = page3.addSubform('enjoyment', {
title: "Your Child's Enjoyment"
});
enjoymentSubform.addRow(row => {
row.addEmojiRating('childEnjoyment', {
label: 'How much does your child enjoy the program?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
enjoymentSubform.addRow(row => {
row.addRadioButton('attendanceEagerness', {
label: 'How eager is your child to attend practices/games?',
options: [
{ id: 'very-eager', name: 'Very eager - counts down the days!' },
{ id: 'happy', name: 'Happy to go' },
{ id: 'neutral', name: 'Neutral - goes without complaint' },
{ id: 'reluctant', name: 'Sometimes reluctant' },
{ id: 'resistant', name: 'Often resistant to attending' }
],
orientation: 'vertical'
});
});
const developmentSubform = page3.addSubform('development', {
title: 'Skill Development'
});
developmentSubform.addRow(row => {
row.addStarRating('skillImprovement', {
label: 'How much has your child improved in skills?',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
row.addStarRating('confidenceGrowth', {
label: 'Confidence and self-esteem growth',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
});
developmentSubform.addRow(row => {
row.addSuggestionChips('developmentAreas', {
label: 'What has your child gained from this program? (Select all that apply)',
suggestions: [
{ id: 'skills', name: 'Sport skills' },
{ id: 'fitness', name: 'Physical fitness' },
{ id: 'teamwork', name: 'Teamwork' },
{ id: 'discipline', name: 'Discipline' },
{ id: 'confidence', name: 'Confidence' },
{ id: 'friendships', name: 'Friendships' },
{ id: 'sportsmanship', name: 'Sportsmanship' },
{ id: 'leadership', name: 'Leadership' }
],
alignment: 'center'
});
});
page3.addRow(row => {
row.addButton('prevPage3', {
label: 'Back',
onClick: () => pages.goToPage('safetyCoaching')
}, 'auto');
row.addEmpty('1fr');
row.addButton('nextPage3', {
label: 'Next: Overall & Feedback',
onClick: () => pages.goToPage('overallFeedback')
}, 'auto');
});
// ============================================
// PAGE 4: Overall Satisfaction & Final Feedback
// ============================================
const page4 = pages.addPage('overallFeedback');
page4.setTitle(() => 'Step 4: Overall Feedback');
const overallSubform = page4.addSubform('overall', {
title: 'Overall Satisfaction'
});
overallSubform.addRow(row => {
row.addRatingScale('npsScore', {
label: 'How likely are you to recommend this program to other parents?',
preset: 'nps',
showCategoryLabel: true,
showSegmentColors: true,
size: 'md'
});
});
overallSubform.addRow(row => {
row.addSlider('valueForMoney', {
label: 'Value for money',
min: 1,
max: 10,
step: 1,
showValue: true,
defaultValue: 5
}, '1fr');
row.addRadioButton('returnNextSeason', {
label: 'Will you enroll your child next season?',
options: [
{ id: 'definitely', name: 'Definitely yes' },
{ id: 'probably', name: 'Probably yes' },
{ id: 'unsure', name: 'Unsure' },
{ id: 'probably-not', name: 'Probably not' },
{ id: 'no', name: 'Definitely not' }
],
orientation: 'vertical'
}, '1fr');
});
// Conditional feedback based on satisfaction
const feedbackSubform = page4.addSubform('feedback', {
title: 'Your Feedback'
});
feedbackSubform.addRow(row => {
row.addSuggestionChips('positives', {
label: 'What did you appreciate most? (Select up to 4)',
suggestions: [
{ id: 'coaching', name: 'Great coaching' },
{ id: 'organization', name: 'Well organized' },
{ id: 'communication', name: 'Good communication' },
{ id: 'facilities', name: 'Nice facilities' },
{ id: 'inclusive', name: 'Inclusive environment' },
{ id: 'fun', name: 'Fun atmosphere' },
{ id: 'learning', name: 'Skill development' },
{ id: 'safe', name: 'Safety focused' }
],
max: 4,
alignment: 'center',
isVisible: () => {
const nps = overallSubform.ratingScale('npsScore')?.value();
return nps !== null && nps !== undefined && nps >= 5;
}
});
});
feedbackSubform.addRow(row => {
row.addSuggestionChips('improvements', {
label: 'What areas need improvement? (Select all that apply)',
suggestions: [
{ id: 'coaching', name: 'Coaching quality' },
{ id: 'communication', name: 'Parent communication' },
{ id: 'scheduling', name: 'Schedule/timing' },
{ id: 'facilities', name: 'Facilities' },
{ id: 'equipment', name: 'Equipment' },
{ id: 'playtime', name: 'Equal play time' },
{ id: 'cost', name: 'Program cost' },
{ id: 'competition', name: 'Competition level' }
],
alignment: 'center',
isVisible: () => {
const nps = overallSubform.ratingScale('npsScore')?.value();
return nps !== null && nps !== undefined && nps <= 6;
}
});
});
feedbackSubform.addSpacer();
feedbackSubform.addRow(row => {
row.addTextarea('additionalComments', {
label: () => {
const npsCategory = overallSubform.ratingScale('npsScore')?.npsCategory();
if (npsCategory === 'promoter') return 'What makes this program special?';
if (npsCategory === 'detractor') return 'How can we improve the program?';
return 'Any additional comments or suggestions?';
},
placeholder: 'Share your thoughts to help us improve...',
rows: 4,
autoExpand: true
});
});
// ============================================
// Summary Section on Page 4
// ============================================
const summarySubform = page4.addSubform('summary', {
title: 'Feedback Summary',
isVisible: () => overallSubform.ratingScale('npsScore')?.value() !== null
});
summarySubform.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const sport = page1.dropdown('sport')?.value();
const ageGroup = page1.dropdown('ageGroup')?.value();
const safetyRating = safetySubform.starRating('overallSafety')?.value();
const coachRating = coachingSubform.starRating('coachRating')?.value();
const enjoyment = enjoymentSubform.emojiRating('childEnjoyment')?.value();
const npsScore = overallSubform.ratingScale('npsScore')?.value();
const npsCategory = overallSubform.ratingScale('npsScore')?.npsCategory();
const returnIntent = overallSubform.radioButton('returnNextSeason')?.value();
if (npsScore === null || npsScore === undefined) return '';
const sportLabels: Record<string, string> = {
'soccer': 'Soccer', 'basketball': 'Basketball', 'baseball': 'Baseball/Softball',
'football': 'Football', 'hockey': 'Hockey', 'swimming': 'Swimming',
'gymnastics': 'Gymnastics', 'tennis': 'Tennis', 'volleyball': 'Volleyball',
'track': 'Track & Field', 'martial-arts': 'Martial Arts', 'other': 'Other'
};
const enjoymentLabels: Record<string, string> = {
'very-bad': 'Not enjoying', 'bad': 'Not very happy', 'neutral': 'Okay',
'good': 'Enjoying it', 'excellent': 'Loving it!'
};
let summary = `Youth Sports Feedback Summary\n`;
summary += `${'═'.repeat(32)}\n\n`;
summary += `Sport: ${sportLabels[sport || ''] || sport}\n`;
summary += `Age Group: ${ageGroup?.toUpperCase() || 'N/A'}\n\n`;
if (safetyRating) summary += `Safety: ${'★'.repeat(safetyRating)}${'☆'.repeat(5 - safetyRating)}\n`;
if (coachRating) summary += `Coaching: ${'★'.repeat(coachRating)}${'☆'.repeat(5 - coachRating)}\n`;
if (enjoyment) summary += `Child Enjoyment: ${enjoymentLabels[enjoyment] || enjoyment}\n`;
summary += `\nRecommendation Score: ${npsScore}/10`;
if (npsCategory) summary += ` (${npsCategory.charAt(0).toUpperCase()}${npsCategory.slice(1)})`;
if (returnIntent === 'definitely' || returnIntent === 'probably') {
summary += `\n\n✅ Planning to return next season`;
}
return summary;
},
customStyles: () => {
const npsCategory = overallSubform.ratingScale('npsScore')?.npsCategory();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (npsCategory === 'promoter') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #059669' };
} else if (npsCategory === 'passive') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #d97706' };
} else if (npsCategory === 'detractor') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #dc2626' };
}
return { ...baseStyles, backgroundColor: '#f3f4f6', borderLeft: '4px solid #6b7280' };
}
});
});
page4.addRow(row => {
row.addButton('prevPage4', {
label: 'Back',
onClick: () => pages.goToPage('childExperience')
}, 'auto');
row.addEmpty('1fr');
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => overallSubform.ratingScale('npsScore')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your insights help us create a better experience for all young athletes. We review every response and continuously work to improve our programs.'
});
}