export function campusFacilitiesSurvey(form: FormTs) {
// Campus Facilities Rating Survey - Multi-page facility assessment
// Demonstrates: Pages (multi-page), MatrixQuestion, StarRating, EmojiRating, Slider, CheckboxList, conditional logic
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Campus Facilities Feedback',
computedValue: () => 'Help us create a better campus experience for all students.',
customStyles: {
background: 'linear-gradient(135deg, #059669 0%, #10b981 100%)',
color: 'white',
padding: '28px',
borderRadius: '16px',
textAlign: 'center',
fontSize: '15px'
}
});
});
// ============================================
// MULTI-PAGE WIZARD
// ============================================
const pages = form.addPages('facilityPages', {
heightMode: 'current-page'
});
// ============================================
// PAGE 1: General Information
// ============================================
const page1 = pages.addPage('general');
const generalSection = page1.addSubform('generalInfo', {
title: 'About Your Campus Usage'
});
generalSection.addRow(row => {
row.addRadioButton('studentType', {
label: 'What type of student are you?',
options: [
{ id: 'undergrad', name: 'Undergraduate' },
{ id: 'grad', name: 'Graduate/Professional' },
{ id: 'online', name: 'Primarily Online' },
{ id: 'parttime', name: 'Part-time/Evening' }
],
orientation: 'vertical',
isRequired: true
});
});
generalSection.addRow(row => {
row.addSlider('hoursOnCampus', {
label: 'How many hours per week do you spend on campus?',
min: 0,
max: 60,
step: 5,
showValue: true,
unit: ' hours',
defaultValue: 20
});
});
generalSection.addRow(row => {
row.addCheckboxList('facilitiesUsed', {
label: 'Which facilities do you regularly use? (Select all that apply)',
options: [
{ id: 'library', name: 'Library' },
{ id: 'dining', name: 'Dining halls/Cafeterias' },
{ id: 'gym', name: 'Gym/Recreation center' },
{ id: 'labs', name: 'Computer labs' },
{ id: 'study', name: 'Study rooms/Lounges' },
{ id: 'health', name: 'Health center' },
{ id: 'parking', name: 'Parking facilities' },
{ id: 'housing', name: 'On-campus housing' }
],
orientation: 'vertical',
isRequired: true
});
});
page1.addRow(row => {
row.addButton('nextToPage2', {
label: 'Next: Rate Buildings',
onClick: () => pages.goToPage('buildings')
});
});
// ============================================
// PAGE 2: Building Ratings
// ============================================
const page2 = pages.addPage('buildings');
const buildingsSection = page2.addSubform('buildingsRating', {
title: 'Building & Classroom Ratings',
customStyles: { backgroundColor: '#f0fdf4', padding: '20px', borderRadius: '12px' }
});
buildingsSection.addRow(row => {
row.addMatrixQuestion('buildingRatings', {
label: 'Rate the following aspects of campus buildings:',
rows: [
{ id: 'classrooms', label: 'Classroom conditions', isRequired: true },
{ id: 'temperature', label: 'Temperature control (HVAC)', isRequired: true },
{ id: 'lighting', label: 'Lighting quality', isRequired: false },
{ id: 'cleanliness', label: 'Cleanliness', isRequired: true },
{ id: 'accessibility', label: 'Accessibility (ADA compliance)', isRequired: false },
{ id: 'technology', label: 'Technology/AV equipment', isRequired: true },
{ id: 'seating', label: 'Seating comfort', isRequired: false },
{ id: 'outlets', label: 'Power outlets availability', 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
});
});
buildingsSection.addSpacer({ height: '16px' });
buildingsSection.addRow(row => {
row.addTextarea('buildingIssues', {
label: 'Any specific building issues you\'ve experienced?',
placeholder: 'E.g., broken AC in Smith Hall, projector issues in Room 101...',
rows: 3,
autoExpand: true
});
});
page2.addRow(row => {
row.addButton('backToPage1', {
label: 'Back',
onClick: () => pages.goToPage('general')
}, '100px');
row.addEmpty('1fr');
row.addButton('nextToPage3', {
label: 'Next: Safety & Services',
onClick: () => pages.goToPage('safety')
});
});
// ============================================
// PAGE 3: Safety & Services
// ============================================
const page3 = pages.addPage('safety');
const safetySection = page3.addSubform('safetyRating', {
title: 'Campus Safety',
customStyles: { backgroundColor: '#fef2f2', padding: '20px', borderRadius: '12px' }
});
safetySection.addRow(row => {
row.addStarRating('overallSafety', {
label: 'How safe do you feel on campus overall?',
maxStars: 5,
size: 'lg',
showCounter: true,
alignment: 'center'
});
});
safetySection.addRow(row => {
row.addMatrixQuestion('safetyAspects', {
label: 'Rate safety aspects:',
rows: [
{ id: 'daytime', label: 'Daytime safety', isRequired: true },
{ id: 'nighttime', label: 'Nighttime safety', isRequired: true },
{ id: 'lighting', label: 'Outdoor lighting', isRequired: false },
{ id: 'security', label: 'Security presence', isRequired: false },
{ id: 'parking', label: 'Parking lot safety', isRequired: false },
{ id: 'emergency', label: 'Emergency phone 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
});
});
const servicesSection = page3.addSubform('servicesRating', {
title: 'Campus Services'
});
servicesSection.addRow(row => {
row.addStarRating('diningRating', {
label: 'Dining Services',
maxStars: 5,
size: 'md',
showCounter: true,
isVisible: () => {
const used = generalSection.checkboxList('facilitiesUsed')?.value() || [];
return used.includes('dining');
}
}, '1fr');
row.addStarRating('libraryRating', {
label: 'Library Services',
maxStars: 5,
size: 'md',
showCounter: true,
isVisible: () => {
const used = generalSection.checkboxList('facilitiesUsed')?.value() || [];
return used.includes('library');
}
}, '1fr');
});
servicesSection.addRow(row => {
row.addStarRating('gymRating', {
label: 'Recreation/Gym',
maxStars: 5,
size: 'md',
showCounter: true,
isVisible: () => {
const used = generalSection.checkboxList('facilitiesUsed')?.value() || [];
return used.includes('gym');
}
}, '1fr');
row.addStarRating('healthRating', {
label: 'Health Center',
maxStars: 5,
size: 'md',
showCounter: true,
isVisible: () => {
const used = generalSection.checkboxList('facilitiesUsed')?.value() || [];
return used.includes('health');
}
}, '1fr');
});
page3.addRow(row => {
row.addButton('backToPage2', {
label: 'Back',
onClick: () => pages.goToPage('buildings')
}, '100px');
row.addEmpty('1fr');
row.addButton('nextToPage4', {
label: 'Next: Overall & Priorities',
onClick: () => pages.goToPage('overall')
});
});
// ============================================
// PAGE 4: Overall & Priorities
// ============================================
const page4 = pages.addPage('overall');
const overallSection = page4.addSubform('overallSection', {
title: 'Overall Campus Experience'
});
overallSection.addRow(row => {
row.addEmojiRating('overallSatisfaction', {
label: 'Overall, how satisfied are you with campus facilities?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addThumbRating('wouldRecommend', {
label: 'Would you recommend this campus to prospective students based on facilities?',
size: 'lg',
showLabels: true,
upLabel: 'Yes, definitely',
downLabel: 'Probably not',
alignment: 'center'
});
});
const prioritiesSection = page4.addSubform('prioritiesSection', {
title: 'Improvement Priorities',
customStyles: { backgroundColor: '#fffbeb', padding: '20px', borderRadius: '12px' }
});
prioritiesSection.addRow(row => {
row.addSuggestionChips('topPriorities', {
label: 'What should be the TOP 3 priorities for improvement?',
suggestions: [
{ id: 'wifi', name: 'Better WiFi' },
{ id: 'hvac', name: 'Climate control' },
{ id: 'study-space', name: 'More study spaces' },
{ id: 'parking', name: 'Parking improvements' },
{ id: 'dining', name: 'Dining options' },
{ id: 'safety', name: 'Safety/Lighting' },
{ id: 'accessibility', name: 'Accessibility' },
{ id: 'cleanliness', name: 'Cleanliness' },
{ id: 'tech', name: 'Classroom technology' },
{ id: 'sustainability', name: 'Sustainability' }
],
min: 1,
max: 3,
alignment: 'center'
});
});
prioritiesSection.addSpacer({ height: '16px' });
prioritiesSection.addRow(row => {
row.addTextarea('additionalFeedback', {
label: 'Any additional feedback on campus facilities?',
placeholder: 'Share your suggestions, concerns, or positive experiences...',
rows: 4,
autoExpand: true
});
});
// ============================================
// SUMMARY (on page 4)
// ============================================
const summarySection = page4.addSubform('summary', {
title: 'Your Feedback Summary',
isVisible: () => overallSection.emojiRating('overallSatisfaction')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const studentType = generalSection.radioButton('studentType')?.value();
const hours = generalSection.slider('hoursOnCampus')?.value();
const facilities = generalSection.checkboxList('facilitiesUsed')?.value() || [];
const safety = safetySection.starRating('overallSafety')?.value();
const overall = overallSection.emojiRating('overallSatisfaction')?.value();
const recommend = overallSection.thumbRating('wouldRecommend')?.value();
const priorities = prioritiesSection.suggestionChips('topPriorities')?.value() || [];
const typeLabels: Record<string, string> = {
'undergrad': 'Undergraduate',
'grad': 'Graduate',
'online': 'Online',
'parttime': 'Part-time'
};
const satLabels: Record<string, string> = {
'very-bad': 'Very Dissatisfied',
'bad': 'Dissatisfied',
'neutral': 'Neutral',
'good': 'Satisfied',
'excellent': 'Very Satisfied'
};
let summary = '🎓 Campus Facilities Feedback\n';
summary += `${'═'.repeat(30)}\n\n`;
summary += `👤 Student Type: ${typeLabels[studentType || ''] || 'Not specified'}\n`;
summary += `⏰ Hours on Campus: ${hours || 0}/week\n`;
summary += `🏢 Facilities Used: ${facilities.length}\n`;
if (safety) {
summary += `\n🛡️ Safety Rating: ${safety}/5 stars`;
}
if (overall) {
summary += `\n😊 Overall Satisfaction: ${satLabels[overall] || overall}`;
}
if (recommend) {
summary += `\n👍 Would Recommend: ${recommend === 'up' ? 'Yes' : 'No'}`;
}
if (priorities.length > 0) {
summary += `\n\n🎯 Top Priorities: ${priorities.length} selected`;
}
return summary;
},
customStyles: () => {
const overall = overallSection.emojiRating('overallSatisfaction')?.value();
const baseStyles = {
padding: '20px',
borderRadius: '12px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (overall === 'excellent' || overall === 'good') {
return { ...baseStyles, backgroundColor: '#ecfdf5', borderLeft: '4px solid #10b981' };
} else if (overall === 'neutral') {
return { ...baseStyles, backgroundColor: '#fffbeb', borderLeft: '4px solid #f59e0b' };
} else {
return { ...baseStyles, backgroundColor: '#fef2f2', borderLeft: '4px solid #ef4444' };
}
}
});
});
page4.addRow(row => {
row.addButton('backToPage3', {
label: 'Back',
onClick: () => pages.goToPage('safety')
}, '100px');
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Campus Feedback',
isVisible: () => {
const currentPage = pages.currentPageIndex();
return currentPage === 3;
}
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Campus Feedback!',
message: 'Your input helps us prioritize improvements to create a better learning environment. We review all feedback and communicate updates on planned changes through student channels.'
});
}