export function remoteTeamProductivityQuiz(form: FormTs) {
form.setTitle(() => '๐ How Productive Is Your Remote Team?');
const scores = form.state<Record<string, number>>({});
const updateScore = (category: string, points: number) => {
scores.update(current => ({ ...current, [category]: points }));
};
const getScore = (category: string) => scores()[category] || 0;
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 getGrade = (): 'A' | 'B' | 'C' | 'D' | 'F' => {
const pct = getScorePercentage();
if (pct >= 90) return 'A';
if (pct >= 75) return 'B';
if (pct >= 60) return 'C';
if (pct >= 45) return 'D';
return 'F';
};
const getGradeLabel = () => {
const grade = getGrade();
const labels = {
A: '๐ Grade A - Highly Productive',
B: 'โ
Grade B - Productive Team',
C: 'โก Grade C - Moderately Productive',
D: 'โ ๏ธ Grade D - Needs Improvement',
F: '๐จ Grade F - Struggling'
};
return labels[grade];
};
const getGradeColor = () => {
const grade = getGrade();
const colors = { A: '#16a34a', B: '#22c55e', C: '#ca8a04', D: '#ea580c', F: '#dc2626' };
return colors[grade];
};
form.configureCompletionScreen({
type: 'text',
title: () => getGradeLabel(),
message: () => {
const pct = getScorePercentage();
const grade = getGrade();
const messages = {
A: `Your team productivity score is ${pct}%. Excellent! Your remote team is thriving. Download your report to maintain this success.`,
B: `Your team productivity score is ${pct}%. Good foundation! Your team is productive but there's room for optimization.`,
C: `Your team productivity score is ${pct}%. Your team needs some improvements in communication and processes.`,
D: `Your team productivity score is ${pct}%. Significant issues detected. Your team is losing productivity.`,
F: `Your team productivity score is ${pct}%. Critical problems found. Your remote setup needs immediate attention.`
};
return messages[grade];
}
});
const pages = form.addPages('quiz-pages', { heightMode: 'current-page' });
// ============ PAGE 1: Communication ============
const page1 = pages.addPage('communication', { mobileBreakpoint: 500 });
page1.addRow(row => {
row.addTextPanel('header1', {
label: 'Step 1 of 5: Communication',
computedValue: () => 'Evaluate how well your remote team communicates',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page1.addSpacer({ height: '24px' });
page1.addRow(row => {
row.addRadioButton('sync_meetings', {
label: 'How often does your team have synchronous meetings?',
isRequired: true,
orientation: 'vertical',
tooltip: 'Regular sync meetings help alignment, but too many can hurt deep work time',
options: [
{ id: 'few_weekly', name: 'โ
2-3 times per week (optimal balance)' },
{ id: 'daily', name: '๐
Daily standups' },
{ id: 'weekly', name: '๐ Once a week' },
{ id: 'rarely', name: 'โ Rarely or ad-hoc only' }
],
onValueChange: (val) => {
const points = { few_weekly: 20, daily: 15, weekly: 15, rarely: 5 };
updateScore('sync', points[val as keyof typeof points] || 0);
}
});
});
page1.addRow(row => {
row.addRadioButton('async_communication', {
label: 'How well does your team use async communication?',
isRequired: true,
orientation: 'vertical',
tooltip: 'Async communication (documented messages, recorded videos) enables work across time zones',
options: [
{ id: 'excellent', name: '๐ Excellent - clear documentation, thoughtful messages' },
{ id: 'good', name: 'โ
Good - most communication is clear and accessible' },
{ id: 'fair', name: 'โ ๏ธ Fair - sometimes things get lost or unclear' },
{ id: 'poor', name: 'โ Poor - constant confusion, need real-time clarification' }
],
onValueChange: (val) => {
const points = { excellent: 20, good: 15, fair: 10, poor: 5 };
updateScore('async', points[val as keyof typeof points] || 0);
}
});
});
page1.addRow(row => {
row.addTextPanel('comm_score', {
computedValue: () => {
const s = scores();
const sectionScore = (s['sync'] || 0) + (s['async'] || 0);
return `๐ฌ Communication Score: ${sectionScore}/40`;
},
customStyles: {
fontSize: '1rem', fontWeight: '600', color: '#1e40af', textAlign: 'center',
padding: '12px', background: '#dbeafe', borderRadius: '8px', marginTop: '1rem'
}
});
});
// ============ PAGE 2: Tools & Infrastructure ============
const page2 = pages.addPage('tools', { mobileBreakpoint: 500 });
page2.addRow(row => {
row.addTextPanel('header2', {
label: 'Step 2 of 5: Tools & Infrastructure',
computedValue: () => 'Assess your team\'s collaboration tools and adoption',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page2.addSpacer({ height: '24px' });
page2.addRow(row => {
row.addCheckboxList('tools_used', {
label: 'Which collaboration tools does your team use effectively?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'video', name: '๐น Video conferencing (Zoom, Meet, Teams)' },
{ id: 'chat', name: '๐ฌ Team chat (Slack, Teams, Discord)' },
{ id: 'project', name: '๐ Project management (Asana, Monday, Jira)' },
{ id: 'docs', name: '๐ Shared documents (Notion, Confluence, Google Docs)' },
{ id: 'code', name: '๐ป Code collaboration (GitHub, GitLab)' }
],
onValueChange: (vals) => {
const points = Math.min((vals?.length || 0) * 4, 20);
updateScore('tools', points);
}
});
});
page2.addRow(row => {
row.addRadioButton('tool_adoption', {
label: 'How consistently does your team use these tools?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'always', name: '๐ Always - everyone follows established workflows' },
{ id: 'mostly', name: 'โ
Mostly - occasional workarounds happen' },
{ id: 'sometimes', name: 'โ ๏ธ Sometimes - tool usage is inconsistent' },
{ id: 'rarely', name: 'โ Rarely - people use whatever they prefer' }
],
onValueChange: (val) => {
const points = { always: 20, mostly: 15, sometimes: 10, rarely: 5 };
updateScore('adoption', points[val as keyof typeof points] || 0);
}
});
});
page2.addRow(row => {
row.addTextPanel('tools_score', {
computedValue: () => {
const s = scores();
const sectionScore = (s['tools'] || 0) + (s['adoption'] || 0);
return `๐ ๏ธ Tools Score: ${sectionScore}/40`;
},
customStyles: {
fontSize: '1rem', fontWeight: '600', color: '#1e40af', textAlign: 'center',
padding: '12px', background: '#dbeafe', borderRadius: '8px', marginTop: '1rem'
}
});
});
// ============ PAGE 3: Accountability & Output ============
const page3 = pages.addPage('accountability', { mobileBreakpoint: 500 });
page3.addRow(row => {
row.addTextPanel('header3', {
label: 'Step 3 of 5: Accountability & Output',
computedValue: () => 'How well does your team track goals and progress?',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page3.addSpacer({ height: '24px' });
page3.addRow(row => {
row.addRadioButton('goal_clarity', {
label: 'How clear are individual and team goals?',
isRequired: true,
orientation: 'vertical',
tooltip: 'Clear goals help remote workers stay focused without constant supervision',
options: [
{ id: 'very_clear', name: '๐ฏ Very clear - everyone knows their priorities' },
{ id: 'mostly_clear', name: 'โ
Mostly clear - occasional ambiguity' },
{ id: 'somewhat_clear', name: 'โ ๏ธ Somewhat clear - often need clarification' },
{ id: 'unclear', name: 'โ Unclear - people don\'t know what to focus on' }
],
onValueChange: (val) => {
const points = { very_clear: 20, mostly_clear: 15, somewhat_clear: 10, unclear: 5 };
updateScore('goals', points[val as keyof typeof points] || 0);
}
});
});
page3.addRow(row => {
row.addRadioButton('progress_tracking', {
label: 'How do you track work progress?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'systematic', name: '๐ Systematic - regular updates, visible dashboards' },
{ id: 'structured', name: '๐ Structured - weekly reports and check-ins' },
{ id: 'informal', name: 'โ ๏ธ Informal - occasional updates when asked' },
{ id: 'none', name: 'โ No formal tracking - trust-based only' }
],
onValueChange: (val) => {
const points = { systematic: 20, structured: 15, informal: 10, none: 5 };
updateScore('tracking', points[val as keyof typeof points] || 0);
}
});
});
page3.addRow(row => {
row.addTextPanel('acct_score', {
computedValue: () => {
const s = scores();
const sectionScore = (s['goals'] || 0) + (s['tracking'] || 0);
return `๐ Accountability Score: ${sectionScore}/40`;
},
customStyles: {
fontSize: '1rem', fontWeight: '600', color: '#1e40af', textAlign: 'center',
padding: '12px', background: '#dbeafe', borderRadius: '8px', marginTop: '1rem'
}
});
});
// ============ PAGE 4: Wellbeing & Balance ============
const page4 = pages.addPage('wellbeing', { mobileBreakpoint: 500 });
page4.addRow(row => {
row.addTextPanel('header4', {
label: 'Step 4 of 5: Wellbeing & Balance',
computedValue: () => 'How well does your team manage remote work-life balance?',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page4.addSpacer({ height: '24px' });
page4.addRow(row => {
row.addRadioButton('work_hours', {
label: 'How does your team manage work hours?',
isRequired: true,
orientation: 'vertical',
tooltip: 'Clear boundaries prevent burnout and improve long-term productivity',
options: [
{ id: 'flexible', name: '๐ Flexible with clear boundaries respected' },
{ id: 'core_hours', name: 'โ
Core hours with flexibility around them' },
{ id: 'chaotic', name: 'โ ๏ธ No structure - work happens whenever' },
{ id: 'always_on', name: 'โ Expected to be always available' }
],
onValueChange: (val) => {
const points = { flexible: 20, core_hours: 20, chaotic: 10, always_on: 5 };
updateScore('hours', points[val as keyof typeof points] || 0);
}
});
});
page4.addRow(row => {
row.addRadioButton('burnout_awareness', {
label: 'How does leadership address remote work burnout?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'proactive', name: '๐ Proactive - regular check-ins, mental health resources' },
{ id: 'reactive', name: 'โ
Reactive - addresses issues when raised' },
{ id: 'minimal', name: 'โ ๏ธ Minimal - acknowledges but no action' },
{ id: 'none', name: 'โ None - burnout is not discussed' }
],
onValueChange: (val) => {
const points = { proactive: 20, reactive: 15, minimal: 10, none: 5 };
updateScore('burnout', points[val as keyof typeof points] || 0);
}
});
});
page4.addRow(row => {
row.addTextPanel('well_score', {
computedValue: () => {
const s = scores();
const sectionScore = (s['hours'] || 0) + (s['burnout'] || 0);
return `๐ Wellbeing Score: ${sectionScore}/40`;
},
customStyles: {
fontSize: '1rem', fontWeight: '600', color: '#1e40af', textAlign: 'center',
padding: '12px', background: '#dbeafe', borderRadius: '8px', marginTop: '1rem'
}
});
});
// ============ PAGE 5: Culture & Connection ============
const page5 = pages.addPage('culture', { mobileBreakpoint: 500 });
page5.addRow(row => {
row.addTextPanel('header5', {
label: 'Step 5 of 5: Culture & Connection',
computedValue: () => 'Evaluate team bonding and inclusion in your remote setup',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page5.addSpacer({ height: '24px' });
page5.addRow(row => {
row.addRadioButton('team_bonding', {
label: 'How often does your team have non-work interactions?',
isRequired: true,
orientation: 'vertical',
tooltip: 'Social connections improve collaboration and reduce isolation',
options: [
{ id: 'regular', name: '๐ Regularly - virtual coffee, team games, social channels' },
{ id: 'occasional', name: 'โ
Occasionally - monthly virtual events' },
{ id: 'rare', name: 'โ ๏ธ Rarely - only during all-hands meetings' },
{ id: 'never', name: 'โ Never - strictly work-focused' }
],
onValueChange: (val) => {
const points = { regular: 20, occasional: 15, rare: 10, never: 5 };
updateScore('bonding', points[val as keyof typeof points] || 0);
}
});
});
page5.addRow(row => {
row.addRadioButton('inclusion', {
label: 'Do remote team members feel equally included?',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'fully_remote', name: '๐ We\'re fully remote - equal by default' },
{ id: 'equal', name: 'โ
Yes - intentional inclusion practices' },
{ id: 'mostly', name: 'โ ๏ธ Mostly - some information gaps exist' },
{ id: 'no', name: 'โ No - remote workers often feel left out' }
],
onValueChange: (val) => {
const points = { fully_remote: 20, equal: 20, mostly: 15, no: 5 };
updateScore('inclusion', points[val as keyof typeof points] || 0);
}
});
});
page5.addRow(row => {
row.addTextPanel('culture_score', {
computedValue: () => {
const s = scores();
const sectionScore = (s['bonding'] || 0) + (s['inclusion'] || 0);
return `๐ค Culture 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 Remote Team Productivity Results',
computedValue: () => '',
customStyles: { fontSize: '1.2rem', fontWeight: '700', textAlign: 'center', marginTop: '1rem' }
});
});
page5.addRow(row => {
row.addTextPanel('finalGrade', {
computedValue: () => getGradeLabel(),
customStyles: () => ({
fontSize: '1.5rem', fontWeight: '800', textAlign: 'center',
color: getGradeColor(), padding: '15px', background: '#f9fafb',
borderRadius: '12px', border: `3px solid ${getGradeColor()}`
})
});
});
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 Report',
computedValue: () => 'Enter your details to receive your personalized productivity report',
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: 'Work Email',
isRequired: true,
placeholder: 'john@company.com'
});
});
leadPage.addRow(row => {
row.addDropdown('team_size', {
label: 'Remote Team Size',
isRequired: true,
placeholder: 'Select team size',
options: [
{ id: '1-5', name: '๐ฅ 1-5 people' },
{ id: '6-15', name: '๐จโ๐ฉโ๐งโ๐ฆ 6-15 people' },
{ id: '16-50', name: '๐ข 16-50 people' },
{ id: '51-200', name: '๐ฌ 51-200 people' },
{ id: '200+', name: '๐ 200+ people' }
]
});
});
leadPage.addRow(row => {
row.addCheckboxList('consent', {
orientation: 'vertical',
options: [
{ id: 'report', name: '๐ Send me the detailed PDF productivity report', isRequired: true },
{ id: 'tips', name: '๐ก Send me weekly remote work tips' },
{ id: 'consult', name: '๐ I\'d like a free consultation on improving team productivity' }
],
defaultValue: ['report']
});
});
form.configurePdf('report', (pdf) => {
pdf.configure({
filename: 'remote-team-productivity-report.pdf',
pageSize: 'A4',
allowUserDownload: true,
downloadButtonLabel: '๐ Download Productivity Report',
header: { title: 'Remote Team Productivity Assessment', subtitle: 'Comprehensive Analysis' },
footer: { text: 'Generated by FormTs Remote Productivity Tool', showPageNumbers: true }
});
pdf.addSection('Executive Summary', section => {
section.addRow(row => {
row.addField('Overall Grade', getGradeLabel());
row.addField('Productivity 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'],
[
['Communication', `${(s['sync'] || 0) + (s['async'] || 0)}`, '40', (s['sync'] || 0) + (s['async'] || 0) >= 30 ? 'โ
Good' : 'โ ๏ธ Needs Work'],
['Tools & Infrastructure', `${(s['tools'] || 0) + (s['adoption'] || 0)}`, '40', (s['tools'] || 0) + (s['adoption'] || 0) >= 30 ? 'โ
Good' : 'โ ๏ธ Needs Work'],
['Accountability', `${(s['goals'] || 0) + (s['tracking'] || 0)}`, '40', (s['goals'] || 0) + (s['tracking'] || 0) >= 30 ? 'โ
Good' : 'โ ๏ธ Needs Work'],
['Wellbeing', `${(s['hours'] || 0) + (s['burnout'] || 0)}`, '40', (s['hours'] || 0) + (s['burnout'] || 0) >= 30 ? 'โ
Good' : 'โ ๏ธ Needs Work'],
['Culture', `${(s['bonding'] || 0) + (s['inclusion'] || 0)}`, '40', (s['bonding'] || 0) + (s['inclusion'] || 0) >= 30 ? 'โ
Good' : 'โ ๏ธ Needs Work']
]
);
});
});
form.configureSubmitButton({
label: () => `๐ Get My Report (Grade: ${getGrade()})`
});
form.configureSubmitBehavior({
sendToServer: true
});
}