Tableau de multiplication - Codez votre propre tableau de temps à l'aide de JavaScript

Apprendre vos tables de multiplication est une compétence essentielle et un élément de base de toute formation en mathématiques. Un tableau de multiplication est un outil pratique qui transforme la mémorisation fastidieuse en un exercice amusant et logique.

Le graphique montre les produits de deux nombres. Habituellement, un ensemble de nombres (1 à 9) est écrit dans la colonne de gauche et l'autre dans la rangée supérieure. Cela forme deux côtés d'un carré visuel. Leurs produits remplissent le reste de cette place. Ressemblant à ceci:

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 nature visuelle d'un tel outil améliore l'apprentissage en utilisant le concept de zones. 2 x 3 équivaut au nombre 6 ainsi qu'à l'aire d'un rectangle avec un côté de 2 et un autre de 3 .

Il existe d'innombrables façons de présenter le style et les fonctionnalités des graphiques de multiplication. Chaque auteur ajoutera son petit quelque chose de spécial. Dans cet article, je vais partager une façon de concevoir et d'écrire un tel graphique.        

Il y a un détail important que je dois mentionner avant d'arriver à la description du graphique. Les blocs de code intégrés dans cet article ne peuvent en aucun cas être liés les uns aux autres.

Cependant, dans les coulisses, ils sont placés à l'intérieur d'un seul élément par article. Par conséquent, assurez-vous d'utiliser des attributs id et class qui sont uniques à chaque bloc. Sinon, une classe ou un identifiant avec le nom partagé sur deux blocs ou plus peuvent interférer et affecter négativement le style et la fonctionnalité.

Comment créer un graphique de multiplication

La partie HTML est une version modifiée d'un graphique en chiffres romains. Le bloc de construction de base est un bouton. Vous pouvez également utiliser un div général , mais j'ai trouvé le bouton plus réactif.

Les boutons sont d'abord placés en rangées, qui à leur tour sont placées dans le conteneur flexible.

Multiplication Table

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

L'architecture ou l'élément utilisé n'a pas à être unique et vous pouvez ajouter votre propre touche originale. J'ai appliqué des requêtes de style et de média pour permettre une visualisation confortable sur divers appareils.

 /* 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); } } 

Les effets visuels sont obtenus via CSS. J'ai décidé d'introduire des éléments audio en utilisant JavaScript. J'ai été ravi d'apprendre que cet éditeur le soutenait.

Chaque bouton représentant un résultat de multiplication est relié à une fonction. Une fonction renvoie un élément audio qui lit un fichier son unique pour cet élément. Un événement de clic sert de déclencheur, appelant cette fonction.

Les littéraux de modèle ne sont pas pris en charge ici. Ainsi, chaque appel de fonction devait être câblé en éléments et défini individuellement.

  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() } ............................................................... ................................................................  

Un grand merci aux spécialistes qui ont créé cette bibliothèque sonore et l'ont maintenue. Le code complet peut être trouvé en tant que repo Github en cliquant ici.

Tableau de multiplication. Survolez et cliquez

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

Comment créer un jeu de multiplication

Puisque la pratique est le meilleur moyen d'apprendre et que la multiplication ne fait pas exception, j'ai décidé d'écrire un petit jeu, que vous pouvez voir ci-dessous.

Entrez votre réponse et cliquez sur Soumettre

Soumettre

Correct:

Incorrect:

Redémarrer

Dans la fenêtre en haut à gauche, il y a une question de défi. À côté se trouve un élément d'entrée qui prend une réponse. Cliquer sur le bouton Soumettre évalue cette réponse et renvoie le message indiquant si elle est correcte.

Les réponses correctes sont ajoutées au compteur vert «Réponses correctes», tandis que les réponses incorrectes sont ajoutées au compteur rouge à côté.

Une fois la réponse évaluée, une nouvelle question de défi est générée à l'aide d'un générateur de nombres aléatoires et le cycle se répète. Après dix cycles de questions, le jeu s'arrête et le résultat final est affiché, accompagné de la lecture d'un fichier son.

Appuyez sur le bouton Redémarrer pour lancer un nouveau jeu de dix questions. Le fait d'appuyer sur le bouton Soumettre sans saisir de réponse déclenche un message d'avertissement et un son.

Vous pouvez facilement modifier la conception visuelle et l'emplacement des éléments dans les limites de l'éditeur. En outre, la logique utilisée ici peut également être appliquée à la conception d'autres jeux. Par exemple, Multiplication peut être changé en Movie Trivia et bien plus encore.

Le code complet avec commentaires est accessible en tant que dépôt Github en cliquant ici.