Tabla de multiplicar: codifique su propia tabla de tiempos usando JavaScript

Aprender las tablas de multiplicar es una habilidad esencial y es una parte básica de cualquier educación matemática. Una tabla de multiplicar es una herramienta útil que convierte la tediosa memorización en un ejercicio lógico y divertido.

La tabla muestra los productos de dos números. Por lo general, un conjunto de números (1-9) se escribe en la columna izquierda y el otro conjunto en la fila superior. Esto forma dos lados de un cuadrado visual. Sus productos llenan el resto de esa plaza. Parecido a esto:

1 2 3 4 5 6 7 8 9 1 1 2 3 4 5 6 7 8 9 2 2 4 6 8 10 12 14 16 18 3 3 6 9 12 15 18 21 24 27 4 4 8 12 16 20 24 28 32 36 5 5 10 15 20 25 30 35 40 45 6 6 12 18 24 30 36 42 48 54 7 7 14 21 28 35 42 49 56 63 8 8 16 24 32 40 48 56 64 72 9 9 18 27 36 45 54 63 72 81

La naturaleza visual de dicha herramienta mejora el aprendizaje mediante el uso del concepto de áreas. 2 x 3 es igual al número 6 así como al área de un rectángulo con un lado de 2 y otro de 3 .

Hay infinitas formas de presentar el estilo y la funcionalidad de las tablas de multiplicar. Cada autor agregará algo especial. En este artículo, compartiré una forma de diseñar y escribir un gráfico de este tipo.        

Hay un detalle importante que debo mencionar antes de llegar a la descripción del gráfico. Es posible que los bloques de código incrustados en este artículo no estén relacionados entre sí de ninguna manera.

Sin embargo, entre bastidores se colocan dentro de un solo elemento por artículo. Por lo tanto, asegúrese de emplear atributos de clase e identificación que sean únicos para cada bloque. De lo contrario, una clase o una identificación con el nombre compartido en dos o más bloques puede interferir y afectar negativamente el estilo y la funcionalidad.

Cómo construir una tabla de multiplicar

La parte HTML es una versión modificada de una tabla de números romanos. El bloque de construcción básico es un botón. También puede usar un div general , pero encontré que el botón responde mejor.

Los botones se colocan primero en filas, que a su vez se colocan en el contenedor flexible.

Multiplication Table

1 1 2 3 .......................................................... .......................................................... .......................................................... .......................................................... .............................................................

La arquitectura o elemento utilizado no tiene por qué ser único, y puedes agregar tu propio toque original. Apliqué estilo y consultas de medios para permitir una visualización cómoda en varios 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); } } 

Los efectos visuales se logran mediante CSS. Decidí introducir elementos de audio usando JavaScript. Me alegré de descubrir que este editor lo apoyaba.

Cada botón que representa un resultado de la multiplicación está conectado a una función. Una función devuelve un elemento de audio que reproduce un archivo de sonido exclusivo de ese elemento. Un evento de clic sirve como disparador, llamando a esa función.

Los literales de plantilla no se admiten aquí. Por lo tanto, cada llamada de función tenía que estar cableada en elementos y definirse individualmente.

  function onePlay() { const one = new Audio('//evolution.voxeo.com/library/audio/prompts/numbers/1.wav') one.currentTime = 0 one.play() } function twoPlay() { const two = new Audio('//evolution.voxeo.com/library/audio/prompts/numbers/2.wav') two.currentTime = 0 two.play() } ............................................................... ................................................................  

Muchas gracias a los especialistas que crearon esta biblioteca de sonidos y la mantienen. El código completo se puede encontrar como un repositorio de Github haciendo clic aquí.

Tabla de multiplicar. Desplazarse y hacer clic

1 2 3 4 5 6 7 8 9 1 1 2 3 4 5 6 7 8 9 2 2 4 6 8 10 12 14 16 18 3 3 6 9 12 15 18 21 24 27 4 4 8 12 16 20 24 28 32 36 5 5 10 15 20 25 30 35 40 45 6 6 12 18 24 30 36 42 48 54 7 7 14 21 28 35 42 49 56 63 8 8 16 24 32 40 48 56 64 72 9 9 18 27 36 45 54 63 72 81

Cómo construir un juego de multiplicar

Como la práctica es la mejor manera de aprender y la multiplicación no es una excepción, decidí escribir un pequeño juego, que puedes ver a continuación.

Ingrese su respuesta y haga clic en Enviar

Enviar

Correcto:

Incorrecto:

Reiniciar

En la ventana superior izquierda, hay una pregunta de desafío. Junto a él hay un elemento de entrada que toma una respuesta. Al hacer clic en el botón Enviar, se evalúa esa respuesta y se muestra el mensaje que indica si es correcta.

Las respuestas correctas se agregan al contador verde "Respuestas correctas", mientras que las respuestas incorrectas se agregan al rojo junto a él.

Una vez que se evalúa la respuesta, se genera una nueva pregunta de desafío utilizando un generador de números aleatorios y el ciclo se repite. Después de diez ciclos de preguntas, el juego se detiene y se muestra el resultado final, acompañado de la reproducción de un archivo de sonido.

Al presionar el botón Reiniciar comienza un nuevo juego de diez preguntas. Al presionar el botón Enviar sin ingresar una respuesta, se activa un mensaje y un sonido de advertencia.

Puede cambiar fácilmente el diseño visual y la ubicación de los elementos dentro de las limitaciones del editor. Además, la lógica empleada aquí también se puede aplicar en el diseño de otros juegos. Por ejemplo, la multiplicación se puede cambiar a trivia de películas y mucho más.

Se puede acceder al código completo con comentarios como un repositorio de Github haciendo clic aquí.