A criação de páginas HTML integradas com a linguagem Javascript possibilita o desenvolvimento de interfaces dinâmicas e interativas através da utilização do DOM (Documento Object Model) para representar os dados e os elementos de um documento web. Alguns elementos do HTML (div, botões, classes, objetos) podem ser manipulados, acessados e associados a eventos dinâmicos no código ".js". Nessa aplicação do Química Programada demonstramos como algumas funções podem ser usadas para elaborar um jogo de manipulação de "cards" representando alguns reagentes químicos para fazer um jogo educativo. O primeiro jogo elaborado para o site se propõe a usar algumas caixas e alguns "cards" com nomes de alguns reagentes químicos usados em laboratórios e como matéria-prima para aprender a classificá-los de acordo com o risco associado (reação violenta com a água, inflamável ou oxidante). Mas a mesma estrutura pode ser reaproveitada para elaborar novos jogos de "cards" para classificar tipos de gases e risco associado, tipos de poluentes, etc. Basta apenas o usuário entender a estrutura utilizada e alterar o código onde for conveniente.
Na Figura 1 é apresentado o trecho de código HTML no qual é declarada uma classe chamada "lado-esquerdo" consistindo de uma caixa com caraterísticas de cor interna e borda descritas no arquivo ".css" associado. Na Figura 2 são apresentados 3 caixas associadas a 2 botões (escolher e voltar) que servem para manipular os "cards" de produtos químicos da caixa da esquerda para a caixa adequada da direita, segundo sua característica (produto com reação violenta com a água, produto inflamável ou produto oxidante). O resultado dessas estruturas no browser no estado inicial é apresentado na Figura 3 : caixa azul → para destinar os produtos com reação violenta com a água; caixa vermelho-alaranjada → para destinar os produtos inflamáveis; caixa lilás → para destinar os produtos oxidantes.
Na Figura 4 são apresentadas as configurações em css das duas classes ".produto" e ".p1" usadas para declarar e configurar os "cards" de produtos químicos. Na Figura 5 são apresentadas as configurações em css das classes desenvolvidas para declarar a caixa principal do lado esquerdo, onde os "cards" ficam no estado inicial e um exemplo da classe ".caixap2", que são as caixas pequenas que se posicionam à direita para classificação dos produtos químicos.
Os comandos querySelector / querySelectorAll são usados para selecionar os elementos descritos no html e no css (as classes que foram declaradas) para posteriormente serem associadas a eventos dinâmicos. Além disso, é necessário indicar qual o destino certo de cada produto, como é apresentado Figura 6 onde tem a lista p1 : caixa2 e assim sucessivamente.
No arquivo ".js" também são definidos os eventos que são associados a eventos dinâmicos que podem ser realizados com os "cards". O primeiro deles, apresentado na Figura 7 , é um evento associado a todos os produtos - a seleção do "card" para movimentar quando é feito o clique sobre o mesmo . Como todos os "cards"estão inicialmente na caixa da esquerda, deve-se primeiro clicar sobre um deles para realizar a movimentação para alguma caixa da direita. Nesse clique, o card passa a ficar na cor vermelha, pois foi definido no css uma classe ".selecionado" cuja cor é essa. Depois disso, o usuário deve escolher qual botão utilizar : btn1 → enviar para caixa azul (produto reage violentamente com água), btn3 → enviar para caixa vermelho-alaranjada (produto inflamável) ou btn4 → enviar para caixa lilás (produto oxidante). Se o "card" retornar para cor azul clara o usuário acertou a classificação do produto. Se ele permanecer vermelho, a classificação foi feita errada (no evento de seleção dos botões btn1, btn2, btn3 tem um comando if, onde o "card" permanece vermelho, pois foi definida uma classe ".erro" no css, cuja cor é a mesma da classe ".selecionado"). Nessa situação, basta o usuário selecionar o botão de retorno (bvolt1, bvolt2 ou bvolt3) para a caixa da esquerda e tentar novamente. Repare que no evento dos botões de escolha (btn1, btn2 e btn3), há um filtro que impede a movimentação entre as caixas pequenas. Se o usuário errar, terá que retornar para a caixa da esquerda e tentar novamente. Também observe que há um comando if que impede o envio de mais de 3 produtos para uma mesma caixa, apresentando uma mensagem de erro.
O QuimSeg Card está no link a seguir : QuimSeg Card. Selecione o "card" que deseja movimentar e envie para a caixa que julgue adequada. Se durante a migração, o "card" retornar para coloração azul clara, você acertou a classificação. Se permanecer vermelho, errou. Retorne para a caixa da esquerda e tente outra vez. Preste atenção na mensagem de erro se tentar enviar mais de 3 produtos para uma mesma caixa. Ao final, você pode selecionar um a um nas caixas da direita (coloridas) e enviar os "cards" de volta para caixa de partida ou apenas das um refresh no browser.
O QuimSeg Card Gases está no link a seguir : QuimSeg Card Gases. Selecione o "card" que deseja movimentar e envie para a caixa que julgue adequada. Se durante a migração, o "card" retornar para coloração azul clara, você acertou a classificação. Se permanecer vermelho, errou. Retorne para a caixa da esquerda e tente outra vez. Preste atenção na mensagem de erro se tentar enviar mais de 3 produtos para uma mesma caixa. Ao final, você pode selecionar um a um nas caixas da direita (coloridas) e enviar os "cards" de volta para caixa de partida ou apenas das um refresh no browser.
Observação: alguns gases apresentam mais de um tipo de risco. Neste jogo, eles foram classificados pela característica predominante para fins educativos.
Desenvolvimento : Química Programada