Category Quiz Template

The CategoryQuiz component is designed for diagnostics that require scoring across multiple dimensions (e.g., Community, Competence, Credibility, Compassion) along with an overall score.

Usage

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

<CategoryQuiz 
  :questions="questions" 
  :categories="categories"
  :overall="overall"
  emailEndpoint="/.netlify/functions/record-quiz"
  quizName="My Category Quiz"
>
  <template #intro>
    <h2>My Diagnostic</h2>
    <p>Rate yourself across these key dimensions.</p>
  </template>
</CategoryQuiz>

<script setup>
const questions = [
  {
    id: 'q1',
    prompt: 'Question text here...',
    categoryId: 'cat1',
    options: [
      { value: 5, label: 'Strongly Agree' },
      { value: 1, label: 'Strongly Disagree' }
    ]
  }
];

const categories = {
  cat1: {
    title: 'Category 1',
    thresholds: [
      {
        min: 4.0,
        max: 5.0,
        label: 'High',
        description: 'You are doing great in this area.'
      },
      {
        min: 0,
        max: 3.9,
        label: 'Low',
        description: 'This area needs improvement.'
      }
    ]
  }
};

const overall = {
  thresholds: [
    {
      min: 4.0,
      max: 5.0,
      label: 'Excellent',
      description: 'Overall excellent performance.'
    },
    {
      min: 0,
      max: 3.9,
      label: 'Needs Work',
      description: 'Overall room for improvement.'
    }
  ]
};
</script>

Props

Prop	Type	Required	Description
questions	Array	Yes	Array of question objects.
categories	Object	Yes	Definition of categories and their thresholds.
overall	Object	Yes	Definition of overall score thresholds.
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',
  categoryId: 'category_id_matching_key_in_categories',
  options: [
    { value: 5, label: 'Option text' }
  ]
}

Category Definition

{
  title: 'Display Title',
  thresholds: [
    {
      min: 0,
      max: 5,
      label: 'Result Label',
      description: 'Interpretation text.'
    }
  ]
}

Implementation Checklist

1. Define Categories: Identify the dimensions you want to measure.
2. Map Questions: Ensure every question has a valid categoryId.
3. Set Thresholds: Define clear min/max ranges for both individual categories and the overall score.
4. Routing: Add the new quiz to docs/en/quizzes/index.md manually. Do NOT use slug frontmatter if relying on standard directory routing.