JSPlotly e GSPlotly na Escola

  Para ilustrar o potencial de uso do JSPlotly para o ensino fundamental e médio, seguem alguns exemplos de simulações e cujos gráficos são frequentemente encontrados em livros-texto e conteúdos afins. Para um melhor aproveitamento de cada tema, experimente seguir as sugestões para manipulação paramétrica em cada tema.


Instruções

1. Escolha um tema;
2. Clique no gráfico correspondente;
3. Clique em "Add Plot";
4. Use o mouse para interatividade e/ou edite o código. 

Lembrete: o editor usa desfazer/refazer infinitos no código (Ctrl+Z / Shift+Ctrl+Z) !


Gráficos e Mapas

1 Matemática

1.1 Contexto - Trigonometria (EM13MAT306, EM13MAT308, EM13MAT307)

  A simulação a seguir objetiva facilitar a visualização para alguns conceitos em trigonometria, seno, cosseno e tangente. O código permite usar um menu suspenso para cada função trigonométrica, bem como um slider para alterar a frequência em radianos.

Equação:

1. Função seno:

\[ y = \sin(\omega x) \]

2. Função cosseno:

\[ y = \cos(\omega x) \]

3. Função tangente:

\[ y = \tan(\omega x) \]

Sugestão:

1. Selecione, alternativamente, a função seno, cosseno, e tangente, utilizando-se o "menu suspenso";
2. Experimente o efeito de se alterar a frequência da função na barra deslizante ("slider");
3. Sobreponha um gráfico de seno e um de cosseno para observar suas diferenças;
4. Repita o mesmo para o gráfico de tangente.


1.2 Contexto - Uso de seletor e botões em flutuação de dados (EF07MA21, EF07GE04, EM13MAT301, EM13CHS104, EM13CNT103)

  Um botão acessa uma determinada situação, enquanto que um seletor permite ampliar determinada área de valores buscando sobressair uma informação gráfica para uma função ou flutuações significativas. Ilustra-se ambos abaixo uma simulação para flutuação temporal de valores (expressada como uma senoide modificada por acréscimos aleatórios).


Sugestão:

1. Arraste os marcos de extremidade do gráfico para visualizar um limite mais restrito;
2. Clique nos botões com períodos distintos;
2. Pode-se alterar o ruido aleatório em torno da equação matemática que define a flutuação acima bastando-se modificar a linha de código em: "const valores = dias.map((_, i) => 50 + 10 * Math.sin(i / 10) + Math.random() * 50);" - altere "50" para "5".


1.3 Contexto - Animação simulada para uma função (EF07MA20, EF09MA20, EM13MAT302, EM13MAT304)

  É possível com o aplicativo simular uma animação por quadros, visando melhorar o aprendizado de um tema, por inserção de um controle deslizante manual. O exemplo a seguir apresenta um simulador para animação manual para funções matemáticas. Para seu uso, basta deslizar o slider progressivamente para visualização gráfica do resultado frente à mudança da variável preditora.

Obs: Esse objeto didático tem um truque…na verdade, dois ! Após clicar em add, é necessário deslizar o slider primeiro para visualizar o gráfico. E para visualizar uma animação para outra equação, é necessário atualizar a página, como orientado na margem inferior da tela gráfica.

Sugestão:

1. Deslize o controle para evidenciar a animação manual;
2. Experimente substituir a equação modelo por outra, e arraste o controle deslizante para observar o efeito;
3. Altere alguns parâmetros para a animação, por exemplo, aumentando os níveis de "frames" (slider.max = "50"; slider.value = 1);
4. Recarregue a página e mude a função matemática; ex: "let f = x => Math.sin(x);"


1.4 Contexto - Animação simulada com múltiplos deslizadores

  Mais simples e imediato que alterações no código, deslizadores (sliders) podem contribuir de modo mais imediato à compreensão de um problema, como segue para o exemplo dos parâmetros de uma parábola.

1. Arraste qualquer slider, e observe a tendência apresentada, bem como a mudança nos parâmetros da equação no topo;
2. Como no exemplo anterior, é possível alterar a função matemática no código, bem como os parâmetros para um novo slider. Teste isso alterando a função "  y_values = x_values.map(x => a * x * x + b * x + c);
" para "  y_values = x_values.map(x => Math.sin(a * x * x + b * x + c));"

