export function brandPerceptionSurvey(form: FormTs) {
// Brand Perception Survey - Comprehensive brand image and sentiment analysis
// Demonstrates: Slider, StarRating, EmojiRating, MatrixQuestion, CheckboxList, dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Brand Perception Survey',
computedValue: () => 'Help us understand how you perceive our brand. Your honest feedback shapes our future.',
customStyles: {
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Brand Familiarity
// ============================================
const familiaritySection = form.addSubform('familiarity', {
title: 'Brand Familiarity'
});
familiaritySection.addRow(row => {
row.addRadioButton('familiarityLevel', {
label: 'How familiar are you with our brand?',
options: [
{ id: 'very-familiar', name: 'Very familiar - I use/follow the brand regularly' },
{ id: 'somewhat-familiar', name: 'Somewhat familiar - I know the brand well' },
{ id: 'heard-of', name: 'I\'ve heard of it but don\'t know much' },
{ id: 'first-time', name: 'This is my first time learning about it' }
],
orientation: 'vertical',
isRequired: true
});
});
familiaritySection.addRow(row => {
row.addCheckboxList('touchpoints', {
label: 'Where have you encountered our brand? (Select all that apply)',
options: [
{ id: 'website', name: 'Website' },
{ id: 'social-media', name: 'Social Media' },
{ id: 'advertising', name: 'Advertising' },
{ id: 'store', name: 'Physical Store' },
{ id: 'word-of-mouth', name: 'Word of Mouth' },
{ id: 'news', name: 'News/Press' },
{ id: 'events', name: 'Events/Sponsorships' },
{ id: 'product', name: 'Using the Product' }
],
orientation: 'vertical',
isVisible: () => {
const level = familiaritySection.radioButton('familiarityLevel')?.value();
return level !== 'first-time' && level !== null;
}
});
});
// ============================================
// SECTION 2: First Impression
// ============================================
const impressionSection = form.addSubform('impression', {
title: 'First Impression',
isVisible: () => familiaritySection.radioButton('familiarityLevel')?.value() !== null
});
impressionSection.addRow(row => {
row.addEmojiRating('firstImpression', {
label: 'What is your overall impression of our brand?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
impressionSection.addSpacer();
impressionSection.addRow(row => {
row.addSlider('trustLevel', {
label: 'How much do you trust our brand?',
min: 0,
max: 100,
step: 5,
defaultValue: 50,
showValue: true,
unit: '%'
});
});
// ============================================
// SECTION 3: Brand Attributes Matrix
// ============================================
const attributesSection = form.addSubform('attributes', {
title: 'Brand Attributes',
isVisible: () => impressionSection.emojiRating('firstImpression')?.value() !== null,
customStyles: { backgroundColor: '#f8fafc', padding: '16px', borderRadius: '8px' }
});
attributesSection.addRow(row => {
row.addMatrixQuestion('brandAttributes', {
label: 'Please rate our brand on the following attributes:',
rows: [
{ id: 'quality', label: 'Product/Service Quality', isRequired: true },
{ id: 'innovation', label: 'Innovation & Creativity', isRequired: true },
{ id: 'value', label: 'Value for Money', isRequired: true },
{ id: 'reliability', label: 'Reliability & Consistency', isRequired: true },
{ id: 'customer-focus', label: 'Customer Focus', isRequired: false },
{ id: 'social-responsibility', label: 'Social Responsibility', isRequired: false }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'very-good', label: 'Very Good' },
{ id: 'excellent', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Emotional Connection
// ============================================
const emotionalSection = form.addSubform('emotional', {
title: 'Emotional Connection',
isVisible: () => {
const matrix = attributesSection.matrixQuestion('brandAttributes');
return matrix?.areAllRequiredRowsAnswered() ?? false;
}
});
emotionalSection.addRow(row => {
row.addCheckboxList('brandPersonality', {
label: 'Which words best describe our brand? (Select up to 5)',
options: [
{ id: 'innovative', name: 'Innovative' },
{ id: 'trustworthy', name: 'Trustworthy' },
{ id: 'professional', name: 'Professional' },
{ id: 'friendly', name: 'Friendly' },
{ id: 'premium', name: 'Premium' },
{ id: 'affordable', name: 'Affordable' },
{ id: 'modern', name: 'Modern' },
{ id: 'traditional', name: 'Traditional' },
{ id: 'bold', name: 'Bold' },
{ id: 'reliable', name: 'Reliable' },
{ id: 'fun', name: 'Fun' },
{ id: 'serious', name: 'Serious' }
],
orientation: 'horizontal',
max: 5
}, '1fr');
});
emotionalSection.addSpacer();
emotionalSection.addRow(row => {
row.addStarRating('emotionalConnection', {
label: 'How emotionally connected do you feel to our brand?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showCounter: true
});
});
// ============================================
// SECTION 5: Competitive Position
// ============================================
const competitiveSection = form.addSubform('competitive', {
title: 'Competitive Comparison',
isVisible: () => emotionalSection.starRating('emotionalConnection')?.value() !== null
});
competitiveSection.addRow(row => {
row.addRadioButton('competitorComparison', {
label: 'Compared to similar brands in the market, how would you rate us?',
options: [
{ id: 'much-better', name: 'Much better than competitors' },
{ id: 'somewhat-better', name: 'Somewhat better' },
{ id: 'about-same', name: 'About the same' },
{ id: 'somewhat-worse', name: 'Somewhat worse' },
{ id: 'much-worse', name: 'Much worse than competitors' },
{ id: 'dont-know', name: 'I don\'t know other brands' }
],
orientation: 'vertical'
});
});
competitiveSection.addRow(row => {
row.addTextbox('competitorNames', {
label: 'Which competitor brands do you consider when making a choice?',
placeholder: 'e.g., Brand A, Brand B...',
isVisible: () => {
const comparison = competitiveSection.radioButton('competitorComparison')?.value();
return comparison !== null && comparison !== 'dont-know';
}
});
});
// ============================================
// SECTION 6: Brand Recommendation (NPS)
// ============================================
const npsSection = form.addSubform('nps', {
title: 'Recommendation',
isVisible: () => competitiveSection.radioButton('competitorComparison')?.value() !== null,
customStyles: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (category === 'passive') return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
if (category === 'detractor') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px', border: '1px dashed #cbd5e1' };
}
});
npsSection.addRow(row => {
row.addRatingScale('npsScore', {
preset: 'nps',
label: 'How likely are you to recommend our brand to a friend or colleague?',
showCategoryLabel: true,
showSegmentColors: true
});
});
// ============================================
// SECTION 7: Open Feedback
// ============================================
const feedbackSection = form.addSubform('feedback', {
title: 'Additional Thoughts',
isVisible: () => npsSection.ratingScale('npsScore')?.value() !== null
});
feedbackSection.addRow(row => {
row.addTextarea('whatWeLoveAbout', {
label: () => {
const category = npsSection.ratingScale('npsScore')?.npsCategory();
if (category === 'promoter') return 'What do you love most about our brand?';
if (category === 'passive') return 'What would make you love our brand more?';
return 'What could we do better?';
},
placeholder: 'Share your thoughts...',
rows: 3,
autoExpand: true
});
});
feedbackSection.addSpacer();
feedbackSection.addRow(row => {
row.addTextarea('brandImprovement', {
label: 'If you could change one thing about our brand, what would it be?',
placeholder: 'Your suggestion...',
rows: 2,
autoExpand: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Perception Summary',
isVisible: () => npsSection.ratingScale('npsScore')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const impression = impressionSection.emojiRating('firstImpression')?.value();
const trust = impressionSection.slider('trustLevel')?.value();
const nps = npsSection.ratingScale('npsScore')?.value();
const category = npsSection.ratingScale('npsScore')?.npsCategory();
const connection = emotionalSection.starRating('emotionalConnection')?.value();
const personality = emotionalSection.checkboxList('brandPersonality')?.value() || [];
if (!impression) return '';
const impressionLabels: Record<string, string> = {
'very-bad': 'Very Negative',
'bad': 'Negative',
'neutral': 'Neutral',
'good': 'Positive',
'excellent': 'Very Positive'
};
let summary = 'Brand Perception Snapshot\n';
summary += `${'═'.repeat(30)}\n\n`;
summary += `First Impression: ${impressionLabels[impression] || impression}\n`;
summary += `Trust Level: ${trust ?? 50}%\n`;
if (connection) {
summary += `Emotional Connection: ${connection}/5 stars\n`;
}
if (personality.length > 0) {
summary += `Brand Personality: ${personality.join(', ')}\n`;
}
if (nps !== null && nps !== undefined) {
summary += `\nNPS Score: ${nps}/10 (${category?.charAt(0).toUpperCase()}${category?.slice(1)})\n`;
}
return summary;
},
customStyles: {
backgroundColor: '#f0f4ff',
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px',
borderLeft: '4px solid #667eea'
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => npsSection.ratingScale('npsScore')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Insights!',
message: 'Your brand perception feedback is invaluable. We use these insights to continuously improve and better serve you.'
});
}