Um jogo interativo baseia-se sempre em três componentes principais:
Ação do utilizador (arrastar, clicar, largar)
Validação da ação
Resposta do sistema (feedback)
No jQuery UI, a validação acontece normalmente dentro do evento drop.
Associar dados aos elementos (data-attributes)
Para saber se um elemento foi colocado no local correto, é necessário identificar cada item.
Uma forma simples e organizada de o fazer é usar atributos data-*.
HTML:
Cada elemento arrastável tem uma resposta associada, tal como cada zona de destino.
Tornar os elementos interativos
Validar a resposta no drop
Neste exemplo:
Se o item corresponder à zona correta → resposta correta
Caso contrário → resposta errada
Feedback visual ao utilizador
CSS:
O feedback visual é essencial para que o utilizador perceba imediatamente o resultado da sua ação.
Contador simples de pontos
HTML:
Bloquear tentativas repetidas
Para evitar que um item seja usado várias vezes:
Isto garante que cada item só pode ser usado uma vez.
Exercício 1 — Associação correta
Cria um mini-jogo onde o utilizador deve:
Arrastar conceitos de informática
Largá-los na definição correta
Quando:
Acertar → fundo verde
Errar → fundo vermelho
Exercício 2 — Pontuação
Melhora o jogo anterior:
Adiciona um contador de pontos
Cada resposta correta vale 1 ponto
