Tablica množenja - kodirajte vlastitu tablicu s vremenom koristeći JavaScript

Učenje tablica vremena bitna je vještina i osnovni je dio svakog matematičkog obrazovanja. Množenja grafikon je zgodan alat koji pretvara zamoran pamćenje u zabavu, logično vježbe.

Grafikon prikazuje proizvode dva broja. Obično je jedan skup brojeva (1-9) zapisan u lijevom stupcu, a drugi skup u gornjem redu. To tvori dvije strane vizualnog kvadrata. Njihovi proizvodi ispunjavaju ostatak tog kvadrata. Izgleda slično ovome:

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

Vizualna priroda takvog alata poboljšava učenje korištenjem koncepta područja. 2 x 3 jednak je broju 6, kao i površini pravokutnika s jednom stranicom 2 i drugom stranicom 3 .

Postoji bezbroj načina predstavljanja stila i funkcionalnosti grafikona množenja. Svaki će autor dodati svoje posebno. U ovom članku podijelit ću jedan način dizajniranja i pisanja takve karte.        

Postoji jedan važan detalj koji moram spomenuti prije nego što dođem do opisa grafikona. Blokovi koda ugrađeni u ovaj članak možda neće biti povezani jedni s drugima.

Međutim, iza kulisa su smješteni unutar jednog elementa po članku. Stoga obavezno upotrijebite atribute id i class koji su jedinstveni za svaki blok. Inače, klasa ili id ​​sa zajedničkim imenom u dva ili više blokova mogu ometati i negativno utjecati na stil i funkcionalnost.

Kako izraditi tablicu množenja

HTML dio je izmijenjena verzija rimske brojevne tablice. Osnovni građevni blok je gumb. Možete koristiti i općeniti div , ali našao sam da gumb više reagira.

Gumbi se prvo postavljaju u redove, koji se pak stavljaju u fleks spremnik.

Multiplication Table

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

Arhitektura ili element koji se koristi ne moraju biti jedinstveni, a možete dodati vlastiti izvorni dodir. Primijenio sam styling i medijske upite kako bih omogućio ugodno gledanje na raznim uređajima.

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

Vizualni efekti postižu se pomoću CSS-a. Odlučio sam predstaviti audio elemente koristeći JavaScript. Bilo mi je drago kad sam saznao da ga ovaj urednik podržava.

Svaki gumb koji predstavlja rezultat množenja povezan je na funkciju. Funkcija vraća audio element koji reproducira zvučnu datoteku jedinstvenu za taj element. Događaj klika služi kao okidač, pozivajući tu funkciju.

Ovdje nisu podržani doslovni predlošci. Stoga je svaki poziv funkcije morao biti čvrsto povezan u elemente i definiran pojedinačno.

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

Veliko hvala stručnjacima koji su stvorili i održavaju ovu fonoteku. Kompletni kôd možete pronaći kao Github repo klikom ovdje.

Grafikon množenja. Lebdite i kliknite

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

Kako izgraditi igru ​​množenja

Budući da je vježbanje najbolji način učenja, a množenje nije iznimka, odlučio sam napisati malu igru ​​koju možete vidjeti u nastavku.

Unesite svoj odgovor i kliknite Pošalji

podnijeti

Ispravno:

Netočno:

Ponovo pokrenite

U gornjem lijevom prozoru nalazi se izazovno pitanje. Pored njega nalazi se ulazni element koji uzima odgovor. Klikom na gumb Submit procjenjuje se taj odgovor i izlazi poruka koja pokazuje je li točan.

Točni odgovori dodaju se zelenom brojaču "Točni odgovori", dok se netočni odgovori dodaju crvenom pored.

Nakon što se ocijeni odgovor, generira se novo izazovno pitanje pomoću generatora slučajnih brojeva i ciklus se ponavlja. Nakon završetka deset ciklusa pitanja, igra se zaustavlja i prikazuje se konačni rezultat, popraćen reprodukcijom zvučne datoteke.

Pritiskom na gumb Restart započinje nova igra s deset pitanja. Pritiskom na gumb Submit bez unosa odgovora pokreće se poruka upozorenja i zvuk.

Možete jednostavno promijeniti vizualni dizajn i položaj elemenata unutar ograničenja uređivača. Također, ovdje primijenjena logika može se primijeniti i pri dizajniranju drugih igara. Na primjer, Množenje se može promijeniti u Movie Trivia i još mnogo toga.

Kompletnom kodu s komentarima možete pristupiti kao Github repo klikom ovdje.