export function projectManagementToolQuiz(form: FormTs) {
form.setTitle(() => '📋 Which Project Management Tool Fits Your Team?');
// ========== STATE ==========
type ToolKey = 'asana' | 'monday' | 'notion' | 'clickup' | 'trello';
const scores = form.state<Record<ToolKey, number>>({
asana: 0,
monday: 0,
notion: 0,
clickup: 0,
trello: 0
});
// ========== SCORING FUNCTIONS ==========
const updateScores = (toolScores: Partial<Record<ToolKey, number>>) => {
scores.update(current => {
const updated = { ...current };
(Object.entries(toolScores) as [ToolKey, number][]).forEach(([tool, points]) => {
updated[tool] = (updated[tool] || 0) + points;
});
return updated;
});
};
const getRecommendation = (): ToolKey => {
const s = scores();
const entries = Object.entries(s) as [ToolKey, number][];
const sorted = entries.sort((a, b) => b[1] - a[1]);
return sorted[0]?.[0] || 'trello';
};
const getTopThree = (): [ToolKey, number][] => {
const s = scores();
const entries = Object.entries(s) as [ToolKey, number][];
return entries.sort((a, b) => b[1] - a[1]).slice(0, 3);
};
type ToolInfo = { name: string; tagline: string; bestFor: string; price: string };
const tools: Record<ToolKey, ToolInfo> = {
asana: {
name: 'Asana',
tagline: 'Work management for teams that mean business',
bestFor: 'Structured project management, timelines, portfolios',
price: 'Free - $24.99/user/month'
},
monday: {
name: 'Monday.com',
tagline: 'A platform built for a new way of working',
bestFor: 'Visual workflows, automations, custom dashboards',
price: 'Free - $24/user/month'
},
notion: {
name: 'Notion',
tagline: 'All-in-one workspace for notes, docs, and projects',
bestFor: 'Documentation, wikis, flexible databases',
price: 'Free - $15/user/month'
},
clickup: {
name: 'ClickUp',
tagline: 'One app to replace them all',
bestFor: 'Feature-rich, customizable, all-in-one solution',
price: 'Free - $19/user/month'
},
trello: {
name: 'Trello',
tagline: 'Boards, lists, and cards for simple project tracking',
bestFor: 'Simple kanban boards, visual task management',
price: 'Free - $17.50/user/month'
}
};
const getToolInfo = (tool: ToolKey): ToolInfo => {
return tools[tool];
};
const getMatchPercentage = (tool: ToolKey) => {
const s = scores();
const maxPossible = 50;
return Math.min(100, Math.round((s[tool] / maxPossible) * 100));
};
// ========== COMPLETION SCREEN ==========
form.configureCompletionScreen({
type: 'text',
title: '🎉 Your Comparison Guide Is On Its Way!',
message: () => `We recommend ${getToolInfo(getRecommendation()).name} as your best match. Check your email for the detailed comparison guide with setup tips and exclusive trial offers!`
});
// ========== PAGES ==========
const pages = form.addPages('quiz-pages', { heightMode: 'current-page' });
// ========== PAGE 1: Team Size & Type ==========
const page1 = pages.addPage('team-basics', { mobileBreakpoint: 500 });
page1.addRow(row => {
row.addTextPanel('header1', {
label: 'Step 1 of 6: About Your Team',
computedValue: () => 'Let\'s find the perfect project management tool for you',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page1.addSpacer({ height: '24px' });
page1.addRow(row => {
row.addRadioButton('teamSize', {
label: 'How many people will use this tool?',
options: [
{ id: 'solo', name: 'Just me (Solo)' },
{ id: 'small', name: '2-10 people' },
{ id: 'medium', name: '11-50 people' },
{ id: 'large', name: '50+ people' }
],
orientation: 'vertical',
onValueChange: (v) => {
if (v === 'solo') updateScores({ notion: 3, trello: 3, clickup: 2, asana: 1, monday: 1 });
else if (v === 'small') updateScores({ trello: 3, notion: 2, clickup: 2, asana: 2, monday: 2 });
else if (v === 'medium') updateScores({ asana: 3, monday: 3, clickup: 2, notion: 1, trello: 1 });
else if (v === 'large') updateScores({ asana: 4, monday: 3, clickup: 2, notion: 1, trello: 0 });
}
});
});
page1.addRow(row => {
row.addDropdown('teamType', {
label: 'What type of team are you?',
options: [
{ id: 'software', name: 'Software Development / Engineering' },
{ id: 'marketing', name: 'Marketing / Creative' },
{ id: 'operations', name: 'Operations / Business' },
{ id: 'product', name: 'Product Management' },
{ id: 'agency', name: 'Agency / Client Services' },
{ id: 'startup', name: 'Startup / Small Business' },
{ id: 'other', name: 'Other' }
],
onValueChange: (v) => {
if (v === 'software') updateScores({ clickup: 3, asana: 2, notion: 2, monday: 1, trello: 1 });
else if (v === 'marketing') updateScores({ monday: 3, asana: 2, notion: 2, trello: 2, clickup: 1 });
else if (v === 'operations') updateScores({ monday: 3, asana: 3, clickup: 2, notion: 1, trello: 1 });
else if (v === 'product') updateScores({ asana: 3, clickup: 2, notion: 2, monday: 2, trello: 1 });
else if (v === 'agency') updateScores({ monday: 3, asana: 2, clickup: 2, trello: 2, notion: 1 });
else if (v === 'startup') updateScores({ notion: 3, trello: 2, clickup: 2, asana: 1, monday: 1 });
}
});
});
// ========== PAGE 2: Work Style ==========
const page2 = pages.addPage('work-style', { mobileBreakpoint: 500 });
page2.addRow(row => {
row.addTextPanel('header2', {
label: 'Step 2 of 6: How You Work',
computedValue: () => 'Tell us about your work style and preferences',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page2.addSpacer({ height: '24px' });
page2.addRow(row => {
row.addRadioButton('projectStyle', {
label: 'How would you describe your projects?',
options: [
{ id: 'structured', name: 'Highly structured with clear phases and deadlines' },
{ id: 'agile', name: 'Agile/iterative with sprints and backlogs' },
{ id: 'flexible', name: 'Flexible with evolving requirements' },
{ id: 'simple', name: 'Simple task lists and to-dos' }
],
orientation: 'vertical',
onValueChange: (v) => {
if (v === 'structured') updateScores({ asana: 4, monday: 3, clickup: 2, notion: 1, trello: 0 });
else if (v === 'agile') updateScores({ clickup: 4, asana: 3, notion: 2, trello: 2, monday: 1 });
else if (v === 'flexible') updateScores({ notion: 4, clickup: 2, trello: 2, monday: 1, asana: 1 });
else if (v === 'simple') updateScores({ trello: 4, notion: 3, clickup: 1, asana: 1, monday: 1 });
}
});
});
page2.addRow(row => {
row.addRadioButton('viewPreference', {
label: 'Which view do you prefer for managing work?',
options: [
{ id: 'kanban', name: 'Kanban boards (visual cards and columns)' },
{ id: 'list', name: 'Lists and tables' },
{ id: 'timeline', name: 'Timeline/Gantt charts' },
{ id: 'calendar', name: 'Calendar view' },
{ id: 'all', name: 'I want all of the above' }
],
orientation: 'vertical',
onValueChange: (v) => {
if (v === 'kanban') updateScores({ trello: 4, monday: 2, notion: 2, asana: 1, clickup: 1 });
else if (v === 'list') updateScores({ notion: 3, asana: 3, clickup: 2, monday: 1, trello: 1 });
else if (v === 'timeline') updateScores({ asana: 4, monday: 3, clickup: 2, notion: 0, trello: 0 });
else if (v === 'calendar') updateScores({ monday: 3, asana: 2, clickup: 2, notion: 2, trello: 1 });
else if (v === 'all') updateScores({ clickup: 4, monday: 3, asana: 2, notion: 1, trello: 0 });
}
});
});
// ========== PAGE 3: Features ==========
const page3 = pages.addPage('features', { mobileBreakpoint: 500 });
page3.addRow(row => {
row.addTextPanel('header3', {
label: 'Step 3 of 6: Must-Have Features',
computedValue: () => 'Which features are most important to you?',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page3.addSpacer({ height: '24px' });
page3.addRow(row => {
row.addSuggestionChips('mustHaveFeatures', {
label: 'Select your must-have features (pick 3-5)',
suggestions: [
{ id: 'automations', name: '⚡ Automations' },
{ id: 'timelines', name: '📊 Timelines/Gantt' },
{ id: 'docs', name: '📝 Built-in docs' },
{ id: 'reporting', name: '📈 Reporting' },
{ id: 'integrations', name: '🔗 Integrations' },
{ id: 'mobile', name: '📱 Mobile app' },
{ id: 'forms', name: '📋 Forms/intake' },
{ id: 'time', name: '⏱️ Time tracking' }
],
min: 3,
max: 5,
onValueChange: (v) => {
const features = v || [];
features.forEach(f => {
if (f === 'automations') updateScores({ monday: 2, clickup: 2, asana: 1, notion: 0, trello: 0 });
if (f === 'timelines') updateScores({ asana: 2, monday: 2, clickup: 1, notion: 0, trello: 0 });
if (f === 'docs') updateScores({ notion: 3, clickup: 1, asana: 0, monday: 0, trello: 0 });
if (f === 'reporting') updateScores({ monday: 2, asana: 2, clickup: 1, notion: 0, trello: 0 });
if (f === 'integrations') updateScores({ asana: 2, monday: 2, clickup: 1, trello: 1, notion: 1 });
if (f === 'mobile') updateScores({ asana: 2, trello: 2, monday: 1, clickup: 1, notion: 1 });
if (f === 'forms') updateScores({ monday: 2, asana: 2, clickup: 1, notion: 1, trello: 0 });
if (f === 'time') updateScores({ clickup: 3, monday: 1, asana: 1, notion: 0, trello: 0 });
});
}
});
});
page3.addRow(row => {
row.addRatingScale('complexityTolerance', {
label: 'How much complexity can your team handle?',
preset: 'custom',
min: 1,
max: 5,
lowLabel: 'Keep it simple',
highLabel: 'Bring all features',
onValueChange: (v) => {
if (v && v <= 2) updateScores({ trello: 3, notion: 2, asana: 0, monday: 0, clickup: -1 });
else if (v === 3) updateScores({ asana: 2, monday: 2, notion: 1, trello: 1, clickup: 1 });
else if (v && v >= 4) updateScores({ clickup: 3, monday: 2, asana: 1, notion: 0, trello: -1 });
}
});
});
// ========== PAGE 4: Budget & Priorities ==========
const page4 = pages.addPage('budget', { mobileBreakpoint: 500 });
page4.addRow(row => {
row.addTextPanel('header4', {
label: 'Step 4 of 6: Budget & Priorities',
computedValue: () => 'Let\'s talk about budget and what matters most',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page4.addSpacer({ height: '24px' });
page4.addRow(row => {
row.addRadioButton('budget', {
label: 'What\'s your budget per user per month?',
options: [
{ id: 'free', name: 'Free only' },
{ id: 'low', name: 'Up to $10/user/month' },
{ id: 'mid', name: '$10-20/user/month' },
{ id: 'high', name: '$20+/user/month (enterprise features)' }
],
orientation: 'vertical',
onValueChange: (v) => {
if (v === 'free') updateScores({ trello: 3, notion: 3, clickup: 2, asana: 1, monday: 0 });
else if (v === 'low') updateScores({ trello: 2, notion: 2, clickup: 2, asana: 1, monday: 1 });
else if (v === 'mid') updateScores({ asana: 2, monday: 2, clickup: 2, notion: 1, trello: 1 });
else if (v === 'high') updateScores({ asana: 3, monday: 3, clickup: 2, notion: 1, trello: 0 });
}
});
});
page4.addRow(row => {
row.addMatrixQuestion('priorities', {
label: 'Rate the importance of each factor:',
rows: [
{ id: 'ease', label: 'Ease of use / Quick setup', isRequired: true },
{ id: 'power', label: 'Powerful features / Customization', isRequired: true },
{ id: 'collab', label: 'Team collaboration', isRequired: true },
{ id: 'scale', label: 'Scalability for growth', isRequired: true }
],
columns: [
{ id: 'low', label: 'Low' },
{ id: 'medium', label: 'Medium' },
{ id: 'high', label: 'High' }
],
onValueChange: (v) => {
if (!v) return;
if (v['ease'] === 'high') updateScores({ trello: 2, notion: 2, asana: 1, monday: 1, clickup: 0 });
if (v['power'] === 'high') updateScores({ clickup: 2, monday: 2, asana: 1, notion: 1, trello: 0 });
if (v['collab'] === 'high') updateScores({ asana: 2, monday: 2, notion: 1, clickup: 1, trello: 1 });
if (v['scale'] === 'high') updateScores({ asana: 2, monday: 2, clickup: 1, notion: 0, trello: 0 });
}
});
});
// ========== PAGE 5: Results ==========
const page5 = pages.addPage('results', { mobileBreakpoint: 500 });
page5.addRow(row => {
row.addTextPanel('header5', {
label: 'Step 5 of 6: Your Recommended Tools',
computedValue: () => 'Based on your answers, here are your best matches',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page5.addSpacer({ height: '24px' });
page5.addRow(row => {
row.addTextPanel('topRecommendation', {
label: 'Your #1 Match',
computedValue: () => {
const topTool = getRecommendation();
const info = getToolInfo(topTool);
return `🏆 ${info.name}`;
},
customStyles: () => ({
fontSize: '36px',
fontWeight: 'bold',
textAlign: 'center',
padding: '20px',
borderRadius: '12px',
color: '#059669',
background: '#ecfdf5'
})
});
});
page5.addRow(row => {
row.addTextPanel('topTagline', {
label: '',
computedValue: () => {
const topTool = getRecommendation();
const info = getToolInfo(topTool);
return `"${info.tagline}"`;
},
customStyles: { textAlign: 'center', fontStyle: 'italic', fontSize: '16px', marginBottom: '10px' }
});
});
page5.addRow(row => {
row.addTextPanel('topBestFor', {
label: 'Best for',
computedValue: () => {
const topTool = getRecommendation();
return getToolInfo(topTool).bestFor;
},
customStyles: { textAlign: 'center', padding: '10px', background: '#f9fafb', borderRadius: '8px' }
});
});
page5.addRow(row => {
row.addTextPanel('topPrice', {
label: 'Pricing',
computedValue: () => {
const topTool = getRecommendation();
return `💰 ${getToolInfo(topTool).price}`;
},
customStyles: { textAlign: 'center', padding: '10px' }
});
});
const runnersSection = page5.addSubform('runnersUp', {
title: '🥈 Other Great Options (click to expand)',
isCollapsible: true,
customStyles: { background: '#f9fafb', borderRadius: '8px', marginTop: '20px' }
});
runnersSection.addRow(row => {
row.addTextPanel('otherOptions', {
label: 'Your Top 3 Matches',
computedValue: () => {
const top3 = getTopThree();
return top3.map((entry, i) => {
const info = getToolInfo(entry[0]);
const match = getMatchPercentage(entry[0]);
return `${i + 1}. ${info.name} (${match}% match) - ${info.bestFor}`;
}).join('\n\n');
}
});
});
// ========== 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 Personalized Comparison Guide',
computedValue: () => 'We\'ll send you a detailed breakdown of your top matches',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page6.addSpacer({ height: '24px' });
page6.addRow(row => {
row.addTextbox('name', { label: 'Your Name', isRequired: true, placeholder: 'Jane Smith' }, '1fr');
row.addEmail('email', { label: 'Work Email', isRequired: true, placeholder: 'jane@company.com' }, '1fr');
});
page6.addRow(row => {
row.addTextbox('company', { label: 'Company Name', placeholder: 'Acme Inc.' }, '1fr');
row.addDropdown('role', {
label: 'Your Role',
options: [
{ id: 'pm', name: 'Project Manager' },
{ id: 'lead', name: 'Team Lead' },
{ id: 'exec', name: 'Executive / Founder' },
{ id: 'ops', name: 'Operations' },
{ id: 'it', name: 'IT / Admin' },
{ id: 'other', name: 'Other' }
]
}, '1fr');
});
page6.addRow(row => {
row.addCheckboxList('consent', {
options: [
{ id: 'guide', name: '📄 Send me the detailed PM Tool Comparison Guide', isRequired: true },
{ id: 'trial', name: '🎁 Send me exclusive trial offers and discounts' },
{ id: 'tips', name: '💡 Subscribe to productivity tips newsletter' }
],
defaultValue: ['guide'],
orientation: 'vertical'
});
});
// ========== SUBMIT BUTTON ==========
form.configureSubmitButton({
label: () => {
const topTool = getRecommendation();
return `📥 Get My Comparison Guide (Top Match: ${getToolInfo(topTool).name})`;
}
});
// ========== PDF REPORT ==========
form.configurePdf('pm-tool-guide', pdf => {
pdf.configure({
filename: 'project-management-tool-guide.pdf',
pageSize: 'A4',
allowUserDownload: true,
downloadButtonLabel: '📄 Download Comparison Guide',
header: {
title: 'Project Management Tool Comparison',
subtitle: 'Your Personalized Recommendation Guide'
},
footer: {
text: 'Generated by FormTs',
showPageNumbers: true
}
});
const topTool = getRecommendation();
const topInfo = getToolInfo(topTool);
pdf.addSection('Your Top Recommendation', section => {
section.addRow(row => {
row.addField('Best Match', topInfo.name);
row.addField('Match Score', `${getMatchPercentage(topTool)}%`);
});
section.addText(`Best for: ${topInfo.bestFor}`);
section.addText(`Pricing: ${topInfo.price}`);
});
pdf.addSection('All Recommendations Ranked', section => {
section.addTable(
['Rank', 'Tool', 'Match %', 'Best For'],
getTopThree().map((entry, i) => {
const info = getToolInfo(entry[0]);
return [
`#${i + 1}`,
info.name,
`${getMatchPercentage(entry[0])}%`,
info.bestFor
];
})
);
});
pdf.addPageBreak();
pdf.addSection('Feature Comparison', section => {
section.addTable(
['Feature', 'Asana', 'Monday', 'ClickUp', 'Notion', 'Trello'],
[
['Kanban Boards', '✅', '✅', '✅', '✅', '✅'],
['Timelines/Gantt', '✅', '✅', '✅', '❌', '❌'],
['Automations', '✅', '✅✅', '✅', '❌', '⚡'],
['Built-in Docs', '❌', '❌', '✅', '✅✅', '❌'],
['Time Tracking', '❌', '✅', '✅✅', '❌', '❌'],
['Free Tier', '✅', '✅', '✅', '✅', '✅']
]
);
});
pdf.addSection('Next Steps', section => {
section.addText(`1. Start a free trial of ${topInfo.name}`);
section.addText('2. Import your existing projects or start fresh');
section.addText('3. Invite 2-3 team members to test workflows');
section.addText('4. Run a pilot project for 2 weeks');
section.addText('5. Evaluate and decide within 30 days');
});
});
form.configureSubmitBehavior({ sendToServer: true });
}