Criação de Quiz Interativo com Gemini Canvas

Objetivo

Utilizar o Gemini, com o recurso Canvas, para criar um site interativo (quiz) a partir de um documento normativo do TRE-BA, tornando a capacitação e a disseminação de conhecimento sobre normas institucionais mais engajadora.

Contexto

Políticas institucionais como o Código de Ética, o Regimento Interno, a Política de Segurança da Informação ou as normas sobre licitações são densas e de difícil assimilação. Transformar o conteúdo em um quiz interativo ajuda a testar o conhecimento e a reforçar os pontos mais importantes de forma lúdica. O Gemini Canvas é ideal para gerar o código de um site completo a partir de um prompt e um documento de referência.

O que é o Canvas? No Gemini, o Canvas é um recurso que permite gerar aplicações mais complexas, como um site completo, de uma só vez. Ao invés de gerar apenas um bloco de código, ele estrutura todo o projeto. Para usá-lo, procure pelo botão "Canvas" ou "Gerar em Canvas" após enviar seu prompt.

Documento de Referência

Utilize um dos seguintes documentos como base para o quiz:

Código de Ética do TRE-BA (ou Código de Ética do Servidor Público Federal - Decreto nº 1.171/1994)
Política de Segurança da Informação do TRE-BA
Normas sobre Diárias e Passagens
Regras de Licitações e Contratos (Lei nº 14.133/2021)

Exemplo de Prompt para o Gemini Canvas

Objetivo: Criar um site de quiz interativo, com HTML, CSS e JavaScript, baseado no documento que estou anexando, voltado para servidores do Tribunal Regional Eleitoral da Bahia (TRE-BA).

Requisitos do Site:
1.  **Página Inicial:**
    - Título: "Teste seus Conhecimentos: [Nome do Documento/Normativo]".
    - Breve parágrafo explicando o objetivo do quiz e sua importância para os servidores.
    - Um botão "Começar o Quiz".
    - Inclua o brasão ou identidade visual do TRE-BA.

2.  **Página do Quiz:**
    - A página deve exibir uma pergunta por vez.
    - Crie 10 perguntas de múltipla escolha (4 alternativas cada) baseadas nos pontos principais do documento normativo anexo.
    - As perguntas devem abordar temas como:
        - Princípios e objetivos do normativo.
        - Obrigações e proibições estabelecidas.
        - Procedimentos e responsabilidades.
        - Penalidades por descumprimento.
        - Canais de comunicação e denúncia.
    - Para cada pergunta, o usuário seleciona uma resposta e clica em "Próxima".
    - O sistema deve dar feedback imediato se a resposta está correta ou incorreta.

3.  **Página de Resultados:**
    - Ao final do quiz, mostrar a pontuação final (ex: "Você acertou 7 de 10 perguntas").
    - Exibir uma mensagem de incentivo ao aprendizado contínuo.
    - Incluir um botão para "Tentar Novamente".

4.  **Estilo e Design:**
    - Use um design limpo e profissional, compatível com a identidade visual do Poder Judiciário.
    - Cores sugeridas: azul institucional, branco e cinza.
    - O site deve ser responsivo (funcionar bem em celulares e desktops).

Instrução Final: Gere o código completo (HTML, CSS e JavaScript no mesmo arquivo) para que eu possa salvar e abrir o site em um navegador.

Passo a Passo

Acesse o Gemini.
Anexe o documento normativo escolhido.
Copie e cole o prompt acima, substituindo [Nome do Documento/Normativo] pelo nome correto.
Clique para enviar e, em seguida, escolha a opção "Gerar em Canvas".
O Gemini irá gerar a estrutura de arquivos (HTML, CSS, JS).
Baixe os arquivos gerados e abra o index.html no seu navegador para ver o resultado.

Resultado Esperado

Página do Quiz