 |
Resumo | Um componente de tema que transforma mensagens privadas com um bot de IA em uma experiência de quiz interativa. |
 |
Repositório | GitHub - VaperinaDEV/discourse-quizmaster: A theme component that transforms private messages with an AI bot into an interactive quiz experience. · GitHub |
 |
Guia de Instalação | Como instalar um tema ou componente de tema |
 |
Novo em Temas do Discourse? | Guia para iniciantes sobre o uso de Temas do Discourse |
Instale este componente de tema
Componente de Tema de Quiz Interativo
Olá 
Criei um componente de tema que transforma mensagens privadas com um bot de IA em uma experiência de quiz interativa. O componente formata automaticamente as perguntas do quiz, gerencia o envio de respostas, acompanha o progresso e controla o término do quiz, com um menu suspenso conveniente no cabeçalho para iniciar quizzes rapidamente.
Funcionalidades
1. Iniciador de Quiz no Menu Suspenso do Cabeçalho
Um botão de menu suspenso personalizável no cabeçalho do site oferece acesso rápido a diferentes tipos de quiz:
- Totalmente configurável via configurações do tema usando esquema de objeto
- Suporte multilíngue com integração i18n para rótulos, descrições e mensagens
- Ícones personalizáveis para cada nível de dificuldade do quiz
- Opções padrão incluem: Quizzes de dificuldade Fácil, Normal, Difícil e Mista
- Cada opção envia uma mensagem pré-configurada para o bot de IA para iniciar o quiz
2. Formatação Automática de Perguntas de Quiz
O componente detecta e formata perguntas de múltipla escolha dos posts do bot de IA. Quando o bot posta uma lista começando com “A)”, “B)”, etc., estas são automaticamente convertidas em opções de quiz clicáveis com estilo personalizado.
3. Envio de Resposta com Um Clique
Os usuários podem clicar diretamente nas opções de resposta (A, B, C, D) para enviar sua resposta. O componente:
- Previne envios duplicados com um estado de carregamento
- Responde automaticamente ao post correto
- Formata as respostas consistentemente (ex: “Minha resposta: A) Texto da opção”)
- Fornece tratamento de erros com feedback ao usuário
4. Contador de Perguntas
Um indicador de progresso aparece em cada pergunta do quiz mostrando:
- Número da pergunta atual vs. máximo permitido
- Máximo de perguntas personalizável (padrão: 50)
- Visível apenas nos posts do bot de IA
5. Término Automático do Quiz
O componente inclui gerenciamento inteligente de quiz:
- Pontos de verificação de marco: Mostra um botão “Encerrar Quiz” a cada 10 perguntas (após a pergunta 11, 21, 31, etc.)
- Aplicação de limite rígido: Envia automaticamente uma mensagem de término ao atingir a contagem máxima de perguntas
- Prevenção de duplicatas: Acompanha o estado de término para evitar múltiplos posts de término
- Verificações de validação: Garante que o término ocorra apenas quando apropriado
6. Modificações de Interface (UI)
Quando em uma conversa de quiz:
- Remove botões de retry/compartilhar de posts do bot (para não administradores)
- Remove o botão de resposta de posts do bot em mensagens privadas
- Impede que criadores de quiz apaguem seus próprios posts (preserva o histórico do quiz)
- Adiciona a classe CSS personalizada
is-quiz-chatao corpo para estilização
Configuração
O componente usa estas configurações de tema:
# Configurações de comportamento do quiz
quizmaster_username: "SeuNomeDeBot" # O nome de usuário do bot de IA
show_for_groups: "" # Grupos para os quais o menu suspenso do cabeçalho será exibido
quiz_max_questions: 50 # Máximo de perguntas antes do término automático
# Configurações do botão do cabeçalho
button_icon: "question-circle" # Ícone para o botão principal do quiz
# Opções de quiz no menu suspenso (esquema de objeto) máximo 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 ícones FontAwesome 6 usados neste componente de tema"
Chaves de Tradução
Adicione estas aos arquivos de locale do seu tema para suporte completo a i18n:
Inglês (en.yml)
en:
js:
# Botão do cabeçalho
quiz: "Quiz"
# Rótulos do menu suspenso
quiz_easy_label: "Quiz Fácil"
quiz_normal_label: "Quiz Normal"
quiz_hard_label: "Quiz Difícil"
quiz_mixed_label: "Quiz Misto"
# Descrições do menu suspenso
quiz_easy_description: "Perguntas básicas para iniciantes"
quiz_normal_description: "Perguntas de dificuldade média"
quiz_hard_description: "Desafio de nível avançado"
quiz_mixed_description: "Perguntas de dificuldade aleatória"
# Modelos de mensagem
quizmaster_input_easy: "Me dê uma pergunta de quiz fácil"
quizmaster_input_normal: "Me dê uma pergunta de quiz de dificuldade normal"
quizmaster_input_hard: "Me dê uma pergunta de quiz difícil"
quizmaster_input_mixed: "Me dê uma pergunta de quiz de dificuldade mista"
# Interação do quiz
my_answer: "Minha resposta à pergunta é:"
terminate_quiz: "Obrigado pelo jogo, gostaria de um resumo!"
max_questions_text: "perguntas (ou até minha fonte secar). A cada 10, você escolhe: ficar ou avançar."
Casos de Uso
Este componente é perfeito para:
- Quizzes educacionais com tutores de IA
- Avaliações de treinamento
- Testes de conhecimento
- Experiências de aprendizado interativo
- Entrega de conteúdo gamificado
- Aplicações de aprendizado de idiomas
- Cursos de preparação para certificação
O componente lida com toda a complexidade de rastrear estado, prevenir erros e gerenciar o ciclo de vida do quiz automaticamente, proporcionando uma experiência suave tanto para criadores quanto para participantes do quiz. O menu suspenso no cabeçalho torna incrivelmente fácil para os usuários iniciarem quizzes.
Personalização
Administradores podem facilmente personalizar a experiência do quiz:
- Modificando rótulos e descrições de dificuldade do quiz nos arquivos de locale
- Adicionando novas traduções para outros idiomas
- Alterando ícones para diferentes tipos de quiz
- Ajustando os modelos de mensagem enviados ao bot de IA
- Configurando quais grupos de usuários veem o botão do cabeçalho
- Definindo limites máximos de perguntas
Todas as personalizações são feitas através da interface de administração sem precisar tocar em nenhum código.
Prompt do Sistema de IA
O componente funciona perfeitamente com bots de IA detectando um formato simples de lista. Aqui está um exemplo de prompt do sistema para seu bot místico de IA (personalize conforme necessário):
Você é o Quizmestre místico profissional, estrito mas justo. Fale com autoridade, mas de forma útil, como se fosse um mago moderno. Use algumas frases relacionadas à magia (ex: 'Vamos ver o que se esconde na névoa do seu conhecimento...'), mas mantenha-se nos fatos técnicos.
### NÍVEIS DE DIFICULDADE DO QUIZ (MODO)
O usuário iniciará a conversa especificando um nível de dificuldade. Use as seguintes diretrizes para calibrar a profundidade das suas perguntas:
1. **Fácil:**
[Seus critérios para o modo fácil aqui]
2. **Normal:**
[Seus critérios para o modo normal aqui]
3. **Difícil:**
[Seus critérios para o modo difícil aqui]
4. **Misto:** Selecione aleatoriamente uma dificuldade e uma categoria para cada pergunta.
---
### LÓGICA DE RESPOSTA DINÂMICA
**INSTRUÇÃO:** Para cada nova pergunta, escolha uma Categoria (A-E) diferente das 5 perguntas anteriores.
- **REGRAS DE VARIEDADE:** Nunca repita uma pergunta ou seu tópico dentro da mesma sessão.
- **SUGESTÃO DE AVANÇO DE NÍVEL:** Após cada marco de 10 perguntas, se o usuário tiver uma taxa de sucesso de 100% no Fácil ou Normal, sugira avançar para o próximo nível dentro do bloco de avaliação.
### REGRAS PRINCIPAIS:
1. **Fluxo Contínuo:** Após avaliar uma resposta, forneça imediatamente a próxima pergunta na MESMA mensagem.
2. **Encerrando o jogo:**
* Se o usuário escrever: "Obrigado por jogar, gostaria de um resumo!", pare imediatamente.
* Forneça uma avaliação final baseada APENAS nas perguntas respondidas.
* Forneça a pontuação final e uma despedida mística.
3. **SAÍDA ÚNICA:** **CRÍTICO: Forneça a avaliação, a pontuação atual e a PRÓXIMA pergunta exatamente UMA VEZ. Não repita a pergunta ou a lista de opções dentro da mesma resposta.**
### ESTRUTURA E FORMATAÇÃO DA RESPOSTA (OBRIGATÓRIO):
> [Emoji Correto/Incorreto] **[Breve explicação da resposta anterior.]**
*Pontuação Atual: [X] pontos*
---
### [Texto da próxima pergunta vai aqui]
* A) [TEXTO_OPCAO_A]
* B) [TEXTO_OPCAO_B]
* C) [TEXTO_OPCAO_C]
* D) [TEXTO_OPCAO_D]
---
### REGRAS DE AUTOMAÇÃO (PARA A IA):
- **SEM TAGS WRAP:** Não use tags `[wrap]` ou nenhuma sintaxe especial do Discourse para botões.
- **FORMATO DE LISTA RÍGIDO:** Você DEVE fornecer as quatro opções como uma lista simples com marcadores exatamente como mostrado acima, começando com "A)", "B)", "C)" e "D)".
- **INTEGRAÇÃO DO SISTEMA:** O sistema externo detectará automaticamente sua lista A-D e a converterá em botões interativos. Não tente estilizar os botões você mesmo.
### RESTRIÇÕES:
- **Consistência de Idioma:** Sempre responda no mesmo idioma que o usuário usou.
- A explicação deve estar dentro de um bloco de citação (>).
Nota: Inicialmente tentamos usar tags [wrap] para criar botões, mas a IA às vezes esquecia a fechadura ], quebrando a funcionalidade. O formato simples de lista com marcadores (* A), * B), etc.) é muito mais confiável e quase impossível para a IA errar. O componente do tema detecta automaticamente esse formato e o converte em botões interativos.
Gostaria muito de ouvir sobre seu caso de uso. Por favor, compartilhe!