2 Matemática Financeira

2.1 Contexto - Juros Compostos (EM13MAT402):

  Também conhecido pela máxima “juros sobre juros”, os juros compostos incorporam valor ao capital ao longo do tempo, resultando no cresimento do montante final.

Equação:

\[ M = C \cdot (1 + i)^t \]

Onde,

  • M: montante final
  • C: capital inicial
  • i: taxa de juros por período (em decimal)
  • t: número de períodos (ex: meses)

Sugestão:

1. Varie o período de contratação, a taxa mensal de juros ou o montante inicial.
2. Experimente combinar os parâmetros na variação.
3. Avalie a diferença visual entre um investimento e um empréstimo, inserido valor positivo de capital inicial para o 1o. e negativo para o 2o. 
4. Observe a curva descendente para um empréstimo simulado com capital inicial negativo. Os valores remanescentes referem-se à dívida faltante para quitar o empréstimo.


3 Estatística

3.1 Contexto - Curva de distribuição normal (EM13MAT316, EM13MAT407, EM13MAT312)

      Amostragem e população são temas comuns para observação de dados em procedimentos analíticos. As curvas de distribuição estatísticas para isso envolvem a distribuição t-Student, F-Snedecor, Chi-quadrado, e distribuição normal. A curva de distribuição normal reflete o comportamento estatístico para fenômenos naturais em uma dada uma população de dados.
      O exemplo pretende ilustrar o uso da transformação z, o cálculo de valores críticos, e a interpretação da área sob a curva no estudo da distribuição normal e de inferência estatística.

Equação

      A função densidade da distribuição normal (ou Gaussiana) é dada abaixo?

\[ f(x) = \frac{1}{\sigma \sqrt{2\pi}} \, e^{ -\frac{(x - \mu)^2}{2\sigma^2} } \]

Onde:

  • \(\mu\) = 0 (média da distribuição);
  • \(\sigma\) = 1 (desvio padrão);
  • x = variável aleatória contínua; f = função de densidade da distribuição normal
      Da equação acima pode-se extrair z, o valor da variável aleatória padronizada para média nula e desvio-padrão unitário, representando o valor no eixo das abscissas:

\[ z = \frac{x - \mu}{\sigma} \]

Sugestão:

1. Experimente alterar o valor de "p" e rodar o gráfico. Esse valor representa a probabilidade de se observar, sob a hipótese nula, um valor tão extremo ou mais extremo do que o observado — ou seja, mede a evidência contra a hipótese nula. No gráfico, representa a área sob a curva normal nas regiões críticas, indicando a chance de ocorrência do resultado observado por puro acaso.


4 Ciências da Computação

4.1 Contexto - Treinamento em JavaScript (EF09LP27, EF06MA20, EM13MAT503, EM13LGG701)

  De especial tecido ao pensamento computacional e à lógica de programação, o exemplo que segue ilustra uma metalinguagem ao JSPlotly, qual seja, um aplicativo em linguagem de programação específica produzindo um script para o aprendizado da própria linguagem.



Sugestão:

1. Aqui o "céu é o limite" ! Existem inúmeras possibilidades para comandos e funções em JavaScript, bem como para saída conjunta de dados, cálculos e gráficos.


5 Física

5.1 Contexto - Altura, harmonia e timbre de sons (EF15AR06, EM13ARH402)

      O exemplo a seguir ilustra os conceitos de altura (frequência), harmonia e timbre (ondas puras e harmônicos) para um gráfico de tonalidades musicais (escala diatônica).


5.2 Sugestão

1. Teste outras tonalidades (C,G,D, etc), observando como se apresenta a onda pura sobrepondo os gráficos;
2. Avalie a diferença entre uma onda pura e aquela produzida com instrumentos musicais, envolvendo harmônicos naturais. Para isso, substitua a opção booleana de "false" para "true" na variável "const ondaComposta".


5.3 Contexto - Energia potencial elástica (EM13CNT102,EM13CNT202, EM13MAT402)

  A deformação de um material elástico é diretamente proporcional à força exercida sobre esse, e limitada às propriedades do material.

Equação

  O comportamento de uma mola ideal é descrita pela Lei de Hooke abaixo:

\[ F = -k*x \]

