export function sessionFeedbackSurvey(form: FormTs) {
// Session/Talk Feedback Form
// Demonstrates: StarRating, EmojiRating, RatingScale, MatrixQuestion, SuggestionChips, dynamic labels
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Session Feedback',
computedValue: () => 'Help us improve future events by rating this session.',
customStyles: {
backgroundColor: '#8b5cf6',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Session Selection
// ============================================
const sessionSection = form.addSubform('sessionSection', {
title: 'Session Details'
});
sessionSection.addRow(row => {
row.addDropdown('sessionName', {
label: 'Which session did you attend?',
options: [
{ id: 'keynote-am', name: 'Opening Keynote' },
{ id: 'track-a1', name: 'Track A - Session 1' },
{ id: 'track-a2', name: 'Track A - Session 2' },
{ id: 'track-b1', name: 'Track B - Session 1' },
{ id: 'track-b2', name: 'Track B - Session 2' },
{ id: 'workshop', name: 'Workshop Session' },
{ id: 'panel', name: 'Panel Discussion' },
{ id: 'keynote-pm', name: 'Closing Keynote' }
],
placeholder: 'Select session...',
isRequired: true
}, '1fr');
row.addTextbox('speakerName', {
label: 'Speaker Name (if known)',
placeholder: 'e.g., John Smith'
}, '1fr');
});
// ============================================
// SECTION 2: Quick Rating
// ============================================
const quickSection = form.addSubform('quickSection', {
title: 'Quick Rating',
isVisible: () => sessionSection.dropdown('sessionName')?.value() !== null
});
quickSection.addRow(row => {
row.addEmojiRating('overallImpression', {
label: 'What was your overall impression of this session?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center',
isRequired: true
});
});
quickSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'Overall session quality',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
// Dynamic feedback based on rating
quickSection.addRow(row => {
row.addTextPanel('ratingFeedback', {
isVisible: () => quickSection.starRating('overallRating')?.value() !== null,
computedValue: () => {
const rating = quickSection.starRating('overallRating')?.value();
if (rating === null || rating === undefined) return '';
if (rating >= 5) return 'Excellent! We are glad you loved this session!';
if (rating >= 4) return 'Great! Thanks for the positive feedback.';
if (rating >= 3) return 'Thanks for your feedback. How can we improve?';
return 'We are sorry this did not meet expectations. Please share details below.';
},
customStyles: () => {
const rating = quickSection.starRating('overallRating')?.value();
const base = { padding: '12px', borderRadius: '6px', textAlign: 'center', fontStyle: 'italic' };
if (rating === null || rating === undefined) return base;
if (rating >= 4) return { ...base, backgroundColor: '#d1fae5', color: '#065f46' };
if (rating >= 3) return { ...base, backgroundColor: '#fef3c7', color: '#92400e' };
return { ...base, backgroundColor: '#fee2e2', color: '#991b1b' };
}
});
});
// ============================================
// SECTION 3: Content Evaluation
// ============================================
const contentSection = form.addSubform('contentSection', {
title: 'Content Quality',
isVisible: () => quickSection.starRating('overallRating')?.value() !== null
});
contentSection.addRow(row => {
row.addMatrixQuestion('contentMatrix', {
label: 'Rate the following aspects of the content:',
rows: [
{ id: 'relevance', label: 'Relevance to my interests', isRequired: true },
{ id: 'depth', label: 'Depth of coverage' },
{ id: 'novelty', label: 'New/unique insights' },
{ id: 'practical', label: 'Practical applicability' },
{ id: 'clarity', label: 'Clarity of explanations' }
],
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
});
});
contentSection.addRow(row => {
row.addRatingScale('techLevel', {
label: 'How was the technical level?',
preset: 'likert-5',
lowLabel: 'Too Basic',
highLabel: 'Too Advanced'
});
});
// ============================================
// SECTION 4: Speaker Evaluation
// ============================================
const speakerSection = form.addSubform('speakerSection', {
title: () => {
const speakerName = sessionSection.textbox('speakerName')?.value();
return speakerName ? `Rate ${speakerName}` : 'Speaker Evaluation';
},
isVisible: () => quickSection.starRating('overallRating')?.value() !== null
});
speakerSection.addRow(row => {
row.addMatrixQuestion('speakerMatrix', {
label: 'Rate the speaker on the following:',
rows: [
{ id: 'knowledge', label: 'Subject matter expertise', isRequired: true },
{ id: 'presentation', label: 'Presentation skills' },
{ id: 'engagement', label: 'Audience engagement' },
{ id: 'pace', label: 'Pacing (not too fast/slow)' },
{ id: 'slides', label: 'Visual aids/slides quality' },
{ id: 'qa', label: 'Handling Q&A' }
],
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
});
});
speakerSection.addSpacer({ height: '16px' });
speakerSection.addRow(row => {
row.addStarRating('speakerOverall', {
label: 'Overall speaker rating',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
// ============================================
// SECTION 5: Pacing & Format
// ============================================
const formatSection = form.addSubform('formatSection', {
title: 'Session Format',
isVisible: () => quickSection.starRating('overallRating')?.value() !== null
});
formatSection.addRow(row => {
row.addEmojiRating('pacing', {
label: 'How was the session pacing?',
preset: 'custom',
emojis: [
{ id: 'too-slow', emoji: '🐢', label: 'Too Slow' },
{ id: 'slightly-slow', emoji: '🚶', label: 'A Bit Slow' },
{ id: 'just-right', emoji: '👌', label: 'Just Right' },
{ id: 'slightly-fast', emoji: '🏃', label: 'A Bit Fast' },
{ id: 'too-fast', emoji: '🚀', label: 'Too Fast' }
],
size: 'md',
showLabels: true,
alignment: 'center'
});
});
formatSection.addRow(row => {
row.addRadioButton('sessionLength', {
label: 'How was the session length?',
options: [
{ id: 'too-short', name: 'Too Short' },
{ id: 'just-right', name: 'Just Right' },
{ id: 'too-long', name: 'Too Long' }
],
orientation: 'horizontal'
}, '1fr');
row.addRadioButton('qaTime', {
label: 'Was there enough time for Q&A?',
options: [
{ id: 'no-qa', name: 'No Q&A' },
{ id: 'not-enough', name: 'Not Enough' },
{ id: 'just-right', name: 'Just Right' },
{ id: 'too-much', name: 'Too Much' }
],
orientation: 'horizontal'
}, '1fr');
});
// ============================================
// SECTION 6: Takeaways & Value
// ============================================
const takeawaySection = form.addSubform('takeawaySection', {
title: 'Key Takeaways',
isVisible: () => quickSection.starRating('overallRating')?.value() !== null
});
takeawaySection.addRow(row => {
row.addThumbRating('learnedSomething', {
label: 'Did you learn something new?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
size: 'lg',
alignment: 'center'
});
});
takeawaySection.addRow(row => {
row.addSuggestionChips('takeawayTypes', {
label: 'What will you take away from this session?',
suggestions: [
{ id: 'new-idea', name: 'New ideas' },
{ id: 'best-practice', name: 'Best practices' },
{ id: 'tools', name: 'Tools/resources' },
{ id: 'contacts', name: 'Networking contacts' },
{ id: 'inspiration', name: 'Inspiration' },
{ id: 'skills', name: 'New skills' },
{ id: 'perspective', name: 'New perspective' },
{ id: 'action-items', name: 'Action items' }
],
max: 3,
alignment: 'center'
});
});
takeawaySection.addSpacer({ height: '16px' });
takeawaySection.addRow(row => {
row.addTextarea('mainTakeaway', {
label: 'What was your #1 takeaway from this session?',
placeholder: 'Share the most valuable insight you gained...',
rows: 2
});
});
// ============================================
// SECTION 7: Recommendation
// ============================================
const recommendSection = form.addSubform('recommendSection', {
title: 'Recommendation',
isVisible: () => quickSection.starRating('overallRating')?.value() !== null
});
recommendSection.addRow(row => {
row.addRatingScale('recommendScore', {
label: 'Would you recommend this session to a colleague?',
preset: 'nps',
showCategoryLabel: true,
showSegmentColors: true,
showConfettiOnPromoter: true
});
});
recommendSection.addRow(row => {
row.addThumbRating('attendAgain', {
label: 'Would you attend another session by this speaker?',
showLabels: true,
upLabel: 'Definitely',
downLabel: 'Probably Not',
alignment: 'center'
});
});
// ============================================
// SECTION 8: Additional Feedback
// ============================================
const feedbackSection = form.addSubform('feedbackSection', {
title: 'Additional Comments',
isVisible: () => quickSection.starRating('overallRating')?.value() !== null
});
feedbackSection.addRow(row => {
row.addTextarea('whatWorked', {
label: 'What worked well in this session?',
placeholder: 'Share what you liked most...',
rows: 2
}, '1fr');
row.addTextarea('improvements', {
label: 'What could be improved?',
placeholder: 'Your suggestions for future sessions...',
rows: 2
}, '1fr');
});
feedbackSection.addRow(row => {
row.addTextarea('topicSuggestions', {
label: 'Any topics you would like to see covered in future events?',
placeholder: 'Suggest topics for future sessions...',
rows: 2
});
});
// ============================================
// SECTION 9: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Feedback Summary',
isVisible: () => quickSection.starRating('overallRating')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const sessionName = sessionSection.dropdown('sessionName')?.value();
const speakerName = sessionSection.textbox('speakerName')?.value();
const overall = quickSection.starRating('overallRating')?.value();
const impression = quickSection.emojiRating('overallImpression')?.value();
const speakerRating = speakerSection.starRating('speakerOverall')?.value();
const recommend = recommendSection.ratingScale('recommendScore')?.value();
const learned = takeawaySection.thumbRating('learnedSomething')?.value();
if (!overall) return '';
const sessionLabels: Record<string, string> = {
'keynote-am': 'Opening Keynote',
'track-a1': 'Track A - Session 1',
'track-a2': 'Track A - Session 2',
'track-b1': 'Track B - Session 1',
'track-b2': 'Track B - Session 2',
'workshop': 'Workshop Session',
'panel': 'Panel Discussion',
'keynote-pm': 'Closing Keynote'
};
const impressionLabels: Record<string, string> = {
'very-bad': 'Very Disappointed',
'bad': 'Disappointed',
'neutral': 'Neutral',
'good': 'Satisfied',
'excellent': 'Very Satisfied'
};
let summary = `Session Feedback Summary\n`;
summary += `${'='.repeat(26)}\n\n`;
if (sessionName) {
summary += `Session: ${sessionLabels[sessionName] || sessionName}\n`;
}
if (speakerName) {
summary += `Speaker: ${speakerName}\n`;
}
summary += '\n';
summary += `Overall Rating: ${'*'.repeat(overall)}${'*'.repeat(5 - overall)} (${overall}/5)\n`;
if (impression) {
summary += `Impression: ${impressionLabels[impression] || impression}\n`;
}
if (speakerRating) {
summary += `Speaker Rating: ${speakerRating}/5\n`;
}
if (recommend !== null && recommend !== undefined) {
summary += `Would Recommend: ${recommend}/10\n`;
}
if (learned) {
summary += `Learned Something New: ${learned === 'up' ? 'Yes' : 'No'}\n`;
}
return summary;
},
customStyles: () => {
const overall = quickSection.starRating('overallRating')?.value() || 0;
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (overall >= 4) {
return { ...baseStyles, backgroundColor: '#ede9fe', borderLeft: '4px solid #8b5cf6' };
} else if (overall >= 3) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
}
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Session Feedback',
isVisible: () => quickSection.starRating('overallRating')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your input helps us curate better sessions and support our speakers. Enjoy the rest of the event!'
});
}