Skip to content

Category Quiz Vorlage

CategoryQuiz eignet sich für Diagnostiken mit mehreren Dimensionen (z.B. Community, Competence, Credibility, Compassion) plus Gesamtscore.

Nutzung

vue
<CategoryQuiz 
  :questions="questions" 
  :categories="categories"
  :overall="overall"
  emailEndpoint="/.netlify/functions/record-quiz"
  quizName="Mein Category Quiz"
>
  <template #intro>
    <h2>Mein Diagnostic</h2>
    <p>Bewerte dich in diesen Dimensionen.</p>
  </template>
</CategoryQuiz>

<script setup>
const questions = [
  {
    id: 'q1',
    prompt: 'Fragetext...',
    categoryId: 'cat1',
    options: [
      { value: 5, label: 'Stimme voll zu' },
      { value: 1, label: 'Stimme überhaupt nicht zu' }
    ]
  }
];

const categories = {
  cat1: {
    title: 'Kategorie 1',
    thresholds: [
      {
        min: 4.0,
        max: 5.0,
        label: 'Hoch',
        description: 'Stark in diesem Bereich.'
      },
      {
        min: 0,
        max: 3.9,
        label: 'Niedrig',
        description: 'Verbesserungsbedarf.'
      }
    ]
  }
};

const overall = {
  thresholds: [
    {
      min: 4.0,
      max: 5.0,
      label: 'Exzellent',
      description: 'Gesamtleistung ausgezeichnet.'
    },
    {
      min: 0,
      max: 3.9,
      label: 'Verbesserungswürdig',
      description: 'Gesamt: Luft nach oben.'
    }
  ]
};
</script>

Props

PropTypPflichtBeschreibung
questionsArrayJaFragenobjekte
categoriesObjectJaKategorien + Schwellen
overallObjectJaGesamtscore-Schwellen
emailEndpointStringNeinPOST-URL
quizNameStringNeinName fürs Tracking

Datenstrukturen

Question

javascript
{
  id: 'unique_id',
  prompt: 'Fragetext',
  categoryId: 'kategorie_id',
  options: [
    { value: 5, label: 'Antworttext' }
  ]
}

Category

javascript
{
  title: 'Titel',
  thresholds: [
    {
      min: 0,
      max: 5,
      label: 'Label',
      description: 'Interpretation'
    }
  ]
}

Checklist

  1. Kategorien definieren und allen Fragen gültige categoryId geben.
  2. Schwellen für Kategorien + Gesamtscore setzen.
  3. Neues Quiz in docs/de/quizzes/index.md verlinken (keine slug-Frontmatter nötig bei Ordner-Routing).