export function communicationStyleQuiz(form: FormTs) {
form.setTitle(() => '💬 What\'s Your Communication Style at Work?');
// ============ ARCHETYPE SCORING SYSTEM ============
const scores = form.state<Record<string, number>>({
assertive: 0, // Direct, confident, takes charge
analytical: 0, // Data-driven, logical, precise
amiable: 0, // Supportive, patient, diplomatic
expressive: 0 // Enthusiastic, creative, persuasive
});
const updateScore = (style: string, points: number) => {
scores.update(current => ({
...current,
[style]: (current[style] || 0) + points
}));
};
const getWinningStyle = (): string => {
const s = scores();
let maxStyle = 'assertive';
let maxScore = 0;
for (const [style, score] of Object.entries(s)) {
if (score > maxScore) {
maxScore = score;
maxStyle = style;
}
}
return maxStyle;
};
const getStyleName = (style: string) => {
const names: Record<string, string> = {
assertive: 'The Director',
analytical: 'The Analyst',
amiable: 'The Supporter',
expressive: 'The Motivator'
};
return names[style] || style;
};
const getStyleEmoji = (style: string) => {
const emojis: Record<string, string> = {
assertive: '🎯',
analytical: '📊',
amiable: '🤝',
expressive: '🌟'
};
return emojis[style] || '💬';
};
const getStyleDescription = (style: string) => {
const descriptions: Record<string, string> = {
assertive: 'You communicate directly and decisively. You value efficiency, results, and clear action items. You\'re comfortable taking charge and making quick decisions. Others see you as confident and goal-oriented.',
analytical: 'You communicate with precision and logic. You value accuracy, data, and thorough analysis. You prefer to have all the facts before speaking. Others see you as thoughtful and systematic.',
amiable: 'You communicate with warmth and diplomacy. You value relationships, harmony, and consensus. You\'re a great listener who makes others feel heard. Others see you as supportive and trustworthy.',
expressive: 'You communicate with enthusiasm and creativity. You value inspiration, vision, and big ideas. You\'re naturally persuasive and engaging. Others see you as charismatic and motivating.'
};
return descriptions[style] || '';
};
const getStyleStrengths = (style: string): string[] => {
const strengths: Record<string, string[]> = {
assertive: ['Quick decision-making', 'Clear direction', 'Driving results', 'Taking initiative'],
analytical: ['Thorough research', 'Logical arguments', 'Risk assessment', 'Quality focus'],
amiable: ['Building trust', 'Active listening', 'Conflict resolution', 'Team harmony'],
expressive: ['Inspiring others', 'Creative solutions', 'Storytelling', 'Energizing teams']
};
return strengths[style] || [];
};
const getStyleChallenges = (style: string): string[] => {
const challenges: Record<string, string[]> = {
assertive: ['May seem impatient', 'Can overlook feelings', 'May dominate discussions'],
analytical: ['May over-analyze', 'Can seem detached', 'May delay decisions'],
amiable: ['May avoid conflict', 'Can be too accommodating', 'May struggle with tough feedback'],
expressive: ['May overlook details', 'Can seem unfocused', 'May talk more than listen']
};
return challenges[style] || [];
};
// ============ COMPLETION SCREEN ============
form.configureCompletionScreen({
type: 'text',
title: () => `${getStyleEmoji(getWinningStyle())} You are ${getStyleName(getWinningStyle())}!`,
message: () => {
const style = getWinningStyle();
return `${getStyleDescription(style)} Download your personalized communication guide for tips on working with other styles.`;
}
});
// ============ PAGES SETUP ============
const pages = form.addPages('quiz-pages', {
heightMode: 'current-page'
});
// ============ PAGE 1: Communication Approach ============
const page1 = pages.addPage('approach', { mobileBreakpoint: 500 });
page1.addRow(row => {
row.addTextPanel('header1', {
label: 'Step 1 of 6: Your Communication Approach',
computedValue: () => 'How do you naturally communicate at work?',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page1.addSpacer({ height: '24px' });
page1.addRow(row => {
row.addRadioButton('emailStyle', {
label: 'When writing an email, you typically:',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'brief', name: '📝 Keep it short - bullet points, action items only' },
{ id: 'detailed', name: '📊 Include all relevant data and analysis' },
{ id: 'warm', name: '🤝 Start with a friendly greeting, ask about them' },
{ id: 'engaging', name: '🌟 Make it engaging with stories or enthusiasm' }
],
onValueChange: (val) => {
if (val === 'brief') updateScore('assertive', 3);
else if (val === 'detailed') updateScore('analytical', 3);
else if (val === 'warm') updateScore('amiable', 3);
else if (val === 'engaging') updateScore('expressive', 3);
}
});
});
page1.addRow(row => {
row.addRadioButton('meetingBehavior', {
label: 'In meetings, you\'re most likely to:',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'drive', name: '🎯 Drive toward decisions and action items' },
{ id: 'analyze', name: '📋 Ask clarifying questions and request data' },
{ id: 'listen', name: '👂 Listen carefully and ensure everyone is heard' },
{ id: 'energize', name: '💡 Share ideas and get people excited' }
],
onValueChange: (val) => {
if (val === 'drive') updateScore('assertive', 3);
else if (val === 'analyze') updateScore('analytical', 3);
else if (val === 'listen') updateScore('amiable', 3);
else if (val === 'energize') updateScore('expressive', 3);
}
});
});
// ============ PAGE 2: Decision Making ============
const page2 = pages.addPage('decisions', { mobileBreakpoint: 500 });
page2.addRow(row => {
row.addTextPanel('header2', {
label: 'Step 2 of 6: Decision Making',
computedValue: () => 'How do you approach decisions and problems?',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page2.addSpacer({ height: '24px' });
page2.addRow(row => {
row.addRadioButton('decisionSpeed', {
label: 'When facing a decision, you prefer to:',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'fast', name: '⚡ Decide quickly and move on' },
{ id: 'research', name: '🔍 Research thoroughly before deciding' },
{ id: 'consult', name: '👥 Consult with others to reach consensus' },
{ id: 'intuition', name: '💭 Trust your gut and vision' }
],
onValueChange: (val) => {
if (val === 'fast') updateScore('assertive', 2);
else if (val === 'research') updateScore('analytical', 2);
else if (val === 'consult') updateScore('amiable', 2);
else if (val === 'intuition') updateScore('expressive', 2);
}
});
});
page2.addRow(row => {
row.addRadioButton('conflictApproach', {
label: 'When there\'s a disagreement, you tend to:',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'direct', name: '🎯 Address it directly and find a solution' },
{ id: 'logic', name: '📊 Present facts to find the logical answer' },
{ id: 'mediate', name: '🤝 Mediate and find common ground' },
{ id: 'reframe', name: '💡 Reframe it as an opportunity' }
],
onValueChange: (val) => {
if (val === 'direct') updateScore('assertive', 2);
else if (val === 'logic') updateScore('analytical', 2);
else if (val === 'mediate') updateScore('amiable', 2);
else if (val === 'reframe') updateScore('expressive', 2);
}
});
});
// ============ PAGE 3: Work Preferences ============
const page3 = pages.addPage('preferences', { mobileBreakpoint: 500 });
page3.addRow(row => {
row.addTextPanel('header3', {
label: 'Step 3 of 6: Work Preferences',
computedValue: () => 'What matters most to you at work?',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page3.addSpacer({ height: '24px' });
page3.addRow(row => {
row.addEmojiRating('pacePreference', {
label: 'What pace do you prefer at work?',
isRequired: true,
preset: 'custom',
emojis: [
{ id: 'fast', emoji: '🚀', label: 'Fast & decisive' },
{ id: 'steady', emoji: '📈', label: 'Methodical' },
{ id: 'flexible', emoji: '🌊', label: 'Flexible' },
{ id: 'dynamic', emoji: '⚡', label: 'Dynamic' }
],
size: 'lg',
showLabels: true,
alignment: 'center',
onValueChange: (val) => {
if (val === 'fast') updateScore('assertive', 2);
else if (val === 'steady') updateScore('analytical', 2);
else if (val === 'flexible') updateScore('amiable', 2);
else if (val === 'dynamic') updateScore('expressive', 2);
}
});
});
page3.addRow(row => {
row.addSuggestionChips('workValues', {
label: 'What do you value most? (Select top 3)',
isRequired: true,
suggestions: [
{ id: 'results', name: '🎯 Results' },
{ id: 'accuracy', name: '📊 Accuracy' },
{ id: 'harmony', name: '🤝 Harmony' },
{ id: 'innovation', name: '💡 Innovation' },
{ id: 'efficiency', name: '⚡ Efficiency' },
{ id: 'quality', name: '✅ Quality' },
{ id: 'relationships', name: '❤️ Relationships' },
{ id: 'recognition', name: '🌟 Recognition' }
],
min: 1,
max: 3,
onValueChange: (val) => {
if (!val) return;
if (val.includes('results') || val.includes('efficiency')) updateScore('assertive', 2);
if (val.includes('accuracy') || val.includes('quality')) updateScore('analytical', 2);
if (val.includes('harmony') || val.includes('relationships')) updateScore('amiable', 2);
if (val.includes('innovation') || val.includes('recognition')) updateScore('expressive', 2);
}
});
});
// ============ PAGE 4: Stress & Feedback ============
const page4 = pages.addPage('stress-feedback', { mobileBreakpoint: 500 });
page4.addRow(row => {
row.addTextPanel('header4', {
label: 'Step 4 of 6: Under Pressure',
computedValue: () => 'How do you handle stress and feedback?',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page4.addSpacer({ height: '24px' });
page4.addRow(row => {
row.addRadioButton('stressResponse', {
label: 'Under stress, you tend to:',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'control', name: '🎯 Take control and push harder' },
{ id: 'withdraw', name: '📊 Withdraw and analyze the situation' },
{ id: 'seek-support', name: '🤝 Seek support from others' },
{ id: 'vent', name: '💬 Talk it out and express feelings' }
],
onValueChange: (val) => {
if (val === 'control') updateScore('assertive', 2);
else if (val === 'withdraw') updateScore('analytical', 2);
else if (val === 'seek-support') updateScore('amiable', 2);
else if (val === 'vent') updateScore('expressive', 2);
}
});
});
page4.addRow(row => {
row.addRadioButton('feedbackStyle', {
label: 'When giving feedback, you:',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'direct', name: '🎯 Get straight to the point' },
{ id: 'specific', name: '📋 Provide specific examples and data' },
{ id: 'gentle', name: '💚 Focus on the positive first' },
{ id: 'inspiring', name: '🌟 Frame it as growth opportunity' }
],
onValueChange: (val) => {
if (val === 'direct') updateScore('assertive', 2);
else if (val === 'specific') updateScore('analytical', 2);
else if (val === 'gentle') updateScore('amiable', 2);
else if (val === 'inspiring') updateScore('expressive', 2);
}
});
});
// ============ PAGE 5: Results ============
const page5 = pages.addPage('results', { mobileBreakpoint: 500 });
page5.addRow(row => {
row.addTextPanel('header5', {
label: 'Step 5 of 6: Your Communication Style',
computedValue: () => 'Discover how you naturally communicate',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page5.addSpacer({ height: '24px' });
page5.addRow(row => {
row.addTextPanel('resultEmoji', {
computedValue: () => getStyleEmoji(getWinningStyle()),
customStyles: {
fontSize: '4rem',
textAlign: 'center'
}
});
});
page5.addRow(row => {
row.addTextPanel('resultStyle', {
computedValue: () => getStyleName(getWinningStyle()),
customStyles: {
fontSize: '1.5rem',
fontWeight: '800',
textAlign: 'center',
color: '#1e40af',
padding: '10px'
}
});
});
page5.addRow(row => {
row.addTextPanel('resultDescription', {
computedValue: () => getStyleDescription(getWinningStyle()),
customStyles: {
fontSize: '1rem',
color: '#4b5563',
textAlign: 'center',
padding: '15px',
background: '#f3f4f6',
borderRadius: '8px',
lineHeight: '1.6'
}
});
});
page5.addRow(row => {
row.addTextPanel('strengthsHeader', {
computedValue: () => '💪 Your Strengths:',
customStyles: {
fontSize: '1rem',
fontWeight: '600',
marginTop: '15px'
}
});
});
page5.addRow(row => {
row.addTextPanel('strengthsList', {
computedValue: () => getStyleStrengths(getWinningStyle()).join(' • '),
customStyles: {
fontSize: '0.95rem',
color: '#059669',
textAlign: 'center',
fontWeight: '500'
}
});
});
const scoreBreakdown = page5.addSubform('scoreBreakdown', {
title: '📊 All Styles Breakdown (click to expand)',
isCollapsible: true,
customStyles: {
marginTop: '1rem',
background: '#f9fafb',
borderRadius: '8px'
}
});
scoreBreakdown.addRow(row => {
row.addTextPanel('assertiveScore', {
label: '🎯 Director',
computedValue: () => `${scores()['assertive'] || 0} points`,
customStyles: {
fontSize: '0.9rem',
padding: '8px 12px',
background: '#fee2e2',
borderRadius: '6px'
}
}, '1fr');
row.addTextPanel('analyticalScore', {
label: '📊 Analyst',
computedValue: () => `${scores()['analytical'] || 0} points`,
customStyles: {
fontSize: '0.9rem',
padding: '8px 12px',
background: '#dbeafe',
borderRadius: '6px'
}
}, '1fr');
});
scoreBreakdown.addRow(row => {
row.addTextPanel('amiableScore', {
label: '🤝 Supporter',
computedValue: () => `${scores()['amiable'] || 0} points`,
customStyles: {
fontSize: '0.9rem',
padding: '8px 12px',
background: '#d1fae5',
borderRadius: '6px'
}
}, '1fr');
row.addTextPanel('expressiveScore', {
label: '🌟 Motivator',
computedValue: () => `${scores()['expressive'] || 0} points`,
customStyles: {
fontSize: '0.9rem',
padding: '8px 12px',
background: '#fef3c7',
borderRadius: '6px'
}
}, '1fr');
});
// ============ PAGE 6: Lead Capture ============
const page6 = pages.addPage('lead-capture', { mobileBreakpoint: 500 });
page6.addRow(row => {
row.addTextPanel('header6', {
label: 'Step 6 of 6: Get Your Guide',
computedValue: () => 'Enter your details to receive your communication style guide',
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
marginBottom: '1rem'
}
});
});
page6.addSpacer({ height: '24px' });
page6.addRow(row => {
row.addTextbox('name', {
label: 'Your Name',
isRequired: true,
placeholder: 'Alex Smith'
}, '1fr');
row.addEmail('email', {
label: 'Work Email',
isRequired: true,
placeholder: 'alex@company.com'
}, '1fr');
});
page6.addRow(row => {
row.addCheckboxList('consent', {
options: [
{ id: 'guide', name: '📄 Send me the communication style guide', isRequired: true },
{ id: 'team', name: '👥 Send me team communication tips' },
{ id: 'workshop', name: '🎓 I\'m interested in team workshops' }
],
defaultValue: ['guide'],
orientation: 'vertical'
});
});
// ============ PDF REPORT ============
form.configurePdf('communication-guide', pdf => {
pdf.configure({
filename: 'communication-style-guide.pdf',
pageSize: 'A4',
allowUserDownload: true,
downloadButtonLabel: '📄 Download Style Guide',
header: {
title: 'Your Communication Style Guide',
subtitle: `Style: ${getStyleName(getWinningStyle())}`
},
footer: {
text: 'Generated by FormTs Communication Style Quiz',
showPageNumbers: true
}
});
pdf.addSection('Your Primary Style', section => {
section.addRow(row => {
row.addField('Style', getStyleName(getWinningStyle()));
row.addField('Type', getStyleEmoji(getWinningStyle()));
});
section.addSpacer(10);
section.addText(getStyleDescription(getWinningStyle()));
});
pdf.addSection('Your Strengths', section => {
const strengths = getStyleStrengths(getWinningStyle());
for (const strength of strengths) {
section.addText(`✅ ${strength}`);
}
});
pdf.addSection('Watch Out For', section => {
const challenges = getStyleChallenges(getWinningStyle());
for (const challenge of challenges) {
section.addText(`⚠️ ${challenge}`);
}
});
pdf.addPageBreak();
pdf.addSection('Working With Other Styles', section => {
section.addText('🎯 WITH DIRECTORS: Be brief, focus on results, respect their time');
section.addText('📊 WITH ANALYSTS: Provide data, be patient, give them time to process');
section.addText('🤝 WITH SUPPORTERS: Build rapport first, show appreciation, avoid pressure');
section.addText('🌟 WITH MOTIVATORS: Be enthusiastic, share the big picture, allow creativity');
});
pdf.addSection('Tips for Your Style', section => {
const style = getWinningStyle();
if (style === 'assertive') {
section.addText('1. Practice active listening - let others finish speaking');
section.addText('2. Ask for input before deciding');
section.addText('3. Acknowledge others\' feelings, not just facts');
} else if (style === 'analytical') {
section.addText('1. Set deadlines for your analysis');
section.addText('2. Share conclusions, not just data');
section.addText('3. Connect with others on a personal level');
} else if (style === 'amiable') {
section.addText('1. Practice saying "no" when needed');
section.addText('2. Share your opinions more directly');
section.addText('3. Don\'t avoid difficult conversations');
} else if (style === 'expressive') {
section.addText('1. Listen as much as you speak');
section.addText('2. Follow through on commitments');
section.addText('3. Pay attention to details');
}
});
});
// ============ SUBMIT BUTTON ============
form.configureSubmitButton({
label: () => `${getStyleEmoji(getWinningStyle())} Get My ${getStyleName(getWinningStyle())} Guide`
});
form.configureSubmitBehavior({
sendToServer: true
});
}