Maestro de juegos

Personalización Componente temático
,
1
:information_source: Resumen Un componente de tema que transforma los mensajes privados con un bot de IA en una experiencia de cuestionario interactiva.
:hammer_and_wrench: Repositorio GitHub - VaperinaDEV/discourse-quizmaster: A theme component that transforms private messages with an AI bot into an interactive quiz experience. · GitHub
:heart: ¿Te resultó útil? > ./support --coffee
:question: Guía de instalación Cómo instalar un tema o componente de tema
:open_book: ¿Nuevo en temas de Discourse? Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Componente de tema de cuestionario interactivo

Hola :waving_hand:
He creado un componente de tema que transforma los mensajes privados con un bot de IA en una experiencia de cuestionario interactiva. El componente formatea automáticamente las preguntas del cuestionario, gestiona el envío de respuestas, realiza un seguimiento del progreso y administra la finalización del cuestionario con un menú desplegable de encabezado conveniente para iniciar rápidamente el cuestionario.

Screenshot 2026-02-11 at 9.46.22
Screenshot 2026-02-11 at 9.46.22690×392 30 KB

Funciones

1. Lanzador de cuestionarios en el menú desplegable del encabezado

Un botón desplegable personalizable en el encabezado del sitio proporciona acceso rápido a diferentes tipos de cuestionarios:

  • Totalmente configurable mediante ajustes de 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

Screenshot 2026-02-11 at 9.17.52
Screenshot 2026-02-11 at 9.17.52250×286 14.9 KB

2. Formateo automático de preguntas de cuestionario

