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 81Egy 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 81Hogyan 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ésHelyes:
Helytelen:
ÚjrakezdA 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.