export function competitiveComparisonSurvey(form: FormTs) {
// Competitor Comparison Survey - Market Research
// Demonstrates: MatrixQuestion x2, RadioButton, Dropdown, Slider x3,
// CheckboxList, StarRating x2, SuggestionChips, dynamic styling, computed values
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Competitive Comparison Survey',
computedValue: () => 'Help us understand how we compare. Your insights shape our product strategy.',
customStyles: {
background: 'linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%)',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Competitor Selection
// ============================================
const competitorSection = form.addSubform('competitorSection', {
title: 'Competitor Experience'
});
competitorSection.addRow(row => {
row.addRadioButton('hasEvaluated', {
label: 'Have you evaluated or used any competing products/services?',
options: [
{ id: 'current-user', name: 'Yes, I currently use a competitor' },
{ id: 'evaluated', name: 'Yes, I evaluated alternatives before choosing us' },
{ id: 'switched', name: 'Yes, I switched from a competitor to us' },
{ id: 'no', name: 'No, I haven\'t evaluated competitors' }
],
orientation: 'vertical',
isRequired: true
});
});
competitorSection.addRow(row => {
row.addCheckboxList('competitorsUsed', {
label: 'Which competitors have you used or evaluated? (Select all that apply)',
options: [
{ id: 'competitor-a', name: 'Competitor A' },
{ id: 'competitor-b', name: 'Competitor B' },
{ id: 'competitor-c', name: 'Competitor C' },
{ id: 'competitor-d', name: 'Competitor D' },
{ id: 'other', name: 'Other' }
],
orientation: 'vertical',
isVisible: () => {
const val = competitorSection.radioButton('hasEvaluated')?.value();
return val !== null && val !== 'no';
}
});
});
competitorSection.addRow(row => {
row.addDropdown('primaryCompetitor', {
label: 'Which competitor would you consider our primary alternative?',
options: [
{ id: 'competitor-a', name: 'Competitor A' },
{ id: 'competitor-b', name: 'Competitor B' },
{ id: 'competitor-c', name: 'Competitor C' },
{ id: 'competitor-d', name: 'Competitor D' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select primary competitor...',
isVisible: () => {
const val = competitorSection.radioButton('hasEvaluated')?.value();
return val !== null && val !== 'no';
}
});
});
// ============================================
// SECTION 2: Feature Comparison Matrix
// ============================================
const comparisonSection = form.addSubform('comparisonSection', {
title: () => {
const competitor = competitorSection.dropdown('primaryCompetitor')?.value();
const competitorNames: Record<string, string> = {
'competitor-a': 'Competitor A',
'competitor-b': 'Competitor B',
'competitor-c': 'Competitor C',
'competitor-d': 'Competitor D',
'other': 'The Competitor'
};
return `Feature Comparison: Us vs ${competitorNames[competitor || ''] || 'Competitor'}`;
},
isVisible: () => {
const val = competitorSection.radioButton('hasEvaluated')?.value();
return val !== null && val !== 'no' && competitorSection.dropdown('primaryCompetitor')?.value() !== null;
}
});
comparisonSection.addRow(row => {
row.addTextPanel('comparisonInstructions', {
computedValue: () => 'Rate each attribute: Who does it better?',
customStyles: {
color: '#64748b',
fontSize: '14px',
fontStyle: 'italic',
marginBottom: '8px'
}
});
});
comparisonSection.addRow(row => {
row.addMatrixQuestion('featureComparison', {
label: 'Compare us against the selected competitor:',
rows: [
{ id: 'ease-of-use', label: 'Ease of use', isRequired: true },
{ id: 'features', label: 'Feature set / functionality', isRequired: true },
{ id: 'performance', label: 'Performance / reliability' },
{ id: 'design', label: 'Design / user experience' },
{ id: 'integrations', label: 'Integrations / ecosystem' },
{ id: 'support', label: 'Customer support' },
{ id: 'documentation', label: 'Documentation / resources' },
{ id: 'value', label: 'Value for money' }
],
columns: [
{ id: 'us-much-better', label: 'Us (Much Better)' },
{ id: 'us-better', label: 'Us (Better)' },
{ id: 'equal', label: 'Equal' },
{ id: 'them-better', label: 'Them (Better)' },
{ id: 'them-much-better', label: 'Them (Much Better)' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 3: Importance Weights
// ============================================
const importanceSection = form.addSubform('importanceSection', {
title: 'What Matters Most',
isVisible: () => {
const val = competitorSection.radioButton('hasEvaluated')?.value();
return val !== null && val !== 'no';
}
});
importanceSection.addRow(row => {
row.addSlider('priceImportance', {
label: 'How important is pricing in your decision?',
min: 1,
max: 5,
step: 1,
defaultValue: 3,
showValue: true
}, '1fr');
row.addSlider('featureImportance', {
label: 'How important are features/functionality?',
min: 1,
max: 5,
step: 1,
defaultValue: 4,
showValue: true
}, '1fr');
});
importanceSection.addRow(row => {
row.addSlider('supportImportance', {
label: 'How important is customer support?',
min: 1,
max: 5,
step: 1,
defaultValue: 3,
showValue: true
}, '1fr');
row.addTextPanel('importanceScale', {
computedValue: () => '1 = Not Important → 5 = Critical',
customStyles: {
textAlign: 'center',
color: '#94a3b8',
fontSize: '12px',
alignSelf: 'center'
}
}, '1fr');
});
// ============================================
// SECTION 4: Overall Preference
// ============================================
const preferenceSection = form.addSubform('preferenceSection', {
title: 'Overall Preference',
isVisible: () => {
const val = competitorSection.radioButton('hasEvaluated')?.value();
return val !== null && val !== 'no';
}
});
preferenceSection.addRow(row => {
row.addRadioButton('overallPreference', {
label: () => {
const competitor = competitorSection.dropdown('primaryCompetitor')?.value();
const competitorNames: Record<string, string> = {
'competitor-a': 'Competitor A',
'competitor-b': 'Competitor B',
'competitor-c': 'Competitor C',
'competitor-d': 'Competitor D',
'other': 'the competitor'
};
return `Overall, which solution do you prefer: Us or ${competitorNames[competitor || ''] || 'the competitor'}?`;
},
options: [
{ id: 'us-strongly', name: 'Strongly prefer Us' },
{ id: 'us-slightly', name: 'Slightly prefer Us' },
{ id: 'neutral', name: 'No strong preference' },
{ id: 'them-slightly', name: 'Slightly prefer Competitor' },
{ id: 'them-strongly', name: 'Strongly prefer Competitor' }
],
orientation: 'vertical'
});
});
preferenceSection.addRow(row => {
row.addStarRating('ourRating', {
label: 'Overall rating of our product/service',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
row.addStarRating('competitorRating', {
label: () => {
const competitor = competitorSection.dropdown('primaryCompetitor')?.value();
const competitorNames: Record<string, string> = {
'competitor-a': 'Competitor A',
'competitor-b': 'Competitor B',
'competitor-c': 'Competitor C',
'competitor-d': 'Competitor D',
'other': 'Competitor'
};
return `Overall rating of ${competitorNames[competitor || ''] || 'Competitor'}`;
},
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
});
// ============================================
// SECTION 5: Decision Factors
// ============================================
const decisionSection = form.addSubform('decisionSection', {
title: 'Decision Factors',
isVisible: () => {
const val = competitorSection.radioButton('hasEvaluated')?.value();
return val !== null && val !== 'no';
}
});
decisionSection.addRow(row => {
row.addSuggestionChips('reasonsChoseUs', {
label: 'What are the main reasons you chose us? (Select top 3)',
suggestions: [
{ id: 'price', name: 'Better pricing' },
{ id: 'features', name: 'More features' },
{ id: 'ease', name: 'Easier to use' },
{ id: 'support', name: 'Better support' },
{ id: 'reputation', name: 'Brand reputation' },
{ id: 'integration', name: 'Better integrations' },
{ id: 'recommendation', name: 'Was recommended' },
{ id: 'trial', name: 'Better trial experience' }
],
max: 3,
alignment: 'center',
isVisible: () => {
const pref = preferenceSection.radioButton('overallPreference')?.value();
return pref === 'us-strongly' || pref === 'us-slightly' || pref === 'neutral';
}
});
});
decisionSection.addRow(row => {
row.addSuggestionChips('competitorAdvantages', {
label: () => {
const competitor = competitorSection.dropdown('primaryCompetitor')?.value();
const competitorNames: Record<string, string> = {
'competitor-a': 'Competitor A',
'competitor-b': 'Competitor B',
'competitor-c': 'Competitor C',
'competitor-d': 'Competitor D',
'other': 'The competitor'
};
return `Where does ${competitorNames[competitor || ''] || 'the competitor'} have an advantage?`;
},
suggestions: [
{ id: 'price', name: 'Lower price' },
{ id: 'features', name: 'More features' },
{ id: 'ease', name: 'Easier to use' },
{ id: 'performance', name: 'Better performance' },
{ id: 'support', name: 'Better support' },
{ id: 'ecosystem', name: 'Better ecosystem' },
{ id: 'brand', name: 'Stronger brand' },
{ id: 'none', name: 'No clear advantage' }
],
alignment: 'center'
});
});
// ============================================
// SECTION 6: Open Feedback
// ============================================
const feedbackSection = form.addSubform('feedbackSection', {
title: 'Additional Insights',
isVisible: () => {
const val = competitorSection.radioButton('hasEvaluated')?.value();
return val !== null && val !== 'no';
}
});
feedbackSection.addSpacer();
feedbackSection.addRow(row => {
row.addTextarea('competitiveAdvantage', {
label: 'What do you think is our biggest competitive advantage?',
placeholder: 'What makes us stand out from alternatives...',
rows: 2
});
});
feedbackSection.addRow(row => {
row.addTextarea('improvements', {
label: 'What would we need to improve to beat the competition?',
placeholder: 'Where do competitors outperform us...',
rows: 2
});
});
// ============================================
// SUMMARY SECTION
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Competitive Analysis Summary',
isVisible: () => {
const val = competitorSection.radioButton('hasEvaluated')?.value();
return val !== null && val !== 'no';
}
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const competitor = competitorSection.dropdown('primaryCompetitor')?.value();
const preference = preferenceSection.radioButton('overallPreference')?.value();
const ourRating = preferenceSection.starRating('ourRating')?.value();
const theirRating = preferenceSection.starRating('competitorRating')?.value();
const priceImp = importanceSection.slider('priceImportance')?.value();
const featureImp = importanceSection.slider('featureImportance')?.value();
const competitorNames: Record<string, string> = {
'competitor-a': 'Competitor A',
'competitor-b': 'Competitor B',
'competitor-c': 'Competitor C',
'competitor-d': 'Competitor D',
'other': 'Competitor'
};
if (!competitor) return 'Complete the survey to see your analysis summary.';
let emoji = preference?.includes('us') ? '🏆' : preference === 'neutral' ? '⚖️' : '📊';
let summary = `${emoji} Competitive Analysis\n`;
summary += `${'═'.repeat(35)}\n\n`;
summary += `🎯 Compared Against: ${competitorNames[competitor] || competitor}\n`;
if (preference) {
const prefLabels: Record<string, string> = {
'us-strongly': '💚 Strongly prefers Us',
'us-slightly': '👍 Slightly prefers Us',
'neutral': '⚖️ No strong preference',
'them-slightly': '👎 Slightly prefers Competitor',
'them-strongly': '💔 Strongly prefers Competitor'
};
summary += `\n${prefLabels[preference] || preference}`;
}
if (ourRating && theirRating) {
const diff = ourRating - theirRating;
const diffEmoji = diff > 0 ? '✅' : diff < 0 ? '⚠️' : '➡️';
summary += `\n\n${diffEmoji} Rating Gap: ${diff > 0 ? '+' : ''}${diff} stars`;
summary += `\n Us: ${ourRating}/5 vs Them: ${theirRating}/5`;
}
if (priceImp && featureImp) {
const topPriority = priceImp > featureImp ? 'Price' : featureImp > priceImp ? 'Features' : 'Both equal';
summary += `\n\n📌 Top Priority: ${topPriority}`;
}
return summary;
},
customStyles: () => {
const preference = preferenceSection.radioButton('overallPreference')?.value();
const base = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (preference?.includes('us-strongly')) {
return { ...base, backgroundColor: '#dcfce7', borderLeft: '4px solid #22c55e' };
} else if (preference?.includes('us')) {
return { ...base, backgroundColor: '#ecfdf5', borderLeft: '4px solid #10b981' };
} else if (preference === 'neutral') {
return { ...base, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (preference) {
return { ...base, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...base, backgroundColor: '#f8fafc' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Competitive Analysis'
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for your competitive insights!',
message: 'Your feedback helps us understand our market position and identify areas for improvement. This kind of direct comparison from users like you is invaluable for our product strategy.'
});
}