 |
Resumen | Un componente de tema que transforma los mensajes privados con un bot de IA en una experiencia de cuestionario interactivo. |
 |
Repositorio | GitHub - VaperinaDEV/discourse-quizmaster: A theme component that transforms private messages with an AI bot into an interactive quiz experience. · GitHub |
 |
Guía de instalación | Cómo instalar un tema o un componente de tema |
 |
¿Nuevo en los temas de Discourse? | Guía para principiantes sobre el uso de los temas de Discourse |
Instalar este componente de tema
Componente de tema de cuestionario interactivo
Hola 
He creado un componente de tema que transforma los mensajes privados con un bot de IA en una experiencia de cuestionario interactivo. El componente formatea automáticamente las preguntas del cuestionario, gestiona el envío de respuestas, rastrea el progreso y controla la finalización del cuestionario, todo ello con un menú desplegable en la cabecera para iniciar rápidamente los cuestionarios.
Características
1. Lanzador de cuestionarios desde el menú desplegable de la cabecera
Un botón desplegable personalizable en la cabecera del sitio proporciona acceso rápido a diferentes tipos de cuestionarios:
- Totalmente configurable mediante la configuración del tema usando un esquema de objetos
- Soporte multilingüe con integración de i18n para etiquetas, descripciones y mensajes
- Iconos personalizables para cada nivel de dificultad del cuestionario
- Las opciones predeterminadas incluyen: cuestionarios de dificultad Fácil, Normal, Difícil y Mixta
- Cada opción envía un mensaje preconfigurado al bot de IA para iniciar el cuestionario
2. Formato automático de las preguntas del cuestionario
El componente detecta y formatea las preguntas de opción múltiple de las publicaciones del bot de IA. Cuando el bot publica una lista que comienza con “A)”, “B)”, etc., estas se convierten automáticamente en opciones de cuestionario clicables con estilos personalizados.
3. Envío de respuestas con un solo clic
Los usuarios pueden hacer clic directamente en las opciones de respuesta (A, B, C, D) para enviar su respuesta. El componente:
- Evita envíos duplicados mostrando un estado de carga
- Responde automáticamente a la publicación correcta
- Formatea las respuestas de manera consistente (por ejemplo, “Mi respuesta: A) Texto de la opción”)
- Proporciona manejo de errores con retroalimentación al usuario
4. Contador de preguntas
Un indicador de progreso aparece en cada pregunta del cuestionario mostrando:
- Número de pregunta actual frente al máximo permitido
- Número máximo de preguntas personalizable (predeterminado: 50)
- Solo visible en las publicaciones del bot de IA
5. Finalización automática del cuestionario
El componente incluye una gestión inteligente de los cuestionarios:
- Puntos de control intermedios: Muestra un botón “Finalizar cuestionario” cada 10 preguntas (después de la pregunta 11, 21, 31, etc.)
- Aplicación del límite máximo: Envía automáticamente un mensaje de finalización al alcanzar el número máximo de preguntas
- Prevención de duplicados: Rastrea el estado de finalización para evitar múltiples publicaciones de finalización
- Comprobaciones de validación: Asegura que la finalización solo ocurra cuando sea apropiado
6. Modificaciones de la interfaz de usuario
Cuando se está en una conversación de cuestionario:
- Elimina los botones de reintento/compartir de las publicaciones del bot (para usuarios no administradores)
- Elimina el botón de respuesta de las publicaciones del bot en mensajes privados
- Impide que los creadores del cuestionario eliminen sus propias publicaciones (preserva el historial del cuestionario)
- Añade una clase CSS personalizada
is-quiz-chatal cuerpo para estilos
Configuración
El componente utiliza estas configuraciones del tema:
# Configuración del comportamiento del cuestionario
quizmaster_username: "NombreDeUsuarioDelBot" # El nombre de usuario del bot de IA
show_for_groups: "" # Mostrar el menú desplegable de la cabecera para grupos
quiz_max_questions: 50 # Número máximo de preguntas antes de la finalización automática
# Configuración del botón de la cabecera
button_icon: "question-circle" # Icono para el botón principal del cuestionario
# Opciones del menú desplegable del cuestionario (esquema de objetos) máx. 4
dropdown_items:
type: objects
default:
- label_template: quiz_easy_label
description_template: quiz_easy_description
icon: star
message_template: quizmaster_input_easy
- label_template: quiz_normal_label
description_template: quiz_normal_description
icon: star-half-alt
message_template: quizmaster_input_normal
- label_template: quiz_hard_label
description_template: quiz_hard_description
icon: certificate
message_template: quizmaster_input_hard
- label_template: quiz_mixed_label
description_template: quiz_mixed_description
icon: random
message_template: quizmaster_input_mixed
schema:
properties:
label_template:
type: string
description_template:
type: string
icon:
type: string
message_template:
type: string
svg_icons:
default: "far-star-half"
type: list
list_type: "compact"
description: "Lista de iconos de FontAwesome 6 utilizados en este componente de tema"
Claves de traducción
Añade estas claves a los archivos de idioma de tu tema para un soporte completo de i18n:
Español (es.yml)
es:
js:
# Botón de la cabecera
quiz: "Cuestionario"
# Etiquetas del menú desplegable
quiz_easy_label: "Cuestionario Fácil"
quiz_normal_label: "Cuestionario Normal"
quiz_hard_label: "Cuestionario Difícil"
quiz_mixed_label: "Cuestionario Mixto"
# Descripciones del menú desplegable
quiz_easy_description: "Preguntas básicas para principiantes"
quiz_normal_description: "Preguntas de dificultad media"
quiz_hard_description: "Desafío de nivel avanzado"
quiz_mixed_description: "Preguntas de dificultad aleatoria"
# Plantillas de mensajes
quizmaster_input_easy: "Dame una pregunta fácil de cuestionario"
quizmaster_input_normal: "Dame una pregunta de dificultad normal de cuestionario"
quizmaster_input_hard: "Dame una pregunta difícil de cuestionario"
quizmaster_input_mixed: "Dame una pregunta de dificultad mixta de cuestionario"
# Interacción del cuestionario
my_answer: "Mi respuesta a la pregunta es:"
terminate_quiz: "Gracias por el juego, ¡me gustaría un resumen!"
max_questions_text: "preguntas (o hasta que se agote mi fuente). Cada 10, tú eliges: quedarte o seguir adelante."
Casos de uso
Este componente es perfecto para:
- Cuestionarios educativos con tutores de IA
- Evaluaciones de formación
- Pruebas de conocimientos
- Experiencias de aprendizaje interactivas
- Entrega de contenido gamificado
- Aplicaciones de aprendizaje de idiomas
- Cursos de preparación para certificaciones
El componente maneja toda la complejidad del seguimiento del estado, la prevención de errores y la gestión del ciclo de vida del cuestionario de forma automática, proporcionando una experiencia fluida tanto para los creadores como para los participantes. El menú desplegable de la cabecera hace que sea increíblemente fácil para los usuarios iniciar cuestionarios.
Personalización
Los administradores pueden personalizar fácilmente la experiencia del cuestionario mediante:
- Modificación de las etiquetas y descripciones de dificultad del cuestionario en los archivos de idioma
- Añadiendo nuevas traducciones a otros idiomas
- Cambiando los iconos para diferentes tipos de cuestionarios
- Ajustando las plantillas de mensajes enviadas al bot de IA
- Configurando qué grupos de usuarios ven el botón de la cabecera
- Estableciendo límites máximos de preguntas
Todas las personalizaciones se realizan a través de la interfaz de administración sin tocar ningún código.
Prompt del sistema de IA
El componente funciona a la perfección con los bots de IA detectando un formato de lista simple. Aquí tienes un ejemplo de prompt del sistema para tu bot místico de IA (personalízalo según sea necesario):
Eres el estricto pero justo profesional Místico Maestro de Cuestionarios. Habla con autoridad pero con utilidad, como si fueras un mago moderno. Usa algunas frases relacionadas con la magia (por ejemplo, 'Veamos qué se esconde en la niebla de tu conocimiento...'), pero mantente fiel a los hechos técnicos.
### NIVELES DE DIFICULTAD DEL CUESTIONARIO (MODOS)
El usuario iniciará la conversación especificando un nivel de dificultad. Utiliza las siguientes pautas para calibrar la profundidad de tus preguntas:
1. **Fácil:**
[Introduce aquí tus criterios para el modo fácil]
2. **Normal:**
[Introduce aquí tus criterios para el modo normal]
3. **Difícil:**
[Introduce aquí tus criterios para el modo difícil]
4. **Mixto:** Selecciona aleatoriamente una dificultad y una categoría para cada pregunta.
---
### LÓGICA DE RESPUESTA DINÁMICA
**INSTRUCCIÓN:** Para cada nueva pregunta, elige una Categoría (A-E) diferente de las 5 preguntas anteriores.
- **REGLAS DE VARIEDAD:** Nunca repitas una pregunta ni su tema dentro de la misma sesión.
- **SUGERENCIA DE SUBIDA DE NIVEL:** Después de cada hito de 10 preguntas, si el usuario tiene una tasa de éxito del 100% en Fácil o Normal, sugiere pasar al siguiente nivel dentro del bloque de evaluación.
### REGLAS PRINCIPALES:
1. **Flujo continuo:** Después de evaluar una respuesta, proporciona inmediatamente la siguiente pregunta en el MISMO mensaje.
2. **Finalización del juego:**
* Si el usuario escribe: "Gracias por jugar, me gustaría un resumen!", detente inmediatamente.
* Proporciona una evaluación final basada ÚNICAMENTE en las preguntas respondidas.
* Proporciona la puntuación final y un adiós místico.
3. **SALIDA ÚNICA:** **CRÍTICO: Proporciona la evaluación, la puntuación actual y la SIGUIENTE pregunta exactamente UNA VEZ. No repitas la pregunta ni la lista de opciones dentro de la misma respuesta.**
### ESTRUCTURA Y FORMATO DE LA RESPUESTA (OBLIGATORIO):
> [Emoji de Correcto/Incorrecto] **[Breve explicación de la respuesta anterior.]**
*Puntuación actual: [X] puntos*
---
### [Aquí va el texto de la siguiente pregunta]
* A) [TEXTO_OPCIÓN_A]
* B) [TEXTO_OPCIÓN_B]
* C) [TEXTO_OPCIÓN_C]
* D) [TEXTO_OPCIÓN_D]
---
### REGLAS DE AUTOMATIZACIÓN (PARA LA IA):
- **SIN ETIQUETAS WRAP:** No uses etiquetas `[wrap]` ni ninguna sintaxis especial de Discourse para los botones.
- **FORMATO DE LISTA ESTRICTO:** DEBES proporcionar las cuatro opciones como una lista con viñetas simple exactamente como se muestra arriba, comenzando con "A)", "B)", "C)" y "D)".
- **INTEGRACIÓN DEL SISTEMA:** El sistema externo detectará automáticamente tu lista de A a D y la convertirá en botones interactivos. No intentes dar estilo a los botones tú mismo.
### RESTRICCIONES:
- **Consistencia del idioma:** Responde siempre en el mismo idioma que usó el usuario.
- La explicación debe estar dentro de un bloque de cita (>).
Nota: Inicialmente intentamos usar etiquetas [wrap] para crear botones, pero la IA a veces omitía el cierre ], rompiendo la funcionalidad. El formato de lista con viñetas simple (* A), * B), etc.) es mucho más fiable y casi imposible de equivocarse para la IA. El componente del tema detecta automáticamente este formato y lo convierte en botones interactivos.
Me encantaría mucho saber sobre tu caso de uso. ¡Por favor, compártelo!