export function hybridEventFeedback(form: FormTs) {
// Hybrid Event Feedback Survey - Compare in-person vs virtual experiences
// Demonstrates: Conditional sections by attendance type, MatrixQuestion, StarRating, RatingScale, EmojiRating, Slider, ThumbRating, SuggestionChips
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Hybrid Event Feedback',
computedValue: () => 'Help us improve both in-person and virtual experiences',
customStyles: {
backgroundColor: '#8b5cf6',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Attendance Information
// ============================================
const attendanceSection = form.addSubform('attendance', {
title: 'Your Attendance'
});
attendanceSection.addRow(row => {
row.addRadioButton('attendanceType', {
label: 'How did you attend the event?',
options: [
{ id: 'in-person', name: 'In-person' },
{ id: 'virtual', name: 'Virtual/Online' },
{ id: 'both', name: 'Both (hybrid mix)' }
],
orientation: 'horizontal',
isRequired: true
});
});
attendanceSection.addRow(row => {
row.addDropdown('daysAttended', {
label: 'How many days did you attend?',
options: [
{ id: '1', name: '1 day' },
{ id: '2', name: '2 days' },
{ id: '3', name: '3 days' },
{ id: '4+', name: '4 or more days' }
],
placeholder: 'Select days'
}, '1fr');
row.addDropdown('sessionsAttended', {
label: 'Approximately how many sessions?',
options: [
{ id: '1-3', name: '1-3 sessions' },
{ id: '4-6', name: '4-6 sessions' },
{ id: '7-10', name: '7-10 sessions' },
{ id: '10+', name: 'More than 10 sessions' }
],
placeholder: 'Select range'
}, '1fr');
});
// ============================================
// SECTION 2A: In-Person Experience (visible for in-person or both)
// ============================================
const inPersonSection = form.addSubform('inPerson', {
title: 'In-Person Experience',
isVisible: () => {
const type = attendanceSection.radioButton('attendanceType')?.value();
return type === 'in-person' || type === 'both';
},
customStyles: {
backgroundColor: '#f0fdf4',
padding: '16px',
borderRadius: '8px',
borderLeft: '4px solid #22c55e'
}
});
inPersonSection.addRow(row => {
row.addTextPanel('inPersonLabel', {
computedValue: () => 'Rate your on-site experience',
customStyles: { fontWeight: 'bold', marginBottom: '12px' }
});
});
inPersonSection.addRow(row => {
row.addMatrixQuestion('inPersonMatrix', {
label: 'Rate each aspect of the in-person experience',
rows: [
{ id: 'venue', label: 'Venue & Facilities', description: 'Location, rooms, accessibility', isRequired: true },
{ id: 'registration', label: 'Check-in Process', description: 'Registration, badges, welcome', isRequired: true },
{ id: 'networking', label: 'Networking Opportunities', description: 'Breaks, social events, meetups', isRequired: true },
{ id: 'catering', label: 'Food & Refreshments', description: 'Quality and variety', isRequired: false },
{ id: 'signage', label: 'Wayfinding & Signage', description: 'Easy to navigate', 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
});
});
inPersonSection.addRow(row => {
row.addStarRating('inPersonOverall', {
label: 'Overall in-person experience rating',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
// ============================================
// SECTION 2B: Virtual Experience (visible for virtual or both)
// ============================================
const virtualSection = form.addSubform('virtual', {
title: 'Virtual Experience',
isVisible: () => {
const type = attendanceSection.radioButton('attendanceType')?.value();
return type === 'virtual' || type === 'both';
},
customStyles: {
backgroundColor: '#eff6ff',
padding: '16px',
borderRadius: '8px',
borderLeft: '4px solid #3b82f6'
}
});
virtualSection.addRow(row => {
row.addTextPanel('virtualLabel', {
computedValue: () => 'Rate your online experience',
customStyles: { fontWeight: 'bold', marginBottom: '12px' }
});
});
virtualSection.addRow(row => {
row.addMatrixQuestion('virtualMatrix', {
label: 'Rate each aspect of the virtual experience',
rows: [
{ id: 'platform', label: 'Event Platform', description: 'Ease of use, navigation', isRequired: true },
{ id: 'stream', label: 'Stream Quality', description: 'Video and audio quality', isRequired: true },
{ id: 'interaction', label: 'Interactive Features', description: 'Chat, Q&A, polls', isRequired: true },
{ id: 'networking', label: 'Virtual Networking', description: 'Meetups, 1:1 video chats', isRequired: false },
{ id: 'support', label: 'Technical Support', description: 'Help 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
});
});
virtualSection.addRow(row => {
row.addSlider('connectionIssues', {
label: 'How often did you experience technical issues?',
min: 0,
max: 10,
step: 1,
defaultValue: 2,
showValue: true
});
});
virtualSection.addRow(row => {
row.addStarRating('virtualOverall', {
label: 'Overall virtual experience rating',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
// ============================================
// SECTION 3: Format Comparison (for hybrid attendees)
// ============================================
const comparisonSection = form.addSubform('comparison', {
title: 'Format Comparison',
isVisible: () => attendanceSection.radioButton('attendanceType')?.value() === 'both',
customStyles: {
backgroundColor: '#faf5ff',
padding: '16px',
borderRadius: '8px',
borderLeft: '4px solid #8b5cf6'
}
});
comparisonSection.addRow(row => {
row.addRadioButton('preferredFormat', {
label: 'Which format did you prefer overall?',
options: [
{ id: 'in-person', name: 'Strongly prefer in-person' },
{ id: 'slight-in-person', name: 'Slightly prefer in-person' },
{ id: 'equal', name: 'Both equally good' },
{ id: 'slight-virtual', name: 'Slightly prefer virtual' },
{ id: 'virtual', name: 'Strongly prefer virtual' }
],
orientation: 'vertical'
});
});
comparisonSection.addRow(row => {
row.addCheckboxList('inPersonBetter', {
label: 'What was better in-person?',
options: [
{ id: 'networking', name: 'Networking' },
{ id: 'energy', name: 'Event energy/atmosphere' },
{ id: 'focus', name: 'Ability to focus' },
{ id: 'speakers', name: 'Speaker interaction' },
{ id: 'exhibits', name: 'Exhibits/demos' }
],
orientation: 'vertical'
}, '1fr');
row.addCheckboxList('virtualBetter', {
label: 'What was better virtually?',
options: [
{ id: 'convenience', name: 'Convenience' },
{ id: 'access', name: 'Content access' },
{ id: 'replay', name: 'Replay availability' },
{ id: 'cost', name: 'Cost savings' },
{ id: 'multitask', name: 'Ability to multitask' }
],
orientation: 'vertical'
}, '1fr');
});
// ============================================
// SECTION 4: Content Quality
// ============================================
const contentSection = form.addSubform('content', {
title: 'Content Quality',
isVisible: () => attendanceSection.radioButton('attendanceType')?.value() !== null
});
contentSection.addRow(row => {
row.addStarRating('contentQuality', {
label: 'Overall quality of session content',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
row.addStarRating('speakerQuality', {
label: 'Quality of speakers/presenters',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
});
contentSection.addRow(row => {
row.addEmojiRating('contentRelevance', {
label: 'How relevant was the content to your needs?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
contentSection.addRow(row => {
row.addSuggestionChips('topicsInterest', {
label: 'Which topics were most valuable? (Select up to 3)',
suggestions: [
{ id: 'keynotes', name: 'Keynotes' },
{ id: 'workshops', name: 'Workshops' },
{ id: 'panels', name: 'Panel Discussions' },
{ id: 'demos', name: 'Product Demos' },
{ id: 'networking', name: 'Networking Sessions' },
{ id: 'qa', name: 'Q&A Sessions' },
{ id: 'breakouts', name: 'Breakout Sessions' },
{ id: 'poster', name: 'Poster Sessions' }
],
max: 3,
alignment: 'center'
});
});
// ============================================
// SECTION 5: Engagement & Value
// ============================================
const engagementSection = form.addSubform('engagement', {
title: 'Engagement & Value',
isVisible: () => attendanceSection.radioButton('attendanceType')?.value() !== null
});
engagementSection.addRow(row => {
row.addSlider('engagementLevel', {
label: 'How engaged did you feel throughout the event?',
min: 1,
max: 10,
step: 1,
defaultValue: 5,
showValue: true
});
});
engagementSection.addRow(row => {
row.addThumbRating('metExpectations', {
label: 'Did the event meet your expectations?',
showLabels: true,
upLabel: 'Yes, met or exceeded',
downLabel: 'No, fell short',
size: 'lg',
alignment: 'center'
});
});
engagementSection.addRow(row => {
row.addRadioButton('valueForMoney', {
label: 'How would you rate the value for the ticket price?',
options: [
{ id: 'excellent', name: 'Excellent value' },
{ id: 'good', name: 'Good value' },
{ id: 'fair', name: 'Fair value' },
{ id: 'poor', name: 'Poor value' },
{ id: 'free', name: 'Event was free' }
],
orientation: 'horizontal'
});
});
// ============================================
// SECTION 6: Future Preferences
// ============================================
const futureSection = form.addSubform('future', {
title: 'Future Events',
isVisible: () => attendanceSection.radioButton('attendanceType')?.value() !== null
});
futureSection.addRow(row => {
row.addRadioButton('futureFormat', {
label: 'For future events, which format would you prefer?',
options: [
{ id: 'in-person', name: 'In-person only' },
{ id: 'virtual', name: 'Virtual only' },
{ id: 'hybrid', name: 'Hybrid (both options)' },
{ id: 'depends', name: 'Depends on the event' }
],
orientation: 'vertical'
});
});
futureSection.addRow(row => {
row.addRatingScale('returnLikelihood', {
preset: 'nps',
label: 'How likely are you to attend next year\'s event?',
showSegmentColors: true,
showCategoryLabel: true,
showConfettiOnPromoter: true,
alignment: 'center'
});
});
// ============================================
// SECTION 7: Overall Rating
// ============================================
const overallSection = form.addSubform('overall', {
title: 'Overall Experience',
isVisible: () => attendanceSection.radioButton('attendanceType')?.value() !== null,
customStyles: () => {
const nps = overallSection.ratingScale('eventNps')?.npsCategory();
if (nps === 'promoter') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (nps === 'passive') return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
if (nps === 'detractor') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
overallSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'Overall event experience',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addRatingScale('eventNps', {
preset: 'nps',
label: 'How likely are you to recommend this event to a colleague?',
showSegmentColors: true,
showCategoryLabel: true,
alignment: 'center'
});
});
overallSection.addSpacer();
overallSection.addRow(row => {
row.addTextarea('additionalFeedback', {
label: 'Any suggestions for improving future hybrid events?',
placeholder: 'Share your ideas for making both formats better...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Feedback Summary',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const type = attendanceSection.radioButton('attendanceType')?.value();
const overall = overallSection.starRating('overallRating')?.value();
const nps = overallSection.ratingScale('eventNps')?.npsCategory();
const inPersonScore = inPersonSection.starRating('inPersonOverall')?.value();
const virtualScore = virtualSection.starRating('virtualOverall')?.value();
const contentScore = contentSection.starRating('contentQuality')?.value();
const futureFormat = futureSection.radioButton('futureFormat')?.value();
if (!overall) return '';
const typeLabels: Record<string, string> = {
'in-person': 'In-Person',
'virtual': 'Virtual',
'both': 'Hybrid (Both)'
};
const formatLabels: Record<string, string> = {
'in-person': 'In-Person Only',
'virtual': 'Virtual Only',
'hybrid': 'Hybrid',
'depends': 'Event Dependent'
};
let summary = `HYBRID EVENT FEEDBACK\n`;
summary += `${'═'.repeat(26)}\n\n`;
summary += `Attendance: ${typeLabels[type || ''] || 'Unknown'}\n`;
summary += `\n${'─'.repeat(26)}\n\n`;
summary += `Overall: ${'★'.repeat(overall)}${'☆'.repeat(5 - overall)} (${overall}/5)\n`;
if (inPersonScore) {
summary += `In-Person: ${'★'.repeat(inPersonScore)}${'☆'.repeat(5 - inPersonScore)}\n`;
}
if (virtualScore) {
summary += `Virtual: ${'★'.repeat(virtualScore)}${'☆'.repeat(5 - virtualScore)}\n`;
}
if (contentScore) {
summary += `Content: ${'★'.repeat(contentScore)}${'☆'.repeat(5 - contentScore)}\n`;
}
if (nps) {
summary += `\nNPS Status: ${nps.charAt(0).toUpperCase() + nps.slice(1)}\n`;
}
if (futureFormat) {
summary += `Future Pref: ${formatLabels[futureFormat]}`;
}
return summary;
},
customStyles: () => {
const nps = overallSection.ratingScale('eventNps')?.npsCategory();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (nps === 'promoter') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (nps === 'passive') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (nps === 'detractor') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f8fafc', borderLeft: '4px solid #64748b' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your insights help us create better hybrid experiences. We\'re committed to delivering excellent events whether you join us in person or virtually.'
});
}