export function speakerFeedback(form: FormTs) {
// Speaker Evaluation Form - Comprehensive presenter feedback
// Demonstrates: StarRating x5, MatrixQuestion, EmojiRating, RatingScale, SuggestionChips, Slider, dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Speaker Evaluation',
computedValue: () => 'Help presenters improve with your honest feedback',
customStyles: {
backgroundColor: '#8b5cf6',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Session Details
// ============================================
const sessionInfo = form.addSubform('sessionInfo', {
title: 'Session Information',
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
sessionInfo.addRow(row => {
row.addTextbox('speakerName', {
label: 'Speaker Name',
placeholder: 'Enter speaker name',
isRequired: true
}, '1fr');
row.addTextbox('sessionTitle', {
label: 'Session/Talk Title',
placeholder: 'Enter session title',
isRequired: true
}, '1fr');
});
sessionInfo.addRow(row => {
row.addDropdown('sessionType', {
label: 'Session Type',
options: [
{ id: 'keynote', name: 'Keynote' },
{ id: 'breakout', name: 'Breakout Session' },
{ id: 'workshop', name: 'Workshop' },
{ id: 'panel', name: 'Panel Discussion' },
{ id: 'lightning', name: 'Lightning Talk' },
{ id: 'webinar', name: 'Webinar' }
],
placeholder: 'Select session type'
}, '1fr');
row.addDropdown('attendeeType', {
label: 'Your Role',
options: [
{ id: 'attendee', name: 'Attendee' },
{ id: 'organizer', name: 'Event Organizer' },
{ id: 'sponsor', name: 'Sponsor' },
{ id: 'speaker', name: 'Fellow Speaker' },
{ id: 'press', name: 'Press/Media' }
],
placeholder: 'Select your role'
}, '1fr');
});
// ============================================
// SECTION 2: Overall Impression
// ============================================
const overallSection = form.addSubform('overallSection', {
title: 'Overall Impression',
customStyles: () => {
const rating = overallSection.starRating('overallRating')?.value();
if (rating && rating >= 5) return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (rating && rating >= 3) return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
if (rating && rating >= 1) return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
overallSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'Overall Speaker Rating',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addEmojiRating('impression', {
label: 'How did you feel about this presentation?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
// ============================================
// SECTION 3: Detailed Competencies (MatrixQuestion)
// ============================================
const competenciesSection = form.addSubform('competenciesSection', {
title: 'Speaker Competencies',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null,
customStyles: { padding: '16px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
competenciesSection.addRow(row => {
row.addMatrixQuestion('competencyRatings', {
label: 'Rate the speaker on each dimension:',
rows: [
{ id: 'knowledge', label: 'Subject Matter Expertise', description: 'Depth of knowledge and accuracy', isRequired: true },
{ id: 'clarity', label: 'Clarity of Explanation', description: 'Easy to follow and understand', isRequired: true },
{ id: 'engagement', label: 'Audience Engagement', description: 'Kept attention, interactive', isRequired: true },
{ id: 'delivery', label: 'Presentation Delivery', description: 'Voice, pace, body language', isRequired: false },
{ id: 'visuals', label: 'Visual Aids & Slides', description: 'Quality of supporting materials', isRequired: false },
{ id: 'time', label: 'Time Management', description: 'Stayed on schedule', 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
});
});
// ============================================
// SECTION 4: Content Quality
// ============================================
const contentSection = form.addSubform('contentSection', {
title: 'Content Quality',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
contentSection.addRow(row => {
row.addStarRating('contentRelevance', {
label: 'Content Relevance to Your Needs',
maxStars: 5,
size: 'lg',
alignment: 'left'
}, '1fr');
row.addStarRating('contentDepth', {
label: 'Depth of Information',
maxStars: 5,
size: 'lg',
alignment: 'left'
}, '1fr');
});
contentSection.addRow(row => {
row.addStarRating('practicalValue', {
label: 'Practical Takeaways',
maxStars: 5,
size: 'lg',
alignment: 'left'
}, '1fr');
row.addStarRating('originalContent', {
label: 'Originality & Fresh Insights',
maxStars: 5,
size: 'lg',
alignment: 'left'
}, '1fr');
});
contentSection.addRow(row => {
row.addRatingScale('difficultyLevel', {
preset: 'likert-5',
label: 'The content difficulty level was appropriate for the audience',
lowLabel: 'Too Basic',
highLabel: 'Too Advanced',
alignment: 'center'
});
});
// ============================================
// SECTION 5: Speaker Strengths
// ============================================
const strengthsSection = form.addSubform('strengthsSection', {
title: 'What Made This Speaker Stand Out?',
isVisible: () => {
const rating = overallSection.starRating('overallRating')?.value();
return rating !== null && rating !== undefined && rating >= 3;
},
customStyles: { backgroundColor: '#ecfdf5', padding: '16px', borderRadius: '8px' }
});
strengthsSection.addRow(row => {
row.addSuggestionChips('speakerStrengths', {
label: 'Select the speaker\'s top strengths (up to 4)',
suggestions: [
{ id: 'expertise', name: 'Deep expertise' },
{ id: 'engaging', name: 'Highly engaging' },
{ id: 'clear', name: 'Crystal clear' },
{ id: 'stories', name: 'Great storyteller' },
{ id: 'demos', name: 'Excellent demos' },
{ id: 'humor', name: 'Good humor' },
{ id: 'interactive', name: 'Interactive Q&A' },
{ id: 'passionate', name: 'Passionate delivery' },
{ id: 'practical', name: 'Actionable advice' },
{ id: 'visual', name: 'Beautiful slides' }
],
max: 4,
alignment: 'center'
});
});
// ============================================
// SECTION 6: Areas for Improvement
// ============================================
const improvementsSection = form.addSubform('improvementsSection', {
title: 'Suggestions for Improvement',
isVisible: () => {
const rating = overallSection.starRating('overallRating')?.value();
return rating !== null && rating !== undefined && rating <= 4;
},
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
improvementsSection.addRow(row => {
row.addSuggestionChips('improvementAreas', {
label: 'What could the speaker improve?',
suggestions: [
{ id: 'pace', name: 'Pacing' },
{ id: 'depth', name: 'More depth' },
{ id: 'examples', name: 'More examples' },
{ id: 'slides', name: 'Better slides' },
{ id: 'interaction', name: 'More interaction' },
{ id: 'time', name: 'Time management' },
{ id: 'confidence', name: 'Confidence' },
{ id: 'structure', name: 'Structure' },
{ id: 'energy', name: 'More energy' },
{ id: 'basics', name: 'Cover basics' }
],
alignment: 'center'
});
});
improvementsSection.addSpacer();
improvementsSection.addRow(row => {
row.addTextarea('improvementDetails', {
label: 'Specific suggestions for this speaker',
placeholder: 'Share constructive feedback to help them improve...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 7: Engagement & Recommendation
// ============================================
const recommendSection = form.addSubform('recommendSection', {
title: 'Final Thoughts',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
recommendSection.addRow(row => {
row.addSlider('engagementLevel', {
label: 'How engaged were you during the presentation?',
min: 0,
max: 100,
step: 10,
unit: '%',
showValue: true,
defaultValue: 50
});
});
recommendSection.addRow(row => {
row.addThumbRating('wouldRecommend', {
label: 'Would you recommend this speaker for future events?',
showLabels: true,
upLabel: 'Yes, definitely!',
downLabel: 'Probably not',
alignment: 'center',
size: 'lg'
});
});
recommendSection.addRow(row => {
row.addThumbRating('wouldAttendAgain', {
label: 'Would you attend another session by this speaker?',
showLabels: true,
upLabel: 'Absolutely!',
downLabel: 'Unlikely',
alignment: 'center',
size: 'lg'
});
});
recommendSection.addSpacer();
recommendSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any other feedback for this speaker?',
placeholder: 'Share what you liked most, memorable moments, or suggestions...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Your Evaluation Summary',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const speakerName = sessionInfo.textbox('speakerName')?.value() || 'Speaker';
const sessionTitle = sessionInfo.textbox('sessionTitle')?.value() || 'Session';
const overall = overallSection.starRating('overallRating')?.value();
const impression = overallSection.emojiRating('impression')?.value();
const relevance = contentSection.starRating('contentRelevance')?.value();
const depth = contentSection.starRating('contentDepth')?.value();
const practical = contentSection.starRating('practicalValue')?.value();
const engagement = recommendSection.slider('engagementLevel')?.value();
const recommend = recommendSection.thumbRating('wouldRecommend')?.value();
const strengths = strengthsSection.suggestionChips('speakerStrengths')?.value() || [];
if (!overall) return '';
const impressionLabels: Record<string, string> = {
'very-bad': 'Very Disappointing',
'bad': 'Disappointing',
'neutral': 'Neutral',
'good': 'Satisfied',
'excellent': 'Highly Impressed'
};
let summary = `SPEAKER EVALUATION\n`;
summary += `${'═'.repeat(30)}\n\n`;
summary += `Speaker: ${speakerName}\n`;
summary += `Session: ${sessionTitle}\n\n`;
summary += `Overall: ${'★'.repeat(overall)}${'☆'.repeat(5 - overall)} (${overall}/5)\n`;
if (impression) {
summary += `Impression: ${impressionLabels[impression] || impression}\n`;
}
if (relevance || depth || practical) {
summary += `\nContent Scores:\n`;
if (relevance) summary += ` Relevance: ${relevance}/5\n`;
if (depth) summary += ` Depth: ${depth}/5\n`;
if (practical) summary += ` Practical Value: ${practical}/5\n`;
}
if (engagement !== null && engagement !== undefined) {
summary += `\nEngagement Level: ${engagement}%\n`;
}
if (strengths.length > 0) {
summary += `\nKey Strengths: ${strengths.length} identified\n`;
}
if (recommend) {
const emoji = recommend === 'up' ? '✅' : '❌';
summary += `\n${emoji} Would recommend: ${recommend === 'up' ? 'Yes' : 'No'}`;
}
return summary;
},
customStyles: () => {
const overall = overallSection.starRating('overallRating')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '13px'
};
if (overall && overall >= 4) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (overall && overall >= 3) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (overall && overall >= 1) {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f8fafc', borderLeft: '4px solid #8b5cf6' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Evaluation',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your evaluation helps speakers improve and assists organizers in selecting the best presenters for future events.'
});
}