export function lmsUsability(form: FormTs) {
// LMS Platform Usability Survey - Evaluating learning management system experience
// Demonstrates: MatrixQuestion, StarRating, RatingScale (CES), Slider, CheckboxList
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'LMS Platform Feedback',
computedValue: () => 'Help us improve your learning experience!',
customStyles: {
background: 'linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%)',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: User Context
// ============================================
const contextSection = form.addSubform('context', {
title: 'About You'
});
contextSection.addRow(row => {
row.addRadioButton('userRole', {
label: 'What is your primary role?',
options: [
{ id: 'student', name: 'Student' },
{ id: 'instructor', name: 'Instructor/Teacher' },
{ id: 'ta', name: 'Teaching Assistant' },
{ id: 'admin', name: 'Administrator' }
],
orientation: 'horizontal',
isRequired: true
});
});
contextSection.addRow(row => {
row.addDropdown('frequency', {
label: 'How often do you use the LMS?',
options: [
{ id: 'daily', name: 'Daily' },
{ id: 'several-week', name: 'Several times a week' },
{ id: 'weekly', name: 'Weekly' },
{ id: 'occasionally', name: 'Occasionally' },
{ id: 'first-time', name: 'This is my first time' }
],
isRequired: true
}, '1fr');
row.addDropdown('experience', {
label: 'How long have you been using this LMS?',
options: [
{ id: 'new', name: 'Less than 1 month' },
{ id: 'semester', name: '1-6 months' },
{ id: 'year', name: '6-12 months' },
{ id: 'years', name: '1+ years' }
]
}, '1fr');
});
contextSection.addRow(row => {
row.addCheckboxList('devices', {
label: 'Which devices do you use to access the LMS?',
options: [
{ id: 'desktop', name: 'Desktop/Laptop' },
{ id: 'tablet', name: 'Tablet' },
{ id: 'phone', name: 'Smartphone' }
],
orientation: 'horizontal'
});
});
// ============================================
// SECTION 2: Navigation & Ease of Use
// ============================================
const navigationSection = form.addSubform('navigation', {
title: 'Navigation & Ease of Use',
isVisible: () => !!contextSection.radioButton('userRole')?.value()
});
navigationSection.addRow(row => {
row.addMatrixQuestion('navigationMatrix', {
label: 'Rate your experience with navigation:',
rows: [
{ id: 'find-course', label: 'Finding my courses', isRequired: true },
{ id: 'find-content', label: 'Finding course content', isRequired: true },
{ id: 'find-assignments', label: 'Finding assignments & deadlines', isRequired: true },
{ id: 'find-grades', label: 'Viewing grades & feedback', isRequired: true },
{ id: 'menu-structure', label: 'Menu structure & organization', isRequired: true }
],
columns: [
{ id: '1', label: 'Very Difficult' },
{ id: '2', label: 'Difficult' },
{ id: '3', label: 'Neutral' },
{ id: '4', label: 'Easy' },
{ id: '5', label: 'Very Easy' }
],
fullWidth: true
});
});
navigationSection.addRow(row => {
row.addRatingScale('overallEase', {
label: 'Overall, how easy is it to use the LMS?',
preset: 'ces',
alignment: 'center'
});
});
// ============================================
// SECTION 3: Core Features
// ============================================
const featuresSection = form.addSubform('features', {
title: 'Core Features',
isVisible: () => !!navigationSection.ratingScale('overallEase')?.value()
});
featuresSection.addRow(row => {
row.addMatrixQuestion('featureRatings', {
label: 'Rate these LMS features:',
rows: [
{ id: 'content-player', label: 'Video/Content Player' },
{ id: 'assignment-submit', label: 'Assignment Submission' },
{ id: 'quiz-taking', label: 'Quiz/Test Taking' },
{ id: 'discussions', label: 'Discussion Forums' },
{ id: 'notifications', label: 'Notifications & Alerts' },
{ id: 'calendar', label: 'Calendar & Scheduling' },
{ id: 'search', label: 'Search Function' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' },
{ id: 'na', label: 'N/A' }
],
fullWidth: true
});
});
// Instructor-specific features
featuresSection.addRow(row => {
row.addMatrixQuestion('instructorFeatures', {
label: 'Rate these instructor tools:',
rows: [
{ id: 'gradebook', label: 'Gradebook' },
{ id: 'rubrics', label: 'Rubrics & Grading Tools' },
{ id: 'analytics', label: 'Student Analytics' },
{ id: 'content-creation', label: 'Content Creation Tools' },
{ id: 'communication', label: 'Student Communication' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'fair', label: 'Fair' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' },
{ id: 'na', label: 'N/A' }
],
fullWidth: true,
isVisible: () => {
const role = contextSection.radioButton('userRole')?.value();
return role === 'instructor' || role === 'ta' || role === 'admin';
}
});
});
// ============================================
// SECTION 4: Mobile Experience
// ============================================
const mobileSection = form.addSubform('mobile', {
title: 'Mobile Experience',
isVisible: () => {
const devices = contextSection.checkboxList('devices')?.value() || [];
return devices.includes('phone') || devices.includes('tablet');
}
});
mobileSection.addRow(row => {
row.addStarRating('mobileOverall', {
label: 'How would you rate the mobile experience?',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
mobileSection.addRow(row => {
row.addCheckboxList('mobileIssues', {
label: 'Have you experienced any mobile issues?',
options: [
{ id: 'layout', name: 'Layout/display issues' },
{ id: 'navigation', name: 'Difficult navigation' },
{ id: 'loading', name: 'Slow loading' },
{ id: 'features', name: 'Missing features' },
{ id: 'video', name: 'Video playback issues' },
{ id: 'submission', name: 'Cannot submit assignments' },
{ id: 'none', name: 'No issues' }
]
});
});
// ============================================
// SECTION 5: Technical Performance
// ============================================
const technicalSection = form.addSubform('technical', {
title: 'Technical Performance',
isVisible: () => !!featuresSection.matrixQuestion('featureRatings')?.value()
});
technicalSection.addRow(row => {
row.addStarRating('speed', {
label: 'Page loading speed',
maxStars: 5,
alignment: 'center'
}, '1fr');
row.addStarRating('reliability', {
label: 'System reliability (uptime)',
maxStars: 5,
alignment: 'center'
}, '1fr');
});
technicalSection.addRow(row => {
row.addSlider('issueFrequency', {
label: 'How often do you encounter technical issues?',
min: 0,
max: 100,
step: 10,
unit: '%',
defaultValue: 20
});
});
technicalSection.addRow(row => {
row.addTextPanel('issueLabel', {
computedValue: () => {
const freq = technicalSection.slider('issueFrequency')?.value();
if (freq === null || freq === undefined) return '';
if (freq <= 10) return '✅ Rarely experience issues';
if (freq <= 30) return '⚡ Occasional issues';
if (freq <= 50) return '⚠️ Frequent issues';
return '🚨 Very frequent issues';
},
customStyles: () => {
const freq = technicalSection.slider('issueFrequency')?.value();
if (freq === null || freq === undefined) return { display: 'none' };
return {
textAlign: 'center',
padding: '8px',
borderRadius: '6px',
backgroundColor: freq <= 10 ? '#d1fae5' :
freq <= 30 ? '#e0f2fe' :
freq <= 50 ? '#fef3c7' : '#fee2e2'
};
}
});
});
// ============================================
// SECTION 6: Accessibility & Support
// ============================================
const accessibilitySection = form.addSubform('accessibility', {
title: 'Accessibility & Support',
isVisible: () => !!technicalSection.starRating('speed')?.value()
});
accessibilitySection.addRow(row => {
row.addThumbRating('accessibilityNeed', {
label: 'Do you use any accessibility features?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
alignment: 'center'
});
});
accessibilitySection.addRow(row => {
row.addMatrixQuestion('accessibilityFeatures', {
label: 'Rate accessibility features:',
rows: [
{ id: 'screen-reader', label: 'Screen reader compatibility' },
{ id: 'captions', label: 'Video captions' },
{ id: 'font-size', label: 'Text size adjustments' },
{ id: 'keyboard', label: 'Keyboard navigation' },
{ id: 'contrast', label: 'Color contrast' }
],
columns: [
{ id: 'poor', label: 'Poor' },
{ id: 'adequate', label: 'Adequate' },
{ id: 'good', label: 'Good' },
{ id: 'na', label: 'Don\'t Use' }
],
fullWidth: true,
isVisible: () => accessibilitySection.thumbRating('accessibilityNeed')?.value() === 'up'
});
});
accessibilitySection.addRow(row => {
row.addStarRating('helpSupport', {
label: 'How would you rate the help & support resources?',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
// ============================================
// SECTION 7: Overall Satisfaction
// ============================================
const overallSection = form.addSubform('overall', {
title: 'Overall Assessment',
isVisible: () => !!accessibilitySection.starRating('helpSupport')?.value()
});
overallSection.addRow(row => {
row.addRatingScale('nps', {
label: 'How likely are you to recommend this LMS to others?',
preset: 'nps',
showSegmentColors: true,
showCategoryLabel: true,
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addSuggestionChips('bestAspects', {
label: 'What do you like BEST about the LMS?',
suggestions: [
{ id: 'organization', name: 'Content organization' },
{ id: 'communication', name: 'Communication tools' },
{ id: 'grading', name: 'Grading system' },
{ id: 'mobile', name: 'Mobile access' },
{ id: 'integrations', name: 'Third-party integrations' },
{ id: 'analytics', name: 'Progress tracking' }
],
max: 3,
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addSuggestionChips('worstAspects', {
label: 'What needs the MOST improvement?',
suggestions: [
{ id: 'navigation', name: 'Navigation' },
{ id: 'speed', name: 'Performance/Speed' },
{ id: 'mobile', name: 'Mobile experience' },
{ id: 'features', name: 'Missing features' },
{ id: 'design', name: 'Visual design' },
{ id: 'support', name: 'Help/Support' }
],
max: 3,
alignment: 'center'
});
});
overallSection.addSpacer();
overallSection.addRow(row => {
row.addTextarea('suggestions', {
label: 'What specific improvements would you suggest?',
placeholder: 'Share your ideas for making the LMS better...',
rows: 4
});
});
// ============================================
// SECTION 8: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Your Feedback Summary',
isVisible: () => overallSection.ratingScale('nps')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const role = contextSection.radioButton('userRole')?.value();
const overallEase = navigationSection.ratingScale('overallEase')?.value();
const speed = technicalSection.starRating('speed')?.value();
const reliability = technicalSection.starRating('reliability')?.value();
const nps = overallSection.ratingScale('nps')?.value();
const bestAspects = overallSection.suggestionChips('bestAspects')?.value() || [];
const worstAspects = overallSection.suggestionChips('worstAspects')?.value() || [];
if (!role) return '';
const roleLabels: Record<string, string> = {
'student': 'Student',
'instructor': 'Instructor',
'ta': 'Teaching Assistant',
'admin': 'Administrator'
};
let summary = '📚 LMS Usability Summary\n';
summary += '═'.repeat(28) + '\n\n';
summary += `Role: ${roleLabels[role] || role}\n`;
if (overallEase) {
const easeLabel = overallEase >= 6 ? 'Easy' : overallEase >= 4 ? 'Moderate' : 'Difficult';
summary += `Ease of Use: ${overallEase}/7 (${easeLabel})\n`;
}
if (speed || reliability) {
summary += '\nTechnical:\n';
if (speed) summary += ` Speed: ${'⭐'.repeat(speed)}\n`;
if (reliability) summary += ` Reliability: ${'⭐'.repeat(reliability)}\n`;
}
if (bestAspects.length > 0) {
summary += `\n✨ Best: ${bestAspects.length} aspects noted`;
}
if (worstAspects.length > 0) {
summary += `\n⚠️ Needs work: ${worstAspects.length} areas identified`;
}
if (nps !== null && nps !== undefined) {
const category = nps >= 9 ? 'Promoter' : nps >= 7 ? 'Passive' : 'Detractor';
summary += `\n\n📊 NPS Score: ${nps}/10 (${category})`;
}
return summary;
},
customStyles: () => {
const nps = overallSection.ratingScale('nps')?.value();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (nps !== null && nps !== undefined) {
if (nps >= 9) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (nps >= 7) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
}
return { ...baseStyles, backgroundColor: '#f1f5f9', borderLeft: '4px solid #64748b' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Feedback',
isVisible: () => overallSection.ratingScale('nps')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your input helps us improve the learning experience for everyone. We review all feedback and use it to prioritize platform improvements.'
});
}