Crie um Cartão de Aula Gamificado
Gamifique o Seu Conteúdo
Os alunos prestam mais atenção quando aprender parece um jogo. Pontos, progresso e um desafio claro transformam uma aula comum em algo que vale a pena terminar. Nesta lição, você vai criar um cartão de aula gamificado com a IA como sua parceira de construção.
Você vai montar três peças que toda grande interface de jogo tem: um emblema de pontos que recompensa o esforço, uma barra de progresso que mostra o quanto o aluno avançou, e um cartão de desafio que dá a ele um objetivo. Ao final, você terá um componente reutilizável que pode ser inserido em qualquer aula.
Não se preocupe em escrever código perfeito de memória. Siga cada etapa, use as dicas e deixe a pré-visualização ao vivo confirmar que você está no caminho certo.
Instruções
Crie o contêiner do cartão de aula: uma div com cantos arredondados rounded-xl, espaçamento interno e fundo cinza-escuro gray-800.
Dica: Use: `<div class="max-w-md w-full bg-gray-800 rounded-xl p-6 shadow-lg">`
Onde é que isto entra?
<!-- Build your gamified lesson card here -->Escreva na linha 11 — abaixo desse comentário, depois do código que já adicionou.
Adicione um emblema de pontos usando um span com fundo amarelo brilhante que exibe a pontuação do aluno.
Adicione uma barra de progresso: uma div de trilho cinza contendo uma div de preenchimento verde com largura definida.
Adicione um cartão de desafio com o texto de título «Today's Challenge» e um objetivo curto para o aluno.
Seu Código
Descreva o que você quer construir para esta etapa e eu escrevo o código — depois clique em Aplicar para inseri-lo no seu editor. Esta etapa: Crie o contêiner do cartão de aula: uma div com cantos arredondados rounded-xl, espaçamento interno e fundo cinza-escuro gray-800.