Multiplikationsdiagram - Kod din egen tidsplan ved hjælp af JavaScript

At lære dine timesedler er en vigtig færdighed, og det er en grundlæggende del af enhver matematikuddannelse. Et multiplikationsdiagram er et praktisk værktøj, der gør kedelig memorisering til en sjov, logisk øvelse.

Diagrammet viser produkterne med to tal. Normalt skrives et sæt tal (1-9) i venstre kolonne, og det andet sæt på øverste række. Dette danner to sider af en visuel firkant. Deres produkter fylder resten af ​​pladsen. Ser ligner dette:

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

Den visuelle karakter af et sådant værktøj forbedrer læring ved at bruge begrebet områder. 2 x 3 er lig med antallet 6 såvel som arealet af et rektangel med den ene side af 2 og en anden af 3 .

Der er endeløse måder at præsentere styling og funktionalitet til multiplikationskort. Hver forfatter tilføjer deres specielle noget. I denne artikel deler jeg en måde at designe og skrive et sådant diagram på.        

Der er en vigtig detalje, jeg skal nævne, før jeg kommer til kortbeskrivelsen. Kodeblokkene indlejret i denne artikel er muligvis ikke relateret til hinanden på nogen måde.

Imidlertid er de bag kulisserne placeret i et enkelt element pr. Artikel. Sørg derfor for at anvende id- og klasseattributter , der er unikke for hver blok. Ellers kan en klasse eller et id med det delte navn på tværs af to eller flere blokke interferere og påvirke stil og funktionalitet negativt.

Sådan opbygges et multiplikationsdiagram

HTML-delen er en ændret version af et romersk numerisk diagram. Den grundlæggende byggesten er en knap. Du kan også bruge en generel div , men jeg fandt, at knappen var mere lydhør.

Knapper placeres først i rækker, som igen placeres i flexcontaineren.

Multiplication Table

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

Arkitekturen eller det anvendte element behøver ikke at være unik, og du kan tilføje dit eget originale præg. Jeg anvendte styling og medieforespørgsler for at give behagelig visning på forskellige enheder.

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

De visuelle effekter opnås gennem CSS. Jeg besluttede at introducere lydelementer ved hjælp af JavaScript. Jeg var glad for at finde ud af, at denne editor understøttede den.

Hver knap, der repræsenterer et resultat af multiplikation, er forbundet til en funktion. En funktion returnerer et lydelement, der afspiller en lydfil, der er unik for dette element. En klikhændelse fungerer som en trigger, der kalder den funktion.

Skabelonbogstaver understøttes ikke her. Således skulle hvert funktionsopkald være hårdt forbundet til elementer og defineret individuelt.

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

Mange tak til specialisterne, der oprettede dette lydbibliotek og vedligeholder det. Den komplette kode kan findes som en Github-repo ved at klikke her.

Multiplikationsdiagram. Hold musen og klik

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

Sådan opbygges et multiplikationsspil

Da praksis er den bedste måde at lære, og multiplikation er ingen undtagelse, besluttede jeg at skrive et lille spil, som du kan se nedenfor.

Indtast dit svar, og klik på Send

Indsend

Korrekt:

Ukorrekt:

Genstart

I det øverste venstre vindue er der et udfordringsspørgsmål. Ved siden af ​​er der et inputelement, der tager et svar. Ved at klikke på knappen Send evalueres svaret og sender meddelelsen om, at det er korrekt.

Korrekte svar tilføjes til den grønne "Korrekte svar" -tæller, mens Forkerte svar tilføjes til den røde ved siden af.

Når svaret er evalueret, genereres et nyt udfordringsspørgsmål ved hjælp af en tilfældig talgenerator, og cyklussen gentages. Når ti spørgsmålscyklusser er overstået, stopper spillet, og det endelige resultat vises ledsaget af afspilning af en lydfil.

Ved at trykke på genstart-knappen starter et nyt spil med ti spørgsmål. Ved at trykke på knappen Send uden at indtaste et svar udløses en advarselsmeddelelse og lyd.

Du kan nemt ændre det visuelle design og placering af elementer inden for editorens begrænsninger. Også den logik, der anvendes her, kan også anvendes til at designe andre spil. For eksempel kan multiplikation ændres til Movie Trivia og meget mere.

Den komplette kode med kommentarer kan tilgås som en Github-repo ved at klikke her.