export function valuePerceptionSurvey(form: FormTs) {
// Value for Money Survey - Comprehensive value perception assessment
// Demonstrates: RatingScale, StarRating, Slider, MatrixQuestion, EmojiRating, ThumbRating, dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Value for Money Survey',
computedValue: () => 'Help us understand if our pricing reflects the value you receive.',
customStyles: {
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Overall Value Perception
// ============================================
const overallSection = form.addSubform('overallValue', {
title: 'Overall Value Assessment'
});
overallSection.addRow(row => {
row.addRatingScale('valueRating', {
label: 'How would you rate the overall value for money?',
preset: 'satisfaction',
size: 'lg',
alignment: 'center',
isRequired: true
});
});
overallSection.addRow(row => {
row.addEmojiRating('valueMood', {
label: 'How do you feel about your purchase?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
// ============================================
// SECTION 2: Quality vs Price Balance
// ============================================
const balanceSection = form.addSubform('qualityPrice', {
title: 'Quality vs Price',
isVisible: () => overallSection.ratingScale('valueRating')?.value() !== null
});
balanceSection.addRow(row => {
row.addStarRating('qualityRating', {
label: 'Rate the quality of what you received',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
}, '1fr');
row.addStarRating('priceRating', {
label: 'Rate the fairness of the price',
maxStars: 5,
size: 'lg',
alignment: 'center'
}, '1fr');
});
balanceSection.addSpacer({ height: '20px' });
balanceSection.addRow(row => {
row.addSlider('priceExpectation', {
label: 'Compared to your expectations, the price was...',
min: 1,
max: 5,
step: 1,
defaultValue: 3,
showValue: false,
tooltip: '1 = Much lower than expected, 3 = As expected, 5 = Much higher than expected'
});
});
balanceSection.addRow(row => {
row.addTextPanel('priceLabel', {
computedValue: () => {
const val = balanceSection.slider('priceExpectation')?.value() ?? 3;
const labels = ['', 'Much lower than expected', 'Lower than expected', 'As expected', 'Higher than expected', 'Much higher than expected'];
return labels[val] || '';
},
customStyles: {
textAlign: 'center',
fontWeight: 'bold',
color: '#6366f1',
padding: '8px'
}
});
});
// ============================================
// SECTION 3: Value Dimensions Matrix
// ============================================
const dimensionsSection = form.addSubform('dimensions', {
title: 'Value Breakdown',
isVisible: () => overallSection.ratingScale('valueRating')?.value() !== null
});
dimensionsSection.addRow(row => {
row.addMatrixQuestion('valueDimensions', {
label: 'Rate the value you received in each area:',
rows: [
{ id: 'features', label: 'Features & Functionality', isRequired: true },
{ id: 'quality', label: 'Build Quality / Reliability' },
{ id: 'support', label: 'Customer Support' },
{ id: 'experience', label: 'Overall Experience' },
{ id: 'convenience', label: 'Convenience & Ease of Use' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Purchase Decision Factors
// ============================================
const factorsSection = form.addSubform('factors', {
title: 'What Matters Most',
isVisible: () => overallSection.ratingScale('valueRating')?.value() !== null
});
factorsSection.addRow(row => {
row.addSuggestionChips('valueFactors', {
label: 'What factors are most important to your value perception? (Select up to 3)',
suggestions: [
{ id: 'price', name: 'Competitive pricing' },
{ id: 'quality', name: 'Premium quality' },
{ id: 'durability', name: 'Long-lasting' },
{ id: 'features', name: 'Rich features' },
{ id: 'support', name: 'Great support' },
{ id: 'brand', name: 'Brand reputation' },
{ id: 'convenience', name: 'Convenience' },
{ id: 'innovation', name: 'Innovation' }
],
max: 3,
alignment: 'center'
});
});
// ============================================
// SECTION 5: Future Intent
// ============================================
const intentSection = form.addSubform('intent', {
title: 'Future Considerations',
isVisible: () => overallSection.ratingScale('valueRating')?.value() !== null
});
intentSection.addRow(row => {
row.addThumbRating('wouldRepurchase', {
label: 'Would you purchase from us again at current prices?',
size: 'lg',
showLabels: true,
upLabel: 'Yes, definitely',
downLabel: 'Probably not',
alignment: 'center'
});
});
intentSection.addRow(row => {
row.addRadioButton('priceChange', {
label: 'If we increased our prices by 10%, would you still consider purchasing?',
options: [
{ id: 'definitely', name: 'Yes, definitely' },
{ id: 'probably', name: 'Probably yes' },
{ id: 'maybe', name: 'Not sure' },
{ id: 'unlikely', name: 'Probably not' },
{ id: 'no', name: 'Definitely not' }
],
orientation: 'vertical',
isVisible: () => intentSection.thumbRating('wouldRepurchase')?.value() === 'up'
});
});
// ============================================
// SECTION 6: Low Value Follow-up
// ============================================
const lowValueSection = form.addSubform('lowValueFeedback', {
title: 'Help Us Improve',
isVisible: () => {
const rating = overallSection.ratingScale('valueRating')?.value();
return rating !== null && rating !== undefined && rating <= 2;
},
customStyles: {
backgroundColor: '#fef3c7',
padding: '16px',
borderRadius: '8px',
borderLeft: '4px solid #f59e0b'
}
});
lowValueSection.addRow(row => {
row.addCheckboxList('lowValueReasons', {
label: 'What would improve the value for you?',
options: [
{ id: 'lower_price', name: 'Lower price' },
{ id: 'more_features', name: 'More features included' },
{ id: 'better_quality', name: 'Better quality' },
{ id: 'better_support', name: 'Better customer support' },
{ id: 'faster_delivery', name: 'Faster delivery' },
{ id: 'loyalty_rewards', name: 'Loyalty rewards/discounts' }
],
orientation: 'vertical'
});
});
lowValueSection.addSpacer({ height: '16px' });
lowValueSection.addRow(row => {
row.addTextarea('lowValueDetails', {
label: 'Please share more details about your value concerns:',
placeholder: 'What would make this purchase feel more worth it to you?',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 7: High Value Follow-up
// ============================================
const highValueSection = form.addSubform('highValueFeedback', {
title: 'What We Do Right',
isVisible: () => {
const rating = overallSection.ratingScale('valueRating')?.value();
return rating !== null && rating !== undefined && rating >= 4;
},
customStyles: {
backgroundColor: '#d1fae5',
padding: '16px',
borderRadius: '8px',
borderLeft: '4px solid #10b981'
}
});
highValueSection.addRow(row => {
row.addTextarea('highValueReason', {
label: 'What makes our offering great value for you?',
placeholder: 'Share what makes it worth the price...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Value Assessment Summary',
isVisible: () => overallSection.ratingScale('valueRating')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const valueRating = overallSection.ratingScale('valueRating')?.value();
const qualityRating = balanceSection.starRating('qualityRating')?.value();
const priceRating = balanceSection.starRating('priceRating')?.value();
const mood = overallSection.emojiRating('valueMood')?.value();
const wouldRepurchase = intentSection.thumbRating('wouldRepurchase')?.value();
const factors = factorsSection.suggestionChips('valueFactors')?.value() || [];
if (valueRating === null || valueRating === undefined) return '';
const valueLabels = ['', 'Very dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Very satisfied'];
let summary = `Value Assessment Results\n${'═'.repeat(30)}\n\n`;
summary += `Overall Value: ${valueLabels[valueRating]} (${valueRating}/5)\n`;
if (qualityRating) summary += `Quality Rating: ${'★'.repeat(qualityRating)}${'☆'.repeat(5 - qualityRating)}\n`;
if (priceRating) summary += `Price Fairness: ${'★'.repeat(priceRating)}${'☆'.repeat(5 - priceRating)}\n`;
if (mood) {
const moodLabels: Record<string, string> = {
'very-bad': 'Very Unhappy',
'bad': 'Unhappy',
'neutral': 'Neutral',
'good': 'Happy',
'excellent': 'Very Happy'
};
summary += `\nEmotional Response: ${moodLabels[mood] || mood}\n`;
}
if (wouldRepurchase) {
summary += `\nWould Repurchase: ${wouldRepurchase === 'up' ? 'Yes' : 'No'}\n`;
}
if (factors.length > 0) {
summary += `\nKey Value Factors: ${factors.length} selected`;
}
return summary;
},
customStyles: () => {
const rating = overallSection.ratingScale('valueRating')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (rating && rating >= 4) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (rating && rating <= 2) {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f1f5f9', borderLeft: '4px solid #94a3b8' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Value Assessment',
isVisible: () => overallSection.ratingScale('valueRating')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your value perception insights help us ensure our pricing reflects the quality and experience you deserve. We continuously work to deliver the best value possible.'
});
}