 |
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 |
 |
Achei útil? | > ./support --coffee |
 |
Guia de Instalação | Como instalar um tema ou componente de tema |
 |
Novo em Temas do Discourse? | Guia para iniciantes no uso de Temas do Discourse |
Instalar este componente de tema
Componente de Tema de Quiz Interativo
Olá 
Eu 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 a conclusão do quiz com um menu suspenso no cabeçalho conveniente para iniciar o quiz rapidamente.
Funcionalidades
1. Lançador de Quiz no Menu Suspenso do Cabeçalho
Um botão de menu suspenso personalizável no cabeçalho do site fornece acesso rápido a diferentes tipos de quiz:
- Totalmente configurável por meio das configurações do tema usando esquema de objeto
- Suporte multilíngue com integração de i18n para rótulos, descrições e mensagens
- Ícones personalizáveis para cada nível de dificuldade do quiz
- As opções padrão incluem: quizzes de dificuldade Fácil, Normal, Difícil e Misto
- 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 das publicações do bot de IA. Quando o bot publica 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:
- Impede envios duplicados com um estado de carregamento
- Responde automaticamente à publicação correta
- Formata as respostas de forma consistente (ex.: “Minha resposta: A) Texto da opção”)
- Fornece tratamento de erros com feedback para o 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
- Perguntas máximas personalizáveis (padrão: 50)
- Visível apenas nas publicações do bot de IA
5. Terminação Automática 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 impedir múltiplas publicações de término
- Verificações de validação: Garante que o término ocorra apenas quando apropriado
6. Modificações de Interface (UI)
Durante uma conversa de quiz:
- Remove os botões de repetição/compartilhamento de IA das publicações do bot (para não administradores)
- Remove o botão de resposta das publicações do bot em mensagens privadas
- Impede que os criadores de quiz excluam suas próprias publicações (preserva o histórico do quiz)
- Adiciona a classe CSS de corpo personalizada
is-quiz-chatpara estilização
Configuração
O componente usa estas configurações de tema:
# Configurações de comportamento do quiz
quizmaster_username: "SeuUsuarioBot" # Nome de usuário do bot de IA
show_for_groups: "" # Mostrar menu suspenso do cabeçalho para grupos
quiz_max_questions: 50 # Máximo de perguntas antes da terminação automática
# Configurações do botão do cabeçalho
button_icon: "question-circle" # Ícone para o botão principal do quiz
# Opções de quiz do menu suspenso (esquema de objeto) 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 ícones FontAwesome 6 usados neste componente de tema"
Chaves de Tradução
Adicione estas aos arquivos de idioma 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: "Dê-me uma pergunta de quiz fácil"
quizmaster_input_normal: "Dê-me uma pergunta de quiz de dificuldade normal"
quizmaster_input_hard: "Dê-me uma pergunta de quiz difícil"
quizmaster_input_mixed: "Dê-me uma pergunta de quiz de dificuldade mista"
# Interação do quiz
my_answer: "Minha resposta para a pergunta é:"
terminate_quiz: "Obrigado pelo jogo, gostaria de um resumo!"
max_questions_text: "perguntas (ou até que minha fonte se esgote). A cada 10, você escolhe: ficar ou seguir em frente."
Casos de Uso
Este componente é perfeito para:
- Quizzes educacionais com tutores de IA
- Avaliações de treinamento
- Testes de conhecimento
- Experiências de aprendizado interativas
- Entrega de conteúdo gamificado
- Aplicações de aprendizado de idiomas
- Cursos de preparação para certificação
O componente gerencia toda a complexidade de rastreamento de estado, prevenção de erros e gerenciamento do ciclo de vida do quiz automaticamente, proporcionando uma experiência suave para criadores e participantes de 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 idioma
- Adicionando novas traduções de idioma
- Alterando ícones para diferentes tipos de quiz
- Ajustando os modelos de mensagem enviados para o 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 pela interface de administração sem tocar em nenhum código.
Prompt de Sistema de IA
O componente funciona perfeitamente com bots de IA detectando um formato de lista simples. Aqui está um exemplo de prompt de sistema para o seu bot de IA místico (personalize conforme necessário):
Você é o Quizmaster místico profissional, estrito, mas justo. Fale com autoridade, mas com utilidade, 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 fique fiel aos 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 na mesma sessão.
- **SUGESTÃO DE NÍVEL SUPERIOR:** Após cada marco de 10 perguntas, se o usuário tiver uma taxa de sucesso de 100% em Fácil ou Normal, sugira a passagem 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 com base 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 na mesma resposta.**
### ESTRUTURA E FORMATAÇÃO DA RESPOSTA (OBRIGATÓRIO):
> [Emoji de Correto/Incorreto] **[Explicação breve da resposta anterior.]**
*Pontuação Atual: [X] pontos*
---
### [O texto da Próxima Pergunta vai aqui]
* A) [TEXTO_DA_OPÇÃO_A]
* B) [TEXTO_DA_OPÇÃO_B]
* C) [TEXTO_DA_OPÇÃO_C]
* D) [TEXTO_DA_OPÇÃO_D]
---
### REGRAS DE AUTOMAÇÃO (PARA A IA):
- **SEM TAGS WRAP:** Não use tags `[wrap]` ou qualquer sintaxe especial do Discourse para botões.
- **FORMATO DE LISTA ESTRITO:** 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 DE 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:** Responda sempre no mesmo idioma usado pelo usuário.
- A explicação deve estar dentro de uma citação (blockquote >).
Nota: Inicialmente, tentamos usar tags [wrap] para criar botões, mas a IA às vezes perdia o ] de fechamento, quebrando a funcionalidade. O formato de lista simples com marcadores (* A), * B), etc.) é muito mais confiável e quase impossível para a IA errar. O componente de tema detecta automaticamente este formato e o converte em botões interativos.
Eu adoraria ouvir sobre seu caso de uso. Por favor, compartilhe!