export function _360FeedbackSurvey(form: FormTs) {
// 360-Degree Feedback Survey - Multi-rater employee evaluation
// Demonstrates: MatrixQuestion, StarRating, EmojiRating, RadioButton, SuggestionChips, conditional visibility, dynamic labels
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: '360-Degree Feedback Survey',
computedValue: () => 'Provide comprehensive feedback to help your colleague grow professionally.',
customStyles: {
backgroundColor: '#4f46e5',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Relationship Context
// ============================================
const contextSection = form.addSubform('context', {
title: 'Your Relationship'
});
contextSection.addRow(row => {
row.addRadioButton('relationship', {
label: 'What is your relationship to the person you are evaluating?',
options: [
{ id: 'self', name: 'Self-Assessment (I am evaluating myself)' },
{ id: 'manager', name: 'I am their Manager' },
{ id: 'peer', name: 'I am their Peer/Colleague' },
{ id: 'direct-report', name: 'I am their Direct Report' },
{ id: 'other', name: 'Other (cross-functional, external)' }
],
orientation: 'vertical',
isRequired: true
});
});
contextSection.addRow(row => {
row.addDropdown('duration', {
label: 'How long have you worked with this person?',
options: [
{ id: 'less-6', name: 'Less than 6 months' },
{ id: '6-12', name: '6-12 months' },
{ id: '1-2', name: '1-2 years' },
{ id: '2-5', name: '2-5 years' },
{ id: 'more-5', name: 'More than 5 years' }
],
isRequired: true,
isVisible: () => contextSection.radioButton('relationship')?.value() !== 'self'
});
});
contextSection.addRow(row => {
row.addDropdown('frequency', {
label: 'How frequently do you interact with this person?',
options: [
{ id: 'daily', name: 'Daily' },
{ id: 'weekly', name: 'Several times a week' },
{ id: 'biweekly', name: 'Weekly or bi-weekly' },
{ id: 'monthly', name: 'Monthly' },
{ id: 'rarely', name: 'Occasionally/Rarely' }
],
isRequired: true,
isVisible: () => contextSection.radioButton('relationship')?.value() !== 'self'
});
});
// ============================================
// SECTION 2: Core Competencies (Matrix)
// ============================================
const competenciesSection = form.addSubform('competencies', {
title: () => {
const rel = contextSection.radioButton('relationship')?.value();
return rel === 'self' ? 'Self-Assessment: Core Competencies' : 'Core Competencies Assessment';
},
isVisible: () => contextSection.radioButton('relationship')?.value() !== null
});
competenciesSection.addRow(row => {
row.addTextPanel('competencyInstructions', {
computedValue: () => {
const rel = contextSection.radioButton('relationship')?.value();
if (rel === 'self') {
return 'Rate yourself honestly on each competency. Self-awareness is key to growth.';
}
return 'Rate the individual on each competency based on your observations and interactions.';
},
customStyles: {
backgroundColor: '#f0f9ff',
padding: '12px 16px',
borderRadius: '8px',
borderLeft: '4px solid #0ea5e9',
fontSize: '14px'
}
});
});
competenciesSection.addRow(row => {
row.addMatrixQuestion('coreCompetencies', {
label: () => {
const rel = contextSection.radioButton('relationship')?.value();
return rel === 'self' ? 'How do you rate yourself on these competencies?' : 'Rate the following competencies:';
},
rows: [
{ id: 'communication', label: 'Communication', description: 'Clarity, listening, written and verbal skills', isRequired: true },
{ id: 'collaboration', label: 'Collaboration', description: 'Teamwork, cooperation, relationship building', isRequired: true },
{ id: 'problem-solving', label: 'Problem Solving', description: 'Analysis, creativity, decision making', isRequired: true },
{ id: 'adaptability', label: 'Adaptability', description: 'Flexibility, learning agility, handling change', isRequired: true },
{ id: 'accountability', label: 'Accountability', description: 'Ownership, reliability, meeting commitments', isRequired: true },
{ id: 'initiative', label: 'Initiative', description: 'Proactivity, innovation, going beyond expectations', isRequired: true }
],
columns: [
{ id: '1', label: 'Needs Development' },
{ id: '2', label: 'Developing' },
{ id: '3', label: 'Competent' },
{ id: '4', label: 'Proficient' },
{ id: '5', label: 'Expert' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 3: Leadership Competencies (for managers/senior roles)
// ============================================
const leadershipSection = form.addSubform('leadership', {
title: 'Leadership Competencies',
isVisible: () => {
const rel = contextSection.radioButton('relationship')?.value();
return rel === 'self' || rel === 'direct-report' || rel === 'peer';
}
});
leadershipSection.addRow(row => {
row.addMatrixQuestion('leadershipCompetencies', {
label: 'Rate leadership behaviors (if applicable to this role):',
rows: [
{ id: 'vision', label: 'Vision & Strategy', description: 'Setting direction, strategic thinking' },
{ id: 'developing-others', label: 'Developing Others', description: 'Coaching, mentoring, empowering' },
{ id: 'decision-making', label: 'Decision Making', description: 'Timely, informed, inclusive decisions' },
{ id: 'inspiring', label: 'Inspiring Others', description: 'Motivation, enthusiasm, leading by example' }
],
columns: [
{ id: 'na', label: 'N/A' },
{ id: '1', label: 'Needs Work' },
{ id: '2', label: 'Developing' },
{ id: '3', label: 'Effective' },
{ id: '4', label: 'Strong' },
{ id: '5', label: 'Exceptional' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Overall Assessment
// ============================================
const overallSection = form.addSubform('overall', {
title: 'Overall Assessment',
isVisible: () => contextSection.radioButton('relationship')?.value() !== null
});
overallSection.addRow(row => {
row.addStarRating('overallPerformance', {
label: () => {
const rel = contextSection.radioButton('relationship')?.value();
return rel === 'self' ? 'How would you rate your overall performance?' : 'Overall Performance Rating';
},
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addEmojiRating('workingRelationship', {
label: () => {
const rel = contextSection.radioButton('relationship')?.value();
if (rel === 'self') return 'How satisfied are you with your role?';
return 'How would you describe your working relationship?';
},
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center',
isVisible: () => contextSection.radioButton('relationship')?.value() !== 'self'
});
});
// ============================================
// SECTION 5: Strengths
// ============================================
const strengthsSection = form.addSubform('strengths', {
title: () => {
const rel = contextSection.radioButton('relationship')?.value();
return rel === 'self' ? 'Your Key Strengths' : 'Key Strengths';
},
isVisible: () => contextSection.radioButton('relationship')?.value() !== null,
customStyles: { backgroundColor: '#f0fdf4', padding: '16px', borderRadius: '8px' }
});
strengthsSection.addRow(row => {
row.addSuggestionChips('strengthAreas', {
label: () => {
const rel = contextSection.radioButton('relationship')?.value();
return rel === 'self' ? 'Select your top 3-5 strengths:' : 'Select 3-5 areas where this person excels:';
},
suggestions: [
{ id: 'analytical', name: 'Analytical Thinking' },
{ id: 'creative', name: 'Creativity' },
{ id: 'detail', name: 'Attention to Detail' },
{ id: 'empathy', name: 'Empathy' },
{ id: 'execution', name: 'Execution' },
{ id: 'influence', name: 'Influence' },
{ id: 'learning', name: 'Quick Learner' },
{ id: 'mentoring', name: 'Mentoring' },
{ id: 'organizing', name: 'Organization' },
{ id: 'presenting', name: 'Presentation Skills' },
{ id: 'resilience', name: 'Resilience' },
{ id: 'technical', name: 'Technical Expertise' }
],
min: 3,
max: 5,
alignment: 'center'
});
});
strengthsSection.addSpacer();
strengthsSection.addRow(row => {
row.addTextarea('strengthsComments', {
label: () => {
const rel = contextSection.radioButton('relationship')?.value();
return rel === 'self' ? 'Describe a recent example of your strengths in action:' : 'Provide specific examples of these strengths:';
},
placeholder: 'Share a concrete example or situation...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 6: Development Areas
// ============================================
const developmentSection = form.addSubform('development', {
title: () => {
const rel = contextSection.radioButton('relationship')?.value();
return rel === 'self' ? 'Your Development Areas' : 'Development Opportunities';
},
isVisible: () => contextSection.radioButton('relationship')?.value() !== null,
customStyles: { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' }
});
developmentSection.addRow(row => {
row.addSuggestionChips('developmentAreas', {
label: () => {
const rel = contextSection.radioButton('relationship')?.value();
return rel === 'self' ? 'Select 1-3 areas to develop:' : 'Select 1-3 areas for development:';
},
suggestions: [
{ id: 'communication', name: 'Communication' },
{ id: 'conflict', name: 'Conflict Resolution' },
{ id: 'delegation', name: 'Delegation' },
{ id: 'feedback', name: 'Giving/Receiving Feedback' },
{ id: 'prioritization', name: 'Prioritization' },
{ id: 'public-speaking', name: 'Public Speaking' },
{ id: 'strategic', name: 'Strategic Thinking' },
{ id: 'time-management', name: 'Time Management' },
{ id: 'technical', name: 'Technical Skills' },
{ id: 'stakeholder', name: 'Stakeholder Management' }
],
min: 1,
max: 3,
alignment: 'center'
});
});
developmentSection.addSpacer();
developmentSection.addRow(row => {
row.addTextarea('developmentSuggestions', {
label: () => {
const rel = contextSection.radioButton('relationship')?.value();
return rel === 'self' ? 'What specific actions will you take to improve?' : 'What specific suggestions do you have for improvement?';
},
placeholder: 'Share actionable recommendations...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 7: Additional Comments
// ============================================
const commentsSection = form.addSubform('comments', {
title: 'Additional Feedback',
isVisible: () => contextSection.radioButton('relationship')?.value() !== null
});
commentsSection.addRow(row => {
row.addTextarea('additionalComments', {
label: () => {
const rel = contextSection.radioButton('relationship')?.value();
if (rel === 'self') return 'Any additional reflections on your performance?';
return 'Is there anything else you would like to share about this person?';
},
placeholder: 'Any other observations, feedback, or comments...',
rows: 4,
autoExpand: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Feedback Summary',
isVisible: () => overallSection.starRating('overallPerformance')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const relationship = contextSection.radioButton('relationship')?.value();
const overall = overallSection.starRating('overallPerformance')?.value();
const strengths = strengthsSection.suggestionChips('strengthAreas')?.value() || [];
const developments = developmentSection.suggestionChips('developmentAreas')?.value() || [];
if (!overall) return '';
const relLabels: Record<string, string> = {
'self': 'Self-Assessment',
'manager': 'Manager Review',
'peer': 'Peer Feedback',
'direct-report': 'Direct Report Feedback',
'other': 'Cross-functional Feedback'
};
let summary = `📊 360° Feedback Summary\n`;
summary += `${'═'.repeat(28)}\n\n`;
summary += `📋 Type: ${relLabels[relationship || ''] || 'Unknown'}\n`;
summary += `⭐ Overall: ${overall}/5 stars\n`;
if (strengths.length > 0) {
summary += `\n✨ Key Strengths: ${strengths.length} identified`;
}
if (developments.length > 0) {
summary += `\n🎯 Development Areas: ${developments.length} identified`;
}
return summary;
},
customStyles: {
backgroundColor: '#f8fafc',
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px',
borderLeft: '4px solid #4f46e5'
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: () => {
const rel = contextSection.radioButton('relationship')?.value();
return rel === 'self' ? 'Submit Self-Assessment' : 'Submit Feedback';
},
isVisible: () => contextSection.radioButton('relationship')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: () => {
const rel = contextSection.radioButton('relationship')?.value();
if (rel === 'self') {
return 'Your self-assessment has been submitted. Honest self-reflection is the first step to growth.';
}
return 'Your feedback has been submitted anonymously. Your insights are invaluable for professional development.';
}
});
}