export function podcastEpisodeSurvey(form: FormTs) {
// Podcast Episode Rating Form - Creative & Media Feedback
// Demonstrates: StarRating, EmojiRating, ThumbRating, Slider, SuggestionChips, RadioButton, dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Rate This Episode',
computedValue: () => 'Your feedback helps us create content you love. Takes less than 2 minutes!',
customStyles: {
background: 'linear-gradient(135deg, #dc2626 0%, #f97316 100%)',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Quick Rating
// ============================================
const quickRating = form.addSubform('quickRating', {
title: 'Quick Rating',
customStyles: () => {
const rating = quickRating.starRating('episodeRating')?.value();
if (rating !== null && rating !== undefined) {
if (rating >= 4) return { backgroundColor: '#dcfce7', padding: '16px', borderRadius: '8px' };
if (rating >= 3) return { backgroundColor: '#fef9c3', padding: '16px', borderRadius: '8px' };
return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
}
return { backgroundColor: '#fff7ed', padding: '16px', borderRadius: '8px' };
}
});
quickRating.addRow(row => {
row.addStarRating('episodeRating', {
label: 'How would you rate this episode overall?',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true
});
});
quickRating.addRow(row => {
row.addEmojiRating('emotionalResponse', {
label: 'How did this episode make you feel?',
preset: 'mood',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
// ============================================
// SECTION 2: Content Quality
// ============================================
const contentSection = form.addSubform('contentSection', {
title: 'Content Quality',
isVisible: () => quickRating.starRating('episodeRating')?.value() !== null,
customStyles: { backgroundColor: '#f8fafc', padding: '16px', borderRadius: '8px' }
});
contentSection.addRow(row => {
row.addSlider('contentRelevance', {
label: 'How relevant was the content to your interests?',
min: 1,
max: 10,
step: 1,
showValue: true,
defaultValue: 7
}, '1fr');
row.addSlider('episodeLength', {
label: 'How was the episode length?',
min: 1,
max: 5,
step: 1,
showValue: true,
defaultValue: 3
}, '1fr');
});
contentSection.addRow(row => {
row.addTextPanel('lengthGuide', {
computedValue: () => {
const length = contentSection.slider('episodeLength')?.value();
if (length === 1) return '⏪ Way too short';
if (length === 2) return '📉 A bit short';
if (length === 3) return '✅ Just right';
if (length === 4) return '📈 A bit long';
if (length === 5) return '⏩ Way too long';
return '';
},
customStyles: {
textAlign: 'center',
color: '#6b7280',
fontSize: '14px',
marginTop: '-8px'
}
});
});
contentSection.addSpacer({ height: '12px' });
contentSection.addRow(row => {
row.addThumbRating('learnedSomething', {
label: 'Did you learn something new or gain valuable insight?',
showLabels: true,
upLabel: 'Yes!',
downLabel: 'Not really',
size: 'lg',
alignment: 'center'
});
});
// ============================================
// SECTION 3: Host & Production
// ============================================
const productionSection = form.addSubform('productionSection', {
title: 'Host & Production',
isVisible: () => quickRating.starRating('episodeRating')?.value() !== null,
customStyles: { backgroundColor: '#fdf4ff', padding: '16px', borderRadius: '8px' }
});
productionSection.addRow(row => {
row.addStarRating('hostPerformance', {
label: 'Host delivery & presentation',
maxStars: 5,
size: 'md',
alignment: 'center'
}, '1fr');
row.addStarRating('audioQuality', {
label: 'Audio quality & production',
maxStars: 5,
size: 'md',
alignment: 'center'
}, '1fr');
});
productionSection.addSpacer({ height: '12px' });
productionSection.addRow(row => {
row.addMatrixQuestion('productionMatrix', {
label: 'Rate specific aspects:',
rows: [
{ id: 'pacing', label: 'Episode pacing' },
{ id: 'clarity', label: 'Clarity of explanations' },
{ id: 'engagement', label: 'Kept my attention' },
{ id: 'guests', label: 'Guest quality (if applicable)', allowDeselect: true }
],
columns: [
{ id: 'needs-work', label: 'Needs Work' },
{ id: 'okay', label: 'Okay' },
{ id: 'good', label: 'Good' },
{ id: 'great', label: 'Great' },
{ id: 'excellent', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Topics & Preferences
// ============================================
const topicsSection = form.addSubform('topicsSection', {
title: 'Topics & Preferences',
isVisible: () => quickRating.starRating('episodeRating')?.value() !== null,
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
topicsSection.addRow(row => {
row.addSuggestionChips('favoriteTopics', {
label: 'What topics would you like more of? (Select up to 4)',
suggestions: [
{ id: 'interviews', name: 'Expert interviews' },
{ id: 'tutorials', name: 'How-to tutorials' },
{ id: 'news', name: 'Industry news' },
{ id: 'stories', name: 'Personal stories' },
{ id: 'debates', name: 'Debates & discussions' },
{ id: 'q-and-a', name: 'Q&A episodes' },
{ id: 'deep-dives', name: 'Deep dives' },
{ id: 'quick-tips', name: 'Quick tips' },
{ id: 'case-studies', name: 'Case studies' },
{ id: 'behind-scenes', name: 'Behind the scenes' }
],
max: 4,
alignment: 'left'
});
});
topicsSection.addSpacer({ height: '12px' });
topicsSection.addRow(row => {
row.addTextarea('topicSuggestions', {
label: 'Any specific topics or guests you\'d like us to cover?',
placeholder: 'Share your ideas for future episodes...',
rows: 2,
autoExpand: true
});
});
// ============================================
// SECTION 5: Sharing & Loyalty
// ============================================
const loyaltySection = form.addSubform('loyaltySection', {
title: 'Would You Recommend?',
isVisible: () => quickRating.starRating('episodeRating')?.value() !== null
});
loyaltySection.addRow(row => {
row.addThumbRating('wouldShare', {
label: 'Would you share this episode with a friend?',
showLabels: true,
upLabel: 'Definitely!',
downLabel: 'Probably not',
size: 'lg',
alignment: 'center'
});
});
loyaltySection.addRow(row => {
row.addTextarea('shareReason', {
label: () => {
const wouldShare = loyaltySection.thumbRating('wouldShare')?.value();
if (wouldShare === 'up') return 'What would you tell them about this episode?';
if (wouldShare === 'down') return 'What would make you more likely to share?';
return 'Any thoughts on sharing this episode?';
},
placeholder: () => {
const wouldShare = loyaltySection.thumbRating('wouldShare')?.value();
if (wouldShare === 'up') return 'Help us understand what makes this worth sharing...';
if (wouldShare === 'down') return 'Your feedback helps us create more shareable content...';
return 'Optional...';
},
rows: 2,
autoExpand: true,
isVisible: () => loyaltySection.thumbRating('wouldShare')?.value() !== null
});
});
// ============================================
// SECTION 6: Listening Context
// ============================================
const contextSection = form.addSubform('contextSection', {
title: 'About Your Listening',
isVisible: () => quickRating.starRating('episodeRating')?.value() !== null,
customStyles: { backgroundColor: '#f0fdf4', padding: '16px', borderRadius: '8px' }
});
contextSection.addRow(row => {
row.addRadioButton('listeningContext', {
label: 'When/where did you listen to this episode?',
options: [
{ id: 'commute', name: 'During commute' },
{ id: 'exercise', name: 'While exercising' },
{ id: 'work', name: 'While working' },
{ id: 'relax', name: 'While relaxing' },
{ id: 'chores', name: 'During chores' },
{ id: 'dedicated', name: 'Dedicated listening time' }
],
orientation: 'horizontal'
}, '1fr');
row.addRadioButton('listenFrequency', {
label: 'How often do you listen to this podcast?',
options: [
{ id: 'first-time', name: 'First episode' },
{ id: 'occasional', name: 'Occasionally' },
{ id: 'regular', name: 'Regularly' },
{ id: 'every-episode', name: 'Every episode' }
],
orientation: 'vertical'
}, '1fr');
});
contextSection.addRow(row => {
row.addCheckbox('subscribed', {
label: 'I am subscribed to this podcast'
});
});
contextSection.addRow(row => {
row.addDropdown('discoverySource', {
label: 'How did you discover this podcast?',
placeholder: 'Select...',
options: [
{ id: 'recommendation', name: 'Friend/colleague recommendation' },
{ id: 'social-media', name: 'Social media' },
{ id: 'search', name: 'Podcast app search' },
{ id: 'guest', name: 'Guest appearance elsewhere' },
{ id: 'blog', name: 'Blog/article' },
{ id: 'charts', name: 'Podcast charts' },
{ id: 'other', name: 'Other' }
],
isVisible: () => contextSection.radioButton('listenFrequency')?.value() === 'first-time'
});
});
// ============================================
// SECTION 7: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Feedback Summary',
isVisible: () => quickRating.starRating('episodeRating')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const episodeRating = quickRating.starRating('episodeRating')?.value();
const emotional = quickRating.emojiRating('emotionalResponse')?.value();
const hostRating = productionSection.starRating('hostPerformance')?.value();
const audioRating = productionSection.starRating('audioQuality')?.value();
const wouldShare = loyaltySection.thumbRating('wouldShare')?.value();
const topics = topicsSection.suggestionChips('favoriteTopics')?.value() || [];
if (!episodeRating) return '';
const emotionLabels: Record<string, string> = {
'sad': '😢 Sad',
'down': '😔 Down',
'neutral': '😐 Neutral',
'happy': '😊 Happy',
'excited': '🤩 Excited'
};
let emoji = '🎙️';
if (episodeRating >= 5) emoji = '⭐';
else if (episodeRating >= 4) emoji = '👍';
else if (episodeRating <= 2) emoji = '💭';
let summary = `${emoji} Episode Feedback\n`;
summary += `${'═'.repeat(24)}\n\n`;
summary += `🎧 Episode Rating: ${episodeRating}/5 stars\n`;
if (emotional) {
summary += `${emotionLabels[emotional] || emotional}\n`;
}
if (hostRating) summary += `🎤 Host: ${hostRating}/5`;
if (audioRating) summary += ` | 🔊 Audio: ${audioRating}/5`;
if (hostRating || audioRating) summary += '\n';
if (wouldShare) {
summary += `\n${wouldShare === 'up' ? '📤 Would share' : '🤔 Might not share'}`;
}
if (topics.length > 0) {
summary += `\n🎯 Interested in ${topics.length} topic${topics.length > 1 ? 's' : ''}`;
}
return summary;
},
customStyles: () => {
const rating = quickRating.starRating('episodeRating')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (rating && rating >= 4) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f97316' };
} else if (rating && rating >= 3) {
return { ...baseStyles, backgroundColor: '#fef9c3', borderLeft: '4px solid #eab308' };
} else if (rating) {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return baseStyles;
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => quickRating.starRating('episodeRating')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thanks for Your Feedback!',
message: 'Your insights help us create better content. We read every response and use your feedback to improve future episodes. Keep listening!'
});
}