Archetype Quiz Template

The ArchetypeQuiz component allows you to create quizzes where answers map to specific "types" or "archetypes". The final result is determined by the archetype that received the most votes.

Usage

To create a new archetype quiz, create a markdown file (e.g., docs/en/quizzes/my-new-quiz.md) and use the component as follows:

<ArchetypeQuiz 
  :questions="questions" 
  :archetypes="archetypes" 
  emailEndpoint="/.netlify/functions/record-quiz"
  quizName="My New Quiz"
>
  <template #intro>
    <div class="intro-content">
      <h1>Discover Your Type</h1>
      <p>Take this quiz to find out which archetype you are.</p>
    </div>
  </template>
</ArchetypeQuiz>

<script setup>
const questions = [
  {
    id: 'q1',
    prompt: 'What is your favorite color?',
    options: [
      { value: 'red', label: 'Red' },
      { value: 'blue', label: 'Blue' }
    ]
  }
];

const archetypes = {
  red: {
    title: 'Red Archetype',
    description: 'You are passionate and energetic.',
    action: 'Channel your energy into action.'
  },
  blue: {
    title: 'Blue Archetype',
    description: 'You are calm and analytical.',
    action: 'Use your analysis to solve problems.'
  }
};
</script>

Props

Prop	Type	Required	Description
questions	Array	Yes	Array of question objects.
archetypes	Object	Yes	Dictionary of archetype definitions.
emailEndpoint	String	No	URL to POST the quiz results to.
quizName	String	No	Name of the quiz for tracking purposes.

Data Structures

Question Object

{
  id: 'unique_id',
  prompt: 'Question text',
  options: [
    { value: 'archetype_key', label: 'Option text' }
  ]
}

Archetype Object

{
  title: 'Display Title',
  description: 'Detailed description of the archetype.',
  action: 'Recommended next step.'
}