Modèle de Questionnaire à Score

Le composant ScoringQuiz est conçu pour les diagnostics où chaque réponse porte une valeur numérique. Le résultat final est un score total mappé à un palier.

Utilisation

Pour créer un nouveau quiz à score, créez un fichier markdown et utilisez le composant ainsi :

vue

<ScoringQuiz 
  :questions="questions" 
  :tiers="tiers" 
  emailEndpoint="/.netlify/functions/record-quiz"
  quizName="Mon quiz à score"
>
  <template #intro>
    <div class="intro-content">
      <h1>Vérifiez Votre Score</h1>
      <p>Répondez à ces questions pour obtenir votre note.</p>
    </div>
  </template>
</ScoringQuiz>

<script setup>
const questions = [
  {
    id: 'q1',
    prompt: 'À quelle fréquence vous entraînez-vous ?',
    options: [
      { value: 5, label: 'Quotidien', icon: '🏃' },
      { value: 1, label: 'Jamais', icon: '🛋️' }
    ]
  }
];

const tiers = [
  {
    min: 5,
    max: 5,
    label: 'Athlète',
    description: 'Vous êtes en pleine forme.',
    action: 'Continuez !'
  },
  {
    min: 0,
    max: 4,
    label: 'Débutant',
    description: 'Vous commencez tout juste.',
    action: 'Bougez un peu plus.'
  }
];
</script>

Props

Prop	Type	Obligatoire	Description
`questions`	`Array`	Oui	Tableau d’objets question.
`tiers`	`Array`	Oui	Tableau des définitions de paliers.
`emailEndpoint`	`String`	Non	URL pour envoyer les résultats par POST.
`quizName`	`String`	Non	Nom du quiz pour le suivi.

Structures de données

Objet Question

javascript

{
  id: 'unique_id',
  prompt: 'Texte de question',
  options: [
    { value: 5, label: 'Texte de l’option', icon: 'Emoji ou icône' }
  ]
}

Objet Palier

javascript

{
  min: 0, // Score minimum pour ce palier
  max: 10, // Score maximum pour ce palier
  label: 'Nom du palier',
  description: 'Description du résultat.',
  action: 'Action recommandée.'
}

Checklist d’implémentation & enseignements

Quand vous ajoutez un nouveau quiz, suivez ces étapes :

Créer le fichier de quiz :
- Placez le fichier dans docs/fr/quizzes/<slug-du-quiz>/index.md.
- Ne PAS utiliser la propriété frontmatter slug si vous comptez sur le routage par dossier (ex. docs/fr/quizzes/ai-leadership/index.md mappe vers /fr/quizzes/ai-leadership/). L’usage de slug peut entrer en conflit avec les réécritures et causer des 404 en production.
Mettre à jour la page d’atterrissage :
- Ajoutez le nouveau quiz dans la liste de docs/fr/quizzes/index.md.
- Incluez le titre, le lien et une brève description.
- Exemple :
  markdown
```
### [Mon nouveau quiz](/fr/quizzes/mon-nouveau-quiz/)
Description du quiz...
```
Logique de scoring :
- Le composant ScoringQuiz calcule dynamiquement le score maximum possible.
- Il somme la valeur la plus élevée parmi les options de chaque question.
- Assurez-vous que vos valeurs sont cohérentes (ex. sur une échelle 0-5, au moins une option doit valoir 5).
Vérification :
- Lancez npm run docs:build pour vérifier le build.
- Vérifiez que docs/.vitepress/dist/quizzes/<slug-du-quiz>/index.html existe.
- Confirmez que le quiz apparaît sur la page /fr/quizzes/.

Modèle de Questionnaire à Score ​

Utilisation ​

Props ​

Structures de données ​

Objet Question ​

Objet Palier ​

Checklist d’implémentation & enseignements ​