export function trainingFeedbackSurvey(form: FormTs) {
// Training Effectiveness Survey
// Demonstrates: Pages (multi-page), MatrixQuestion, StarRating, RatingScale, Slider, EmojiRating, dynamic labels
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Training Feedback Survey',
computedValue: () => 'Your feedback helps us improve our training programs and better support your development.',
customStyles: {
backgroundColor: '#7c3aed',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// TRAINING INFO
// ============================================
const infoSection = form.addSubform('infoSection', {
title: 'Training Information'
});
infoSection.addRow(row => {
row.addTextbox('trainingName', {
label: 'Training/Course Name',
placeholder: 'e.g., Leadership Fundamentals',
isRequired: true
}, '1fr');
row.addDatepicker('trainingDate', {
label: 'Training Date',
maxDate: () => new Date().toISOString()
}, '200px');
});
infoSection.addRow(row => {
row.addDropdown('trainingType', {
label: 'Training Format',
options: [
{ id: 'in-person', name: 'In-Person Classroom' },
{ id: 'virtual-live', name: 'Virtual Live (Webinar)' },
{ id: 'elearning', name: 'E-Learning (Self-Paced)' },
{ id: 'hybrid', name: 'Hybrid (Mix of formats)' },
{ id: 'on-the-job', name: 'On-the-Job Training' }
],
placeholder: 'Select format...'
}, '1fr');
row.addSlider('duration', {
label: 'Duration (hours)',
min: 1,
max: 40,
step: 1,
defaultValue: 4,
showValue: true,
unit: 'hrs'
}, '1fr');
});
// ============================================
// MULTI-PAGE SURVEY
// ============================================
const pages = form.addPages('surveyPages');
// ============================================
// PAGE 1: Overall Experience
// ============================================
const page1 = pages.addPage('overallExperience');
page1.addRow(row => {
row.addTextPanel('page1Title', {
label: 'Step 1 of 4: Overall Experience',
customStyles: {
fontSize: '18px',
fontWeight: 'bold',
color: '#7c3aed',
marginBottom: '8px'
}
});
});
const overallSection = page1.addSubform('overallSection', {
title: 'Rate Your Experience'
});
overallSection.addRow(row => {
row.addStarRating('overallRating', {
label: 'Overall training quality',
maxStars: 5,
size: 'lg',
alignment: 'center',
showConfettiOnMax: true
});
});
overallSection.addRow(row => {
row.addEmojiRating('difficultyLevel', {
label: 'How was the difficulty level?',
preset: 'custom',
emojis: [
{ id: 'too-easy', emoji: '😴', label: 'Too Easy' },
{ id: 'slightly-easy', emoji: '😌', label: 'Slightly Easy' },
{ id: 'just-right', emoji: '👍', label: 'Just Right' },
{ id: 'slightly-hard', emoji: '🤔', label: 'Slightly Hard' },
{ id: 'too-hard', emoji: '😵', label: 'Too Hard' }
],
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
overallSection.addRow(row => {
row.addRatingScale('npsTraining', {
label: 'How likely are you to recommend this training to colleagues?',
preset: 'nps',
showCategoryLabel: true,
showSegmentColors: true,
size: 'md'
});
});
// ============================================
// PAGE 2: Content & Materials
// ============================================
const page2 = pages.addPage('contentMaterials');
page2.addRow(row => {
row.addTextPanel('page2Title', {
label: 'Step 2 of 4: Content & Materials',
customStyles: {
fontSize: '18px',
fontWeight: 'bold',
color: '#7c3aed',
marginBottom: '8px'
}
});
});
const contentSection = page2.addSubform('contentSection', {
title: 'Evaluate Training Content'
});
contentSection.addRow(row => {
row.addMatrixQuestion('contentMatrix', {
label: 'Please rate the following aspects of the training content:',
rows: [
{ id: 'relevance', label: 'Content relevance to my job', isRequired: true },
{ id: 'clarity', label: 'Clarity of explanations' },
{ id: 'depth', label: 'Depth of coverage' },
{ id: 'examples', label: 'Quality of examples' },
{ id: 'materials', label: 'Supporting materials (handouts, slides)' },
{ id: 'exercises', label: 'Practical exercises' }
],
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
});
});
contentSection.addSpacer({ height: '16px' });
contentSection.addRow(row => {
row.addCheckboxList('topicsNeeded', {
label: 'Which topics would you like more coverage on?',
options: [
{ id: 'basics', name: 'Foundational concepts' },
{ id: 'advanced', name: 'Advanced techniques' },
{ id: 'practical', name: 'Real-world applications' },
{ id: 'tools', name: 'Tools and software' },
{ id: 'case-studies', name: 'Case studies' },
{ id: 'best-practices', name: 'Industry best practices' }
],
orientation: 'vertical'
}, '1fr');
row.addCheckboxList('topicsToRemove', {
label: 'Which topics were least useful?',
options: [
{ id: 'intro', name: 'Introduction/overview' },
{ id: 'theory', name: 'Theoretical content' },
{ id: 'history', name: 'Historical context' },
{ id: 'repetitive', name: 'Repetitive material' },
{ id: 'off-topic', name: 'Off-topic discussions' }
],
orientation: 'vertical'
}, '1fr');
});
// ============================================
// PAGE 3: Trainer Evaluation
// ============================================
const page3 = pages.addPage('trainerEvaluation');
page3.addRow(row => {
row.addTextPanel('page3Title', {
label: 'Step 3 of 4: Trainer Evaluation',
customStyles: {
fontSize: '18px',
fontWeight: 'bold',
color: '#7c3aed',
marginBottom: '8px'
}
});
});
const trainerSection = page3.addSubform('trainerSection', {
title: 'Rate the Trainer/Facilitator'
});
trainerSection.addRow(row => {
row.addTextbox('trainerName', {
label: 'Trainer Name (optional)',
placeholder: 'Enter trainer name if known'
});
});
trainerSection.addRow(row => {
row.addMatrixQuestion('trainerMatrix', {
label: 'Please rate the trainer on the following:',
rows: [
{ id: 'knowledge', label: 'Subject matter expertise', isRequired: true },
{ id: 'presentation', label: 'Presentation skills' },
{ id: 'engagement', label: 'Keeping participants engaged' },
{ id: 'pace', label: 'Pacing of the session' },
{ id: 'questions', label: 'Handling questions' },
{ id: 'approachable', label: 'Approachability' }
],
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
});
});
trainerSection.addSpacer({ height: '16px' });
trainerSection.addRow(row => {
row.addStarRating('trainerOverall', {
label: 'Overall trainer rating',
maxStars: 5,
size: 'lg',
alignment: 'center'
});
});
// ============================================
// PAGE 4: Skills & Impact
// ============================================
const page4 = pages.addPage('skillsImpact');
page4.addRow(row => {
row.addTextPanel('page4Title', {
label: 'Step 4 of 4: Skills & Impact',
customStyles: {
fontSize: '18px',
fontWeight: 'bold',
color: '#7c3aed',
marginBottom: '8px'
}
});
});
const skillsSection = page4.addSubform('skillsSection', {
title: 'Skill Development Assessment'
});
skillsSection.addRow(row => {
row.addTextPanel('skillsIntro', {
computedValue: () => 'Rate your confidence level BEFORE and AFTER the training:',
customStyles: { fontStyle: 'italic', color: '#6b7280' }
});
});
skillsSection.addRow(row => {
row.addMatrixQuestion('skillsMatrix', {
label: 'Skill Confidence (1=Low, 5=High)',
rows: [
{ id: 'before-core', label: 'Core concepts (BEFORE)' },
{ id: 'after-core', label: 'Core concepts (AFTER)', isRequired: true },
{ id: 'before-apply', label: 'Ability to apply (BEFORE)' },
{ id: 'after-apply', label: 'Ability to apply (AFTER)' },
{ id: 'before-teach', label: 'Could teach others (BEFORE)' },
{ id: 'after-teach', label: 'Could teach others (AFTER)' }
],
columns: [
{ id: '1', label: '1' },
{ id: '2', label: '2' },
{ id: '3', label: '3' },
{ id: '4', label: '4' },
{ id: '5', label: '5' }
],
striped: true,
fullWidth: true
});
});
const impactSection = page4.addSubform('impactSection', {
title: 'Expected Impact'
});
impactSection.addRow(row => {
row.addRatingScale('applicationIntent', {
label: 'How likely are you to apply what you learned?',
preset: 'likert-5',
lowLabel: 'Very Unlikely',
highLabel: 'Very Likely'
});
});
impactSection.addRow(row => {
row.addSlider('timeToApply', {
label: 'When do you expect to use these skills?',
min: 0,
max: 12,
step: 1,
defaultValue: 2,
showValue: true,
unit: 'weeks'
});
});
impactSection.addSpacer({ height: '16px' });
impactSection.addRow(row => {
row.addTextarea('applicationPlan', {
label: 'Describe how you plan to apply what you learned',
placeholder: 'I will use these skills to...',
rows: 3,
autoExpand: true
});
});
// ============================================
// ADDITIONAL FEEDBACK (after pages)
// ============================================
const feedbackSection = form.addSubform('feedbackSection', {
title: 'Additional Feedback'
});
feedbackSection.addRow(row => {
row.addTextarea('whatWorked', {
label: 'What worked well in this training?',
placeholder: 'Share what you found most valuable...',
rows: 3
}, '1fr');
row.addTextarea('improvements', {
label: 'What could be improved?',
placeholder: 'Your suggestions help us enhance future sessions...',
rows: 3
}, '1fr');
});
feedbackSection.addRow(row => {
row.addCheckbox('followUp', {
label: 'I would like follow-up materials or advanced training on this topic'
});
});
// ============================================
// SUMMARY
// ============================================
const summarySection = form.addSubform('summarySection', {
title: 'Feedback Summary',
isVisible: () => overallSection.starRating('overallRating')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const overall = overallSection.starRating('overallRating')?.value();
const difficulty = overallSection.emojiRating('difficultyLevel')?.value();
const nps = overallSection.ratingScale('npsTraining')?.value();
const trainerRating = trainerSection.starRating('trainerOverall')?.value();
const applicationIntent = impactSection.ratingScale('applicationIntent')?.value();
const trainingName = infoSection.textbox('trainingName')?.value();
if (!overall) return '';
let summary = `Training Feedback Summary\n`;
summary += `${'='.repeat(28)}\n\n`;
if (trainingName) {
summary += `Training: ${trainingName}\n\n`;
}
summary += `Overall Rating: ${'*'.repeat(overall)}${'*'.repeat(5 - overall)} (${overall}/5)\n`;
if (difficulty) {
const difficultyLabels: Record<string, string> = {
'too-easy': 'Too Easy',
'slightly-easy': 'Slightly Easy',
'just-right': 'Just Right',
'slightly-hard': 'Slightly Hard',
'too-hard': 'Too Hard'
};
summary += `Difficulty: ${difficultyLabels[difficulty] || difficulty}\n`;
}
if (nps !== null && nps !== undefined) {
summary += `NPS Score: ${nps}/10\n`;
}
if (trainerRating) {
summary += `Trainer Rating: ${trainerRating}/5\n`;
}
if (applicationIntent) {
summary += `Will Apply Learning: ${applicationIntent}/5\n`;
}
const needsFollowUp = feedbackSection.checkbox('followUp')?.value();
if (needsFollowUp) {
summary += `\nRequested follow-up materials`;
}
return summary;
},
customStyles: () => {
const overall = overallSection.starRating('overallRating')?.value() || 0;
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (overall >= 4) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (overall >= 3) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
}
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Training Feedback'
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your input is invaluable for improving our training programs. We are committed to supporting your professional development.'
});
}