export function remoteWorkFeedbackSurvey(form: FormTs) {
// Remote Work Experience Survey - Comprehensive WFH feedback
// Demonstrates: StarRating, Slider, MatrixQuestion, EmojiRating, CheckboxList, conditional visibility
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Remote Work Experience Survey',
computedValue: () => 'Help us improve your work-from-home experience',
customStyles: {
background: 'linear-gradient(135deg, #0891b2 0%, #0e7490 100%)',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Work Arrangement
// ============================================
const arrangementSection = form.addSubform('arrangementSection', {
title: 'Your Work Arrangement',
customStyles: { backgroundColor: '#f0fdfa', padding: '20px', borderRadius: '8px' }
});
arrangementSection.addRow(row => {
row.addRadioButton('workArrangement', {
label: 'What is your current work arrangement?',
options: [
{ id: 'fully-remote', name: 'Fully Remote (100% from home)' },
{ id: 'mostly-remote', name: 'Mostly Remote (1-2 days in office)' },
{ id: 'hybrid', name: 'Hybrid (3 days in office)' },
{ id: 'mostly-office', name: 'Mostly Office (occasional remote)' }
],
orientation: 'vertical',
isRequired: true
});
});
arrangementSection.addRow(row => {
row.addRadioButton('remoteExperience', {
label: 'How long have you been working remotely?',
options: [
{ id: 'less-6months', name: 'Less than 6 months' },
{ id: '6-12months', name: '6-12 months' },
{ id: '1-2years', name: '1-2 years' },
{ id: 'more-2years', name: 'More than 2 years' }
],
orientation: 'horizontal'
});
});
// ============================================
// SECTION 2: Daily Mood Check
// ============================================
const moodSection = form.addSubform('moodSection', {
title: 'How Are You Feeling?',
isVisible: () => arrangementSection.radioButton('workArrangement')?.value() !== null,
customStyles: { backgroundColor: '#faf5ff', padding: '20px', borderRadius: '8px' }
});
moodSection.addRow(row => {
row.addEmojiRating('currentMood', {
label: 'How would you describe your typical mood while working remotely?',
preset: 'mood',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
// ============================================
// SECTION 3: Productivity & Focus
// ============================================
const productivitySection = form.addSubform('productivitySection', {
title: 'Productivity & Focus',
isVisible: () => arrangementSection.radioButton('workArrangement')?.value() !== null,
customStyles: { padding: '20px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
productivitySection.addRow(row => {
row.addStarRating('overallProductivity', {
label: 'How productive do you feel working remotely?',
maxStars: 5,
size: 'lg',
showCounter: true,
alignment: 'center'
});
});
productivitySection.addRow(row => {
row.addSlider('focusTime', {
label: 'What percentage of your workday can you focus without interruptions?',
min: 0,
max: 100,
step: 10,
defaultValue: 50,
unit: '%',
showValue: true
});
});
productivitySection.addRow(row => {
row.addTextPanel('focusLabel', {
computedValue: () => {
const focus = productivitySection.slider('focusTime')?.value() ?? 50;
if (focus >= 70) return 'Excellent focus time! You have good conditions for deep work.';
if (focus >= 50) return 'Moderate focus time. Some room for improvement.';
if (focus >= 30) return 'Limited focus time. Consider adjusting your environment or schedule.';
return 'Very limited focus time. This may be impacting your productivity.';
},
customStyles: () => {
const focus = productivitySection.slider('focusTime')?.value() ?? 50;
const baseStyles = { fontSize: '13px', padding: '8px', borderRadius: '4px', textAlign: 'center' };
if (focus >= 70) return { ...baseStyles, backgroundColor: '#dcfce7', color: '#166534' };
if (focus >= 50) return { ...baseStyles, backgroundColor: '#fef9c3', color: '#854d0e' };
return { ...baseStyles, backgroundColor: '#fee2e2', color: '#991b1b' };
}
});
});
// ============================================
// SECTION 4: Work-Life Balance
// ============================================
const balanceSection = form.addSubform('balanceSection', {
title: 'Work-Life Balance',
isVisible: () => arrangementSection.radioButton('workArrangement')?.value() !== null,
customStyles: { backgroundColor: '#fffbeb', padding: '20px', borderRadius: '8px' }
});
balanceSection.addRow(row => {
row.addSlider('workLifeBalance', {
label: 'How would you rate your work-life balance?',
min: 0,
max: 100,
step: 5,
defaultValue: 50,
unit: '%',
showValue: true
});
});
balanceSection.addRow(row => {
row.addThumbRating('disconnectAbility', {
label: 'Are you able to disconnect from work at the end of the day?',
showLabels: true,
upLabel: 'Yes, usually',
downLabel: 'No, I struggle',
size: 'lg',
alignment: 'center'
});
});
balanceSection.addRow(row => {
row.addCheckboxList('balanceChallenges', {
label: 'What challenges do you face with work-life balance?',
options: [
{ id: 'overworking', name: 'Tendency to overwork' },
{ id: 'boundaries', name: 'Difficulty setting boundaries' },
{ id: 'always-on', name: 'Pressure to be always available' },
{ id: 'childcare', name: 'Childcare responsibilities' },
{ id: 'distractions', name: 'Home distractions' },
{ id: 'isolation', name: 'Feelings of isolation' },
{ id: 'no-separation', name: 'No physical separation between work and home' },
{ id: 'none', name: 'No significant challenges' }
],
orientation: 'vertical',
isVisible: () => balanceSection.thumbRating('disconnectAbility')?.value() === 'down'
});
});
// ============================================
// SECTION 5: Tools & Technology Rating
// ============================================
const toolsSection = form.addSubform('toolsSection', {
title: 'Tools & Technology',
isVisible: () => arrangementSection.radioButton('workArrangement')?.value() !== null,
customStyles: { backgroundColor: '#f8fafc', padding: '20px', borderRadius: '8px' }
});
toolsSection.addRow(row => {
row.addMatrixQuestion('toolsSatisfaction', {
label: 'Rate your satisfaction with these work tools:',
rows: [
{ id: 'video', label: 'Video Conferencing', description: 'Zoom, Teams, Meet, etc.', isRequired: true },
{ id: 'messaging', label: 'Team Messaging', description: 'Slack, Teams chat, etc.', isRequired: true },
{ id: 'email', label: 'Email', description: 'Response times and clarity', isRequired: true },
{ id: 'project-mgmt', label: 'Project Management', description: 'Jira, Asana, Trello, etc.', isRequired: false },
{ id: 'file-sharing', label: 'File Sharing', description: 'Google Drive, SharePoint, etc.', isRequired: false },
{ id: 'hardware', label: 'Hardware/Equipment', description: 'Laptop, monitor, keyboard, etc.', isRequired: true }
],
columns: [
{ id: 'very-dissatisfied', label: 'Very Dissatisfied' },
{ id: 'dissatisfied', label: 'Dissatisfied' },
{ id: 'neutral', label: 'Neutral' },
{ id: 'satisfied', label: 'Satisfied' },
{ id: 'very-satisfied', label: 'Very Satisfied' }
],
striped: true,
fullWidth: true
});
});
toolsSection.addSpacer();
toolsSection.addRow(row => {
row.addTextarea('toolsNeeded', {
label: 'What tools or equipment would help you work more effectively?',
placeholder: 'e.g., better monitor, noise-canceling headphones, ergonomic chair, specific software...',
rows: 2,
autoExpand: true
});
});
// ============================================
// SECTION 6: Communication & Collaboration
// ============================================
const communicationSection = form.addSubform('communicationSection', {
title: 'Communication & Collaboration',
isVisible: () => arrangementSection.radioButton('workArrangement')?.value() !== null,
customStyles: { padding: '20px', borderRadius: '8px', border: '1px solid #e2e8f0' }
});
communicationSection.addRow(row => {
row.addStarRating('teamCommunication', {
label: 'How effective is communication within your team?',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '1fr');
row.addStarRating('managerSupport', {
label: 'How supported do you feel by your manager?',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '1fr');
});
communicationSection.addRow(row => {
row.addStarRating('meetingEffectiveness', {
label: 'How effective are virtual meetings?',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '1fr');
row.addStarRating('infoAccess', {
label: 'How easy is it to access information you need?',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '1fr');
});
// ============================================
// SECTION 7: Home Office Setup
// ============================================
const homeOfficeSection = form.addSubform('homeOfficeSection', {
title: 'Home Office Setup',
isVisible: () => {
const arrangement = arrangementSection.radioButton('workArrangement')?.value();
return arrangement === 'fully-remote' || arrangement === 'mostly-remote';
},
customStyles: { backgroundColor: '#f0fdf4', padding: '20px', borderRadius: '8px' }
});
homeOfficeSection.addRow(row => {
row.addStarRating('homeSetup', {
label: 'Rate your home office setup',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
homeOfficeSection.addRow(row => {
row.addCheckboxList('setupItems', {
label: 'What do you have in your home office?',
options: [
{ id: 'dedicated-space', name: 'Dedicated workspace/room' },
{ id: 'desk', name: 'Proper desk' },
{ id: 'ergonomic-chair', name: 'Ergonomic chair' },
{ id: 'external-monitor', name: 'External monitor' },
{ id: 'fast-internet', name: 'Fast, reliable internet' },
{ id: 'webcam', name: 'Quality webcam' },
{ id: 'headset', name: 'Headset/microphone' },
{ id: 'good-lighting', name: 'Good lighting' }
],
orientation: 'vertical'
});
});
// ============================================
// SECTION 8: Overall Assessment
// ============================================
const overallSection = form.addSubform('overallSection', {
title: 'Overall Assessment',
isVisible: () => arrangementSection.radioButton('workArrangement')?.value() !== null,
customStyles: { backgroundColor: '#faf5ff', padding: '20px', borderRadius: '8px' }
});
overallSection.addRow(row => {
row.addRatingScale('remoteRecommend', {
preset: 'nps',
label: 'How likely are you to recommend remote work to a colleague?',
showCategoryLabel: true,
showSegmentColors: true
});
});
overallSection.addSpacer();
overallSection.addRow(row => {
row.addTextarea('improvements', {
label: 'What one change would most improve your remote work experience?',
placeholder: 'Share your top suggestion for improvement...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 9: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Feedback Summary',
isVisible: () => productivitySection.starRating('overallProductivity')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const arrangement = arrangementSection.radioButton('workArrangement')?.value();
const mood = moodSection.emojiRating('currentMood')?.value();
const productivity = productivitySection.starRating('overallProductivity')?.value();
const focusTime = productivitySection.slider('focusTime')?.value() ?? 50;
const balance = balanceSection.slider('workLifeBalance')?.value() ?? 50;
const recommend = overallSection.ratingScale('remoteRecommend')?.value();
const arrangementLabels: Record<string, string> = {
'fully-remote': 'Fully Remote',
'mostly-remote': 'Mostly Remote',
'hybrid': 'Hybrid',
'mostly-office': 'Mostly Office'
};
const moodLabels: Record<string, string> = {
'sad': '😢 Struggling',
'down': '😔 Not Great',
'neutral': '😐 Neutral',
'happy': '😊 Good',
'excited': '🤩 Thriving'
};
let summary = '📊 Remote Work Feedback Summary\n';
summary += `${'═'.repeat(35)}\n\n`;
summary += `🏠 Arrangement: ${arrangementLabels[arrangement || ''] || 'Not specified'}\n`;
if (mood) {
summary += `💭 Mood: ${moodLabels[mood] || mood}\n`;
}
if (productivity) {
summary += `⚡ Productivity: ${productivity}/5 stars\n`;
}
summary += `🎯 Focus Time: ${focusTime}%\n`;
summary += `⚖️ Work-Life Balance: ${balance}%\n`;
if (recommend !== null && recommend !== undefined) {
const category = recommend >= 9 ? 'Promoter' : recommend >= 7 ? 'Passive' : 'Detractor';
summary += `\n📢 Would Recommend: ${recommend}/10 (${category})`;
}
return summary;
},
customStyles: {
padding: '20px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px',
backgroundColor: '#f0fdfa',
borderLeft: '4px solid #0891b2'
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Remote Work Feedback',
isVisible: () => arrangementSection.radioButton('workArrangement')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your insights help us create a better remote work experience for everyone. We review this feedback regularly to improve our policies and support.'
});
}