Szorzótábla - kódolja a saját idős tábláját a JavaScript használatával

Az idő táblák elsajátítása elengedhetetlen készség, és minden matematikai oktatás alapvető része. A szorzótábla hasznos eszköz, amely az unalmas memorizálást szórakoztató, logikus gyakorlattá alakítja.

A diagram két szám szorzatát mutatja. Általában az egyik számkészletet (1–9) a bal oszlopba, a másikat a felső sorba írják. Ez egy vizuális négyzet két oldalát alkotja. Termékeik kitöltik a tér többi részét. Ehhez hasonló kinézet:

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

Egy ilyen eszköz vizuális jellege fokozza a tanulást a területek fogalmának felhasználásával. 2 x 3 megegyezik a 6-os számmal , valamint egy téglalap területtel, amelynek egyik oldala a 2 , a másiké pedig a 3 .

Végtelen módon lehet bemutatni a szorzótáblák stílusát és funkcionalitását. Minden szerző hozzáadja a különleges valamit. Ebben a cikkben megosztom egy ilyen diagram megtervezésének és megírásának egyik módját.        

Egy fontos részletet meg kell említenem, mielőtt a diagram leírásához eljutnék. A cikkben beágyazott kódblokkok semmilyen módon nem kapcsolódhatnak egymáshoz.

A kulisszák mögött azonban cikkenként egyetlen elemben helyezkednek el . Ezért győződjön meg arról, hogy minden blokkhoz egyedi azonosító és osztály attribútumokat használ . Ellenkező esetben egy osztály vagy azonosító, amelynek megosztott neve két vagy több blokkban található, zavarhatja és negatívan befolyásolhatja a stílust és a funkcionalitást.

Hogyan készítsünk szorzótáblát

A HTML rész a római számtábla módosított változata. Az alapvető építőelem egy gomb. Használhat egy általános div-t is , de a gombot érzékenyebbnek találtam.

A gombokat először sorokba helyezik, amelyeket viszont a flex-tartályba helyeznek.

Multiplication Table

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

A felhasznált architektúrának vagy elemnek nem kell egyedinek lennie, és hozzáadhatja saját eredeti érintését. Stílust és média lekérdezéseket alkalmaztam, hogy lehetővé tegyem a kényelmes megtekintést különböző eszközökön.

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

A vizuális effektusokat CSS-en keresztül érik el. Úgy döntöttem, hogy audio elemeket vezetek be JavaScript használatával. Örömmel tapasztaltam, hogy ez a szerkesztő támogatta.

Minden szorzás eredményét jelző gomb bekapcsolódik egy függvénybe. A függvény olyan audio elemet ad vissza, amely az adott elemhez tartozó hangfájlt játszik le. A kattintási esemény kiváltó szerepet játszik, meghívva ezt a funkciót.

A sablon literálok itt nem támogatottak. Így minden függvényhívást elemekre kellett vezetni és egyedileg definiálni.

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

Nagyon köszönöm azoknak a szakembereknek, akik létrehozták és fenntartották ezt a hangkönyvtárat. A teljes kód ide kattintva megtalálható Github repo néven.

Szorzótábla. Vigye az egérmutatót és kattintson

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

Hogyan készítsünk egy szorzós játékot

Mivel a gyakorlat a tanulás legjobb módja, és a szorzás sem kivétel, úgy döntöttem, hogy írok egy kis játékot, amelyet alább láthat.

Írja be válaszát, és kattintson a Küldés gombra

Beküldés

Helyes:

Helytelen:

Újrakezd

A bal felső ablakban egy kihívás kérdése van. Mellette egy bemeneti elem válaszol. A Küldés gombra kattintva kiértékeli a választ és kiadja az üzenetet, jelezve, hogy helyes-e.

A helyes válaszokat a zöld "Helyes válaszok" számlálóhoz, míg a Helytelen válaszokat a mellette lévő piroshoz adjuk.

A válasz kiértékelése után egy új kihívás kérdés generálódik egy véletlenszám-generátor felhasználásával, és a ciklus megismétlődik. Tíz kérdésciklus letelte után a játék leáll, és megjelenik a végeredmény, egy hangfájl lejátszásával együtt.

Az Újraindítás gomb megnyomásával új tíz kérdéses játék indul. A Küldés gomb megnyomása a válasz beírása nélkül figyelmeztető üzenetet és hangot vált ki.

Könnyedén megváltoztathatja az elemek látványtervét és helyét a szerkesztő korlátai között. Az itt alkalmazott logika alkalmazható más játékok tervezésénél is. Például a Szorzás módosítható Movie Trivia-ra és még sok másra.

A Kommentekkel ellátott teljes kód ide kattintva érhető el Github repo néven.