Multiplikationsdiagramm - Codieren Sie Ihren eigenen Zeitplan mit JavaScript

Das Erlernen Ihrer Stundenpläne ist eine wesentliche Fähigkeit und ein grundlegender Bestandteil jeder Mathematikausbildung. Ein Multiplikationsdiagramm ist ein praktisches Werkzeug, mit dem mühsames Auswendiglernen zu einer unterhaltsamen, logischen Übung wird.

Die Tabelle zeigt die Produkte zweier Zahlen. Normalerweise wird ein Satz von Zahlen (1-9) in die linke Spalte und der andere in die obere Reihe geschrieben. Dies bildet zwei Seiten eines visuellen Quadrats. Ihre Produkte füllen den Rest dieses Quadrats. Sieht ähnlich aus:

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

Die visuelle Natur eines solchen Werkzeugs verbessert das Lernen durch die Verwendung des Bereichskonzepts. 2 x 3 entspricht der Zahl 6 sowie der Fläche eines Rechtecks ​​mit einer Seite von 2 und einer anderen von 3 .

Es gibt unzählige Möglichkeiten, das Design und die Funktionalität von Multiplikationsdiagrammen darzustellen. Jeder Autor wird sein besonderes Etwas hinzufügen. In diesem Artikel werde ich eine Möglichkeit zum Entwerfen und Schreiben eines solchen Diagramms vorstellen.        

Es gibt ein wichtiges Detail, das ich erwähnen muss, bevor ich zur Diagrammbeschreibung komme. Die in diesem Artikel eingebetteten Codeblöcke sind möglicherweise in keiner Weise miteinander verbunden.

Hinter den Kulissen werden sie jedoch in einem einzelnen Element pro Artikel platziert. Stellen Sie daher sicher, dass Sie ID- und Klassenattribute verwenden , die für jeden Block eindeutig sind. Andernfalls kann eine Klasse oder eine ID mit dem gemeinsamen Namen in zwei oder mehr Blöcken den Stil und die Funktionalität beeinträchtigen und negativ beeinflussen.

So erstellen Sie ein Multiplikationsdiagramm

Der HTML-Teil ist eine modifizierte Version eines römischen Zahlendiagramms. Der Grundbaustein ist eine Schaltfläche. Sie können auch ein allgemeines div verwenden , aber ich fand, dass die Schaltfläche reaktionsschneller ist.

Die Knöpfe werden zuerst in Reihen platziert, die wiederum in den Flex-Container gelegt werden.

Multiplication Table

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

Die verwendete Architektur oder das verwendete Element muss nicht eindeutig sein, und Sie können Ihre eigene originelle Note hinzufügen. Ich habe Styling- und Medienabfragen angewendet, um eine komfortable Anzeige auf verschiedenen Geräten zu ermöglichen.

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

Die visuellen Effekte werden durch CSS erzielt. Ich habe beschlossen, Audioelemente mit JavaScript einzuführen. Ich war froh herauszufinden, dass dieser Editor dies unterstützt.

Jede Taste, die ein Ergebnis der Multiplikation darstellt, ist mit einer Funktion verbunden. Eine Funktion gibt ein Audioelement zurück, das eine für dieses Element eindeutige Sounddatei wiedergibt. Ein Klickereignis dient als Auslöser und ruft diese Funktion auf.

Vorlagenliterale werden hier nicht unterstützt. Daher musste jeder Funktionsaufruf fest in Elemente eingebunden und individuell definiert werden.

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

Vielen Dank an die Spezialisten, die diese Soundbibliothek erstellt und gepflegt haben. Den vollständigen Code finden Sie als Github-Repo, indem Sie hier klicken.

Multiplikationsdiagramm. Bewegen Sie den Mauszeiger und klicken Sie

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

So erstellen Sie ein Multiplikationsspiel

Da Übung der beste Weg ist, um zu lernen, und Multiplikation keine Ausnahme ist, habe ich beschlossen, ein kleines Spiel zu schreiben, das Sie unten sehen können.

Geben Sie Ihre Antwort ein und klicken Sie auf Senden

einreichen

Richtig:

Falsch:

Neustart

Im oberen linken Fenster gibt es eine Herausforderungsfrage. Daneben befindet sich ein Eingabeelement, das eine Antwort entgegennimmt. Durch Klicken auf die Schaltfläche Senden wird diese Antwort ausgewertet und die Nachricht ausgegeben, die angibt, ob sie korrekt ist.

Richtige Antworten werden zum grünen Zähler "Richtige Antworten" hinzugefügt, während falsche Antworten zum roten Zähler daneben hinzugefügt werden.

Sobald die Antwort ausgewertet ist, wird mithilfe eines Zufallszahlengenerators eine neue Herausforderungsfrage generiert und der Zyklus wiederholt. Nach Ablauf von zehn Fragezyklen stoppt das Spiel und das Endergebnis wird zusammen mit der Wiedergabe einer Audiodatei angezeigt.

Durch Drücken der Schaltfläche "Neustart" wird ein neues Spiel mit zehn Fragen gestartet. Durch Drücken der Senden-Taste ohne Eingabe einer Antwort wird eine Warnmeldung und ein Ton ausgelöst.

Sie können das visuelle Design und die Position von Elementen innerhalb der Einschränkungen des Editors leicht ändern. Die hier verwendete Logik kann auch beim Entwerfen anderer Spiele angewendet werden. Zum Beispiel kann die Multiplikation in Movie Trivia und vieles mehr geändert werden.

Auf den vollständigen Code mit Kommentaren kann als Github-Repo zugegriffen werden, indem Sie hier klicken.