export function retirementReadinessQuiz(form: FormTs) {
form.setTitle(() => '🏖️ Are You Ready for Retirement?');
const scores = form.state<Record<string, number>>({});
const updateScore = (category: string, points: number) => {
scores.update(current => ({ ...current, [category]: points }));
};
const getTotalScore = () => {
const s = scores();
return Object.values(s).reduce((sum, val) => sum + (val || 0), 0);
};
const getMaxScore = () => 100;
const getScorePercentage = () => Math.round((getTotalScore() / getMaxScore()) * 100);
const getReadinessLevel = (): 'A' | 'B' | 'C' | 'D' | 'F' => {
const pct = getScorePercentage();
if (pct >= 85) return 'A';
if (pct >= 70) return 'B';
if (pct >= 55) return 'C';
if (pct >= 40) return 'D';
return 'F';
};
const getReadinessLabel = () => {
const level = getReadinessLevel();
const labels = {
A: '🌟 Excellent - Well-prepared!',
B: '✅ Good - On track',
C: '⚡ Fair - Gaps to address',
D: '⚠️ Needs Work - Action needed',
F: '🚨 Critical - Urgent action required'
};
return labels[level];
};
const getReadinessColor = () => {
const level = getReadinessLevel();
const colors = { A: '#16a34a', B: '#22c55e', C: '#ca8a04', D: '#ea580c', F: '#dc2626' };
return colors[level];
};
form.configureCompletionScreen({
type: 'text',
title: () => getReadinessLabel(),
message: () => {
const pct = getScorePercentage();
const level = getReadinessLevel();
const messages = {
A: `Your retirement readiness score is ${pct}%. Excellent! You're well-prepared for a comfortable retirement.`,
B: `Your retirement readiness score is ${pct}%. Good progress! A few improvements will strengthen your position.`,
C: `Your retirement readiness score is ${pct}%. You've made progress but several areas need attention.`,
D: `Your retirement readiness score is ${pct}%. Significant planning is needed. Start taking action now.`,
F: `Your retirement readiness score is ${pct}%. Urgent action required. Consider consulting a financial advisor.`
};
return messages[level];
}
});
const pages = form.addPages('quiz-pages', { heightMode: 'current-page' });
// ============ PAGE 1: Savings & Investments ============
const page1 = pages.addPage('savings', { mobileBreakpoint: 500 });
page1.addRow(row => {
row.addTextPanel('header1', {
label: 'Step 1 of 5: Savings & Investments',
computedValue: () => 'Evaluate your retirement savings and investment strategy',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page1.addSpacer({ height: '24px' });
page1.addRow(row => {
row.addRadioButton('savings_rate', {
label: 'What percentage of your income are you saving for retirement?',
isRequired: true,
orientation: 'vertical',
tooltip: 'Financial experts recommend saving 15-20% of income for retirement',
options: [
{ id: '20_plus', name: '🏆 20% or more' },
{ id: '15_20', name: '✅ 15-20%' },
{ id: '10_15', name: '📈 10-15%' },
{ id: '5_10', name: '⚠️ 5-10%' },
{ id: 'under_5', name: '❌ Less than 5%' }
],
onValueChange: (val) => {
const points = { '20_plus': 20, '15_20': 16, '10_15': 12, '5_10': 8, 'under_5': 4 };
updateScore('savings_rate', points[val as keyof typeof points] || 0);
}
});
});
page1.addRow(row => {
row.addRadioButton('investment_style', {
label: 'How are your retirement savings invested?',
isRequired: true,
orientation: 'vertical',
tooltip: 'Diversification helps manage risk while capturing growth',
options: [
{ id: 'diversified', name: '🏆 Diversified portfolio (stocks, bonds, etc.)' },
{ id: 'mostly_stocks', name: '📈 Mostly stocks/growth investments' },
{ id: 'mostly_safe', name: '🛡️ Mostly bonds/safe investments' },
{ id: 'cash', name: '⚠️ Mostly in cash or savings accounts' },
{ id: 'unsure', name: '❓ I\'m not sure how it\'s invested' }
],
onValueChange: (val) => {
const points = { diversified: 20, mostly_stocks: 15, mostly_safe: 12, cash: 8, unsure: 5 };
updateScore('investment', points[val as keyof typeof points] || 0);
}
});
});
page1.addRow(row => {
row.addTextPanel('savings_score', {
computedValue: () => {
const s = scores();
const sectionScore = (s['savings_rate'] || 0) + (s['investment'] || 0);
return `💰 Savings Score: ${sectionScore}/40`;
},
customStyles: {
fontSize: '1rem', fontWeight: '600', color: '#1e40af', textAlign: 'center',
padding: '12px', background: '#dbeafe', borderRadius: '8px', marginTop: '1rem'
}
});
});
// ============ PAGE 2: Income Planning ============
const page2 = pages.addPage('income', { mobileBreakpoint: 500 });
page2.addRow(row => {
row.addTextPanel('header2', {
label: 'Step 2 of 5: Retirement Income',
computedValue: () => 'Plan your income sources for retirement',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page2.addSpacer({ height: '24px' });
page2.addRow(row => {
row.addRadioButton('income_sources', {
label: 'How many income sources will you have in retirement?',
isRequired: true,
orientation: 'vertical',
tooltip: 'Multiple income streams provide security and flexibility',
options: [
{ id: 'multiple', name: '🏆 3+ sources (pension, 401k, Social Security, rental, etc.)' },
{ id: 'two', name: '✅ 2 sources' },
{ id: 'one', name: '⚠️ 1 source (Social Security only)' },
{ id: 'unsure', name: '❓ I haven\'t thought about this' }
],
onValueChange: (val) => {
const points = { multiple: 20, two: 15, one: 8, unsure: 4 };
updateScore('income_sources', points[val as keyof typeof points] || 0);
}
});
});
page2.addRow(row => {
row.addRadioButton('social_security', {
label: 'Do you know your estimated Social Security benefit?',
isRequired: true,
orientation: 'vertical',
tooltip: 'Create an account at ssa.gov to see your personalized estimate',
options: [
{ id: 'yes_planned', name: '🏆 Yes, and I\'ve planned when to claim' },
{ id: 'yes_basic', name: '✅ Yes, I know the approximate amount' },
{ id: 'no', name: '❌ No, I haven\'t checked' }
],
onValueChange: (val) => {
const points = { yes_planned: 20, yes_basic: 12, no: 4 };
updateScore('social_security', points[val as keyof typeof points] || 0);
}
});
});
page2.addRow(row => {
row.addTextPanel('income_score', {
computedValue: () => {
const s = scores();
const sectionScore = (s['income_sources'] || 0) + (s['social_security'] || 0);
return `💵 Income Score: ${sectionScore}/40`;
},
customStyles: {
fontSize: '1rem', fontWeight: '600', color: '#1e40af', textAlign: 'center',
padding: '12px', background: '#dbeafe', borderRadius: '8px', marginTop: '1rem'
}
});
});
// ============ PAGE 3: Planning & Knowledge ============
const page3 = pages.addPage('planning', { mobileBreakpoint: 500 });
page3.addRow(row => {
row.addTextPanel('header3', {
label: 'Step 3 of 5: Planning & Knowledge',
computedValue: () => 'How well have you planned your retirement?',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page3.addSpacer({ height: '24px' });
page3.addRow(row => {
row.addRadioButton('retirement_age', {
label: 'Have you determined your target retirement age?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'yes_plan', name: '🏆 Yes, with a detailed financial plan' },
{ id: 'yes_general', name: '✅ Yes, a general target age' },
{ id: 'no', name: '❌ No, I haven\'t decided yet' }
],
onValueChange: (val) => {
const points = { yes_plan: 20, yes_general: 12, no: 5 };
updateScore('retirement_age', points[val as keyof typeof points] || 0);
}
});
});
page3.addRow(row => {
row.addRadioButton('expense_estimate', {
label: 'Do you know how much you\'ll need monthly in retirement?',
isRequired: true,
orientation: 'vertical',
tooltip: 'The 80% rule suggests you\'ll need 80% of pre-retirement income, but actual needs vary',
options: [
{ id: 'detailed', name: '🏆 Yes, I\'ve calculated a detailed budget' },
{ id: 'rough', name: '✅ I have a rough estimate' },
{ id: 'rule_of_thumb', name: '📊 I use the 80% rule of thumb' },
{ id: 'no', name: '❌ No, I haven\'t calculated this' }
],
onValueChange: (val) => {
const points = { detailed: 20, rough: 14, rule_of_thumb: 10, no: 4 };
updateScore('expense_estimate', points[val as keyof typeof points] || 0);
}
});
});
page3.addRow(row => {
row.addTextPanel('planning_score', {
computedValue: () => {
const s = scores();
const sectionScore = (s['retirement_age'] || 0) + (s['expense_estimate'] || 0);
return `📋 Planning Score: ${sectionScore}/40`;
},
customStyles: {
fontSize: '1rem', fontWeight: '600', color: '#1e40af', textAlign: 'center',
padding: '12px', background: '#dbeafe', borderRadius: '8px', marginTop: '1rem'
}
});
});
// ============ PAGE 4: Healthcare ============
const page4 = pages.addPage('healthcare', { mobileBreakpoint: 500 });
page4.addRow(row => {
row.addTextPanel('header4', {
label: 'Step 4 of 5: Healthcare Planning',
computedValue: () => 'Healthcare is often the largest retirement expense',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page4.addSpacer({ height: '24px' });
page4.addRow(row => {
row.addRadioButton('health_costs', {
label: 'Have you planned for healthcare costs in retirement?',
isRequired: true,
orientation: 'vertical',
tooltip: 'Average couple needs $315,000 for healthcare in retirement (Fidelity 2023)',
options: [
{ id: 'comprehensive', name: '🏆 Yes, including Medicare supplements and long-term care' },
{ id: 'hsa', name: '💰 I\'m using an HSA to save for healthcare' },
{ id: 'basic', name: '✅ Yes, I understand Medicare basics' },
{ id: 'no', name: '❌ No, I assume Medicare will cover it' }
],
onValueChange: (val) => {
const points = { comprehensive: 20, hsa: 16, basic: 12, no: 5 };
updateScore('health_costs', points[val as keyof typeof points] || 0);
}
});
});
page4.addRow(row => {
row.addRadioButton('long_term_care', {
label: 'Have you considered long-term care needs?',
isRequired: true,
orientation: 'vertical',
tooltip: '70% of people over 65 will need some form of long-term care',
options: [
{ id: 'insurance', name: '🏆 Yes, I have long-term care insurance' },
{ id: 'savings', name: '💰 Yes, I\'m self-insuring with savings' },
{ id: 'family', name: '👨👩👧 Family will help if needed' },
{ id: 'no', name: '❌ Haven\'t thought about it' }
],
onValueChange: (val) => {
const points = { insurance: 20, savings: 16, family: 8, no: 4 };
updateScore('long_term_care', points[val as keyof typeof points] || 0);
}
});
});
page4.addRow(row => {
row.addTextPanel('healthcare_score', {
computedValue: () => {
const s = scores();
const sectionScore = (s['health_costs'] || 0) + (s['long_term_care'] || 0);
return `🏥 Healthcare Score: ${sectionScore}/40`;
},
customStyles: {
fontSize: '1rem', fontWeight: '600', color: '#1e40af', textAlign: 'center',
padding: '12px', background: '#dbeafe', borderRadius: '8px', marginTop: '1rem'
}
});
});
// ============ PAGE 5: Lifestyle & Readiness ============
const page5 = pages.addPage('lifestyle', { mobileBreakpoint: 500 });
page5.addRow(row => {
row.addTextPanel('header5', {
label: 'Step 5 of 5: Lifestyle Readiness',
computedValue: () => 'Your debt situation and retirement vision',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page5.addSpacer({ height: '24px' });
page5.addRow(row => {
row.addRadioButton('debt', {
label: 'What\'s your current debt situation?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'none', name: '🏆 Debt-free, including mortgage' },
{ id: 'mortgage_only', name: '🏠 Only mortgage, will be paid before retirement' },
{ id: 'some', name: '⚠️ Some debt that I\'m paying down' },
{ id: 'significant', name: '❌ Significant debt' }
],
onValueChange: (val) => {
const points = { none: 20, mortgage_only: 16, some: 10, significant: 4 };
updateScore('debt', points[val as keyof typeof points] || 0);
}
});
});
page5.addRow(row => {
row.addRadioButton('life_vision', {
label: 'How clear is your vision for retirement lifestyle?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'very_clear', name: '🏆 Very clear - I know exactly how I want to spend my time' },
{ id: 'general', name: '✅ General idea but flexible' },
{ id: 'uncertain', name: '⚠️ Uncertain - I\'m focused on finances first' },
{ id: 'worried', name: '😟 Worried about being bored or purposeless' }
],
onValueChange: (val) => {
const points = { very_clear: 20, general: 14, uncertain: 8, worried: 6 };
updateScore('life_vision', points[val as keyof typeof points] || 0);
}
});
});
page5.addRow(row => {
row.addTextPanel('lifestyle_score', {
computedValue: () => {
const s = scores();
const sectionScore = (s['debt'] || 0) + (s['life_vision'] || 0);
return `🎯 Lifestyle Score: ${sectionScore}/40`;
},
customStyles: {
fontSize: '1rem', fontWeight: '600', color: '#1e40af', textAlign: 'center',
padding: '12px', background: '#dbeafe', borderRadius: '8px', marginTop: '1rem'
}
});
});
page5.addSpacer({ height: '20px' });
// Final Score Summary
page5.addRow(row => {
row.addTextPanel('finalScoreLabel', {
label: '📊 Your Retirement Readiness Results',
computedValue: () => '',
customStyles: { fontSize: '1.2rem', fontWeight: '700', textAlign: 'center', marginTop: '1rem' }
});
});
page5.addRow(row => {
row.addTextPanel('finalGrade', {
computedValue: () => getReadinessLabel(),
customStyles: () => ({
fontSize: '1.5rem', fontWeight: '800', textAlign: 'center',
color: getReadinessColor(), padding: '15px', background: '#f9fafb',
borderRadius: '12px', border: `3px solid ${getReadinessColor()}`
})
});
});
page5.addRow(row => {
row.addTextPanel('scoreBreakdown', {
computedValue: () => `Total Score: ${getTotalScore()}/${getMaxScore()} (${getScorePercentage()}%)`,
customStyles: { fontSize: '1.1rem', fontWeight: '600', textAlign: 'center', color: '#374151', marginTop: '10px' }
});
});
// ============ 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 Planning Guide',
computedValue: () => 'Enter your details to receive personalized retirement planning resources',
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.addDropdown('years_to_retirement', {
label: 'Years Until Planned Retirement',
isRequired: true,
placeholder: 'Select timeframe',
options: [
{ id: '0-5', name: '⏰ 0-5 years (soon!)' },
{ id: '6-10', name: '📅 6-10 years' },
{ id: '11-20', name: '📆 11-20 years' },
{ id: '20+', name: '🌱 20+ years' }
]
});
});
leadPage.addRow(row => {
row.addCheckboxList('consent', {
orientation: 'vertical',
options: [
{ id: 'guide', name: '📄 Send me the retirement planning guide', isRequired: true },
{ id: 'calculator', name: '🔢 Send me the retirement calculator spreadsheet' },
{ id: 'tips', name: '💡 Send me weekly retirement planning tips' },
{ id: 'consult', name: '📞 I\'d like a free consultation with an advisor' }
],
defaultValue: ['guide']
});
});
form.configurePdf('guide', (pdf) => {
pdf.configure({
filename: 'retirement-readiness-report.pdf',
pageSize: 'A4',
allowUserDownload: true,
downloadButtonLabel: '📄 Download Planning Guide',
header: { title: 'Your Retirement Readiness Assessment', subtitle: 'Personalized Analysis' },
footer: { text: 'Generated by FormTs Retirement Planner', showPageNumbers: true }
});
pdf.addSection('Executive Summary', section => {
section.addRow(row => {
row.addField('Readiness Level', getReadinessLabel());
row.addField('Score', `${getScorePercentage()}%`);
});
section.addRow(row => {
row.addField('Assessment Date', new Date().toLocaleDateString());
row.addField('Total Points', `${getTotalScore()} / ${getMaxScore()}`);
});
});
pdf.addSection('Category Breakdown', section => {
const s = scores();
section.addTable(
['Category', 'Score', 'Max', 'Status'],
[
['Savings & Investments', `${(s['savings_rate'] || 0) + (s['investment'] || 0)}`, '40', (s['savings_rate'] || 0) + (s['investment'] || 0) >= 30 ? '✅ Good' : '⚠️ Needs Work'],
['Income Planning', `${(s['income_sources'] || 0) + (s['social_security'] || 0)}`, '40', (s['income_sources'] || 0) + (s['social_security'] || 0) >= 30 ? '✅ Good' : '⚠️ Needs Work'],
['Planning & Knowledge', `${(s['retirement_age'] || 0) + (s['expense_estimate'] || 0)}`, '40', (s['retirement_age'] || 0) + (s['expense_estimate'] || 0) >= 30 ? '✅ Good' : '⚠️ Needs Work'],
['Healthcare', `${(s['health_costs'] || 0) + (s['long_term_care'] || 0)}`, '40', (s['health_costs'] || 0) + (s['long_term_care'] || 0) >= 30 ? '✅ Good' : '⚠️ Needs Work'],
['Lifestyle', `${(s['debt'] || 0) + (s['life_vision'] || 0)}`, '40', (s['debt'] || 0) + (s['life_vision'] || 0) >= 30 ? '✅ Good' : '⚠️ Needs Work']
]
);
});
});
form.configureSubmitButton({
label: () => `📊 Get My Report (${getReadinessLevel()})`
});
form.configureSubmitBehavior({
sendToServer: true
});
}