Construindo uma simulação interativa para um conceito que os alunos sempre erram
No relatório da Anthropic, professores usaram IA para construir ferramentas de ensino personalizadas que antes eram proibitivamente caras em termos de tempo — ferramentas de prática de estequiometria em química, modelos de física e jogos de revisão — geralmente como aplicativos web de arquivo único. Se um conceito derrota uma parte da sua turma todo ano, um modelo interativo que os alunos podem manipular agora é o trabalho de uma noite em vez de um projeto de verão.
Você é um desenvolvedor-educador que constrói pequenas ferramentas de ensino autocontidas para cursos universitários. Construa uma simulação interativa como um único arquivo HTML com CSS e JavaScript inline — sem bibliotecas externas, fontes ou chamadas de rede — que eu possa enviar para meu LMS ou projetar em sala de aula. Curso e nível: {{course_level}} Conceito a ensinar: {{concept}} O que os alunos devem fazer com ele: {{learner_task}} Conteúdo de origem para construir (use apenas isto): {{content_source}} Requisitos: 1. Controles (sliders, campos de entrada ou botões) para os dois ou três parâmetros mais importantes, com feedback visual instantâneo 2. Um indicador numérico ao vivo mostrando a relação quantitativa, não apenas uma animação 3. Um "modo desafio" com cinco perguntas extraídas estritamente do meu conteúdo de origem, dando dicas — não respostas — em tentativas erradas 4. Instruções na tela que um usuário de primeira viagem consiga seguir sem minha ajuda 5. Legível em tamanho de projetor de sala de aula e utilizável em um trackpad de notebook Restrições: mantenha-se fiel ao conteúdo de origem que forneci — não importe fórmulas, constantes ou alegações de outros lugares. Se você precisar simplificar o modelo para torná-lo interativo, liste cada simplificação em um comentário HTML no topo do arquivo, para que eu possa revisá-la antes da aula.
Preencha seus dados e o prompt se atualiza na hora — depois é só copiar.
Aqui está sua simulação de arquivo único — salve como equilibrio.html e abra em qualquer navegador. O que os alunos veem: o equilíbrio da amônia com três sliders (temperatura, pressão, N2 adicionado). Antes de qualquer slider ser movido, um prompt pede que os alunos prevejam a direção do deslocamento; a barra de reação então anima em direção ao novo equilíbrio enquanto um indicador mostra as concentrações mudando. O modo desafio faz cinco perguntas das suas notas da semana 9 — uma resposta errada recebe uma dica apontando para o indicador, não para a solução. <!-- SIMPLIFICAÇÕES: equilíbrio alcançado instantaneamente; comportamento de gás ideal assumido; valores de Kc ilustrativos, ajustados para visibilidade -->
O fluxo de trabalho completo
- Cole suas próprias anotações e equações para que o modelo construa a partir do seu curso, não da memória dele sobre o tema.
- Abra o arquivo e arraste cada slider até seus extremos — os casos-limite são onde ferramentas geradas quebram.
- Verifique as cinco respostas do desafio e leia o comentário de simplificações; decida se são aceitáveis para o nível do seu curso.
- Faça um piloto em uma aula antes de atribuí-la como trabalho pré-aula.
Fique de olho
Uma interface polida esconde bem erros de física e química. Verifique o comportamento quantitativo contra um exemplo resolvido das suas anotações, não apenas olhando a animação.
Simplificações que são adequadas para alunos iniciantes podem ensinar o modelo errado a alunos de nível avançado. Leia a lista de simplificações, não apenas a ferramenta.
De onde isso vem
Cada caso de uso deste site se baseia em relatos reais que os professores em atividade compartilham — nada foi inventado por nós.