5
10
15
20
25
30
35
40.
45
6
12
18
24
30
36.
42.
48.
54
7
14
21
28.
35
42.
49.
56.
63.
8
16
24
32.
40.
48.
56.
64
72
9
18
27
36.
45
54
63.
72
81
A natureza visual de tal ferramenta aprimora o aprendizado usando o conceito de áreas. 2 x 3 é igual ao número 6 bem como a área de um retângulo com um lado da 2 e outro de 3.
Existem inúmeras maneiras de apresentar o estilo e a funcionalidade dos gráficos de multiplicação. Todo autor adicionará algo especial. Neste artigo, compartilharei uma maneira de projetar e escrever esse gráfico.
Há um detalhe importante que devo mencionar antes de chegar à descrição do gráfico. Os blocos de código incorporados neste artigo podem não estar relacionados de forma alguma.
No entanto, nos bastidores, eles são colocados dentro de um único <body> elemento por artigo. Portanto, certifique-se de empregar Eu iria e classe atributos que são único para cada bloco. Caso contrário, uma classe ou um ID com o nome compartilhado em dois ou mais blocos pode interferir e afetar negativamente o estilo e a funcionalidade.
Como criar um gráfico de multiplicação
A parte HTML é uma versão modificada de um Gráfico numeral romano. O bloco de construção básico é um botão. Você também pode usar um div, mas achei o botão mais responsivo.
Os botões são primeiro colocados em linhas, que por sua vez são colocadas no contêiner flexível.
<div class="flex-table"> <h2 class="table-title">Multiplication Table</h2> <div class="table-row"> <button class="item header">1</button> <button class="item core" onmouseover="onePlay()">1</button> <button class="item core" onmouseover="twoPlay()">2</button> <button class="item core" onmouseover="threePlay()">3</button> .......................................................... .......................................................... </div> <div class="table-row"> .......................................................... .......................................................... </div> ............................................................. <div> A arquitetura ou o elemento usado não precisa ser exclusivo e você pode adicionar seu próprio toque original. Apliquei consultas de estilo e mídia para permitir uma visualização confortável em vários dispositivos.
/* Mobile phones */ @media screen and (max-width: 767px){ .flex-table { transform: scale(0.60); } } /* Tablets and iPads */ @media screen and (min-width: 768px) and (max-width: 1023px){ .flex-table { transform: scale(0.8); } } Os efeitos visuais são alcançados através do CSS. Decidi introduzir elementos de áudio usando JavaScript. Fiquei feliz em descobrir que este editor era compatível.
Cada botão que representa um resultado da multiplicação é conectado a uma função. Uma função retorna um elemento de áudio que reproduz um arquivo de som exclusivo para esse elemento. Um evento de clique serve como gatilho, chamando essa função.
Literais de modelo não são suportados aqui. Assim, toda chamada de função precisava ser conectada aos elementos e definida individualmente.
<script> function onePlay() { const one = new Audio('https://evolution.voxeo.com/library/audio/prompts/numbers/1.wav') one.currentTime = 0 one.play()}function twoPlay() { const two = new Audio('https://evolution.voxeo.com/library/audio/prompts/numbers/2.wav') two.currentTime = 0 two.play()} ............................................................... ................................................................ </script> Muito obrigado aos especialistas que criaram e mantêm essa biblioteca de sons. O código completo pode ser encontrado como um repositório do Github em clicando aqui.
Gráfico de multiplicação. Passe o mouse e clique
Como criar um jogo de multiplicação
Como a prática é a melhor maneira de aprender e a multiplicação não é exceção, decidi escrever um joguinho, que você pode ver abaixo.
Digite sua resposta e clique em Enviar
Na janela superior esquerda, há uma pergunta desafiadora. Ao lado, há um elemento de entrada que recebe uma resposta. Clicar no botão Enviar avalia a resposta e gera a mensagem indicando se está correta.
As respostas corretas são adicionadas ao contador verde “Respostas corretas”, enquanto as respostas incorretas são adicionadas ao vermelho próximo a ele.
Depois que a resposta é avaliada, uma nova pergunta de desafio é gerada usando um gerador de números aleatórios e o ciclo se repete. Após dez ciclos de perguntas, o jogo pára e o resultado final é exibido, acompanhado pela reprodução de um arquivo de som.
Pressionar o botão Reiniciar inicia um novo jogo de dez perguntas. Pressionar o botão Enviar sem inserir uma resposta aciona uma mensagem de aviso e som.
Você pode alterar facilmente o design visual e a localização dos elementos dentro das limitações do editor. Ademais, a lógica empregada aqui também pode ser aplicada na criação de outros jogos. Por exemplo, a Multiplicação pode ser alterada para Curiosidades sobre filmes e muito mais.
O código completo com comentários pode ser acessado como um repositório do Github por clicando aqui.