9  Quiz Interativo: Leis Ponderais

Esta folha apresenta um objeto interativo projetado para o estudo das Leis Ponderais da Química, abordando os princípios de conservação da massa e proporções constantes. A proposta do objeto é fornecer uma plataforma de verificação de conhecimento onde o usuário analisa diferentes afirmações científicas e avalia sua veracidade de forma imediata.

O objeto interativo utiliza a biblioteca Plotly estruturada com um menu de seleção do tipo dropdown. Ao escolher uma das afirmações listadas no menu, a interface gráfica atualiza o texto central nativamente, exibindo o enunciado selecionado e o seu respectivo gabarito comentado, identificando se a afirmação é verdadeira ou falsa e a lei associada.

9.1 Download e Uso:

Interface gráfica do quiz interativo sobre Leis Ponderais.

Instruções de uso do objeto interativo:

  1. Clique no botão de seleção localizado na parte superior do gráfico.
  2. Navegue pela lista de afirmações disponíveis sobre as Leis Ponderais.
  3. Selecione a afirmação que deseja analisar.
  4. Observe a atualização automática no painel central para conferir a resposta correta e a justificativa teórica.
Sugestão:
  1. Selecione sequencialmente as afirmações 1, 2 e 3 para comparar como a Lei de Lavoisier (Conservação da Massa) é expressa em diferentes enunciados.
  2. Analise as afirmações 4 e 5 para diferenciar uma proporção constante de uma proporção variável em compostos químicos.
  3. Utilize o gabarito exibido na tela para revisar os conceitos teóricos das leis de Lavoisier, Proust e Dalton diretamente no painel.

9.2 Lógica de código

Este objeto interativo serve como um instrumento pedagógico digital e dinâmico para fixação de conceitos químicos, permitindo o autoestudo das Leis Ponderais sem a necessidade de mediação constante ou de correção manual externa.

A lógica no qual o código foi criado baseia-se no princípio de renderização reativa estática dentro do ecossistema JSPlotly. Como o ambiente de execução delimita e restringe o processamento de scripts pós-renderização (impedindo o uso de funções JavaScript tradicionais de clique ou contadores vivos), a arquitetura do código foi projetada para embutir toda a base de dados diretamente nas propriedades nativas do gráfico. Um array de objetos armazena previamente os rótulos do menu (labels), os enunciados correspondentes e os respectivos gabaritos. O código utiliza uma função de mapeamento (map) para converter essa estrutura em um menu dropdown nativo do Plotly. A reatividade do objeto ocorre por meio do método update interno da biblioteca, que intercepta a escolha do usuário no dropdown e reconfigura instantaneamente o vetor de texto (scatter mode text) exibido no centro da tela, alterando o conteúdo visual sem recarregar a página e garantindo a estabilidade da aplicação na planilha.

Estudante: Escola Estadual Professora Maria Olimpia de Oliveira