Onde:

  • F = força restauradora da mola (N);
  • k = constante elástica da mola (N/m);
  • x = deformação (m).
  Por outro lado, a energia potencial elástica envolvida é descrita pela relação quadrática que segue:

\[ E = \frac{1}{2}*k*x^2 \]

Onde:

  • E = energia potencial elástica (J).

Sugestão:

1. Experimente alterar o valor da constante elástica da mola para evidenciar seu efeito, relacionando-a com molas mais rígidas ou menos rígidas;
2. Altere os limites de deformação da mola na "estrutura de constrole" do código (ex: "for (let x = -0.7)"), e observe o efeito na energia potencial máxima;
3. Observe que, pela operação quadrática no valor da deformação, a energia potencial é sempre positiva.


5.4 Contexto - Movimento de corpos (EM13CNT102):

  O código a seguir ilustra a trajetória de um lançamento oblíquo com ângulo ajustável por uma barra deslizante (slider), útil para explorar os conceitos de cinemática.

Equação:

1. Equação geral

\[ y(x) = x \cdot \tan(\theta) - \frac{g}{2 v_0^2 \cos^2(\theta)} \cdot x^2 \]

Onde:

  • y(x): altura em função da distância horizontal;
  • x: posição horizontal (m);
  • \(\theta\): ângulo de lançamento em relação à horizontal (radianos ou graus);
  • v0: velocidade inicial do projétil (m/s);
  • g: aceleração da gravidade (9,8 m/s²\(^{2}\))

2. Tempo total de vôo:

\[ t_{\text{total}} = \frac{2 v_0 \sin(\theta)}{g} \]

3. Posição Horizontal ao longo do tempo

\[ x(t) = v_0 \cos(\theta) \cdot t \]

Sugestão:

1. Veja que há uma barra deslizante para ângulos iniciais na simulação. Arraste a barra para outro ângulo e adicione o gráfico, comparando o efeito dessa modificação.
2. Altere a velocidade inicial no código, e observe o efeito no gráfico.
3. Simule uma "condição lunar" para a trajetória, e cuja gravidade é em torno de 1/6 a da Terra (~1.6 m/s²).


5.5 Contexto - Animação para lançamento oblíquo (EF09CI09, EF09MA20, EM13CNT103, EM13MAT304)

  Assim como simulações, animações podem auxiliar na compreensão de um tema específico (aprendizado basedo em simulação ou em animação). O JSPlotly pode trabalhar diretamente com animações junto à biblioteca Plotly.js (inserção de frames, buttons, transitions, por ex).
      Segue uma animação para lançamento parabólico de um projétil, descrita pelas equações do tópico anterior. Distinta daquele, porém a inserção de uma animação possibilita agregar valor à compreensão do fenômeno, ao oferecer a possibilidade de manipulação paramétrica do código associada à animação propriamente dita.


Sugestão:

1. Assim como no tópico anterior, experimente alterar parâmetros da equação, tais como a velocidade inicial e o ângulo de ataque, e observar o efeito dessas mudanças.


6 Química

6.1 Contexto - Bandas de absorção em função de concentração - representação 3D (EF09CI04, EF09MA17, EM13CNT103, EM13MAT305)


Sugestão

1. Experimente alterar o padrão do gráfico e suas cores. Respectivamente: type: 'surface', colorscale: 'Viridis');
2. Altere a faixa de comprimento de onda, separando os picos; para isso, mude as variáveis min/max de lambda: const lambdaMin = 450, lambdaMax = 600;


6.2 Contexto - Capacidade Calorífica (EF09CI06, EM13CNT104, EM13CNT203)

  A simulação que segue visa observar a relação entre o calor trocado (Q), a massa (m), a capacidade calorífica (c) e a variação de temperatura (\(\Delta\)T).

Equação:

\[ Q = c \cdot m \cdot \Delta T \]

Sugestão:

1. Experimente variar inicialmente a temperatura, sobrepondo alguns gráficos;
2. Varie também a massa no editor de códigos, para comparação.


6.3 Contexto: Mistura de substâncias em reação exotérmica - gráfico 3D (EF09CI02, EM13CNT103, EM13CNT103)

  Simulações podem ser realizadas sem necessariamente envolver uma relação matemática, como na observação experimental de duas variáveis, como tempo e concentração, simulando uma reação química exotérmica. Segue um exemplo interativo em 3D.
  Nesse caso, a equação utilizada no editor envolve uma variação suave de temperatura ao longo do tempo, empregando-se a função seno e uma temperatura inicial (vide o código).


