export function tutoringFeedbackSurvey(form: FormTs) {
// Tutoring Session Feedback - One-on-one tutoring evaluation
// Demonstrates: Slider (before/after), StarRating, EmojiRating, MatrixQuestion, RadioButton, SuggestionChips
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Tutoring Session Feedback',
computedValue: () => 'Help us improve your learning experience by sharing your thoughts on today\'s session.',
customStyles: {
backgroundColor: '#7c3aed',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Session Context
// ============================================
const contextSection = form.addSubform('context', {
title: 'Session Details'
});
contextSection.addRow(row => {
row.addDropdown('subject', {
label: 'Subject',
placeholder: 'Select subject...',
options: [
{ id: 'math', name: 'Mathematics' },
{ id: 'science', name: 'Science' },
{ id: 'english', name: 'English / Language Arts' },
{ id: 'languages', name: 'Foreign Languages' },
{ id: 'history', name: 'History / Social Studies' },
{ id: 'testPrep', name: 'Test Preparation (SAT/ACT/etc.)' },
{ id: 'programming', name: 'Programming / Computer Science' },
{ id: 'music', name: 'Music' },
{ id: 'other', name: 'Other' }
],
isRequired: true
}, '1fr');
row.addDropdown('sessionType', {
label: 'Session Type',
placeholder: 'Select type...',
options: [
{ id: 'online', name: 'Online / Video call' },
{ id: 'inPerson', name: 'In-person' },
{ id: 'hybrid', name: 'Hybrid' }
]
}, '1fr');
});
contextSection.addRow(row => {
row.addRadioButton('sessionLength', {
label: 'Session duration',
options: [
{ id: '30min', name: '30 min' },
{ id: '45min', name: '45 min' },
{ id: '60min', name: '1 hour' },
{ id: '90min', name: '90 min' },
{ id: '120min', name: '2 hours' }
],
orientation: 'horizontal'
});
});
// ============================================
// SECTION 2: Learning Progress
// ============================================
const progressSection = form.addSubform('progress', {
title: 'Your Learning Progress',
customStyles: { backgroundColor: '#f8fafc', padding: '16px', borderRadius: '8px' }
});
progressSection.addRow(row => {
row.addTextPanel('progressIntro', {
computedValue: () => 'Rate your understanding of today\'s topic before and after the session:',
customStyles: { fontSize: '14px', color: '#64748b', marginBottom: '8px' }
});
});
progressSection.addRow(row => {
row.addSlider('understandingBefore', {
label: 'Understanding BEFORE the session',
min: 0,
max: 10,
step: 1,
showValue: true,
defaultValue: 3
}, '1fr');
row.addSlider('understandingAfter', {
label: 'Understanding AFTER the session',
min: 0,
max: 10,
step: 1,
showValue: true,
defaultValue: 7
}, '1fr');
});
// Progress indicator
progressSection.addRow(row => {
row.addTextPanel('progressIndicator', {
computedValue: () => {
const before = progressSection.slider('understandingBefore')?.value() ?? 0;
const after = progressSection.slider('understandingAfter')?.value() ?? 0;
const improvement = after - before;
if (improvement >= 5) return '🚀 Excellent progress! +' + improvement + ' points improvement';
if (improvement >= 3) return '📈 Great progress! +' + improvement + ' points improvement';
if (improvement >= 1) return '👍 Good progress! +' + improvement + ' points improvement';
if (improvement === 0) return '➡️ No change in understanding';
return '⚠️ Understanding decreased by ' + Math.abs(improvement) + ' points';
},
customStyles: () => {
const before = progressSection.slider('understandingBefore')?.value() ?? 0;
const after = progressSection.slider('understandingAfter')?.value() ?? 0;
const improvement = after - before;
const baseStyles = { padding: '12px', borderRadius: '8px', textAlign: 'center', fontWeight: 'bold' };
if (improvement >= 3) return { ...baseStyles, backgroundColor: '#d1fae5', color: '#047857' };
if (improvement >= 1) return { ...baseStyles, backgroundColor: '#ecfdf5', color: '#059669' };
if (improvement === 0) return { ...baseStyles, backgroundColor: '#fef3c7', color: '#b45309' };
return { ...baseStyles, backgroundColor: '#fee2e2', color: '#b91c1c' };
}
});
});
// ============================================
// SECTION 3: Tutor Evaluation
// ============================================
const tutorSection = form.addSubform('tutor', {
title: 'Your Tutor'
});
tutorSection.addRow(row => {
row.addStarRating('overallTutor', {
label: 'Overall tutor rating',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
tutorSection.addRow(row => {
row.addMatrixQuestion('tutorAttributes', {
label: 'Rate your tutor on the following:',
rows: [
{ id: 'knowledge', label: 'Subject knowledge', isRequired: true },
{ id: 'explanation', label: 'Clear explanations', isRequired: true },
{ id: 'patience', label: 'Patience', isRequired: true },
{ id: 'engagement', label: 'Kept you engaged' },
{ id: 'encouragement', label: 'Encouragement & positivity' },
{ id: 'preparation', label: 'Session preparation' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Session Quality
// ============================================
const sessionSection = form.addSubform('session', {
title: 'Session Quality'
});
sessionSection.addRow(row => {
row.addRadioButton('paceSatisfaction', {
label: 'How was the pace of the session?',
options: [
{ id: 'tooSlow', name: 'Too slow' },
{ id: 'justRight', name: 'Just right' },
{ id: 'tooFast', name: 'Too fast' }
],
orientation: 'horizontal'
});
});
sessionSection.addRow(row => {
row.addRatingScale('sessionUsefulness', {
label: 'How useful was this session for your learning?',
preset: 'likert-5',
lowLabel: 'Not useful',
highLabel: 'Extremely useful',
alignment: 'center'
});
});
sessionSection.addRow(row => {
row.addSuggestionChips('whatWorked', {
label: 'What worked well in this session?',
suggestions: [
{ id: 'examples', name: 'Good examples' },
{ id: 'practice', name: 'Practice problems' },
{ id: 'visual', name: 'Visual explanations' },
{ id: 'stepByStep', name: 'Step-by-step approach' },
{ id: 'realWorld', name: 'Real-world applications' },
{ id: 'patience', name: 'Tutor\'s patience' },
{ id: 'interactive', name: 'Interactive discussion' },
{ id: 'homework', name: 'Homework review' }
],
alignment: 'left'
});
});
// ============================================
// SECTION 5: Areas for Improvement
// ============================================
const improvementSection = form.addSubform('improvement', {
title: 'Areas for Improvement',
isVisible: () => {
const rating = tutorSection.starRating('overallTutor')?.value();
return rating !== null && rating !== undefined && rating <= 4;
}
});
improvementSection.addRow(row => {
row.addSuggestionChips('improvementAreas', {
label: 'What could be improved?',
suggestions: [
{ id: 'explanation', name: 'Clearer explanations' },
{ id: 'pace', name: 'Better pacing' },
{ id: 'practice', name: 'More practice' },
{ id: 'patience', name: 'More patience' },
{ id: 'preparation', name: 'Better preparation' },
{ id: 'engagement', name: 'More engaging' },
{ id: 'homework', name: 'Better homework guidance' },
{ id: 'tech', name: 'Technical issues (online)' }
],
alignment: 'left'
});
});
improvementSection.addSpacer();
improvementSection.addRow(row => {
row.addTextarea('improvementDetails', {
label: 'Please share specific suggestions for improvement',
placeholder: 'What would have made this session better for you?',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 6: Overall Experience
// ============================================
const overallSection = form.addSubform('overall', {
title: 'Overall Experience'
});
overallSection.addRow(row => {
row.addEmojiRating('sessionFeeling', {
label: 'How do you feel after this session?',
preset: 'mood',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addRadioButton('wouldContinue', {
label: 'Would you like to continue with this tutor?',
options: [
{ id: 'definitely', name: 'Definitely yes' },
{ id: 'probably', name: 'Probably yes' },
{ id: 'unsure', name: 'Not sure' },
{ id: 'probablyNot', name: 'Probably not' },
{ id: 'definitelyNot', name: 'Definitely not' }
],
orientation: 'vertical'
});
});
// ============================================
// SECTION 7: Comments
// ============================================
const commentsSection = form.addSubform('comments', {
title: 'Additional Feedback'
});
commentsSection.addRow(row => {
row.addTextarea('additionalComments', {
label: () => {
const rating = tutorSection.starRating('overallTutor')?.value();
if (rating && rating >= 5) return 'What made this session great?';
if (rating && rating >= 4) return 'Any additional comments or suggestions?';
return 'Please share more about your experience';
},
placeholder: 'Your feedback helps us match you with the best tutors...',
rows: 3,
autoExpand: true
});
});
commentsSection.addRow(row => {
row.addCheckbox('shareWithTutor', {
label: 'Share this feedback with my tutor (anonymous unless you include your name)',
defaultValue: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Session Summary',
isVisible: () => tutorSection.starRating('overallTutor')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const subject = contextSection.dropdown('subject')?.value();
const tutorRating = tutorSection.starRating('overallTutor')?.value();
const before = progressSection.slider('understandingBefore')?.value() ?? 0;
const after = progressSection.slider('understandingAfter')?.value() ?? 0;
const feeling = overallSection.emojiRating('sessionFeeling')?.value();
const wouldContinue = overallSection.radioButton('wouldContinue')?.value();
const whatWorked = sessionSection.suggestionChips('whatWorked')?.value() || [];
if (!tutorRating) return '';
const subjectLabels: Record<string, string> = {
'math': 'Mathematics', 'science': 'Science', 'english': 'English',
'languages': 'Foreign Languages', 'history': 'History',
'testPrep': 'Test Prep', 'programming': 'Programming',
'music': 'Music', 'other': 'Other'
};
const feelingLabels: Record<string, string> = {
'sad': '😢 Frustrated',
'down': '😔 Discouraged',
'neutral': '😐 Neutral',
'happy': '😊 Happy',
'excited': '🤩 Excited'
};
const improvement = after - before;
let progressEmoji = improvement >= 3 ? '🚀' : improvement >= 1 ? '📈' : '➡️';
let summary = '📚 Session Feedback Summary\n';
summary += `${'═'.repeat(30)}\n\n`;
if (subject) {
summary += `Subject: ${subjectLabels[subject] || subject}\n`;
}
summary += `⭐ Tutor Rating: ${tutorRating}/5\n`;
summary += `${progressEmoji} Progress: ${before} → ${after} (+${improvement})\n`;
if (feeling) {
summary += `Feeling: ${feelingLabels[feeling] || feeling}\n`;
}
if (wouldContinue) {
const continueLabels: Record<string, string> = {
'definitely': '✓ Will definitely continue',
'probably': '✓ Will probably continue',
'unsure': '? Undecided',
'probablyNot': '✗ Probably won\'t continue',
'definitelyNot': '✗ Won\'t continue'
};
summary += `\n${continueLabels[wouldContinue] || wouldContinue}`;
}
if (whatWorked.length > 0) {
summary += `\n\n✨ What worked: ${whatWorked.length} items noted`;
}
return summary;
},
customStyles: () => {
const rating = tutorSection.starRating('overallTutor')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (rating && rating >= 4) {
return { ...baseStyles, backgroundColor: '#ede9fe', borderLeft: '4px solid #7c3aed' };
} else if (rating && rating >= 3) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => tutorSection.starRating('overallTutor')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You!',
message: 'Your feedback helps us improve your learning experience and match you with the best tutors. Keep up the great work with your studies!'
});
}