export function instructorRatingForm(form: FormTs) {
// Instructor Rating Form
// Demonstrates: MatrixQuestion, StarRating x6, EmojiRating, RatingScale, RadioButton, Textarea, dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Instructor Evaluation',
computedValue: () => 'Your feedback helps improve teaching quality and course delivery.',
customStyles: {
backgroundColor: '#0ea5e9',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Course Information
// ============================================
const courseSection = form.addSubform('courseInfo', {
title: 'Course Information'
});
courseSection.addRow(row => {
row.addTextbox('courseName', {
label: 'Course name or code',
placeholder: 'e.g., MATH 101 - Calculus I',
isRequired: true
}, '1fr');
row.addTextbox('instructorName', {
label: 'Instructor name',
placeholder: 'Enter instructor name',
isRequired: true
}, '1fr');
});
courseSection.addRow(row => {
row.addDropdown('courseFormat', {
label: 'Course format',
options: [
{ id: 'in-person', name: 'In-person' },
{ id: 'online-sync', name: 'Online (synchronous)' },
{ id: 'online-async', name: 'Online (asynchronous)' },
{ id: 'hybrid', name: 'Hybrid' }
],
placeholder: 'Select format'
}, '1fr');
row.addDropdown('attendanceLevel', {
label: 'Your attendance level',
options: [
{ id: 'all', name: 'Attended all classes' },
{ id: 'most', name: 'Attended most classes (75%+)' },
{ id: 'half', name: 'Attended about half' },
{ id: 'few', name: 'Attended few classes' }
],
placeholder: 'Select attendance'
}, '1fr');
});
// ============================================
// SECTION 2: Overall Impression
// ============================================
const overallSection = form.addSubform('overallImpression', {
title: 'Overall Impression',
customStyles: () => {
const rating = overallSection.starRating('overallRating')?.value();
if (rating && rating >= 4) return { backgroundColor: '#dcfce7', padding: '16px', borderRadius: '8px' };
if (rating && rating <= 2) return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px', borderRadius: '8px' };
}
});
overallSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'Overall rating of this instructor',
maxStars: 5,
size: 'xl',
alignment: 'center',
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addEmojiRating('learningExperience', {
label: 'How would you describe your learning experience?',
preset: 'satisfaction',
size: 'lg',
alignment: 'center'
});
});
// ============================================
// SECTION 3: Teaching Skills Matrix
// ============================================
const skillsSection = form.addSubform('teachingSkills', {
title: 'Teaching Skills Assessment'
});
skillsSection.addRow(row => {
row.addMatrixQuestion('skillsMatrix', {
label: 'Rate the instructor on the following teaching skills:',
rows: [
{ id: 'knowledge', label: 'Subject matter expertise', isRequired: true },
{ id: 'clarity', label: 'Clarity of explanations', isRequired: true },
{ id: 'organization', label: 'Course organization and structure', isRequired: true },
{ id: 'engagement', label: 'Ability to engage students', isRequired: true },
{ id: 'pace', label: 'Appropriate teaching pace' },
{ id: 'examples', label: 'Use of relevant examples' },
{ id: 'materials', label: 'Quality of course materials' }
],
columns: [
{ id: '1', label: 'Poor' },
{ id: '2', label: 'Fair' },
{ id: '3', label: 'Good' },
{ id: '4', label: 'Very Good' },
{ id: '5', label: 'Excellent' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 4: Communication & Support
// ============================================
const communicationSection = form.addSubform('communication', {
title: 'Communication & Support'
});
communicationSection.addRow(row => {
row.addStarRating('responsiveness', {
label: 'Responsiveness to questions and emails',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '1fr');
row.addStarRating('availability', {
label: 'Availability outside of class (office hours)',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '1fr');
});
communicationSection.addRow(row => {
row.addStarRating('feedback', {
label: 'Quality and timeliness of feedback on assignments',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '1fr');
row.addStarRating('encouragement', {
label: 'Encouragement of student participation',
maxStars: 5,
size: 'md',
alignment: 'left'
}, '1fr');
});
// ============================================
// SECTION 5: Fairness & Assessment
// ============================================
const fairnessSection = form.addSubform('fairness', {
title: 'Fairness & Assessment'
});
fairnessSection.addRow(row => {
row.addRatingScale('gradingFairness', {
label: 'How fair was the grading in this course?',
preset: 'likert-5',
lowLabel: 'Very unfair',
highLabel: 'Very fair',
alignment: 'center',
isRequired: true
});
});
fairnessSection.addRow(row => {
row.addRadioButton('expectationsClear', {
label: 'Were expectations for assignments and exams clearly communicated?',
options: [
{ id: 'always', name: 'Always clear' },
{ id: 'usually', name: 'Usually clear' },
{ id: 'sometimes', name: 'Sometimes unclear' },
{ id: 'rarely', name: 'Rarely clear' }
],
orientation: 'horizontal'
});
});
fairnessSection.addRow(row => {
row.addStarRating('workloadBalance', {
label: 'Appropriateness of workload for course credits',
maxStars: 5,
size: 'md',
alignment: 'center'
});
});
// ============================================
// SECTION 6: Would Recommend
// ============================================
const recommendSection = form.addSubform('recommend', {
title: 'Would You Recommend?',
customStyles: () => {
const category = recommendSection.ratingScale('recommendScore')?.npsCategory();
if (category === 'promoter') return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (category === 'passive') return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
if (category === 'detractor') return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
return { padding: '16px' };
}
});
recommendSection.addRow(row => {
row.addRatingScale('recommendScore', {
label: 'How likely are you to recommend this instructor to other students?',
preset: 'nps',
showSegmentColors: true,
showCategoryLabel: true,
isRequired: true
});
});
recommendSection.addRow(row => {
row.addCheckbox('wouldTakeAgain', {
label: 'I would take another course with this instructor',
isVisible: () => {
const score = recommendSection.ratingScale('recommendScore')?.value();
return score !== null && score !== undefined;
}
});
});
// ============================================
// SECTION 7: Strengths & Improvements
// ============================================
const feedbackSection = form.addSubform('qualitativeFeedback', {
title: 'Detailed Feedback',
isVisible: () => recommendSection.ratingScale('recommendScore')?.value() !== null
});
feedbackSection.addSpacer();
feedbackSection.addRow(row => {
row.addTextarea('strengths', {
label: () => {
const score = recommendSection.ratingScale('recommendScore')?.value();
if (score !== null && score !== undefined && score >= 9) {
return 'What made this instructor excellent?';
}
return "What are this instructor's greatest strengths?";
},
placeholder: 'Share specific examples of what the instructor did well...',
rows: 3,
autoExpand: true
});
});
feedbackSection.addSpacer();
feedbackSection.addRow(row => {
row.addTextarea('improvements', {
label: () => {
const score = recommendSection.ratingScale('recommendScore')?.value();
if (score !== null && score !== undefined && score <= 6) {
return 'What specific changes would improve your experience?';
}
return 'What could this instructor improve?';
},
placeholder: 'Provide constructive suggestions for improvement...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 8: Additional Comments
// ============================================
const additionalSection = form.addSubform('additional', {
title: 'Additional Comments',
isVisible: () => recommendSection.ratingScale('recommendScore')?.value() !== null
});
additionalSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any other feedback for this instructor or course?',
placeholder: 'Share any other thoughts, suggestions, or observations...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 9: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Evaluation Summary',
isVisible: () => recommendSection.ratingScale('recommendScore')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const courseName = courseSection.textbox('courseName')?.value();
const instructorName = courseSection.textbox('instructorName')?.value();
const overall = overallSection.starRating('overallRating')?.value();
const recommend = recommendSection.ratingScale('recommendScore')?.value();
const category = recommendSection.ratingScale('recommendScore')?.npsCategory();
const wouldTakeAgain = recommendSection.checkbox('wouldTakeAgain')?.value();
if (!recommend) return '';
let summary = `Instructor Evaluation Summary\n`;
summary += `${'═'.repeat(30)}\n\n`;
if (courseName) summary += `Course: ${courseName}\n`;
if (instructorName) summary += `Instructor: ${instructorName}\n`;
if (overall) {
summary += `\nOverall Rating: ${'★'.repeat(overall)}${'☆'.repeat(5 - overall)}`;
}
summary += `\n\nRecommendation Score: ${recommend}/10`;
if (category) {
const label = category === 'promoter' ? ' (Highly Recommended)' :
category === 'passive' ? ' (Neutral)' : ' (Not Recommended)';
summary += label;
}
if (wouldTakeAgain !== null && wouldTakeAgain !== undefined) {
summary += `\n\nWould take again: ${wouldTakeAgain ? 'Yes' : 'No'}`;
}
return summary;
},
customStyles: () => {
const category = recommendSection.ratingScale('recommendScore')?.npsCategory();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (category === 'promoter') {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (category === 'passive') {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (category === 'detractor') {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f1f5f9' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Evaluation',
isVisible: () => recommendSection.ratingScale('recommendScore')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank you for your evaluation!',
message: 'Your feedback is valuable for improving teaching quality. All responses are confidential and will be shared with the instructor after grades are submitted.'
});
}