Como Criar um App de Avaliação Interativa de Mapas com IA (Gemini Canvas)

Cansado de corrigir mapas de forma tradicional? Aprenda a criar um aplicativo web gamificado, usando o Gemini, para avaliar de forma interativa os mapas que seus alunos desenham no caderno. Uma forma de tornar a correção mais rápida, visível e divertida!

1. A Proposta: Avaliação Gamificada no Tablet ou PC

Nesta atividade de História (6º ano), peço para os alunos transcreverem o mapa do Império Romano do livro para o caderno. O objetivo é que eles entrem em contato direto com nomes e regiões (Mar Mediterrâneo, Creta, fronteiras de Roma, Egito). Ao transcrever, o aluno aprende e memoriza.

O problema: Como avaliar isso de forma dinâmica?
A solução: Criar um aplicativo simples onde parte da avaliação acontece no computador/tablet, unindo autoavaliação do aluno e um quiz onde ele precisa apontar, no próprio desenho, os locais que o app sorteia!

“A ideia é que o aluno manipule o próprio mapa que desenhou enquanto responde a um quiz gerado sob medida no tablet, com você observando e validando ao lado dele.”

2. Preparação: O que vamos precisar?

Para criar essa ferramenta, você precisará apenas de uma conta no Google, acessar o Gemini, e ter em mãos uma foto do mapa de referência que os alunos utilizaram.

  1. Abra o Google Gemini e inicie um novo chat.
  2. Clique no ícone + (Mais ferramentas) e ative a opção Canvas.
  3. Ainda no ícone de + (Adicionar), faça o upload da foto do mapa. A IA vai usar essa imagem para extrair os locais e criar as perguntas do nosso jogo automaticamente!

🔬 Dica Multidisciplinar

Esse modelo é totalmente adaptável! Professor de Geografia? Use mapas atuais. Professor de Ciências? Tire foto de uma célula e peça para a IA gerar perguntas sobre organelas!

🔒 Privacidade

Peça para o aluno inserir sempre apenas o primeiro nome no app. Isso evita qualquer tipo de problema com exposição de dados em contas pessoais.

3. O Prompt Mestre para o Gemini Canvas

Com o Canvas ativado e a foto enviada, copie o prompt abaixo e cole no chat. Ele define o papel da IA, a estética visual (pergaminho antigo para Roma) e o funcionamento lógico do nosso arquivo.

💡 Prompt Mestre para o App de Avaliação:
Aja como um Desenvolvedor Front-end Sênior especializado em gamificação educacional. Leia a imagem do mapa em anexo, extraia os locais e crie um aplicativo web em arquivo único (HTML, CSS e JS) chamado “Desafio Cartográfico: Roma Antiga”. A estética visual deve remeter a um pergaminho antigo, usando algarismos romanos ou tipografia de época. O app deve ter o seguinte fluxo de telas: TELA 1 – Identificação: Campo para o aluno inserir apenas o primeiro nome e um botão “Entrar na Legião”. TELA 2 – Autoavaliação (Cumulativa de 0 a 5 pontos): – Pergunta 1: “Quanto seu mapa está parecido com o real?” (Opções: 0, 1 ou 2 pontos). – Pergunta 2: “Qual seu nível de capricho e dedicação?” (Opções: Mal feito (0), Bom (2) ou Muito bem feito (3)). – Botão “Avançar”. TELA 3 – Quiz de Localização Cartográfica (com base na imagem enviada): – Gere um banco de perguntas em 3 níveis: Nível 1 (locais fáceis, ex: Mar Mediterrâneo), Nível 2 (associação média) e Nível 3 (difíceis). – Regra de progressão: Se o aluno acertar 3 de Nível 1, vai pro Nível 2, e assim por diante. – Em cada pergunta, o aluno deve procurar no PRÓPRIO CADERNO o local pedido e mostrar ao professor. – A tela deve exibir um cronômetro de 60 segundos por pergunta. Se chegar em 30 segundos, exiba uma pequena dica se o local realmente existe no mapa. – Exiba botões “Acertou” (+1 ponto) e “Errou” (0 pontos) para o professor clicar. TELA FINAL – Ranking: Mostre a pontuação total do aluno e salve os dados no Local Storage do navegador para criar uma tabela de ranking contínua de todos os alunos avaliados naquele dispositivo.

*Sinta-se livre para alterar o tema, as cores e a quantidade de pontos de acordo com a sua disciplina.*

4. Como Funciona a Avaliação na Prática?

Enquanto a turma desenha os mapas, cada aluno que termina vem até a mesa do professor (ou você entrega o tablet para ele) e inicia a jornada:

  • Identificação: O aluno digita o nome (ex: José).
  • Autoavaliação (Sinceridade): Ele responde se o mapa está parecido e se foi caprichado. O professor já avalia se ele tem senso crítico sobre a própria produção.
  • O Quiz (Gamificação): Aparece na tela: *”Localize no mapa a Península Itálica”*. O aluno tem 60 segundos para olhar pro caderno dele, colocar o dedo em cima e te mostrar. Você (ou o próprio aluno) clica em “Acertou” ou “Errou” na tela.

No final, o app gera uma nota somando a autoavaliação + os acertos do mapa!

5. Como Salvar e Publicar seu App (Atenção ao Local Storage!)

O Gemini te dá a pré-visualização ao vivo, mas a memória dele é curta! Se você atualizar a página, o ranking da turma desaparece. Veja a melhor forma de usar na sala:

  1. Opção 1: Baixar e usar Offline (A MAIS RECOMENDADA)

    No canto superior do Canvas, clique em Exportar → Baixar. O arquivo HTML será salvo no seu computador/tablet. Dê dois cliques para abrir no navegador. Dessa forma, as notas e o ranking dos alunos ficam salvos na memória do seu dispositivo (Local Storage). Você pode avaliar a turma inteira sem depender de internet e, no fim do dia, passar as notas para o diário de classe físico ou digital.

  2. Opção 2: Exportar para um novo Google Sites

    Se quiser que os alunos acessem de casa, clique em Exportar para o Google Sites. O Google criará um site rascunho com o jogo. Basta clicar em “Publicar” e compartilhar o link.

  3. Opção 3: Incorporar no site que você já usa (Código)

    Se você tem um portal escolar, vá na aba Código do Canvas, selecione tudo (Ctrl+A), copie (Ctrl+C). Abra seu Google Sites, crie uma subpágina, clique em Inserir → Incorporar → Incorporar Código, cole e publique. Pronto! Mais uma aba de atividade interativa no seu site.

Este conteúdo foi desenvolvido pelo professor Bruno para o canal Sala de Aula Tech. Transformando a prática pedagógica com inteligência artificial acessível — de professor para professor.