Scoring Quiz Template

The ScoringQuiz component is designed for diagnostics where each answer has a numeric value. The final result is a total score mapped to a specific tier.

Usage

To create a new scoring quiz, create a markdown file and use the component as follows:

<ScoringQuiz 
  :questions="questions" 
  :tiers="tiers" 
  emailEndpoint="/.netlify/functions/record-quiz"
  quizName="My Scoring Quiz"
>
  <template #intro>
    <div class="intro-content">
      <h1>Check Your Score</h1>
      <p>Answer these questions to get your rating.</p>
    </div>
  </template>
</ScoringQuiz>

<script setup>
const questions = [
  {
    id: 'q1',
    prompt: 'How often do you exercise?',
    options: [
      { value: 5, label: 'Daily', icon: '🏃' },
      { value: 1, label: 'Never', icon: '🛋️' }
    ]
  }
];

const tiers = [
  {
    min: 5,
    max: 5,
    label: 'Athlete',
    description: 'You are in great shape.',
    action: 'Keep it up!'
  },
  {
    min: 0,
    max: 4,
    label: 'Beginner',
    description: 'You are just starting out.',
    action: 'Try to move more.'
  }
];
</script>

Props

Prop	Type	Required	Description
questions	Array	Yes	Array of question objects.
tiers	Array	Yes	Array of tier 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: 5, label: 'Option text', icon: 'Emoji or Icon' }
  ]
}

Tier Object

{
  min: 0, // Minimum score for this tier
  max: 10, // Maximum score for this tier
  label: 'Tier Name',
  description: 'Description of the result.',
  action: 'Recommended action.'
}

Implementation Checklist & Learnings

When adding a new quiz, ensure you follow these steps:

1. Create the Quiz File:

   • Place the file in docs/en/quizzes/<quiz-slug>/index.md.
   • Do NOT use the slug frontmatter property if you are relying on directory-based routing (e.g., docs/en/quizzes/ai-leadership/index.md maps to /quizzes/ai-leadership/ via VitePress rewrites). Using slug can conflict with rewrite rules and cause 404 errors in production.

2. Update the Landing Page:

   • You MUST manually add the new quiz to the list in docs/en/quizzes/index.md.
   • Include the title, link, and a brief description.
   • Example:

     ### [My New Quiz](/quizzes/my-new-quiz/)
     Description of the quiz...

3. Scoring Logic:

   • The ScoringQuiz component dynamically calculates the maximum possible score.
   • It sums the highest value from the options of each question.
   • Ensure your option values are consistent (e.g., if using a 0-5 scale, ensure at least one option has value 5).

4. Verification:

   • Run npm run docs:build to verify the build output.
   • Check docs/.vitepress/dist/quizzes/<quiz-slug>/index.html exists.
   • Verify the quiz appears on the /quizzes/ landing page.