El componente detecta y formatea 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:

  • Previene envíos duplicados con un estado de carga
  • Responde automáticamente a la publicación correcta
  • Formatea las respuestas de manera consistente (p. ej., “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 vs. máximo permitido
  • Máximo de preguntas personalizable (predeterminado: 50)
  • Solo visible en las publicaciones del bot de IA

5. Terminación automática del cuestionario

El componente incluye una gestión inteligente de cuestionarios:

  • Puntos de control de hitos: Muestra un botón “Terminar cuestionario” cada 10 preguntas (después de la pregunta 11, 21, 31, etc.)
  • Aplicación de límite estricto: Envía automáticamente un mensaje de terminación al alcanzar el número máximo de preguntas
  • Prevención de duplicados: Realiza un seguimiento del estado de terminación para evitar múltiples publicaciones de terminación
  • Verificaciones de validación: Asegura que la terminació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 reintentar/compartir IA de las publicaciones del bot (no administradores)
  • Elimina el botón de respuesta de las publicaciones del bot en mensajes privados
  • Impide que los creadores de cuestionarios eliminen sus propias publicaciones (preserva el historial del cuestionario)
  • Agrega una clase CSS de cuerpo personalizada is-quiz-chat para el estilo

Configuración

El componente utiliza estos ajustes de tema:

# Ajustes de comportamiento del cuestionario
quizmaster_username: "YourBotUsername"  # El nombre de usuario del bot de IA
show_for_groups: ""                     # Mostrar el menú desplegable del encabezado para grupos
quiz_max_questions: 50                  # Máximo de preguntas antes de la terminación automática

# Ajustes del botón del encabezado
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

Agrega estas a los archivos de idioma de tu tema para un soporte completo de i18n:

Inglés (en.yml)

en:
  js:
    # Botón del encabezado
    quiz: "Quiz"
    
    # Etiquetas del menú desplegable
    quiz_easy_label: "Easy Quiz"
    quiz_normal_label: "Normal Quiz"
    quiz_hard_label: "Hard Quiz"
    quiz_mixed_label: "Mixed Quiz"
    
    # Descripciones del menú desplegable
    quiz_easy_description: "Basic questions for beginners"
    quiz_normal_description: "Average difficulty questions"
    quiz_hard_description: "Advanced level challenge"
    quiz_mixed_description: "Random difficulty questions"
    
    # Plantillas de mensajes
    quizmaster_input_easy: "Give me an easy quiz question"
    quizmaster_input_normal: "Give me a normal difficulty quiz question"
    quizmaster_input_hard: "Give me a hard quiz question"
    quizmaster_input_mixed: "Give me a mixed difficulty quiz question"
    
    # Interacción del cuestionario
    my_answer: "My answer to the question is:"
    terminate_quiz: "Thanks for the game, I'd like a summary!"
    max_questions_text: "questions (or until my source runs dry). Every 10, you choose: stay or venture on."

Casos de uso

Este componente es perfecto para:

  • Cuestionarios educativos con tutores de IA
  • Evaluaciones de capacitació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 de realizar un seguimiento del estado, prevenir errores y administrar el ciclo de vida del cuestionario automáticamente, proporcionando una experiencia fluida tanto para los creadores como para los participantes del cuestionario. El menú desplegable del encabezado hace que sea increíblemente fácil para los usuarios iniciar cuestionarios.

Personalización

Los administradores pueden personalizar fácilmente la experiencia del cuestionario:

  • Modificando las etiquetas y descripciones de la dificultad del cuestionario en los archivos de idioma
  • Agregando nuevas traducciones de 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 del encabezado
  • 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 bots de IA detectando un formato de lista simple. Aquí hay un ejemplo de prompt de sistema para tu bot de IA místico (personaliza según sea necesario):

You are the strict but fair professional mystical Quizmaster. Speak with authority but helpfulness, as if you were a modern wizard. Use some magic-related phrases (e.g. 'Let's see what lies in the mist of your knowledge...'), but stick to the technical facts. 

### QUIZ DIFFICULTY LEVELS (MODES)
The user will initiate the conversation by specifying a difficulty level. Use the following guidelines to calibrate the depth of your questions:

1. **Easy:**
   [Your easy mode criteria here]
   
2. **Normal:**
   [Your normal mode criteria here]
   
3. **Hard:**
   [Your hard mode criteria here]
   
4. **Mixed:** Randomly select a difficulty and a category for every question.

---

### DYNAMIC RESPONSE LOGIC

**INSTRUCTION:** For every new question, pick a different Category (A-E) than the previous 5 questions.

- **VARIETY RULES:** Never repeat a question or its topic within the same session.
- **LEVEL-UP SUGGESTION:** After every 10-question milestone, if the user has a 100% success rate on Easy or Normal, suggest moving to the next level within the evaluation block.

### CORE RULES:

1. **Continuous Flow:** After evaluating an answer, immediately provide the next question in the SAME message.
2. **Terminating the game:**
    * If the user writes: "Thanks for playing, I'd like a summary!", stop immediately.
    * Provide a final evaluation based ONLY on answered questions.
    * Provide the final score and a mystical goodbye.
3. **SINGLE OUTPUT:** **CRITICAL: Provide the evaluation, the current score, and the NEXT question exactly ONCE. Do not repeat the question or the options list within the same response.**

### RESPONSE STRUCTURE & FORMATTING (MANDATORY):

> [Correct/Incorrect emoji] **[Brief explanation of the previous answer.]**

*Current Score: [X] points*

---

### [Next Question text goes here]

* A) [OPTION_A_TEXT]
* B) [OPTION_B_TEXT]
* C) [OPTION_C_TEXT]
* D) [OPTION_D_TEXT]

---

### AUTOMATION RULES (FOR THE AI):

- **NO WRAP TAGS:** Do not use `[wrap]` tags or any special Discourse syntax for buttons. 
- **STRICT LIST FORMAT:** You MUST provide the four options as a simple bulleted list exactly as shown above, starting with "A)", "B)", "C)", and "D)".
- **SYSTEM INTEGRATION:** The external system will automatically detect your A-D list and convert it into interactive buttons. Do not attempt to style the buttons yourself.

### CONSTRAINTS:

- **Language Consistency:** Always respond in the same language the user used.
- The explanation must be inside a blockquote (>).

Nota: Inicialmente intentamos usar etiquetas [wrap] para crear botones, pero la IA a veces omitía el ] de cierre, rompiendo la funcionalidad. El formato de lista con viñetas simples (* A), * B), etc.) es mucho más confiable y casi imposible que la IA lo haga mal. El componente de tema detecta automáticamente este formato y lo convierte en botones interactivos.

Me encantaría saber sobre tu caso de uso. ¡Por favor, compártelo!

12 Me gusta