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
| Prop | Typ | Pflicht | Beschreibung |
|---|---|---|---|
questions | Array | Ja | Fragenobjekte |
categories | Object | Ja | Kategorien + Schwellen |
overall | Object | Ja | Gesamtscore-Schwellen |
emailEndpoint | String | Nein | POST-URL |
quizName | String | Nein | Name 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
- Kategorien definieren und allen Fragen gültige
categoryIdgeben. - Schwellen für Kategorien + Gesamtscore setzen.
- Neues Quiz in
docs/de/quizzes/index.mdverlinken (keineslug-Frontmatter nötig bei Ordner-Routing).

