Scoring Quiz Vorlage

ScoringQuiz eignet sich für Diagnostiken mit numerischen Werten. Das Ergebnis ist ein Gesamtscore, der einem Tier zugeordnet wird.

Nutzung

<ScoringQuiz 
  :questions="questions" 
  :tiers="tiers" 
  emailEndpoint="/.netlify/functions/record-quiz"
  quizName="Mein Scoring Quiz"
>
  <template #intro>
    <div class="intro-content">
      <h1>Score prüfen</h1>
      <p>Beantworte die Fragen und erhalte dein Rating.</p>
    </div>
  </template>
</ScoringQuiz>

<script setup>
const questions = [
  {
    id: 'q1',
    prompt: 'Wie oft trainierst du?',
    options: [
      { value: 5, label: 'Täglich', icon: '🏃' },
      { value: 1, label: 'Nie', icon: '🛋️' }
    ]
  }
];

const tiers = [
  {
    min: 5,
    max: 5,
    label: 'Athlet',
    description: 'Topfit.',
    action: 'Weiter so!'
  },
  {
    min: 0,
    max: 4,
    label: 'Beginner',
    description: 'Gerade gestartet.',
    action: 'Mehr Bewegung einbauen.'
  }
];
</script>

Props

Prop	Typ	Pflicht	Beschreibung
questions	Array	Ja	Fragenliste
tiers	Array	Ja	Tier-Definitionen
emailEndpoint	String	Nein	POST-URL für Ergebnisse
quizName	String	Nein	Name fürs Tracking

Datenstrukturen

Question

{
  id: 'unique_id',
  prompt: 'Fragetext',
  options: [
    { value: 5, label: 'Antwort', icon: 'Emoji' }
  ]
}

Tier

{
  min: 0,
  max: 10,
  label: 'Tier Name',
  description: 'Ergebnis-Interpretation',
  action: 'Empfohlene Aktion'
}

Checklist & Learnings

1. Datei anlegen: docs/de/quizzes/<slug>/index.md; kein slug-Frontmatter nötig bei Ordner-Routing.
2. Landing aktualisieren: Fügen Sie das neue Quiz in docs/de/quizzes/index.md hinzu.
3. Scoring-Logik: Höchsten Wert je Frage konsistent halten (z.B. 0–5 oder 0–8).
4. Verifikation: npm run docs:build ausführen; prüfen, dass /de/quizzes/<slug>/ gerendert wird und auf der Landing erscheint.