export function studentWellbeing(form: FormTs) {
// Student Wellbeing Check-in - Supportive mental health tracking
// Demonstrates: EmojiRating, Slider, ThumbRating, dynamic styling, conditional support resources
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Wellbeing Check-in',
computedValue: () => "Let's check in on how you're doing. Your responses are confidential and help us support you better.",
customStyles: {
background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
color: 'white',
padding: '24px',
borderRadius: '16px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Emotional State
// ============================================
const moodSection = form.addSubform('emotionalState', {
title: 'How Are You Feeling?',
customStyles: { backgroundColor: '#f0fdf4', padding: '16px', borderRadius: '12px' }
});
moodSection.addRow(row => {
row.addEmojiRating('currentMood', {
label: 'How would you describe your mood right now?',
preset: 'mood',
size: 'lg',
showLabels: true,
alignment: 'center',
isRequired: true
});
});
// Dynamic response based on mood
moodSection.addRow(row => {
row.addTextPanel('moodResponse', {
computedValue: () => {
const mood = moodSection.emojiRating('currentMood')?.value();
if (!mood) return '';
const responses: Record<string, string> = {
'sad': "I'm sorry you're feeling down. It's okay to have difficult days. Let's continue and see how we can help.",
'down': "Thanks for sharing. Everyone has ups and downs - acknowledging how you feel is an important first step.",
'neutral': "Thanks for checking in. Let's see how things are going overall.",
'happy': "That's wonderful to hear! Let's capture what's going well.",
'excited': "Amazing! It's great that you're feeling so positive!"
};
return responses[mood] || '';
},
isVisible: () => moodSection.emojiRating('currentMood')?.value() !== null,
customStyles: () => {
const mood = moodSection.emojiRating('currentMood')?.value();
const base = { padding: '12px', borderRadius: '8px', fontStyle: 'italic', textAlign: 'center' };
if (mood === 'sad' || mood === 'down') {
return { ...base, backgroundColor: '#fef3c7', color: '#92400e' };
}
if (mood === 'happy' || mood === 'excited') {
return { ...base, backgroundColor: '#d1fae5', color: '#065f46' };
}
return { ...base, backgroundColor: '#f1f5f9', color: '#475569' };
}
});
});
// ============================================
// SECTION 2: Energy & Physical Wellbeing
// ============================================
const physicalSection = form.addSubform('physicalWellbeing', {
title: 'Energy & Physical Wellbeing'
});
physicalSection.addRow(row => {
row.addSlider('energyLevel', {
label: 'What is your energy level today?',
min: 1,
max: 10,
step: 1,
defaultValue: 5,
showValue: true
});
});
physicalSection.addRow(row => {
row.addTextPanel('energyLabel', {
computedValue: () => {
const energy = physicalSection.slider('energyLevel')?.value() ?? 5;
if (energy <= 3) return '😴 Low energy - that\'s tough';
if (energy <= 6) return '😐 Moderate energy';
if (energy <= 8) return '😊 Good energy!';
return '⚡ Full of energy!';
},
customStyles: { textAlign: 'center', fontSize: '14px', color: '#64748b' }
});
});
physicalSection.addRow(row => {
row.addSlider('sleepQuality', {
label: 'How well did you sleep last night?',
min: 1,
max: 10,
step: 1,
defaultValue: 5,
showValue: true
}, '1fr');
row.addSlider('sleepHours', {
label: 'Hours of sleep',
min: 0,
max: 12,
step: 0.5,
defaultValue: 7,
unit: 'hrs',
showValue: true
}, '1fr');
});
// Low sleep warning
physicalSection.addRow(row => {
row.addTextPanel('sleepWarning', {
computedValue: () => '💡 Tip: Try to aim for 7-9 hours of sleep for optimal wellbeing.',
isVisible: () => {
const hours = physicalSection.slider('sleepHours')?.value() ?? 7;
return hours < 6;
},
customStyles: { backgroundColor: '#fef3c7', padding: '12px', borderRadius: '8px', color: '#92400e' }
});
});
// ============================================
// SECTION 3: Stress & Academic Pressure
// ============================================
const stressSection = form.addSubform('stressLevel', {
title: 'Stress & Academic Pressure'
});
stressSection.addRow(row => {
row.addSlider('stressLevel', {
label: 'How stressed are you feeling?',
min: 1,
max: 10,
step: 1,
defaultValue: 5,
showValue: true
});
});
stressSection.addRow(row => {
row.addTextPanel('stressIndicator', {
computedValue: () => {
const stress = stressSection.slider('stressLevel')?.value() ?? 5;
if (stress <= 3) return '🌿 Low stress - great!';
if (stress <= 5) return '⚖️ Manageable stress';
if (stress <= 7) return '⚠️ Elevated stress';
return '🚨 High stress - please consider reaching out for support';
},
customStyles: () => {
const stress = stressSection.slider('stressLevel')?.value() ?? 5;
const base = { padding: '12px', borderRadius: '8px', textAlign: 'center' };
if (stress <= 3) return { ...base, backgroundColor: '#d1fae5', color: '#065f46' };
if (stress <= 5) return { ...base, backgroundColor: '#f1f5f9', color: '#475569' };
if (stress <= 7) return { ...base, backgroundColor: '#fef3c7', color: '#92400e' };
return { ...base, backgroundColor: '#fee2e2', color: '#991b1b' };
}
});
});
// Stress sources (conditional for higher stress)
stressSection.addRow(row => {
row.addCheckboxList('stressSources', {
label: 'What is contributing to your stress?',
options: [
{ id: 'exams', name: 'Upcoming exams or tests' },
{ id: 'assignments', name: 'Assignment deadlines' },
{ id: 'workload', name: 'Heavy workload' },
{ id: 'grades', name: 'Worrying about grades' },
{ id: 'social', name: 'Social pressures' },
{ id: 'family', name: 'Family issues' },
{ id: 'finances', name: 'Financial concerns' },
{ id: 'health', name: 'Health concerns' },
{ id: 'future', name: 'Worrying about the future' },
{ id: 'other', name: 'Other' }
],
orientation: 'vertical',
isVisible: () => (stressSection.slider('stressLevel')?.value() ?? 5) >= 5
});
});
// ============================================
// SECTION 4: Social Connection
// ============================================
const socialSection = form.addSubform('socialConnection', {
title: 'Social Connection'
});
socialSection.addRow(row => {
row.addEmojiRating('socialConnection', {
label: 'How connected do you feel to friends and peers?',
preset: 'satisfaction',
size: 'md',
alignment: 'center'
});
});
socialSection.addRow(row => {
row.addThumbRating('hasSupport', {
label: 'Do you have someone you can talk to when things get tough?',
showLabels: true,
upLabel: 'Yes, I have support',
downLabel: 'No, I feel alone',
alignment: 'center'
});
});
// Loneliness support (conditional)
socialSection.addRow(row => {
row.addTextPanel('supportInfo', {
computedValue: () => "You're not alone. Here are some resources that can help:\n\n📞 Campus Counseling: [Your Number]\n💬 Peer Support Chat: [Your Link]\n🤝 Student Support Groups: [Your Info]",
isVisible: () => socialSection.thumbRating('hasSupport')?.value() === 'down',
customStyles: {
backgroundColor: '#eff6ff',
padding: '16px',
borderRadius: '8px',
borderLeft: '4px solid #3b82f6',
whiteSpace: 'pre-wrap',
color: '#1e40af'
}
});
});
// ============================================
// SECTION 5: Overall Wellbeing
// ============================================
const overallSection = form.addSubform('overallWellbeing', {
title: 'Overall Wellbeing'
});
overallSection.addRow(row => {
row.addRatingScale('lifeSatisfaction', {
label: 'Overall, how satisfied are you with your life right now?',
preset: 'satisfaction',
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addRadioButton('comparedLastWeek', {
label: 'Compared to last week, how are you doing?',
options: [
{ id: 'much-better', name: 'Much better' },
{ id: 'better', name: 'A bit better' },
{ id: 'same', name: 'About the same' },
{ id: 'worse', name: 'A bit worse' },
{ id: 'much-worse', name: 'Much worse' }
],
orientation: 'horizontal'
});
});
// ============================================
// SECTION 6: Needs & Support
// ============================================
const needsSection = form.addSubform('needsSupport', {
title: 'Your Needs'
});
needsSection.addRow(row => {
row.addThumbRating('needsSupport', {
label: 'Would you like to speak with someone about how you are feeling?',
showLabels: true,
upLabel: 'Yes, please',
downLabel: 'No, I am okay',
alignment: 'center'
});
});
// Support request details
const supportRequestSection = needsSection.addSubform('supportRequest', {
title: 'Support Request',
isVisible: () => needsSection.thumbRating('needsSupport')?.value() === 'up',
customStyles: { backgroundColor: '#eff6ff', padding: '16px', borderRadius: '8px' }
});
supportRequestSection.addRow(row => {
row.addCheckboxList('supportType', {
label: 'What kind of support would be most helpful?',
options: [
{ id: 'counseling', name: 'Talk to a counselor' },
{ id: 'academic', name: 'Academic support/tutoring' },
{ id: 'peer', name: 'Connect with peer support' },
{ id: 'resources', name: 'Learning about mental health resources' },
{ id: 'accommodations', name: 'Academic accommodations' }
],
orientation: 'vertical'
});
});
supportRequestSection.addRow(row => {
row.addTextbox('preferredContactTime', {
label: 'Best time to contact you',
placeholder: 'e.g., Afternoons, After 3pm'
});
});
// Open sharing
needsSection.addSpacer({ height: '16px' });
needsSection.addRow(row => {
row.addTextarea('anythingElse', {
label: 'Is there anything else you want to share?',
placeholder: 'Feel free to share anything on your mind...',
rows: 4,
autoExpand: true
});
});
// ============================================
// SECTION 7: Contact (Optional)
// ============================================
const contactSection = form.addSubform('contactInfo', {
title: 'Contact Information (Optional)',
isVisible: () => needsSection.thumbRating('needsSupport')?.value() === 'up'
});
contactSection.addRow(row => {
row.addTextbox('studentName', {
label: 'Your name',
placeholder: 'First and last name'
}, '1fr');
row.addEmail('studentEmail', {
label: 'Email address',
placeholder: 'your@email.edu'
}, '1fr');
});
// ============================================
// SECTION 8: Wellbeing Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Wellbeing Summary',
isVisible: () => moodSection.emojiRating('currentMood')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const mood = moodSection.emojiRating('currentMood')?.value();
const energy = physicalSection.slider('energyLevel')?.value() ?? 5;
const sleep = physicalSection.slider('sleepHours')?.value() ?? 7;
const stress = stressSection.slider('stressLevel')?.value() ?? 5;
const satisfaction = overallSection.ratingScale('lifeSatisfaction')?.value();
if (!mood) return '';
const moodLabels: Record<string, string> = {
'sad': '😢 Struggling',
'down': '😔 Feeling down',
'neutral': '😐 Neutral',
'happy': '😊 Doing well',
'excited': '🤩 Feeling great'
};
let summary = '📊 Wellbeing Snapshot\n';
summary += `${'═'.repeat(22)}\n\n`;
summary += `Mood: ${moodLabels[mood] || mood}\n`;
summary += `Energy: ${energy}/10\n`;
summary += `Sleep: ${sleep} hours\n`;
summary += `Stress: ${stress}/10\n`;
if (satisfaction) {
summary += `Life Satisfaction: ${satisfaction}/5`;
}
// Calculate overall wellbeing score
const wellbeingScore = Math.round((
(energy / 10) * 25 +
(Math.min(sleep, 8) / 8) * 25 +
((10 - stress) / 10) * 25 +
((satisfaction || 3) / 5) * 25
));
summary += `\n\n🎯 Overall Wellbeing: ${wellbeingScore}%`;
return summary;
},
customStyles: () => {
const stress = stressSection.slider('stressLevel')?.value() ?? 5;
const mood = moodSection.emojiRating('currentMood')?.value();
const base = {
padding: '16px',
borderRadius: '12px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
// Determine color based on overall state
if ((mood === 'sad' || mood === 'down') || stress >= 8) {
return { ...base, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
if (mood === 'happy' || mood === 'excited') {
return { ...base, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
}
return { ...base, backgroundColor: '#f1f5f9', borderLeft: '4px solid #64748b' };
}
});
});
// Crisis resources (always visible at bottom)
form.addRow(row => {
row.addTextPanel('crisisInfo', {
label: 'Need immediate help?',
computedValue: () => 'If you are in crisis or having thoughts of self-harm, please reach out immediately:\n📞 Crisis Hotline: 988 (Suicide & Crisis Lifeline)\n💬 Crisis Text Line: Text HOME to 741741',
customStyles: {
backgroundColor: '#fef2f2',
padding: '16px',
borderRadius: '8px',
borderLeft: '4px solid #dc2626',
whiteSpace: 'pre-wrap',
fontSize: '13px',
color: '#7f1d1d'
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Check-in',
isVisible: () => moodSection.emojiRating('currentMood')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Checking In!',
message: 'Taking time to reflect on your wellbeing is an important step. Remember, support is always available when you need it. Take care of yourself!'
});
}