Plantilla de Cuestionario de Puntuación

El componente ScoringQuiz está diseñado para diagnósticos donde cada respuesta tiene un valor numérico. El resultado final es una puntuación total mapeada a un nivel específico.

Uso

Para crear un nuevo cuestionario de puntuación, cree un archivo markdown y use el componente de la siguiente manera:

<ScoringQuiz 
  :questions="questions" 
  :tiers="tiers" 
  emailEndpoint="/.netlify/functions/record-quiz"
  quizName="My Scoring Quiz"
>
  <template #intro>
    <div class="intro-content">
      <h1>Verifica Tu Puntuación</h1>
      <p>Responde estas preguntas para obtener tu calificación.</p>
    </div>
  </template>
</ScoringQuiz>

<script setup>
const questions = [
  {
    id: 'q1',
    prompt: '¿Con qué frecuencia haces ejercicio?',
    options: [
      { value: 5, label: 'Diariamente', icon: '🏃' },
      { value: 1, label: 'Nunca', icon: '🛋️' }
    ]
  }
];

const tiers = [
  {
    min: 5,
    max: 5,
    label: 'Atleta',
    description: 'Estás en gran forma.',
    action: '¡Sigue así!'
  },
  {
    min: 0,
    max: 4,
    label: 'Principiante',
    description: 'Recién estás comenzando.',
    action: 'Intenta moverte más.'
  }
];
</script>

Props

Prop	Tipo	Requerido	Descripción
questions	Array	Sí	Array de objetos de pregunta.
tiers	Array	Sí	Array de definiciones de nivel.
emailEndpoint	String	No	URL para enviar los resultados del cuestionario.
quizName	String	No	Nombre del cuestionario para fines de seguimiento.

Estructuras de Datos

Objeto de Pregunta

{
  id: 'unique_id',
  prompt: 'Texto de la pregunta',
  options: [
    { value: 5, label: 'Texto de la opción', icon: 'Emoji o Icono' }
  ]
}

Objeto de Nivel

{
  min: 0, // Puntuación mínima para este nivel
  max: 10, // Puntuación máxima para este nivel
  label: 'Nombre del Nivel',
  description: 'Descripción del resultado.',
  action: 'Acción recomendada.'
}

Lista de Verificación de Implementación y Aprendizajes

Al agregar un nuevo cuestionario, asegúrese de seguir estos pasos:

1. Crear el Archivo del Cuestionario:

   • Coloque el archivo en docs/es/quizzes/<quiz-slug>/index.md.
   • NO use la propiedad slug en el frontmatter si confía en el enrutamiento basado en directorios (por ejemplo, docs/es/quizzes/ai-leadership/index.md se asigna a /es/quizzes/ai-leadership/ a través de reescrituras de VitePress). El uso de slug puede entrar en conflicto con las reglas de reescritura y causar errores 404 en producción.

2. Actualizar la Página de Destino:

   • DEBE agregar manualmente el nuevo cuestionario a la lista en docs/es/quizzes/index.md.
   • Incluya el título, el enlace y una breve descripción.
   • Ejemplo:

     ### [Mi Nuevo Cuestionario](/es/quizzes/my-new-quiz/)
     Descripción del cuestionario...

3. Lógica de Puntuación:

   • El componente ScoringQuiz calcula dinámicamente la puntuación máxima posible.
   • Suma el valor más alto de las opciones de cada pregunta.
   • Asegúrese de que los valores de sus opciones sean consistentes (por ejemplo, si usa una escala de 0-5, asegúrese de que al menos una opción tenga el valor 5).

4. Verificación:

   • Ejecute npm run docs:build para verificar la salida de la compilación.
   • Verifique que docs/.vitepress/dist/es/quizzes/<quiz-slug>/index.html exista.
   • Verifique que el cuestionario aparezca en la página de destino /es/quizzes/.