export function examFeedbackForm(form: FormTs) {
// Exam Experience Feedback Form
// Demonstrates: MatrixQuestion, RatingScale, StarRating, EmojiRating, Slider, conditional visibility
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Exam Feedback Survey',
computedValue: () => 'Help us improve future exams by sharing your experience. Your responses are anonymous.',
customStyles: {
backgroundColor: '#7c3aed',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Overall Experience
// ============================================
const overallSection = form.addSubform('overallSection', {
title: 'Overall Exam Experience'
});
overallSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'How would you rate your overall exam experience?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addEmojiRating('stressLevel', {
label: 'How stressed did you feel during the exam?',
preset: 'custom',
emojis: [
{ id: 'very-calm', emoji: '😌', label: 'Very Calm' },
{ id: 'calm', emoji: '🙂', label: 'Calm' },
{ id: 'moderate', emoji: '😐', label: 'Moderate' },
{ id: 'stressed', emoji: '😰', label: 'Stressed' },
{ id: 'very-stressed', emoji: '😫', label: 'Very Stressed' }
],
size: 'lg',
alignment: 'center'
});
});
// ============================================
// SECTION 2: Fairness Assessment (Matrix)
// ============================================
const fairnessSection = form.addSubform('fairnessSection', {
title: 'Exam Fairness Assessment',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
fairnessSection.addRow(row => {
row.addMatrixQuestion('fairnessMatrix', {
label: 'Please rate the following aspects of the exam:',
rows: [
{ id: 'clarity', label: 'Question clarity', description: 'Were questions easy to understand?' },
{ id: 'coverage', label: 'Material coverage', description: 'Did it cover what was taught?' },
{ id: 'difficulty', label: 'Difficulty level', description: 'Was difficulty appropriate?' },
{ id: 'time', label: 'Time allocation', description: 'Was there enough time?' },
{ id: 'format', label: 'Question format', description: 'Were question types fair?' }
],
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 3: Time & Preparation
// ============================================
const prepSection = form.addSubform('prepSection', {
title: 'Preparation & Time Management',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
prepSection.addRow(row => {
row.addSlider('studyHours', {
label: 'How many hours did you spend preparing for this exam?',
min: 0,
max: 50,
step: 1,
showValue: true,
unit: 'hours',
defaultValue: 10
}, '1fr');
row.addSlider('timeNeeded', {
label: 'How much more time would you have needed? (in minutes)',
min: 0,
max: 60,
step: 5,
showValue: true,
unit: 'min',
defaultValue: 0
}, '1fr');
});
prepSection.addRow(row => {
row.addRatingScale('preparedness', {
label: 'How prepared did you feel going into the exam?',
preset: 'likert-5',
lowLabel: 'Not prepared at all',
highLabel: 'Extremely prepared',
alignment: 'center'
});
});
// ============================================
// SECTION 4: Difficulty Breakdown
// ============================================
const difficultySection = form.addSubform('difficultySection', {
title: 'Difficulty Analysis',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
difficultySection.addRow(row => {
row.addRadioButton('overallDifficulty', {
label: 'Overall, how would you describe the exam difficulty?',
options: [
{ id: 'too-easy', name: 'Too Easy - Did not challenge my knowledge' },
{ id: 'somewhat-easy', name: 'Somewhat Easy - Could have been harder' },
{ id: 'just-right', name: 'Just Right - Appropriate challenge level' },
{ id: 'somewhat-hard', name: 'Somewhat Hard - Challenging but manageable' },
{ id: 'too-hard', name: 'Too Hard - Unreasonably difficult' }
],
orientation: 'vertical'
});
});
difficultySection.addSpacer();
difficultySection.addRow(row => {
row.addCheckboxList('challengingAreas', {
label: 'Which topics or sections were most challenging? (Select all that apply)',
options: [
{ id: 'concepts', name: 'Conceptual understanding questions' },
{ id: 'calculations', name: 'Calculations or problem-solving' },
{ id: 'memorization', name: 'Memorization-heavy questions' },
{ id: 'application', name: 'Real-world application questions' },
{ id: 'essay', name: 'Essay or long-form answers' },
{ id: 'multiple-choice', name: 'Tricky multiple choice options' },
{ id: 'time-pressure', name: 'Time pressure on certain sections' }
],
orientation: 'vertical'
});
});
// ============================================
// SECTION 5: Conditional Feedback (Low Score)
// ============================================
const lowScoreSection = form.addSubform('lowScoreSection', {
title: 'Help Us Understand Your Experience',
isVisible: () => {
const rating = overallSection.starRating('overallRating')?.value();
return rating !== null && rating !== undefined && rating <= 2;
},
customStyles: {
backgroundColor: '#fef3c7',
padding: '16px',
borderRadius: '8px',
borderLeft: '4px solid #f59e0b'
}
});
lowScoreSection.addRow(row => {
row.addTextPanel('lowScoreMessage', {
computedValue: () => "We're sorry to hear the exam didn't go well. Your detailed feedback will help us improve.",
customStyles: {
fontStyle: 'italic',
color: '#92400e',
marginBottom: '12px'
}
});
});
lowScoreSection.addRow(row => {
row.addCheckboxList('specificIssues', {
label: 'What specific issues did you encounter?',
options: [
{ id: 'unclear-questions', name: 'Questions were unclear or ambiguous' },
{ id: 'not-covered', name: 'Material was not covered in class' },
{ id: 'no-time', name: 'Not enough time to complete' },
{ id: 'too-detailed', name: 'Required too much detail/memorization' },
{ id: 'study-mismatch', name: 'Study guide didn\'t match exam content' },
{ id: 'format-unfamiliar', name: 'Unfamiliar question formats' },
{ id: 'technical-issues', name: 'Technical issues (if online exam)' }
],
orientation: 'vertical'
});
});
lowScoreSection.addSpacer();
lowScoreSection.addRow(row => {
row.addTextarea('improvementSuggestions', {
label: 'What specific changes would have made this exam better?',
placeholder: 'Please share your suggestions...',
rows: 4,
autoExpand: true
});
});
// ============================================
// SECTION 6: Conditional Feedback (High Score)
// ============================================
const highScoreSection = form.addSubform('highScoreSection', {
title: 'What Worked Well',
isVisible: () => {
const rating = overallSection.starRating('overallRating')?.value();
return rating !== null && rating !== undefined && rating >= 4;
},
customStyles: {
backgroundColor: '#d1fae5',
padding: '16px',
borderRadius: '8px',
borderLeft: '4px solid #10b981'
}
});
highScoreSection.addRow(row => {
row.addSuggestionChips('whatWorked', {
label: 'What aspects of the exam worked well? (Select up to 4)',
suggestions: [
{ id: 'clear', name: 'Clear questions' },
{ id: 'fair', name: 'Fair difficulty' },
{ id: 'aligned', name: 'Aligned with course' },
{ id: 'time', name: 'Good time allocation' },
{ id: 'format', name: 'Good format' },
{ id: 'variety', name: 'Question variety' },
{ id: 'relevant', name: 'Practical relevance' }
],
max: 4,
alignment: 'left'
});
});
// ============================================
// SECTION 7: Would Recommend
// ============================================
const recommendSection = form.addSubform('recommendSection', {
title: 'Final Thoughts',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
recommendSection.addRow(row => {
row.addThumbRating('wouldRecommend', {
label: 'Would you recommend this exam format to future students?',
showLabels: true,
upLabel: 'Yes, good format',
downLabel: 'No, needs changes',
size: 'lg',
alignment: 'center'
});
});
recommendSection.addSpacer();
recommendSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any additional comments or suggestions?',
placeholder: 'Share any other thoughts about the exam...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Your Feedback Summary',
isVisible: () => {
const rating = overallSection.starRating('overallRating')?.value();
const stress = overallSection.emojiRating('stressLevel')?.value();
return rating !== null && stress !== null;
}
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const rating = overallSection.starRating('overallRating')?.value();
const stress = overallSection.emojiRating('stressLevel')?.value();
const difficulty = difficultySection.radioButton('overallDifficulty')?.value();
const preparedness = prepSection.ratingScale('preparedness')?.value();
const studyHours = prepSection.slider('studyHours')?.value();
if (!rating) return '';
const stressLabels: Record<string, string> = {
'very-calm': 'Very Calm',
'calm': 'Calm',
'moderate': 'Moderate',
'stressed': 'Stressed',
'very-stressed': 'Very Stressed'
};
const difficultyLabels: Record<string, string> = {
'too-easy': 'Too Easy',
'somewhat-easy': 'Somewhat Easy',
'just-right': 'Just Right',
'somewhat-hard': 'Somewhat Hard',
'too-hard': 'Too Hard'
};
let emoji = rating >= 4 ? '🎓' : rating >= 3 ? '📚' : '📝';
let summary = `${emoji} Exam Feedback Summary\n`;
summary += `${'═'.repeat(28)}\n\n`;
summary += `⭐ Overall Rating: ${rating}/5 stars\n`;
if (stress) summary += `😰 Stress Level: ${stressLabels[stress] || stress}\n`;
if (difficulty) summary += `📊 Difficulty: ${difficultyLabels[difficulty] || difficulty}\n`;
if (preparedness) summary += `📖 Preparedness: ${preparedness}/5\n`;
if (studyHours) summary += `⏱️ Study Time: ${studyHours} hours\n`;
return summary;
},
customStyles: () => {
const rating = overallSection.starRating('overallRating')?.value() ?? 0;
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (rating >= 4) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (rating >= 3) {
return { ...baseStyles, backgroundColor: '#e0e7ff', borderLeft: '4px solid #6366f1' };
} else {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
}
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Exam Feedback',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your insights help us create better exams. We review all feedback to improve the assessment experience for future students.'
});
}