export function creativeTypeQuiz(form: FormTs) {
form.setTitle(() => '🎨 What\'s Your Creative Type?');
// ============ SCORING SYSTEM ============
const scores = form.state<Record<string, number>>({});
const updateScore = (category: string, points: number) => {
scores.update(current => ({ ...current, [category]: (current[category] || 0) + points }));
};
type CreativeType = 'visionary' | 'craftsman' | 'innovator' | 'storyteller' | 'curator';
const getTopCreativeType = (): CreativeType => {
const s = scores();
const types: CreativeType[] = ['visionary', 'craftsman', 'innovator', 'storyteller', 'curator'];
let topType: CreativeType = 'visionary';
let maxScore = 0;
for (const t of types) {
if ((s[t] || 0) > maxScore) {
maxScore = s[t] || 0;
topType = t;
}
}
return topType;
};
const getTypeLabel = (type: CreativeType) => {
const labels = {
visionary: '🔮 The Visionary',
craftsman: '🔧 The Craftsman',
innovator: '💡 The Innovator',
storyteller: '📖 The Storyteller',
curator: '🎭 The Curator'
};
return labels[type];
};
const getTypeDescription = (type: CreativeType) => {
const descriptions = {
visionary: 'You see the big picture before anyone else. Your creativity lies in conceptualizing bold ideas and inspiring others to bring them to life. Best roles: Creative Director, Brand Strategist, UX Architect, Design Lead.',
craftsman: 'You find joy in mastering your tools and perfecting every detail. Your creativity shines through technical excellence and refined execution. Best roles: Senior Designer, Illustrator, Motion Artist, Production Designer.',
innovator: 'You thrive on pushing boundaries and finding unconventional solutions. Your creativity is about breaking rules and exploring uncharted territory. Best roles: Product Designer, R&D Creative, Experimental Designer, Design Technologist.',
storyteller: 'You connect with people through narrative and emotion. Your creativity transforms ideas into compelling experiences that resonate. Best roles: Content Designer, UX Writer, Brand Storyteller, Video Producer.',
curator: 'You have an exceptional eye for quality and harmony. Your creativity lies in assembling, refining, and elevating existing elements into cohesive wholes. Best roles: Art Director, Design Systems Lead, Editorial Designer, Creative Producer.'
};
return descriptions[type];
};
const getTypeColor = (type: CreativeType) => {
const colors = {
visionary: '#7c3aed',
craftsman: '#0891b2',
innovator: '#ea580c',
storyteller: '#be185d',
curator: '#059669'
};
return colors[type];
};
const getTypeStrengths = (type: CreativeType) => {
const strengths = {
visionary: ['Big-picture thinking', 'Inspiring teams', 'Strategic creativity', 'Trend forecasting'],
craftsman: ['Attention to detail', 'Technical mastery', 'Consistency', 'Quality control'],
innovator: ['Experimentation', 'Problem-solving', 'Challenging norms', 'Cross-disciplinary thinking'],
storyteller: ['Emotional intelligence', 'Communication', 'Audience empathy', 'Narrative structure'],
curator: ['Aesthetic judgment', 'Pattern recognition', 'Synthesis', 'Taste & refinement']
};
return strengths[type];
};
// ============ COMPLETION SCREEN ============
form.configureCompletionScreen({
type: 'text',
title: () => `You are ${getTypeLabel(getTopCreativeType())}`,
message: () => getTypeDescription(getTopCreativeType())
});
// ============ PAGES SETUP ============
const pages = form.addPages('quiz-pages', { heightMode: 'current-page' });
// ============ PAGE 1: Creative Process ============
const page1 = pages.addPage('creative-process', { mobileBreakpoint: 500 });
page1.addRow(row => {
row.addTextPanel('header1', {
label: 'Step 1 of 5: Your Creative Process',
computedValue: () => 'How do you approach creative work?',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page1.addSpacer({ height: '24px' });
page1.addRow(row => {
row.addRadioButton('startProject', {
label: 'When starting a new project, you typically:',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'vision', name: '🔮 Start with a bold vision of the end result' },
{ id: 'research', name: '🔬 Dive deep into research and references' },
{ id: 'experiment', name: '🧪 Jump in and experiment immediately' },
{ id: 'story', name: '📝 Think about the story you want to tell' },
{ id: 'gather', name: '📦 Gather existing assets and inspiration' }
],
onValueChange: (val) => {
if (val === 'vision') updateScore('visionary', 4);
if (val === 'research') updateScore('craftsman', 4);
if (val === 'experiment') updateScore('innovator', 4);
if (val === 'story') updateScore('storyteller', 4);
if (val === 'gather') updateScore('curator', 4);
}
});
});
page1.addRow(row => {
row.addRadioButton('creativeBlock', {
label: 'When you hit a creative block, you:',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'step-back', name: '🌄 Step back and revisit the big picture' },
{ id: 'refine', name: '🔍 Focus on perfecting what you have' },
{ id: 'break-rules', name: '💥 Try something completely different' },
{ id: 'connect', name: '💬 Talk to others about the challenge' },
{ id: 'browse', name: '🖼️ Browse more references and examples' }
],
onValueChange: (val) => {
if (val === 'step-back') updateScore('visionary', 3);
if (val === 'refine') updateScore('craftsman', 3);
if (val === 'break-rules') updateScore('innovator', 3);
if (val === 'connect') updateScore('storyteller', 3);
if (val === 'browse') updateScore('curator', 3);
}
});
});
// ============ PAGE 2: Work Style ============
const page2 = pages.addPage('work-style', { mobileBreakpoint: 500 });
page2.addRow(row => {
row.addTextPanel('header2', {
label: 'Step 2 of 5: Work Style',
computedValue: () => 'What\'s your ideal creative environment?',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page2.addSpacer({ height: '24px' });
page2.addRow(row => {
row.addMatrixQuestion('workPreferences', {
label: 'Rate how much you enjoy these aspects of creative work:',
isRequired: true,
rows: [
{ id: 'leading', label: 'Leading creative direction', description: 'Setting vision and strategy' },
{ id: 'executing', label: 'Hands-on execution', description: 'Detailed production work' },
{ id: 'experimenting', label: 'Exploring new techniques', description: 'Pushing boundaries' },
{ id: 'presenting', label: 'Presenting and pitching', description: 'Communicating ideas' }
],
columns: [
{ id: 'dislike', label: 'Avoid' },
{ id: 'neutral', label: 'Neutral' },
{ id: 'enjoy', label: 'Enjoy' },
{ id: 'love', label: 'Love It' }
],
selectionMode: 'single',
striped: true,
fullWidth: true,
onValueChange: (val) => {
if (!val) return;
const pts: Record<string, number> = { dislike: 0, neutral: 1, enjoy: 2, love: 4 };
if (val['leading']) updateScore('visionary', pts[val['leading'] as string] || 0);
if (val['executing']) updateScore('craftsman', pts[val['executing'] as string] || 0);
if (val['experimenting']) updateScore('innovator', pts[val['experimenting'] as string] || 0);
if (val['presenting']) updateScore('storyteller', pts[val['presenting'] as string] || 0);
}
});
});
page2.addRow(row => {
row.addRadioButton('feedback', {
label: 'The feedback you value most is:',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'inspiring', name: '✨ "Your vision is inspiring"' },
{ id: 'polished', name: '💎 "The craftsmanship is exceptional"' },
{ id: 'novel', name: '🆕 "I\'ve never seen anything like this"' },
{ id: 'moving', name: '💝 "This really moved me"' },
{ id: 'cohesive', name: '🎯 "Everything fits together perfectly"' }
],
onValueChange: (val) => {
if (val === 'inspiring') updateScore('visionary', 3);
if (val === 'polished') updateScore('craftsman', 3);
if (val === 'novel') updateScore('innovator', 3);
if (val === 'moving') updateScore('storyteller', 3);
if (val === 'cohesive') updateScore('curator', 3);
}
});
});
// ============ PAGE 3: Inspiration ============
const page3 = pages.addPage('inspiration', { mobileBreakpoint: 500 });
page3.addRow(row => {
row.addTextPanel('header3', {
label: 'Step 3 of 5: Inspiration Sources',
computedValue: () => 'Where do you find creative inspiration?',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page3.addSpacer({ height: '24px' });
page3.addRow(row => {
row.addSuggestionChips('inspirationSources', {
label: 'Select your top 3 inspiration sources:',
isRequired: true,
min: 1,
max: 3,
suggestions: [
{ id: 'future-trends', name: '🔮 Future trends & tech' },
{ id: 'masters', name: '🏛️ Work of design masters' },
{ id: 'other-fields', name: '🔀 Unrelated fields' },
{ id: 'human-stories', name: '👥 Human stories & emotions' },
{ id: 'collections', name: '📚 Curated collections' },
{ id: 'nature', name: '🌿 Nature & organic forms' },
{ id: 'architecture', name: '🏗️ Architecture & spaces' },
{ id: 'music', name: '🎵 Music & sound' }
],
onValueChange: (val) => {
if (!val) return;
for (const src of val) {
if (src === 'future-trends') { updateScore('visionary', 3); updateScore('innovator', 2); }
if (src === 'masters') { updateScore('craftsman', 4); }
if (src === 'other-fields') { updateScore('innovator', 4); }
if (src === 'human-stories') { updateScore('storyteller', 4); }
if (src === 'collections') { updateScore('curator', 4); }
if (src === 'nature') { updateScore('craftsman', 2); updateScore('curator', 1); }
if (src === 'architecture') { updateScore('visionary', 2); updateScore('craftsman', 1); }
if (src === 'music') { updateScore('storyteller', 2); updateScore('innovator', 1); }
}
}
});
});
page3.addRow(row => {
row.addEmojiRating('riskTolerance', {
label: 'How comfortable are you taking creative risks?',
isRequired: true,
preset: 'custom',
emojis: [
{ id: 'safe', emoji: '🛡️', label: 'Play it safe' },
{ id: 'cautious', emoji: '🤔', label: 'Cautious' },
{ id: 'balanced', emoji: '⚖️', label: 'Balanced' },
{ id: 'bold', emoji: '🎲', label: 'Bold' },
{ id: 'fearless', emoji: '🚀', label: 'Fearless' }
],
size: 'lg',
onValueChange: (val) => {
if (val === 'safe') { updateScore('craftsman', 3); updateScore('curator', 2); }
if (val === 'cautious') { updateScore('craftsman', 2); updateScore('curator', 1); }
if (val === 'balanced') { updateScore('storyteller', 2); }
if (val === 'bold') { updateScore('innovator', 2); updateScore('visionary', 1); }
if (val === 'fearless') { updateScore('innovator', 4); updateScore('visionary', 2); }
}
});
});
// ============ PAGE 4: Career Preferences ============
const page4 = pages.addPage('career-prefs', { mobileBreakpoint: 500 });
page4.addRow(row => {
row.addTextPanel('header4', {
label: 'Step 4 of 5: Career Preferences',
computedValue: () => 'What role fits you best?',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page4.addSpacer({ height: '24px' });
page4.addRow(row => {
row.addRatingScale('leadershipScale', {
label: 'How much do you enjoy leading creative teams?',
isRequired: true,
preset: 'custom',
min: 1,
max: 5,
lowLabel: 'Prefer solo work',
highLabel: 'Love leading',
size: 'md',
variant: 'segmented',
onValueChange: (val) => {
if (val == null) return;
if (val >= 4) { updateScore('visionary', 3); updateScore('curator', 1); }
if (val <= 2) { updateScore('craftsman', 2); updateScore('innovator', 1); }
}
});
});
page4.addRow(row => {
row.addRadioButton('idealProject', {
label: 'Your ideal project would be:',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'rebrand', name: '🌟 Leading a major brand transformation' },
{ id: 'craft', name: '✏️ Creating a beautifully detailed piece' },
{ id: 'experimental', name: '🔬 An experimental project with new tools' },
{ id: 'campaign', name: '🎬 A campaign that tells an emotional story' },
{ id: 'system', name: '📐 Building a comprehensive design system' }
],
onValueChange: (val) => {
if (val === 'rebrand') updateScore('visionary', 4);
if (val === 'craft') updateScore('craftsman', 4);
if (val === 'experimental') updateScore('innovator', 4);
if (val === 'campaign') updateScore('storyteller', 4);
if (val === 'system') updateScore('curator', 4);
}
});
});
// ============ PAGE 5: Results ============
const page5 = pages.addPage('results', { mobileBreakpoint: 500 });
page5.addRow(row => {
row.addTextPanel('header5', {
label: 'Step 5 of 5: Your Creative Type',
computedValue: () => 'Discover your creative personality',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page5.addSpacer({ height: '24px' });
page5.addRow(row => {
row.addTextPanel('mainResult', {
computedValue: () => getTypeLabel(getTopCreativeType()),
customStyles: () => ({
fontSize: '1.8rem',
fontWeight: '800',
textAlign: 'center',
color: getTypeColor(getTopCreativeType()),
padding: '25px',
background: '#f9fafb',
borderRadius: '12px',
border: `3px solid ${getTypeColor(getTopCreativeType())}`
})
});
});
page5.addRow(row => {
row.addTextPanel('typeDescription', {
computedValue: () => getTypeDescription(getTopCreativeType()),
customStyles: {
fontSize: '1rem',
color: '#374151',
textAlign: 'center',
padding: '15px',
lineHeight: '1.6',
marginTop: '15px'
}
});
});
page5.addRow(row => {
row.addTextPanel('strengthsTitle', {
label: '💪 Your Key Strengths:',
computedValue: () => getTypeStrengths(getTopCreativeType()).join(' • '),
customStyles: {
fontSize: '0.95rem',
color: '#4b5563',
textAlign: 'center',
padding: '12px',
background: '#f3f4f6',
borderRadius: '8px',
marginTop: '10px'
}
});
});
// Collapsible breakdown
const breakdown = page5.addSubform('typeBreakdown', {
title: '📊 Full Type Breakdown (click to expand)',
isCollapsible: true,
customStyles: { marginTop: '1rem', background: '#f9fafb', borderRadius: '8px' }
});
breakdown.addRow(row => {
row.addTextPanel('visionaryScore', {
label: '🔮 Visionary',
computedValue: () => `${scores()['visionary'] || 0} pts`,
customStyles: { fontSize: '0.9rem', padding: '8px', background: '#ede9fe', borderRadius: '6px' }
}, '1fr');
row.addTextPanel('craftsmanScore', {
label: '🔧 Craftsman',
computedValue: () => `${scores()['craftsman'] || 0} pts`,
customStyles: { fontSize: '0.9rem', padding: '8px', background: '#cffafe', borderRadius: '6px' }
}, '1fr');
});
breakdown.addRow(row => {
row.addTextPanel('innovatorScore', {
label: '💡 Innovator',
computedValue: () => `${scores()['innovator'] || 0} pts`,
customStyles: { fontSize: '0.9rem', padding: '8px', background: '#ffedd5', borderRadius: '6px' }
}, '1fr');
row.addTextPanel('storytellerScore', {
label: '📖 Storyteller',
computedValue: () => `${scores()['storyteller'] || 0} pts`,
customStyles: { fontSize: '0.9rem', padding: '8px', background: '#fce7f3', borderRadius: '6px' }
}, '1fr');
});
breakdown.addRow(row => {
row.addTextPanel('curatorScore', {
label: '🎭 Curator',
computedValue: () => `${scores()['curator'] || 0} pts`,
customStyles: { fontSize: '0.9rem', padding: '8px', background: '#dcfce7', borderRadius: '6px' }
}, '1fr');
row.addEmpty('1fr');
});
// ============ PAGE 6: Lead Capture ============
const page6 = pages.addPage('lead-capture', { mobileBreakpoint: 500 });
page6.addRow(row => {
row.addTextPanel('header6', {
label: 'Step 6 of 6: Get Your Creative Profile',
computedValue: () => 'Download your personalized creative type guide',
customStyles: { fontSize: '0.9rem', color: '#6b7280', marginBottom: '1rem' }
});
});
page6.addSpacer({ height: '24px' });
page6.addRow(row => {
row.addTextbox('name', { label: 'Your Name', isRequired: true, placeholder: 'Alex Designer' }, '1fr');
row.addEmail('email', { label: 'Email', isRequired: true, placeholder: 'alex@studio.com' }, '1fr');
});
page6.addRow(row => {
row.addDropdown('role', {
label: 'Current Role',
options: [
{ id: 'student', name: 'Design Student' },
{ id: 'junior', name: 'Junior Designer' },
{ id: 'mid', name: 'Mid-level Designer' },
{ id: 'senior', name: 'Senior Designer' },
{ id: 'lead', name: 'Design Lead / Director' },
{ id: 'freelance', name: 'Freelancer' },
{ id: 'other', name: 'Other Creative Role' }
],
placeholder: 'Select your role'
}, '1fr');
row.addDropdown('specialty', {
label: 'Primary Specialty',
options: [
{ id: 'ui-ux', name: 'UI/UX Design' },
{ id: 'brand', name: 'Brand & Identity' },
{ id: 'illustration', name: 'Illustration' },
{ id: 'motion', name: 'Motion Design' },
{ id: 'product', name: 'Product Design' },
{ id: 'marketing', name: 'Marketing Design' },
{ id: 'generalist', name: 'Generalist' }
],
placeholder: 'Select specialty'
}, '1fr');
});
page6.addRow(row => {
row.addCheckboxList('consent', {
options: [
{ id: 'report', name: '📄 Send me my Creative Type report', isRequired: true },
{ id: 'resources', name: '🎨 Send me design resources & tutorials' },
{ id: 'community', name: '👥 Invite me to the design community' }
],
defaultValue: ['report'],
orientation: 'vertical'
});
});
// ============ PDF REPORT ============
form.configurePdf('creative-report', pdf => {
pdf.configure({
filename: 'creative-type-report.pdf',
pageSize: 'A4',
allowUserDownload: true,
downloadButtonLabel: '📄 Download Creative Report',
header: { title: 'Your Creative Type Report', subtitle: 'Designer Personality Analysis' },
footer: { text: 'Generated by FormTs Creative Assessment', showPageNumbers: true }
});
pdf.addSection('Your Creative Type', section => {
section.addRow(row => {
row.addField('Type', getTypeLabel(getTopCreativeType()));
row.addField('Date', new Date().toLocaleDateString());
});
section.addText(getTypeDescription(getTopCreativeType()));
});
pdf.addSection('Your Strengths', section => {
for (const strength of getTypeStrengths(getTopCreativeType())) {
section.addText(`• ${strength}`);
}
});
pdf.addSection('Type Scores', section => {
const s = scores();
section.addTable(
['Creative Type', 'Score', 'Strength'],
[
['Visionary', `${s['visionary'] || 0}`, (s['visionary'] || 0) >= 12 ? '✅ Strong' : '➖ Moderate'],
['Craftsman', `${s['craftsman'] || 0}`, (s['craftsman'] || 0) >= 12 ? '✅ Strong' : '➖ Moderate'],
['Innovator', `${s['innovator'] || 0}`, (s['innovator'] || 0) >= 12 ? '✅ Strong' : '➖ Moderate'],
['Storyteller', `${s['storyteller'] || 0}`, (s['storyteller'] || 0) >= 12 ? '✅ Strong' : '➖ Moderate'],
['Curator', `${s['curator'] || 0}`, (s['curator'] || 0) >= 12 ? '✅ Strong' : '➖ Moderate']
]
);
});
pdf.addPageBreak();
pdf.addSection('Growth Recommendations', section => {
section.addText('1. Lean into your primary type while developing complementary skills');
section.addText('2. Seek projects that align with your creative strengths');
section.addText('3. Build a portfolio that showcases your unique perspective');
section.addText('4. Collaborate with creatives of different types for balanced work');
section.addText('5. Continue exploring and refining your creative voice');
});
});
// ============ SUBMIT BUTTON ============
form.configureSubmitButton({
label: () => `🎨 Get My Creative Profile`
});
form.configureSubmitBehavior({ sendToServer: true });
}