export function parentFeedbackSurvey(form: FormTs) {
// Parent Satisfaction Survey - Multi-page education feedback
// Demonstrates: Pages (multi-page wizard), MatrixQuestion, StarRating, EmojiRating, CheckboxList, Dropdown
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Parent Satisfaction Survey',
computedValue: () => 'Your feedback helps us create the best learning environment for your child.',
customStyles: {
background: 'linear-gradient(135deg, #059669 0%, #10b981 100%)',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// MULTI-PAGE WIZARD
// ============================================
const pages = form.addPages('surveyPages');
// ============================================
// PAGE 1: Child & Grade Information
// ============================================
const page1 = pages.addPage('childInfo');
page1.addRow(row => {
row.addTextPanel('page1Title', {
label: 'Step 1 of 4: About Your Child',
customStyles: {
fontSize: '18px',
fontWeight: 'bold',
color: '#059669',
marginBottom: '16px'
}
});
});
page1.addRow(row => {
row.addDropdown('gradeLevel', {
label: 'What grade is your child in?',
options: [
{ id: 'k', name: 'Kindergarten' },
{ id: '1', name: '1st Grade' },
{ id: '2', name: '2nd Grade' },
{ id: '3', name: '3rd Grade' },
{ id: '4', name: '4th Grade' },
{ id: '5', name: '5th Grade' },
{ id: '6', name: '6th Grade' },
{ id: '7', name: '7th Grade' },
{ id: '8', name: '8th Grade' },
{ id: '9', name: '9th Grade' },
{ id: '10', name: '10th Grade' },
{ id: '11', name: '11th Grade' },
{ id: '12', name: '12th Grade' }
],
placeholder: 'Select grade level',
isRequired: true
}, '50%');
row.addDropdown('yearsAtSchool', {
label: 'Years at this school',
options: [
{ id: '1', name: 'First year' },
{ id: '2', name: '2 years' },
{ id: '3', name: '3 years' },
{ id: '4', name: '4+ years' }
],
placeholder: 'Select years'
}, '50%');
});
page1.addSpacer();
page1.addRow(row => {
row.addEmojiRating('childHappiness', {
label: 'How happy is your child at school this year?',
preset: 'mood',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
page1.addRow(row => {
row.addButton('nextPage1', {
label: 'Continue to Teaching Quality',
onClick: () => pages.goToPage('teachingQuality'),
isDisabled: () => page1.dropdown('gradeLevel')?.value() === null
});
});
// ============================================
// PAGE 2: Teaching Quality
// ============================================
const page2 = pages.addPage('teachingQuality');
page2.addRow(row => {
row.addTextPanel('page2Title', {
label: 'Step 2 of 4: Teaching Quality',
customStyles: {
fontSize: '18px',
fontWeight: 'bold',
color: '#059669',
marginBottom: '16px'
}
});
});
page2.addRow(row => {
row.addMatrixQuestion('teacherRatings', {
label: 'Please rate the following aspects of teaching:',
rows: [
{ id: 'knowledge', label: 'Subject Knowledge', isRequired: true },
{ id: 'engagement', label: 'Student Engagement', isRequired: true },
{ id: 'individual-attention', label: 'Individual Attention', isRequired: true },
{ id: 'homework', label: 'Appropriate Homework', isRequired: false },
{ id: 'feedback', label: 'Quality of Feedback', isRequired: true },
{ id: 'accessibility', label: 'Teacher Accessibility', isRequired: false }
],
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
});
});
page2.addSpacer();
page2.addRow(row => {
row.addStarRating('overallTeaching', {
label: 'Overall teaching quality rating',
maxStars: 5,
size: 'lg',
alignment: 'center',
showCounter: true,
showConfettiOnMax: true
});
});
page2.addRow(row => {
row.addButton('backPage2', {
label: 'Back',
onClick: () => pages.goToPage('childInfo')
}, '100px');
row.addEmpty('1fr');
row.addButton('nextPage2', {
label: 'Continue to Communication',
onClick: () => pages.goToPage('communication'),
isDisabled: () => !page2.matrixQuestion('teacherRatings')?.areAllRequiredRowsAnswered()
});
});
// ============================================
// PAGE 3: Communication & Safety
// ============================================
const page3 = pages.addPage('communication');
page3.addRow(row => {
row.addTextPanel('page3Title', {
label: 'Step 3 of 4: Communication & Safety',
customStyles: {
fontSize: '18px',
fontWeight: 'bold',
color: '#059669',
marginBottom: '16px'
}
});
});
const commSubform = page3.addSubform('communicationSection', {
title: 'School Communication'
});
commSubform.addRow(row => {
row.addRatingScale('commFrequency', {
label: 'How satisfied are you with the frequency of school communication?',
preset: 'satisfaction',
alignment: 'center'
});
});
commSubform.addRow(row => {
row.addCheckboxList('commChannels', {
label: 'Which communication channels work best for you?',
options: [
{ id: 'email', name: 'Email' },
{ id: 'app', name: 'School App' },
{ id: 'sms', name: 'Text Messages' },
{ id: 'portal', name: 'Parent Portal' },
{ id: 'newsletter', name: 'Newsletter' },
{ id: 'meetings', name: 'Parent-Teacher Meetings' }
],
orientation: 'horizontal'
});
});
const safetySubform = page3.addSubform('safetySection', {
title: 'Safety & Environment'
});
safetySubform.addRow(row => {
row.addStarRating('safetySatisfaction', {
label: 'How safe do you feel your child is at school?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showCounter: true
});
});
safetySubform.addRow(row => {
row.addThumbRating('bullying', {
label: 'Is the school effective at addressing bullying and conflicts?',
showLabels: true,
upLabel: 'Yes, very effective',
downLabel: 'No, needs improvement',
alignment: 'center'
});
});
safetySubform.addRow(row => {
row.addTextarea('safetyConcerns', {
label: 'Any safety concerns you would like to share?',
placeholder: 'Optional - share any concerns...',
rows: 2,
autoExpand: true,
isVisible: () => safetySubform.thumbRating('bullying')?.value() === 'down'
});
});
page3.addRow(row => {
row.addButton('backPage3', {
label: 'Back',
onClick: () => pages.goToPage('teachingQuality')
}, '100px');
row.addEmpty('1fr');
row.addButton('nextPage3', {
label: 'Continue to Final Thoughts',
onClick: () => pages.goToPage('finalThoughts')
});
});
// ============================================
// PAGE 4: Final Thoughts
// ============================================
const page4 = pages.addPage('finalThoughts');
page4.addRow(row => {
row.addTextPanel('page4Title', {
label: 'Step 4 of 4: Final Thoughts',
customStyles: {
fontSize: '18px',
fontWeight: 'bold',
color: '#059669',
marginBottom: '16px'
}
});
});
page4.addRow(row => {
row.addRatingScale('npsScore', {
label: 'How likely are you to recommend this school to other parents?',
preset: 'nps',
showCategoryLabel: true,
showSegmentColors: true,
isRequired: true
});
});
page4.addSpacer();
page4.addRow(row => {
row.addSuggestionChips('schoolStrengths', {
label: 'What are the school\'s greatest strengths? (Select up to 3)',
suggestions: [
{ id: 'academics', name: 'Academic Excellence' },
{ id: 'teachers', name: 'Caring Teachers' },
{ id: 'community', name: 'Strong Community' },
{ id: 'activities', name: 'Extracurricular Activities' },
{ id: 'facilities', name: 'Facilities' },
{ id: 'diversity', name: 'Diversity & Inclusion' },
{ id: 'technology', name: 'Technology Integration' },
{ id: 'support', name: 'Student Support' }
],
max: 3,
alignment: 'center'
});
});
page4.addSpacer();
page4.addRow(row => {
row.addTextarea('improvements', {
label: () => {
const nps = page4.ratingScale('npsScore')?.npsCategory();
if (nps === 'promoter') return 'What makes this school special to your family?';
if (nps === 'passive') return 'What would make this school a 9 or 10 for you?';
return 'What areas need the most improvement?';
},
placeholder: 'Share your thoughts...',
rows: 3,
autoExpand: true
});
});
page4.addRow(row => {
row.addCheckbox('contactPermission', {
label: 'You may contact me to discuss my feedback'
});
});
page4.addRow(row => {
row.addEmail('parentEmail', {
label: 'Your email address',
placeholder: 'parent@email.com',
isVisible: () => page4.checkbox('contactPermission')?.value() === true,
isRequired: () => page4.checkbox('contactPermission')?.value() === true
});
});
page4.addRow(row => {
row.addButton('backPage4', {
label: 'Back',
onClick: () => pages.goToPage('communication')
}, '100px');
});
// ============================================
// SUMMARY SECTION (after pages)
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Feedback Summary',
isVisible: () => page4.ratingScale('npsScore')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const grade = page1.dropdown('gradeLevel')?.value();
const happiness = page1.emojiRating('childHappiness')?.value();
const teaching = page2.starRating('overallTeaching')?.value();
const nps = page4.ratingScale('npsScore')?.value();
const category = page4.ratingScale('npsScore')?.npsCategory();
const strengths = page4.suggestionChips('schoolStrengths')?.value() || [];
if (!grade) return '';
const happinessLabels: Record<string, string> = {
'sad': 'Unhappy',
'down': 'Somewhat unhappy',
'neutral': 'Neutral',
'happy': 'Happy',
'excited': 'Very happy'
};
let summary = 'Feedback Summary\n';
summary += `${'═'.repeat(25)}\n\n`;
summary += `Grade: ${grade === 'k' ? 'Kindergarten' : `${grade}th Grade`}\n`;
if (happiness) {
summary += `Child Happiness: ${happinessLabels[happiness] || happiness}\n`;
}
if (teaching) {
summary += `Teaching Quality: ${teaching}/5 stars\n`;
}
if (strengths.length > 0) {
summary += `\nStrengths: ${strengths.join(', ')}\n`;
}
if (nps !== null && nps !== undefined) {
summary += `\nNPS: ${nps}/10 (${category?.charAt(0).toUpperCase()}${category?.slice(1)})\n`;
}
return summary;
},
customStyles: () => {
const category = page4.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: '#f0fdf4', borderLeft: '4px solid #059669' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Survey',
isVisible: () => page4.ratingScale('npsScore')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your insights help us create a better learning environment for all students. We review every response and take action on common themes.'
});
}