export function laptopFinderQuiz(form: FormTs) {
form.setTitle(() => 'đģ Which Laptop Should You Buy?');
const scores = form.state<Record<string, number>>({
macbook_air: 0, macbook_pro: 0, dell_xps: 0, thinkpad: 0, surface: 0, gaming: 0
});
const updateScore = (laptop: string, points: number) => {
scores.update(current => ({ ...current, [laptop]: (current[laptop] || 0) + points }));
};
const getRecommendation = () => {
const s = scores();
const laptops = ['macbook_air', 'macbook_pro', 'dell_xps', 'thinkpad', 'surface', 'gaming'] as const;
let topLaptop = 'macbook_air';
let topScore = 0;
let secondLaptop = 'dell_xps';
let secondScore = 0;
for (const laptop of laptops) {
const score = s[laptop] || 0;
if (score > topScore) {
secondLaptop = topLaptop;
secondScore = topScore;
topLaptop = laptop;
topScore = score;
} else if (score > secondScore) {
secondLaptop = laptop;
secondScore = score;
}
}
return { primary: topLaptop, secondary: secondLaptop, score: topScore };
};
const laptopData: Record<string, { name: string; emoji: string; tagline: string; price: string }> = {
macbook_air: { name: 'MacBook Air M3', emoji: 'đģ', tagline: 'The everyday powerhouse', price: '$1,099 - $1,499' },
macbook_pro: { name: 'MacBook Pro 14"/16"', emoji: 'đĨī¸', tagline: 'Pro-level performance', price: '$1,999 - $3,999' },
dell_xps: { name: 'Dell XPS 13/15', emoji: 'đŧ', tagline: 'Premium Windows ultrabook', price: '$999 - $2,499' },
thinkpad: { name: 'Lenovo ThinkPad X1 Carbon', emoji: 'đĸ', tagline: 'The business workhorse', price: '$1,399 - $2,799' },
surface: { name: 'Microsoft Surface Laptop 6', emoji: 'â¨', tagline: 'Touch-first productivity', price: '$999 - $2,399' },
gaming: { name: 'ASUS ROG Zephyrus G14', emoji: 'đŽ', tagline: 'Gaming meets portability', price: '$1,599 - $2,199' }
};
const defaultLaptop = { name: 'MacBook Air M3', emoji: 'đģ', tagline: 'The everyday powerhouse', price: '$1,099 - $1,499' };
const getLaptopInfo = (key: string) => laptopData[key] ?? defaultLaptop;
form.configureCompletionScreen({
type: 'text',
title: () => `${getLaptopInfo(getRecommendation().primary).emoji} Perfect Match Found!`,
message: () => {
const { primary } = getRecommendation();
const info = getLaptopInfo(primary);
return `We recommend the ${info.name}! ${info.tagline}. Check your email for detailed comparisons and current deals.`;
}
});
const pages = form.addPages('quiz-pages', { heightMode: 'current-page' });
// ============ PAGE 1: Primary Use Case ============
const page1 = pages.addPage('use_case', { mobileBreakpoint: 500 });
page1.addRow(row => {
row.addTextPanel('header1', {
label: 'Step 1 of 5: Primary Use',
computedValue: () => 'Tell us how you\'ll use your laptop to get personalized recommendations',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page1.addSpacer({ height: '24px' });
page1.addRow(row => {
row.addRadioButton('primary_use', {
label: 'What will you primarily use this laptop for?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'general', name: 'đ§ General productivity (email, web, documents)' },
{ id: 'creative', name: 'đ¨ Creative work (video editing, design, 3D)' },
{ id: 'development', name: 'đģ Software development' },
{ id: 'gaming', name: 'đŽ Gaming (AAA titles, high FPS)' },
{ id: 'business', name: 'đĸ Business/Enterprise use' }
],
onValueChange: (val) => {
if (val === 'general') { updateScore('macbook_air', 3); updateScore('surface', 2); }
else if (val === 'creative') { updateScore('macbook_pro', 3); updateScore('dell_xps', 2); }
else if (val === 'development') { updateScore('macbook_pro', 2); updateScore('thinkpad', 2); updateScore('dell_xps', 2); }
else if (val === 'gaming') { updateScore('gaming', 4); }
else { updateScore('thinkpad', 3); updateScore('dell_xps', 2); }
}
});
});
page1.addRow(row => {
row.addRadioButton('secondary_use', {
label: 'What\'s your secondary use case?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'none', name: 'â
Just the primary use' },
{ id: 'light_gaming', name: 'đšī¸ Light gaming / casual games' },
{ id: 'photo_video', name: 'đ¸ Photo/video editing' },
{ id: 'presentations', name: 'đ Presentations and meetings' },
{ id: 'coding_side', name: 'đ¨âđģ Side coding projects' }
],
onValueChange: (val) => {
if (val === 'light_gaming') { updateScore('gaming', 1); updateScore('macbook_pro', 1); }
else if (val === 'photo_video') { updateScore('macbook_pro', 2); updateScore('dell_xps', 1); }
else if (val === 'presentations') { updateScore('surface', 2); updateScore('thinkpad', 1); }
else if (val === 'coding_side') { updateScore('macbook_air', 1); updateScore('thinkpad', 1); }
}
});
});
// ============ PAGE 2: Operating System ============
const page2 = pages.addPage('os', { mobileBreakpoint: 500 });
page2.addRow(row => {
row.addTextPanel('header2', {
label: 'Step 2 of 5: Operating System',
computedValue: () => 'Your OS preference and current device ecosystem',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page2.addSpacer({ height: '24px' });
page2.addRow(row => {
row.addRadioButton('os_preference', {
label: 'Which operating system do you prefer?',
isRequired: true,
orientation: 'vertical',
tooltip: 'Your OS choice affects software compatibility, workflow, and ecosystem integration',
options: [
{ id: 'macos', name: 'đ macOS - I love the Apple ecosystem' },
{ id: 'windows', name: 'đĒ Windows - I need Windows apps/compatibility' },
{ id: 'linux', name: 'đ§ Linux - I\'ll dual boot or use Linux' },
{ id: 'no_preference', name: '𤡠No strong preference' }
],
onValueChange: (val) => {
if (val === 'macos') { updateScore('macbook_air', 3); updateScore('macbook_pro', 3); }
else if (val === 'windows') { updateScore('dell_xps', 2); updateScore('thinkpad', 2); updateScore('surface', 2); updateScore('gaming', 2); }
else if (val === 'linux') { updateScore('thinkpad', 3); updateScore('dell_xps', 2); }
}
});
});
page2.addRow(row => {
row.addRadioButton('ecosystem', {
label: 'What devices do you currently use?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'apple', name: 'đą iPhone, iPad, Apple Watch, etc.' },
{ id: 'android', name: 'đ¤ Android phone, Windows devices' },
{ id: 'mixed', name: 'đ Mix of both ecosystems' },
{ id: 'none', name: 'đ Starting fresh / doesn\'t matter' }
],
onValueChange: (val) => {
if (val === 'apple') { updateScore('macbook_air', 2); updateScore('macbook_pro', 2); }
else if (val === 'android') { updateScore('dell_xps', 1); updateScore('thinkpad', 1); updateScore('surface', 1); }
}
});
});
// ============ PAGE 3: Portability & Form Factor ============
const page3 = pages.addPage('portability', { mobileBreakpoint: 500 });
page3.addRow(row => {
row.addTextPanel('header3', {
label: 'Step 3 of 5: Portability',
computedValue: () => 'How important is size and weight for your use?',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page3.addSpacer({ height: '24px' });
page3.addRow(row => {
row.addRadioButton('portability', {
label: 'How important is portability?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'very', name: 'đ Very - I carry it everywhere, weight matters' },
{ id: 'moderate', name: 'đ Moderate - moves between home and office' },
{ id: 'low', name: 'đ Low - mostly stays on my desk' }
],
onValueChange: (val) => {
if (val === 'very') { updateScore('macbook_air', 3); updateScore('thinkpad', 2); }
else if (val === 'moderate') { updateScore('dell_xps', 2); updateScore('surface', 2); }
else { updateScore('macbook_pro', 1); updateScore('gaming', 1); }
}
});
});
page3.addRow(row => {
row.addRadioButton('screen_size', {
label: 'Preferred screen size?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'small', name: 'đą 13" - Maximum portability' },
{ id: 'medium', name: 'đģ 14-15" - Balance of portability and screen space' },
{ id: 'large', name: 'đĨī¸ 16"+ - Maximum screen real estate' }
],
onValueChange: (val) => {
if (val === 'small') { updateScore('macbook_air', 2); updateScore('thinkpad', 1); }
else if (val === 'medium') { updateScore('dell_xps', 2); updateScore('surface', 1); updateScore('gaming', 1); }
else { updateScore('macbook_pro', 2); updateScore('gaming', 1); }
}
});
});
page3.addRow(row => {
row.addRadioButton('touchscreen', {
label: 'Do you need a touchscreen?',
isRequired: true,
orientation: 'vertical',
tooltip: 'Touchscreens are useful for drawing, note-taking, and certain creative workflows',
options: [
{ id: 'yes', name: 'â
Yes - I want to use touch/pen input' },
{ id: 'nice', name: '𤡠Nice to have but not essential' },
{ id: 'no', name: 'â No - I prefer traditional input' }
],
onValueChange: (val) => {
if (val === 'yes') { updateScore('surface', 3); updateScore('dell_xps', 1); }
else if (val === 'nice') { updateScore('surface', 1); }
}
});
});
// ============ PAGE 4: Performance & Budget ============
const page4 = pages.addPage('performance', { mobileBreakpoint: 500 });
page4.addRow(row => {
row.addTextPanel('header4', {
label: 'Step 4 of 5: Performance & Budget',
computedValue: () => 'How much power do you need and what\'s your budget?',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page4.addSpacer({ height: '24px' });
page4.addRow(row => {
row.addRadioButton('performance_need', {
label: 'How much performance do you need?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'basic', name: 'đ§ Basic - web, email, documents' },
{ id: 'moderate', name: 'đ Moderate - multitasking, light creative work' },
{ id: 'high', name: 'đĒ High - heavy multitasking, development' },
{ id: 'extreme', name: 'đ Extreme - 4K video, 3D rendering, gaming' }
],
onValueChange: (val) => {
if (val === 'basic') { updateScore('macbook_air', 2); updateScore('surface', 1); }
else if (val === 'moderate') { updateScore('dell_xps', 2); updateScore('thinkpad', 2); }
else if (val === 'high') { updateScore('macbook_pro', 2); updateScore('thinkpad', 1); }
else { updateScore('macbook_pro', 3); updateScore('gaming', 3); }
}
});
});
page4.addRow(row => {
row.addRadioButton('budget', {
label: 'What\'s your budget?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'under_1000', name: 'đĩ Under $1,000' },
{ id: '1000_1500', name: 'đ° $1,000 - $1,500' },
{ id: '1500_2500', name: 'đ $1,500 - $2,500' },
{ id: 'over_2500', name: 'đ $2,500+ (no limit)' }
],
onValueChange: (val) => {
if (val === 'under_1000') { updateScore('surface', 1); }
else if (val === '1000_1500') { updateScore('macbook_air', 2); updateScore('dell_xps', 1); }
else if (val === '1500_2500') { updateScore('macbook_pro', 1); updateScore('thinkpad', 2); updateScore('gaming', 2); }
else { updateScore('macbook_pro', 2); updateScore('thinkpad', 1); }
}
});
});
// ============ PAGE 5: Other Preferences ============
const page5 = pages.addPage('preferences', { mobileBreakpoint: 500 });
page5.addRow(row => {
row.addTextPanel('header5', {
label: 'Step 5 of 5: Other Preferences',
computedValue: () => 'Final details to refine your recommendation',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page5.addSpacer({ height: '24px' });
page5.addRow(row => {
row.addRadioButton('battery', {
label: 'How important is battery life?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'critical', name: 'đ Critical - I need all-day battery (10+ hours)' },
{ id: 'important', name: 'â
Important - 8+ hours preferred' },
{ id: 'moderate', name: 'đ Moderate - usually near an outlet' }
],
onValueChange: (val) => {
if (val === 'critical') { updateScore('macbook_air', 3); updateScore('macbook_pro', 2); }
else if (val === 'important') { updateScore('thinkpad', 2); updateScore('surface', 1); }
}
});
});
page5.addRow(row => {
row.addRadioButton('build_quality', {
label: 'How important is build quality and durability?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'very', name: 'đ Very - I want premium materials, MIL-SPEC durability' },
{ id: 'moderate', name: 'â
Moderate - decent build is fine' },
{ id: 'low', name: '⥠Lower priority - performance over build' }
],
onValueChange: (val) => {
if (val === 'very') { updateScore('thinkpad', 3); updateScore('macbook_pro', 2); updateScore('macbook_air', 1); }
else if (val === 'low') { updateScore('gaming', 1); }
}
});
});
page5.addSpacer({ height: '20px' });
// Final Recommendation Preview
page5.addRow(row => {
row.addTextPanel('resultLabel', {
label: 'đ¯ Your Top Recommendation',
computedValue: () => '',
customStyles: { fontSize: '1.2rem', fontWeight: '700', textAlign: 'center', marginTop: '1rem' }
});
});
page5.addRow(row => {
row.addTextPanel('resultEmoji', {
computedValue: () => getLaptopInfo(getRecommendation().primary).emoji,
customStyles: { fontSize: '4rem', textAlign: 'center' }
});
});
page5.addRow(row => {
row.addTextPanel('resultName', {
computedValue: () => getLaptopInfo(getRecommendation().primary).name,
customStyles: { fontSize: '1.75rem', fontWeight: 'bold', color: '#1e293b', textAlign: 'center' }
});
});
page5.addRow(row => {
row.addTextPanel('resultTagline', {
computedValue: () => getLaptopInfo(getRecommendation().primary).tagline,
customStyles: { fontSize: '1.1rem', color: '#64748b', fontStyle: 'italic', textAlign: 'center' }
});
});
page5.addRow(row => {
row.addTextPanel('resultPrice', {
computedValue: () => getLaptopInfo(getRecommendation().primary).price,
customStyles: { fontSize: '1.25rem', fontWeight: '600', color: '#10b981', textAlign: 'center', marginBottom: '1rem' }
});
});
page5.addRow(row => {
row.addTextPanel('runnerUpLabel', {
computedValue: () => `đĨ Runner-Up: ${getLaptopInfo(getRecommendation().secondary).name}`,
customStyles: { fontSize: '1rem', color: '#64748b', textAlign: 'center', padding: '12px', background: '#f8fafc', borderRadius: '8px' }
});
});
// ============ Lead Capture Page ============
const leadPage = pages.addPage('lead_capture', { mobileBreakpoint: 500 });
leadPage.addRow(row => {
row.addTextPanel('lead_header', {
label: 'Step 6 of 6: Get Your Buying Guide',
computedValue: () => 'Enter your details to receive detailed comparisons and current deals',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
leadPage.addSpacer({ height: '24px' });
leadPage.addRow(row => {
row.addTextbox('first_name', {
label: 'First Name',
isRequired: true,
placeholder: 'John'
}, '1fr');
row.addTextbox('last_name', {
label: 'Last Name',
isRequired: true,
placeholder: 'Smith'
}, '1fr');
});
leadPage.addRow(row => {
row.addEmail('email', {
label: 'Email Address',
isRequired: true,
placeholder: 'john@email.com'
});
});
leadPage.addRow(row => {
row.addCheckboxList('consent', {
orientation: 'vertical',
options: [
{ id: 'guide', name: 'đ Send me the detailed laptop buying guide', isRequired: true },
{ id: 'deals', name: 'đ° Notify me of deals on my recommended laptops' },
{ id: 'tips', name: 'đĄ Send me occasional tech tips and reviews' }
],
defaultValue: ['guide']
});
});
form.configurePdf('guide', (pdf) => {
pdf.configure({
filename: 'laptop-recommendation-guide.pdf',
pageSize: 'A4',
allowUserDownload: true,
downloadButtonLabel: 'đ Download Buying Guide',
header: { title: 'Your Personalized Laptop Recommendation', subtitle: 'Based on your preferences' },
footer: { text: 'Generated by FormTs Laptop Finder', showPageNumbers: true }
});
pdf.addSection('Your Top Pick', section => {
const rec = getRecommendation();
const info = getLaptopInfo(rec.primary);
section.addRow(row => {
row.addField('Recommended Laptop', `${info.emoji} ${info.name}`);
row.addField('Price Range', info.price);
});
section.addRow(row => {
row.addField('Why It\'s Right For You', info.tagline);
});
});
pdf.addSection('Runner-Up Option', section => {
const rec = getRecommendation();
const info = getLaptopInfo(rec.secondary);
section.addRow(row => {
row.addField('Alternative', `${info.emoji} ${info.name}`);
row.addField('Price Range', info.price);
});
});
});
form.configureSubmitButton({
label: () => {
const rec = getRecommendation();
return `đ§ Get My ${getLaptopInfo(rec.primary).name} Guide`;
}
});
form.configureSubmitBehavior({
sendToServer: true
});
}