Learning your times tables is an essential skill and it's a basic part of any math education. A multiplication chart is a handy tool that turns tedious memorization into a fun, logical exercise.

The chart shows the products of two numbers. Usually, one set of numbers (1-9) is written in the left column, and the other set on the top row. This forms two sides of a visual square. Their products fill the rest of that square. Looking similar to this:

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

The visual nature of such a tool enhances learning by using the concept of areas. 2 x 3 equals the number 6 as well as the area of a rectangle with one side of 2 and another of 3.

There are endless ways of presenting the styling and functionality for multiplication charts. Every author will add their special something. In this article, I'll share one way of designing and writing such a chart.        

There is one important detail I must mention before getting to the chart description. The blocks of code embedded throughout this article may not be related to each other in any way.

However, behind the scenes they are placed inside a single <body> element per article. Therefore, make sure you employ id and class attributes that are unique to each block. Otherwise, a class or an id with the shared name across two or more blocks may interfere and negatively affect style and functionality.

How to Build a Multiplication Chart

The HTML part is a modified version of a Roman Numeral Chart. The basic building block is a button. You can also use a general div, but I found the button to be more responsive.

Buttons are first placed into rows, which in turn are placed into the flex-container.

	
<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>

The architecture or element used does not have to be unique, and you can add your own original touch. I applied styling and media queries to allow for comfortable viewing on various devices.

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

The visual effects are achieved through CSS. I decided to introduce audio elements using JavaScript. I was glad to find out this editor supported it.

Each button representing a result of multiplication is wired to a function. A function returns an audio element that plays a sound file unique to that element. A click event serves as a trigger, calling that function.

Template literals are not supported here. Thus every function call had to be hard wired into elements and defined individually.

	
   <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>

Many thanks to the specialists who created this sound library and maintain it. The complete code can be found as a Github repo by clicking here.

Multiplication Chart. Hover and Click

How to Build a Multiplication Game

Since practice is the best way to learn and multiplication is no exception, I decided to write a little game, which you can see below.

Enter your answer and click Submit

Correct:

Incorrect:

In the top left window, there is a challenge question. Next to it is an input element that takes an answer. Clicking on the Submit button evaluates that answer and outputs the message indicating if it is correct.

Correct answers are added to the green "Correct answers" counter, while Incorrect answers are added to the red one next to it.

Once the answer is evaluated, a new challenge question is generated using a random number generator and the cycle repeats. After ten question cycles are over, the game stops and the final result is displayed, accompanied by playing a sound file.

Pressing the Restart button begins a new ten question game. Pressing the Submit button without inputting an answer triggers a warning message and sound.

You can easily change the visual design and location of elements within the limitations of the editor. Also, the logic employed here can be applied in designing other games as well. For example, Multiplication can be changed to Movie Trivia and plenty more.

The Complete code with comments can be accessed as a Github repo by clicking here.