export function musicTrackFeedback(form: FormTs) {
// Music Track Feedback Form
// Demonstrates: StarRating, EmojiRating, Slider, MatrixQuestion, ThumbRating, CheckboxList, SuggestionChips
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Share Your Thoughts on This Track',
computedValue: () => 'Your feedback helps artists create better music.',
customStyles: {
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: First Impressions
// ============================================
const impressionSection = form.addSubform('firstImpression', {
title: 'First Impression'
});
impressionSection.addRow(row => {
row.addEmojiRating('initialReaction', {
label: 'What was your gut reaction to this track?',
preset: 'mood',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
impressionSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'Overall rating',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true,
filledColor: '#f59e0b'
});
});
// ============================================
// SECTION 2: Listening Context
// ============================================
const contextSection = form.addSubform('listeningContext', {
title: 'How Did You Listen?',
isVisible: () => impressionSection.emojiRating('initialReaction')?.value() !== null
});
contextSection.addRow(row => {
row.addRadioButton('discoveryMethod', {
label: 'How did you discover this track?',
options: [
{ id: 'streaming', name: 'Streaming platform recommendation' },
{ id: 'social', name: 'Social media' },
{ id: 'friend', name: 'Friend/word of mouth' },
{ id: 'artist', name: 'Already follow the artist' },
{ id: 'playlist', name: 'Playlist' },
{ id: 'other', name: 'Other' }
],
orientation: 'vertical'
}, '1fr');
row.addRadioButton('listenCount', {
label: 'How many times have you listened?',
options: [
{ id: 'once', name: 'Just once' },
{ id: 'few', name: '2-5 times' },
{ id: 'many', name: '6-10 times' },
{ id: 'repeat', name: 'On repeat!' }
],
orientation: 'vertical'
}, '1fr');
});
// ============================================
// SECTION 3: Mood & Energy Analysis
// ============================================
const moodSection = form.addSubform('moodAnalysis', {
title: 'Mood & Energy',
isVisible: () => impressionSection.emojiRating('initialReaction')?.value() !== null,
customStyles: { backgroundColor: '#faf5ff', padding: '16px', borderRadius: '8px' }
});
moodSection.addRow(row => {
row.addSlider('energyLevel', {
label: 'Energy level of the track',
min: 1,
max: 10,
step: 1,
showValue: true,
defaultValue: 5
}, '1fr');
row.addSlider('emotionalDepth', {
label: 'Emotional depth',
min: 1,
max: 10,
step: 1,
showValue: true,
defaultValue: 5
}, '1fr');
});
moodSection.addRow(row => {
row.addSuggestionChips('trackMoods', {
label: 'What moods does this track evoke? (Select up to 4)',
suggestions: [
{ id: 'happy', name: 'Happy' },
{ id: 'sad', name: 'Melancholic' },
{ id: 'energetic', name: 'Energetic' },
{ id: 'relaxing', name: 'Relaxing' },
{ id: 'romantic', name: 'Romantic' },
{ id: 'dark', name: 'Dark/Moody' },
{ id: 'uplifting', name: 'Uplifting' },
{ id: 'nostalgic', name: 'Nostalgic' },
{ id: 'intense', name: 'Intense' },
{ id: 'dreamy', name: 'Dreamy' }
],
max: 4,
alignment: 'center'
});
});
// ============================================
// SECTION 4: Production Quality Matrix
// ============================================
const productionSection = form.addSubform('productionQuality', {
title: 'Production & Quality',
isVisible: () => impressionSection.starRating('overallRating')?.value() !== null
});
productionSection.addRow(row => {
row.addMatrixQuestion('qualityMatrix', {
label: 'Rate these aspects of the track:',
rows: [
{ id: 'production', label: 'Production quality', isRequired: true },
{ id: 'vocals', label: 'Vocals / Lead instrument' },
{ id: 'melody', label: 'Melody / Hook' },
{ id: 'lyrics', label: 'Lyrics (if applicable)' },
{ id: 'arrangement', label: 'Arrangement / Structure' },
{ id: 'mixing', label: 'Mixing / Sound balance' }
],
columns: [
{ id: 'weak', label: 'Weak' },
{ id: 'okay', label: 'Okay' },
{ id: 'good', label: 'Good' },
{ id: 'great', label: 'Great' },
{ id: 'amazing', label: 'Amazing' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 5: Standout Elements
// ============================================
const elementsSection = form.addSubform('standoutElements', {
title: 'What Stood Out?',
isVisible: () => impressionSection.starRating('overallRating')?.value() !== null
});
elementsSection.addRow(row => {
row.addCheckboxList('bestParts', {
label: 'What were the best parts of this track?',
options: [
{ id: 'intro', name: 'The intro' },
{ id: 'verse', name: 'The verses' },
{ id: 'chorus', name: 'The chorus/hook' },
{ id: 'bridge', name: 'The bridge' },
{ id: 'drop', name: 'The drop/climax' },
{ id: 'outro', name: 'The outro' },
{ id: 'instrumental', name: 'Instrumental break' }
],
orientation: 'vertical'
}, '1fr');
row.addCheckboxList('instruments', {
label: 'Which elements impressed you most?',
options: [
{ id: 'vocals', name: 'Vocals' },
{ id: 'guitar', name: 'Guitar' },
{ id: 'bass', name: 'Bass' },
{ id: 'drums', name: 'Drums/Percussion' },
{ id: 'synths', name: 'Synths/Keys' },
{ id: 'production', name: 'Production effects' },
{ id: 'lyrics', name: 'Lyrical content' }
],
orientation: 'vertical'
}, '1fr');
});
// ============================================
// SECTION 6: Would You Recommend?
// ============================================
const recommendSection = form.addSubform('recommendation', {
title: 'Share & Recommend',
isVisible: () => impressionSection.starRating('overallRating')?.value() !== null
});
recommendSection.addRow(row => {
row.addThumbRating('wouldRecommend', {
label: 'Would you recommend this track to a friend?',
size: 'lg',
showLabels: true,
upLabel: 'Yes, definitely!',
downLabel: 'Probably not',
alignment: 'center'
});
});
recommendSection.addRow(row => {
row.addThumbRating('addToPlaylist', {
label: 'Would you add this to your playlist?',
size: 'md',
showLabels: true,
upLabel: 'Add it!',
downLabel: 'Pass',
alignment: 'center'
}, '1fr');
row.addThumbRating('buyAlbum', {
label: 'Would you want to hear more from this artist?',
size: 'md',
showLabels: true,
upLabel: 'Yes!',
downLabel: 'Not really',
alignment: 'center',
isVisible: () => recommendSection.thumbRating('wouldRecommend')?.value() === 'up'
}, '1fr');
});
// ============================================
// SECTION 7: Comparison & Genre Fit
// ============================================
const comparisonSection = form.addSubform('comparison', {
title: 'Genre & Comparison',
isVisible: () => impressionSection.starRating('overallRating')?.value() !== null
});
comparisonSection.addRow(row => {
row.addCheckboxList('genres', {
label: 'What genres does this track fit?',
options: [
{ id: 'pop', name: 'Pop' },
{ id: 'rock', name: 'Rock' },
{ id: 'hiphop', name: 'Hip-Hop/Rap' },
{ id: 'electronic', name: 'Electronic/EDM' },
{ id: 'rnb', name: 'R&B/Soul' },
{ id: 'indie', name: 'Indie' },
{ id: 'country', name: 'Country' },
{ id: 'jazz', name: 'Jazz' },
{ id: 'classical', name: 'Classical' },
{ id: 'other', name: 'Other' }
],
orientation: 'horizontal',
max: 3
});
});
comparisonSection.addSpacer();
comparisonSection.addRow(row => {
row.addTextbox('similarArtists', {
label: 'This reminds me of... (artist/song comparison)',
placeholder: 'e.g., "Sounds like early Coldplay meets Bon Iver"'
});
});
// ============================================
// SECTION 8: Detailed Feedback
// ============================================
const feedbackSection = form.addSubform('detailedFeedback', {
title: 'Your Thoughts',
isVisible: () => impressionSection.starRating('overallRating')?.value() !== null
});
feedbackSection.addSpacer();
feedbackSection.addRow(row => {
row.addTextarea('detailedComments', {
label: () => {
const rating = impressionSection.starRating('overallRating')?.value() || 0;
if (rating >= 4) return 'What makes this track special to you?';
if (rating <= 2) return 'What would make this track better?';
return 'Share your thoughts on this track';
},
placeholder: () => {
const rating = impressionSection.starRating('overallRating')?.value() || 0;
if (rating >= 4) return 'Tell us what you loved about it...';
if (rating <= 2) return 'Your constructive feedback helps artists improve...';
return 'Any thoughts, suggestions, or reactions...';
},
rows: 4,
autoExpand: true
});
});
// ============================================
// SECTION 9: Listener Profile (Optional)
// ============================================
const profileSection = form.addSubform('listenerProfile', {
title: 'About You (Optional)',
isVisible: () => impressionSection.starRating('overallRating')?.value() !== null,
isCollapsible: true
});
profileSection.addRow(row => {
row.addRadioButton('musicExperience', {
label: 'Your relationship with music',
options: [
{ id: 'casual', name: 'Casual listener' },
{ id: 'enthusiast', name: 'Music enthusiast' },
{ id: 'musician', name: 'Musician/Producer' },
{ id: 'industry', name: 'Music industry professional' }
],
orientation: 'vertical'
});
});
profileSection.addRow(row => {
row.addEmail('email', {
label: 'Email (for exclusive content and updates)',
placeholder: 'your@email.com'
});
});
// ============================================
// SECTION 10: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Review Summary',
isVisible: () => impressionSection.starRating('overallRating')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const reaction = impressionSection.emojiRating('initialReaction')?.value();
const rating = impressionSection.starRating('overallRating')?.value();
const energy = moodSection.slider('energyLevel')?.value();
const moods = moodSection.suggestionChips('trackMoods')?.value() || [];
const recommend = recommendSection.thumbRating('wouldRecommend')?.value();
const addPlaylist = recommendSection.thumbRating('addToPlaylist')?.value();
if (!rating) return '';
const reactionEmojis: Record<string, string> = {
'sad': '😢',
'down': '😔',
'neutral': '😐',
'happy': '😊',
'excited': '🤩'
};
let summary = `Music Review Summary\n`;
summary += `${'═'.repeat(25)}\n\n`;
summary += `First Reaction: ${reactionEmojis[reaction || ''] || ''}\n`;
summary += `Rating: ${'★'.repeat(rating)}${'☆'.repeat(5 - rating)} (${rating}/5)\n`;
if (energy) {
summary += `Energy Level: ${energy}/10\n`;
}
if (moods.length > 0) {
summary += `Vibes: ${moods.join(', ')}\n`;
}
summary += `\nWould recommend: ${recommend === 'up' ? '👍 Yes' : recommend === 'down' ? '👎 No' : 'Not rated'}\n`;
summary += `Add to playlist: ${addPlaylist === 'up' ? '✅ Yes' : addPlaylist === 'down' ? '❌ No' : 'Not rated'}\n`;
return summary;
},
customStyles: () => {
const rating = impressionSection.starRating('overallRating')?.value() || 0;
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (rating >= 4) {
return { ...baseStyles, background: 'linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%)', borderLeft: '4px solid #10b981' };
} else if (rating >= 3) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Review',
isVisible: () => impressionSection.starRating('overallRating')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thanks for Your Feedback!',
message: 'Your review helps artists understand what resonates with listeners. Keep supporting great music!'
});
}