Învățarea tabelelor de timp este o abilitate esențială și este o parte de bază a oricărei educații matematice. A grafic de multiplicare este un instrument la îndemână care transformă memorarea plictisitoare într-un exercițiu distractiv și logic.

Graficul prezintă produsele a două numere. De obicei, un set de numere (1-9) este scris în coloana din stânga, iar celălalt set pe rândul de sus. Aceasta formează două laturi ale unui pătrat vizual. Produsele lor umple restul pătratului. Arată similar cu acesta:

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

Natura vizuală a unui astfel de instrument îmbunătățește învățarea prin utilizarea conceptului de zone. 2 x 3 este egal cu numărul 6 precum și aria unui dreptunghi cu o latură de 2 și altul din 3.

Există modalități nesfârșite de a prezenta stilul și funcționalitatea graficelor de multiplicare. Fiecare autor își va adăuga ceva special. În acest articol, vă voi împărtăși un mod de a proiecta și scrie o astfel de diagramă.

Trebuie să menționez un detaliu important înainte de a ajunge la descrierea graficului. Blocurile de cod încorporate în acest articol pot să nu fie în niciun fel legate între ele.

Cu toate acestea, în culise, acestea sunt plasate într-un singur <body> element pe articol. Prin urmare, asigurați-vă că angajați id și clasă atribute care sunt unic la fiecare bloc. În caz contrar, o clasă sau un ID cu numele partajat pe două sau mai multe blocuri pot interfera și pot afecta negativ stilul și funcționalitatea.

Cum se construiește o diagramă de multiplicare

Partea HTML este o versiune modificată a unei diagrame cu cifre romane. Blocul de bază este un buton. De asemenea, puteți utiliza un general div, dar am găsit că butonul este mai receptiv.

Butoanele sunt plasate mai întâi în rânduri, care la rândul lor sunt plasate în containerul flexibil.

	
<div class="flex-table"> 
	<h2 class="table-title">Multiplication Table</h2> 
    	<div class="table-row"> 
    		<button class="item header">1</button> 
		<button class="item core" onmouseover="onePlay()">1</button> 
        	<button class="item core" onmouseover="twoPlay()">2</button> 
        	<button class="item core" onmouseover="threePlay()">3</button> 
		.......................................................... 
              	..........................................................
    	</div>
    	 <div class="table-row"> 				       
                ..........................................................
                ..........................................................
        </div>
                ............................................................. 
     <div>
	

Arhitectura sau elementul utilizat nu trebuie să fie unic și puteți adăuga propria atingere originală. Am aplicat interogări de stil și media pentru a permite vizionarea confortabilă pe diferite dispozitive.

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

Efectele vizuale sunt realizate prin CSS. Am decis să introduc elemente audio folosind JavaScript. M-am bucurat să aflu că acest editor l-a susținut.

Fiecare buton care reprezintă un rezultat al înmulțirii este conectat la o funcție. O funcție returnează un element audio care redă un fișier de sunet unic pentru acel element. Un eveniment de clic servește drept declanșator, apelând acea funcție.

Literalele șablonului nu sunt acceptate aici. Astfel, fiecare apel de funcție trebuia conectat la elemente și definit individual.

	
   <script>
  
function onePlay() {
  const one = 
  new Audio('https://evolution.voxeo.com/library/audio/prompts/numbers/1.wav')
  one.currentTime = 0
  one.play()
}
function twoPlay() {
  const two = 
  new Audio('https://evolution.voxeo.com/library/audio/prompts/numbers/2.wav')
  two.currentTime = 0
  two.play()
}
   ...............................................................
   ................................................................
   
   </script>
    

Multe mulțumiri specialiștilor care au creat această bibliotecă de sunete și o întrețin. Codul complet poate fi găsit ca repo Github de către făcând clic aici.

Diagrama multiplicării. Plasați cursorul și dați clic




























































































Cum să construiești un joc de multiplicare

Deoarece practica este cel mai bun mod de a învăța și multiplicarea nu face excepție, am decis să scriu un mic joc, pe care îl puteți vedea mai jos.

Introduceți răspunsul și faceți clic pe Trimiteți




Corect:

Incorect:




În fereastra din stânga sus, există o întrebare de provocare. Alături este un element de intrare care ia un răspuns. Dacă faceți clic pe butonul Trimiteți, se evaluează acel răspuns și se afișează mesajul, indicând dacă este corect.

Răspunsurile corecte sunt adăugate la contorul verde „Răspunsuri corecte”, în timp ce răspunsurile incorecte sunt adăugate la cel roșu de lângă acesta.

Odată ce răspunsul este evaluat, se generează o nouă întrebare de provocare folosind un generator de numere aleatorii și ciclul se repetă. După încheierea a zece cicluri de întrebări, jocul se oprește și rezultatul final este afișat, însoțit de redarea unui fișier audio.

Apăsând butonul Restart începe un nou joc cu zece întrebări. Apăsarea butonului Trimitere fără introducerea unui răspuns declanșează un mesaj de avertizare și sunet.

Puteți modifica cu ușurință designul vizual și locația elementelor în limitele editorului. De asemenea, logica utilizată aici poate fi aplicată și în proiectarea altor jocuri. De exemplu, înmulțirea poate fi schimbată în Film Trivia și multe altele.

Codul complet cu comentarii poate fi accesat ca repo Github de către făcând clic aici.