Sugestão:

1. Experimente variar inicialmente a temperatura, sobrepondo alguns gráficos;
2. Varie também a massa no editor de códigos, para comparação.


6.4 Contexto - Animação e cinética de reação

      Um tópico de assimilação desconfortável ao estudante refere-se à abstração necessária para se descortinar as relações matemáticas que se apresentam na cinética de reações químicas. Ao tratar velocidades e equilíbrio reacional

7 Biologia

7.1 Contexto - Área de biomas brasileiros (EF05GE05, EF08GE08, EM13CNT301, EM13CNT304)

Sugestão

1. Os dados apresentados são apenas para efeito de simulação. Desejando dados mais robustos, recomenda-se fontes seguras (ex: MapBiomas Brasil - https://brasil.mapbiomas.org/)
2. Este é um gráfico de barras, apenas isso. Se você alterar as informações presentes nas constantes dos 3 primeiros vetores ("const X = [...]"), poderá converter a representação para um tema distinto.


7.2 Contexto: Diagrama de ciclo da água (EF06CI03, EF06CI04, EM13CNT103, EM13CNT202)

  O aplicativo também permite a criação de outros objetos didáticos interativos, sem a necessidade de inserção de equações, como diagramas e fluxogramas. Seguem exemplos.

Sugestão:

1. Como para diagramas acima, experimente alterar no código as propriedades das setas e dos termos e campos envolvidos no fluxograma;
2. Substitua termos para a formação de outro fluxograma;
3. Reposicione os objetos na área gráfica (campos, termos, setas) com auxílio do mouse.


7.3 Contexto: Diagrama de ciclo claro e escuro da fotossíntese (EM13CNT101, EM13CNT103, EM13CNT201, EM13MAT405)

Sugestão

1. Experimente reposicionar as entradas e saídas (ex: Luz, Glicose) por simples arraste de mouse;
2. Substitua os termos dentro dos quadros, ou mude outros aspectos do diagrama (cor, preenchimento, por ex).


7.4 Contexto - Modelo de Crescimento Populacional com Fase Lag (EM13CNT102, EF06MA17, EF08CI06, EM13MAT301, EM13CNT201)

  Este modelo apresenta uma função logística que simula o crescimento populacional (microorganismos, células, por ex), acompanhado por um componente de retardo. Variando-se os parâmetros no editor, é possível estimar diversos perfis de crescimento populacional.

Equação:

\[ N(t) = \frac{K}{1 + \left(\frac{K - N_0}{N_0}\right) \cdot e^{-r \cdot A(t) \cdot t}}, \quad \text{com } A(t) = \frac{1}{1 + e^{-k(t - t_0)}} \]

Onde:

  • K = capacidade de suporte ambiental;
  • N0 = população inicial;
  • r = taxa intrínseca de crescimento;
  • A(t) = fator de ativação do crescimento com atraso (fase lag);
  • t0 = ponto médio de transição entre fase lag e fase log;
  • k = constante de suavidade do retardo (fixado como 0.5 no código)

Sugestão:

1. Experimente variar os parâmetros da equação, combinando alguns, e comparando seus efeitos sobre os gráficos:
  a. Capacidade de suporte;
  b. População inicial;
  c. Taxa de crescimento;
  d. Retardo (fase lag);


7.5 Contexto - Eficiência energética e cadeia alimentar (EF06CI02, EM13CNT202, EM13CNT203)

      Segue um exemplo para retratar a transferëncia de energia entre diferentes níveis tróficos de uma cadeia alimentar. Embora não haja propriamente uma função matemática que a descreva, pode-se aplicar a lei dos 10% de eficiência ecológica entre os níveis da cadeia, o que resulta numa relação logaritmica de transferência.

Sugestão

1. A regra de Lindeman, esboçada na referência acima, estabelece uma variação para 5-20% de eficiência energética no ecossistema. Assim, experimente sobrepor as curvas com tais taxas;
2. Se quiser observar a relação logarítmica da transferência de energia, acrescente o comando "type: 'log'," , logo abaixo de "title: 'Energia disponível (unidades)',".


7.6 Contexto - Animação de mapa de áreas queimadas por bioma no Brasil - dados fictícios de 1955 a 2024 (EF07CI08, EF08GE08, EM13CHS101, EM13CNT201)

      O uso de mapas em C. da Natureza e C. Humanas encontra um ponto em comum para problemas ambientais e sócio-econômicos, como o ilustrado pela animação a seguir. Nessa, a área em quilômetros quadrados para queimadas em cada bioma brasileiro é oferecida à animação com período e área junto ao título do objeto interativo, e com slider temporal abaixo.



1. É salutar buscar fontes de informação mais precisas sobre os temas tratados, posto que o GSPlotly, como um assistente de IA, não garante a a natureza das informações. No exemplo, sugere-se o "Programa Queimadas - INPE - Terrabrasilis" (https://terrabrasilis.dpi.inpe.br/queimadas/situacao-atual/situacao_atual/);
2. Pode-se inserir dados mais precisos no próprio script, no campo de "const usar_dados_ficticios = true; // mude para false e preencha areaBiomaAno_real()";
3. Pode-se modificar a temática do mapa animado para qualquer outra, bastando-se alterar os dados nas constantes de "Controle Geral" do script.


8 Geografia

8.1 Contexto: Mapa do Brasil e Capitais (EM13CHS101, EM13CHS202, EM13CHS301)

  Não apenas de equações vive o JSPlotly ! Com a biblioteca Plotly.js que o compõe, é possível produzir também mapas interativos, como o da simulação que segue.

Sugestão:

1. Experimente usar o botão de rolagem do mouse e ícone "pan" da barra superior, para interagir com o mapa.


8.2 Contexto: Mapa mundi e algumas cidades de grande porte (EF06GE05, EF07GE06, EM13CHS101, EM13MAT502)


1. Experimente alterar o script, inserindo outras cidades com suas respectivas coordenadas geográficas em "const data" (text, long - longitude, lat - latitude)


8.3 Contexto: Mapa e PIB do Oriente Médio (EF09GE03, EF08GE06, EM13CHS104, EM13CHS201)

Sugestão:

1. Experimente usar o botão de rolagem do mouse;
2. Clique num país para identificar seu nome e produto interno bruto aproximado;;
3. Modique o código para atualizar algum dado, ou para modificar a informação (trocando PIB por outro dado, por ex).


9 História

9.1 Contexto - Distribuição de escravizados nas Américas no período de 1500–1888 (EF08HI06, EM13CHS104, EM13CHS503):

   Esta simulação apresenta um gráfico de barras interativo para seleção de período por menu suspenso, e tangente à quantidade estimada de africanos escravizados desembarcados nas principais regiões da América. Os dados são estimativas aproximadas para ilustrar o potencial de visualização do aplicativo, embora servindo como ponto de partida para discussões educacionais mais precisas. Fontes passíveis de consulta incluem Slave Voyages.


Sugestão:

1. Experimente alterar entre os períodos no menu suspenso, comparando as estimativas de tráfico escravo;
2. Selecione um período, crie o gráfico, selecione outro período, e adicione outro gráfico. Isso permite comparar o quantitativo de escravos aportados pelas barras duplas formadas, e passagem do mouse sobre cada barra.


9.2 Contexto - Linha do tempo de eventos da Idade Média (EM13CHS101, EM13CHS102)

Fonte: Encyclopedia.com

Sugestão:

1. Experimente alterar no código eventos e períodos, e destinados a outro período da História humana.


9.3 Contexto - Alterações cartográficas percebidas ao longo do tempo (EF08GE09, EF07GE05, EM13CHS102, EM13CHS104)

      Pode ser interessante transmitir informações geográficas e/ou históricas ao longo do tempo na representação de um mapa. Segue um exemplo.


Sugestão:

1. Pode-se alterar a formatação do mapa no código para cores ("lakecolor"), posição do menu ("updatemenus"), duração da transição entre frames ("transition"), entre outros;
2. Esse exemplo é genérico; altere as constantes em "paises", "anos", e "valores", e obtenha um novo mapa para um tema específico.


9.4 Contexto - Linha do tempo de eventos da Idade Média (EM13CHS101, EM13CHS102)

Fonte: Encyclopedia.com

Sugestão:

1. Experimente alterar no código eventos e períodos, e destinados a outro período da História humana.


10 Linguagens

10.1 Contexto - Gírias faladas no Brasil de 1980-2020 (EF89LP19, EM13LGG102)

  Esta simulação é direcionada para uma estimativa do uso de gírias faladas no Brasil durante os últimos 40 anos. A representação dá-se num gráfico de pizza, e a seleção por década num menu suspenso.


1. Pode-se usar a passagem de mouse para observar o "tip" (dica) apresentada para cada dado no gráfico.


10.2 Contexto - Frequência de palavras em texto (EM13LGG101, EM13LGG302, EM13LGG303)

Sugestão

1. Experimente substituir o texto do código por outro;
2. Experimente variar o quantitativo de termos mais frequentes na variável "const entradas" (opcionalmente, varie também no título do gráfico, para fazer sentido);
3. Compare um texto em português com sua tradução para inglês ou outra língua.


10.3 Contexto - Obras lieterárias e movimentos estéticos (EF89LP47, EM13LP01, EM13LP02, EM13LGG201)

  O exemplo que segue ilustra o uso de recursos interativos, botão e seletor, para um conjunto de obras da literatura nacional.

Sugestão

1. Arraste os marcadores extremos para ampliar o foco em um período específico da lieratura;
2. Altere o script acrescentando outras obras-chave em "const obras =" e "const periodos ="

11 Artes

11.1 Contexto - Prancha de desenho (EF15AR06, EF09AR07, EM13LGG604, EM13LGG606)

  Não só de matemática, gráfico e mapas “vive” o JSPlotly. Experimente desenhar na prancha correlata à imagem que segue.



Sugestão

1. Explore o script. Apesar de simples, ele permite selecionar cores distintas, espessuras de canetas, e formas geométricas;
2. Como os demais objetos elaborados no JSPlotly, o desenho da prancha pode ser armazendo conservando sua interatividade pelo botão "html", e mesmo modificado no próprio arquivo salvo ("play.html");
3. Se desejar alterar cores, espessuras, ou quiser acrescentar outras funcionalidades, verifique as variáveis do script;
4. Experimente o botão "clone", que permite clonar a prancha juntamente com seu código.


11.2 Contexto - Criação de objetos 3D (EF09MA16, EF15AR06, EM13MAT405, EM13LGG604)

  Objetos tridimensionais podem ser gerados por funções matemáticas no espaço tridimensional, tal como ilustrado abaixo.


1. Experimente alterar alguns valores no script, testando o resultado. Por exemplo, crie uma tapete (ou melancia achatada) alterando o código em: "const zVal = L * (t - 0.5)"...para "const zVal = L * (t - 20.5);"


11.3 Contexto - Composição fractal (EM13MAT301, EM13MAT305, EM13MAT401, EM13ARM502, EF09MA10)

      Fractais constituem objetos geométricos com simetria de escala, formando padrões que se repetem em partes menores do objeto original. As representações matemáticas mais comuns são os fractais de Mandelbrot e os fractais de Julia.

Equação

     Fractais de Julia são formados em plano cartesiano complexo, pela somatória dos componentes real e imaginário. A fórmula básica para o conjunto de Julia é dada por:

\[ z_{n+1}=z_{n}^{2}+c \]

Onde:

  • z ∈ C: geralmente inicializado como o ponto do plano complexo;

  • c ∈ C: fixo para cada conjunto de Julia.

Sugestão

1. Experimente alterar os componentes Real e Imaginário da fórmula, para obter padrões artísticos distintos. Seguem sugestões:
  c = 0 + 0i
  c = -0.4 + 0.6i
  c = 0.285 + 0i
  c = -0.8 + 0.156i
  c = 0.45 + 0.1428i


11.4 Fractal de Mandelbrot

  Outra estrutura interessante envolve os fractais de Mandelbrot, representados por um conjunto diferente de equações. O exemplo a seguir agrega esse fractal com menu de escolha.


Sugestão

1. Selecione cores e níveis de ampliação distintos ("zoom") nos dois menus, para visualizações distintas;
2. Verifique onde se encontram as equações que definem o perfil de Mandelbrot no código, e tece pequenas alterações para verificar resultados distintos.


11.5 Contexto - Editor de notação musical (EF15AR06, EF69AR22, EM13ARH402)

      O exemplo a seguir ilustra os conceitos de altura (tonalidade) e duração para notas musicais em escala diatônica. As legendas representam os valores de duração, e as tonalidades são apresentadas em seus valores de frequência

1. Experimente alterar a sequência melódica do código no vetor correspondente;
2. Experimente alterar as figuras de duração no vetor correspondente


12 Ensino Religioso

12.1 Contexto - Diagrama interativo sobre as 10 últimas encíclicas papais (EF05ER01, EF09ER02, EM13ER04)

Sugestão

1. Para perceber o dinamismo da representação, experimente arrastar qualquer parte do fluxograma, e observe a acomodação das demais;
2. Como dantes, pode-se alterar a informação constante no fluxograma, mantendo suas características gráficas e dinâmicas, bastando-se alterar as constantes utilizadas para gerar o objeto ("const = ").


13 STEAM

13.1 Contexto - Vaso em torno de olaria (EM13MAT101, EM13MAT403, EM13CNT204, EM13AR01, EM13AR02)

      A plataforma também permite criações para a integração em Ciência, Tecnologia, Engenharia, Artes, e Matemática (STEAM). Segue um exemplo de simulação para torneamento cerâmico e moldagem manual de argila, e que permite experimentar formas simétricas e arredondadas, como vasos, tigelas e potes, por ajuste em alguns parâmetros e nas funções trigonométricas do código.

1. Altere a altura do vaso, seu formato, e suas cores, editando o código nos campos específicos.

13.2 Contexto - Mini CAD (EM13MAT301, EM13MAT503, EM13MAT402)

      Segue um exemplo de código para manipulação de formas geométricas em 3D (curvas ou retas) na elaboração de um mini CAD (Computer-Aided Design).

1. Experimente alterar os parâmetros base, altura e curvatura do código, variando também o sinal dos valores (positivo, negativo);
2. Altere alguma função trigonométrica (linhaX ou linhaY, seno para tangente, por exemplo), e sobreponha ao plot;
3. Sobreponha figuras geométricas com paleta de cores distintas.
4. Crie figuras simétricas sobrepondo uma curva com parâmetro positivo a uma com mesmo parâmetro negativo.

14 Jogos

  Em função do JSPlotly envolver uma linguagem de programação, JavaScript, é plausível que consiga oferecer um conjunto de operações tangíveis a essa, independentemente da construção de gráficos (como em diagramas e fluxogramas acima).
  Em paralelo à riqueza que acompanha a gameficação como metodologia ativa, a criação de um jogo pode estimular o aprendiz a um outro nível, posto que a estratégia por vezes já faz parte de seu cotidiano. Jogar é uma coisa…criar um jogo pode ter impacto mais proeminente e recursivo ao pensamento e lógica computacionais, bem como ao aprendizado da própria linguagem de programação !

Contexto - Jogo da Memória (EF06MA19, EF06MA16, EF07MA26, EF09MA19, EM13MAT401, EM13MAT102, EM13MAT403)

  A imagem clicável abaixo direciona para um clássico Jogo de Memória Numérica. O objetivo é acertar um par de valores após memorização de um quadro numérico. Para jogar, siga as instruções que seguem:


Instruções para o Jogo de Memória Numérica:

    1. No campo superior existem duas constantes booleanas true/false, uma para jogar (jogue) e outra para verificar o acerto (verificar), bem como uma semente que fixa um determinado quadro numérico aleatório;
    1. Inicie o jogo (jogue/false, verificar/false);
    1. Clique no botão add e será exibido um quadro de pares numéricos para memorização;
    1. Troque para jogue/true, clique em clean plot, e depois em add. O quadro será exibido agora apenas com um valor (demais células mostratrão “?”);
    1. Escolha verificar/true, clique em clean plot, e depois em add. Será apresentado um campo para se digitar as coordenadas em que se acredita estar o outro par numérico (Ex: A2);
    1. Clique em OK, e será apresentado um par formado pelo valor inicial e o valor escolhido, para verificação do acerto.
  Para reiniciar o jogo, clean plot, e opções booleanas false.
  Divirta-se !!


1. Para jogar novamente alterando os valores do quadro, basta modificar a constante *semente* para um número qualquer;
2. Para variar entre níveis de dificuldade do jogo, basta alterar o número de linhas e de colunas nas constantes respectivas do código.
De volta ao topo