export function marketingSuperpowerQuiz(form: FormTs) {
form.setTitle(() => '✨ What\'s Your Marketing Superpower?');
// ============ SCORING SYSTEM ============
const scores = form.state<Record<string, number>>({
storyteller: 0,
analyst: 0,
growth: 0,
brand: 0,
community: 0
});
const updateScore = (type: string, points: number) => {
scores.update(current => ({
...current,
[type]: (current[type] || 0) + points
}));
};
type SuperpowerKey = 'storyteller' | 'analyst' | 'growth' | 'brand' | 'community';
const getTopSuperpower = (): SuperpowerKey => {
const s = scores();
let maxType: SuperpowerKey = 'storyteller';
let maxScore = s['storyteller'] || 0;
const types: SuperpowerKey[] = ['storyteller', 'analyst', 'growth', 'brand', 'community'];
for (const type of types) {
if ((s[type] || 0) > maxScore) {
maxScore = s[type] || 0;
maxType = type;
}
}
return maxType;
};
const getSecondarySuperpower = (): SuperpowerKey => {
const s = scores();
const top = getTopSuperpower();
let secondType: SuperpowerKey = 'analyst';
let secondScore = 0;
const types: SuperpowerKey[] = ['storyteller', 'analyst', 'growth', 'brand', 'community'];
for (const type of types) {
if (type !== top && (s[type] || 0) > secondScore) {
secondScore = s[type] || 0;
secondType = type;
}
}
return secondType;
};
const superpowerInfo: Record<SuperpowerKey, { emoji: string; title: string; tagline: string; description: string; strengths: string[]; tools: string[]; roles: string }> = {
storyteller: {
emoji: '📖',
title: 'The Storyteller',
tagline: 'Captivating Hearts & Minds',
description: 'You turn brands into stories people can\'t stop talking about. Your content creates emotional connections that drive loyalty and virality.',
strengths: ['Content creation', 'Copywriting', 'Video marketing', 'Brand narratives'],
tools: ['Blog posts', 'Video content', 'Podcasts', 'Social media stories'],
roles: 'Content Marketing Manager, Brand Storyteller, Creative Director'
},
analyst: {
emoji: '📊',
title: 'The Data Wizard',
tagline: 'Turning Numbers into Gold',
description: 'You see patterns others miss. Your data-driven approach optimizes every campaign and proves ROI with precision.',
strengths: ['Analytics', 'A/B testing', 'Attribution', 'Forecasting'],
tools: ['Google Analytics', 'SQL', 'Data visualization', 'Marketing dashboards'],
roles: 'Marketing Analyst, Growth Analyst, Marketing Operations'
},
growth: {
emoji: '🚀',
title: 'The Growth Hacker',
tagline: 'Breaking the Rules to Win',
description: 'You find unconventional paths to explosive growth. Experimentation is your playground, and scaling is your obsession.',
strengths: ['Experimentation', 'Viral loops', 'Conversion optimization', 'Scrappy tactics'],
tools: ['A/B testing tools', 'Landing pages', 'Automation', 'Scraping tools'],
roles: 'Growth Marketing Manager, Growth Lead, Head of Growth'
},
brand: {
emoji: '🎨',
title: 'The Brand Builder',
tagline: 'Creating Iconic Identities',
description: 'You build brands that stand out and stand the test of time. Every touchpoint is crafted to reinforce the brand promise.',
strengths: ['Visual identity', 'Positioning', 'Brand strategy', 'Design thinking'],
tools: ['Brand guidelines', 'Design systems', 'Customer research', 'Competitor analysis'],
roles: 'Brand Manager, Creative Director, CMO'
},
community: {
emoji: '👥',
title: 'The Community Champion',
tagline: 'Building Tribes That Matter',
description: 'You create movements, not just campaigns. Your power is in bringing people together and turning customers into advocates.',
strengths: ['Community building', 'Social engagement', 'Events', 'Influencer relations'],
tools: ['Community platforms', 'Social media', 'Events', 'Ambassador programs'],
roles: 'Community Manager, Social Media Manager, Head of Community'
}
};
const getSuperpowerColor = (type: SuperpowerKey): string => {
const colors: Record<SuperpowerKey, string> = {
storyteller: '#ec4899',
analyst: '#3b82f6',
growth: '#10b981',
brand: '#8b5cf6',
community: '#f59e0b'
};
return colors[type];
};
// ============ COMPLETION SCREEN ============
form.configureCompletionScreen({
type: 'text',
title: () => {
const top = getTopSuperpower();
return `${superpowerInfo[top].emoji} You're ${superpowerInfo[top].title}!`;
},
message: () => {
const top = getTopSuperpower();
const secondary = getSecondarySuperpower();
const secondaryInfo = superpowerInfo[secondary];
return `${superpowerInfo[top].description}\n\nYour secondary superpower is ${secondaryInfo.title}, giving you extra strength in ${secondaryInfo.strengths[0]?.toLowerCase() || 'multiple areas'}.`;
}
});
// ============ PAGES SETUP ============
const pages = form.addPages('quiz-pages', { heightMode: 'current-page' });
// ============ PAGE 1: Work Preferences ============
const page1 = pages.addPage('preferences', { mobileBreakpoint: 500 });
page1.addRow(row => {
row.addTextPanel('header1', {
label: 'Step 1 of 5: Work Preferences',
computedValue: () => 'How do you approach marketing work?',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page1.addSpacer({ height: '24px' });
page1.addRow(row => {
row.addRadioButton('idealTask', {
label: 'Which task excites you most on a Monday morning?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'content', name: '📖 Writing a blog post or creating video content' },
{ id: 'data', name: '📊 Diving into analytics and finding insights' },
{ id: 'experiment', name: '🚀 Launching a new growth experiment' },
{ id: 'design', name: '🎨 Refining the brand look and messaging' },
{ id: 'engage', name: '👥 Engaging with the community and customers' }
],
onValueChange: (val) => {
if (!val) return;
const mapping: Record<string, SuperpowerKey> = {
content: 'storyteller', data: 'analyst', experiment: 'growth',
design: 'brand', engage: 'community'
};
updateScore(mapping[val] || 'storyteller', 5);
}
});
});
page1.addRow(row => {
row.addRadioButton('success', {
label: 'What does marketing success look like to you?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'viral', name: '📖 Content that gets shared and talked about' },
{ id: 'metrics', name: '📊 Hitting all the KPIs with data to prove it' },
{ id: 'scale', name: '🚀 Explosive growth and hockey stick charts' },
{ id: 'recognition', name: '🎨 A brand people instantly recognize and love' },
{ id: 'advocacy', name: '👥 Customers who become passionate advocates' }
],
onValueChange: (val) => {
if (!val) return;
const mapping: Record<string, SuperpowerKey> = {
viral: 'storyteller', metrics: 'analyst', scale: 'growth',
recognition: 'brand', advocacy: 'community'
};
updateScore(mapping[val] || 'storyteller', 5);
}
});
});
page1.addRow(row => {
row.addEmojiRating('energy', {
label: 'What gives you the most energy?',
isRequired: true,
preset: 'custom',
emojis: [
{ id: 'storyteller', emoji: '✍️', label: 'Creating' },
{ id: 'analyst', emoji: '📈', label: 'Analyzing' },
{ id: 'growth', emoji: '🧪', label: 'Testing' },
{ id: 'brand', emoji: '🎯', label: 'Designing' },
{ id: 'community', emoji: '💬', label: 'Connecting' }
],
size: 'lg',
showLabels: true,
alignment: 'center',
onValueChange: (val) => {
if (!val) return;
updateScore(val as SuperpowerKey, 5);
}
});
});
// ============ PAGE 2: Problem Solving ============
const page2 = pages.addPage('problems', { mobileBreakpoint: 500 });
page2.addRow(row => {
row.addTextPanel('header2', {
label: 'Step 2 of 5: Problem Solving',
computedValue: () => 'How do you tackle marketing challenges?',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page2.addSpacer({ height: '24px' });
page2.addRow(row => {
row.addRadioButton('lowEngagement', {
label: 'Engagement is down. What\'s your first move?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'story', name: '📖 Create more compelling, emotional content' },
{ id: 'analyze', name: '📊 Analyze what content performed best historically' },
{ id: 'test', name: '🚀 Run rapid A/B tests on different approaches' },
{ id: 'rebrand', name: '🎨 Refresh the visual style and messaging' },
{ id: 'ask', name: '👥 Ask the community directly what they want' }
],
onValueChange: (val) => {
if (!val) return;
const mapping: Record<string, SuperpowerKey> = {
story: 'storyteller', analyze: 'analyst', test: 'growth',
rebrand: 'brand', ask: 'community'
};
updateScore(mapping[val] || 'storyteller', 5);
}
});
});
page2.addRow(row => {
row.addRadioButton('newProduct', {
label: 'Launching a new product. What do you lead with?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'narrative', name: '📖 A compelling origin story and narrative' },
{ id: 'research', name: '📊 Market research and competitive positioning' },
{ id: 'hacks', name: '🚀 Viral launch tactics and growth loops' },
{ id: 'identity', name: '🎨 Strong visual identity and brand assets' },
{ id: 'beta', name: '👥 Beta community and early adopter program' }
],
onValueChange: (val) => {
if (!val) return;
const mapping: Record<string, SuperpowerKey> = {
narrative: 'storyteller', research: 'analyst', hacks: 'growth',
identity: 'brand', beta: 'community'
};
updateScore(mapping[val] || 'storyteller', 5);
}
});
});
// ============ PAGE 3: Skills & Tools ============
const page3 = pages.addPage('skills', { mobileBreakpoint: 500 });
page3.addRow(row => {
row.addTextPanel('header3', {
label: 'Step 3 of 5: Skills & Tools',
computedValue: () => 'What are you naturally good at?',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page3.addSpacer({ height: '24px' });
page3.addRow(row => {
row.addSuggestionChips('skills', {
label: 'Select the skills that come most naturally to you:',
isRequired: true,
suggestions: [
{ id: 'writing', name: '✍️ Writing/Copywriting' },
{ id: 'video', name: '🎬 Video Production' },
{ id: 'analytics', name: '📊 Analytics' },
{ id: 'testing', name: '🧪 A/B Testing' },
{ id: 'design', name: '🎨 Design' },
{ id: 'social', name: '📱 Social Media' }
],
min: 1,
max: 3,
alignment: 'center',
onValueChange: (val) => {
if (!val) return;
if (val.includes('writing') || val.includes('video')) updateScore('storyteller', 3);
if (val.includes('analytics') || val.includes('testing')) updateScore('analyst', 3);
if (val.includes('testing')) updateScore('growth', 3);
if (val.includes('design')) updateScore('brand', 3);
if (val.includes('social')) updateScore('community', 3);
}
});
});
page3.addRow(row => {
row.addRadioButton('learning', {
label: 'What would you most want to learn next?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'content', name: '📖 Advanced storytelling and content strategy' },
{ id: 'data', name: '📊 Data science and marketing analytics' },
{ id: 'growth', name: '🚀 Growth hacking and experimentation' },
{ id: 'brand', name: '🎨 Brand strategy and positioning' },
{ id: 'community', name: '👥 Community building and social strategy' }
],
onValueChange: (val) => {
if (!val) return;
const mapping: Record<string, SuperpowerKey> = {
content: 'storyteller', data: 'analyst', growth: 'growth',
brand: 'brand', community: 'community'
};
updateScore(mapping[val] || 'storyteller', 4);
}
});
});
// ============ PAGE 4: Results ============
const page4 = pages.addPage('results', { mobileBreakpoint: 500 });
page4.addRow(row => {
row.addTextPanel('header4', {
label: 'Step 4 of 5: Your Superpower',
computedValue: () => 'Discover your marketing superpower!',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page4.addSpacer({ height: '24px' });
page4.addRow(row => {
row.addTextPanel('resultTitle', {
computedValue: () => {
const top = getTopSuperpower();
return `${superpowerInfo[top].emoji} You're ${superpowerInfo[top].title}!`;
},
customStyles: {
fontSize: '1.8rem', fontWeight: '800', textAlign: 'center',
color: getSuperpowerColor(getTopSuperpower()), padding: '20px',
background: '#f9fafb', borderRadius: '12px',
border: `3px solid ${getSuperpowerColor(getTopSuperpower())}`
}
});
});
page4.addRow(row => {
row.addTextPanel('tagline', {
computedValue: () => superpowerInfo[getTopSuperpower()].tagline,
customStyles: {
fontSize: '1.1rem', color: '#6b7280', textAlign: 'center',
marginTop: '0.5rem', fontStyle: 'italic'
}
});
});
page4.addRow(row => {
row.addTextPanel('description', {
computedValue: () => superpowerInfo[getTopSuperpower()].description,
customStyles: {
fontSize: '1rem', color: '#4b5563', textAlign: 'center',
lineHeight: '1.7', padding: '20px', marginTop: '1rem'
}
});
});
page4.addRow(row => {
row.addTextPanel('strengths', {
label: '💪 Your Strengths',
computedValue: () => superpowerInfo[getTopSuperpower()].strengths.join(' • '),
customStyles: {
fontSize: '0.95rem', color: '#059669', padding: '15px',
background: '#ecfdf5', borderRadius: '8px', marginTop: '1rem'
}
});
});
page4.addRow(row => {
row.addTextPanel('tools', {
label: '🛠️ Your Tools',
computedValue: () => superpowerInfo[getTopSuperpower()].tools.join(' • '),
customStyles: {
fontSize: '0.95rem', color: '#1e40af', padding: '15px',
background: '#dbeafe', borderRadius: '8px', marginTop: '0.5rem'
}
});
});
page4.addRow(row => {
row.addTextPanel('roles', {
label: '💼 Ideal Roles',
computedValue: () => superpowerInfo[getTopSuperpower()].roles,
customStyles: {
fontSize: '0.95rem', color: '#6b7280', padding: '15px',
background: '#f3f4f6', borderRadius: '8px', marginTop: '0.5rem'
}
});
});
page4.addRow(row => {
row.addTextPanel('secondary', {
computedValue: () => {
const secondary = getSecondarySuperpower();
return `Your secondary superpower is ${superpowerInfo[secondary].emoji} ${superpowerInfo[secondary].title}`;
},
customStyles: {
fontSize: '0.9rem', color: '#6b7280', textAlign: 'center',
padding: '15px', marginTop: '1rem', fontStyle: 'italic'
}
});
});
// ============ PAGE 5: Lead Capture ============
const page5 = pages.addPage('lead-capture', { mobileBreakpoint: 500 });
page5.addRow(row => {
row.addTextPanel('header5', {
label: 'Step 5 of 5: Get Your Report',
computedValue: () => 'Receive your full marketing superpower profile',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page5.addSpacer({ height: '24px' });
page5.addRow(row => {
row.addTextbox('name', { label: 'Your Name', isRequired: true, placeholder: 'Jane Smith' }, '1fr');
row.addEmail('email', { label: 'Email', isRequired: true, placeholder: 'jane@marketing.com' }, '1fr');
});
page5.addRow(row => {
row.addTextbox('company', { label: 'Company', placeholder: 'Acme Marketing' }, '1fr');
row.addDropdown('experience', {
label: 'Marketing Experience',
options: [
{ id: 'student', name: '📚 Student/Learning' },
{ id: 'junior', name: '🌱 1-3 years' },
{ id: 'mid', name: '📈 3-7 years' },
{ id: 'senior', name: '🚀 7+ years' },
{ id: 'leader', name: '👔 Marketing Leader' }
],
placeholder: 'Select experience'
}, '1fr');
});
page5.addRow(row => {
row.addCheckboxList('consent', {
options: [
{ id: 'report', name: '📄 Send me my superpower profile', isRequired: true },
{ id: 'tips', name: '💡 Send me tips to develop my superpower' },
{ id: 'community', name: '👥 Connect me with other marketers' }
],
defaultValue: ['report'],
orientation: 'vertical'
});
});
// ============ PDF REPORT ============
form.configurePdf('superpower-report', pdf => {
pdf.configure({
filename: 'marketing-superpower-report.pdf',
pageSize: 'A4',
allowUserDownload: true,
downloadButtonLabel: '📄 Download Your Profile',
header: { title: 'Marketing Superpower Profile', subtitle: 'Your Personalized Marketing DNA' },
footer: { text: 'Generated by FormTs Marketing Quiz', showPageNumbers: true }
});
const top = getTopSuperpower();
const secondary = getSecondarySuperpower();
pdf.addSection('Your Primary Superpower', section => {
section.addRow(row => {
row.addField('Superpower', `${superpowerInfo[top].emoji} ${superpowerInfo[top].title}`);
});
section.addText(superpowerInfo[top].description);
});
pdf.addSection('Strengths & Tools', section => {
section.addRow(row => {
row.addField('Key Strengths', superpowerInfo[top].strengths.join(', '));
});
section.addRow(row => {
row.addField('Best Tools', superpowerInfo[top].tools.join(', '));
});
section.addRow(row => {
row.addField('Ideal Roles', superpowerInfo[top].roles);
});
});
pdf.addSection('Secondary Superpower', section => {
const secondaryInfo = superpowerInfo[secondary];
section.addRow(row => {
row.addField('Superpower', `${secondaryInfo.emoji} ${secondaryInfo.title}`);
});
section.addText(`Your secondary superpower adds ${secondaryInfo.strengths[0]?.toLowerCase() || 'additional skills'} to your marketing toolkit.`);
});
pdf.addPageBreak();
pdf.addSection('Development Tips', section => {
if (top === 'storyteller') {
section.addText('1. Study the best copywriters - read their work daily');
section.addText('2. Practice writing in different formats and styles');
section.addText('3. Learn video production to expand your storytelling');
section.addText('4. Study psychology and what makes stories resonate');
} else if (top === 'analyst') {
section.addText('1. Learn SQL and data visualization tools');
section.addText('2. Study attribution modeling deeply');
section.addText('3. Practice translating data into business insights');
section.addText('4. Build dashboards that drive decisions');
} else if (top === 'growth') {
section.addText('1. Run at least one experiment every week');
section.addText('2. Study viral loops and referral mechanics');
section.addText('3. Learn technical skills (HTML, basic coding)');
section.addText('4. Document and share your experiments');
} else if (top === 'brand') {
section.addText('1. Study iconic brands and their positioning');
section.addText('2. Learn design principles and visual systems');
section.addText('3. Practice writing brand guidelines');
section.addText('4. Develop your strategic thinking');
} else {
section.addText('1. Build genuine relationships, not just followers');
section.addText('2. Learn community platform tools deeply');
section.addText('3. Study successful ambassador programs');
section.addText('4. Practice facilitating meaningful conversations');
}
});
});
form.configureSubmitButton({
label: () => `✨ Get My ${superpowerInfo[getTopSuperpower()].title} Profile`
});
form.configureSubmitBehavior({ sendToServer: true });
}