Biểu đồ nhân - Mã bảng thời gian của riêng bạn bằng JavaScript

Học bảng thời gian của bạn là một kỹ năng cần thiết và nó là một phần cơ bản của bất kỳ giáo dục toán học nào. Một biểu đồ nhân là một công cụ hữu ích có thể biến ghi nhớ tẻ nhạt thành một niềm vui, tập thể dục hợp lý.

Biểu đồ cho thấy các tích của hai số. Thông thường, một bộ số (1-9) được viết ở cột bên trái và bộ còn lại ở hàng trên cùng. Điều này tạo thành hai mặt của một hình vuông trực quan. Sản phẩm của họ lấp đầy phần còn lại của hình vuông đó. Nhìn tương tự như thế này:

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

Bản chất trực quan của một công cụ như vậy giúp tăng cường học tập bằng cách sử dụng khái niệm về các khu vực. 2 x 3 bằng số 6 cũng như diện tích của một hình chữ nhật với một cạnh là 2 và cạnh kia là 3 .

Có vô số cách để trình bày kiểu dáng và chức năng cho biểu đồ nhân. Mỗi tác giả sẽ thêm một cái gì đó đặc biệt của họ. Trong bài viết này, tôi sẽ chia sẻ một cách thiết kế và viết một biểu đồ như vậy.        

Có một chi tiết quan trọng tôi phải đề cập trước khi đi đến phần mô tả biểu đồ. Các khối mã được nhúng trong suốt bài viết này có thể không liên quan đến nhau theo bất kỳ cách nào.

Tuy nhiên, đằng sau hậu trường, chúng được đặt bên trong một phần tử duy nhất trên mỗi bài báo. Do đó, hãy đảm bảo rằng bạn sử dụng các thuộc tính idlớpduy nhất cho mỗi khối. Nếu không, một lớp hoặc một id có tên được chia sẻ trên hai hoặc nhiều khối có thể gây trở ngại và ảnh hưởng tiêu cực đến phong cách và chức năng.

Cách tạo biểu đồ nhân

Phần HTML là phiên bản sửa đổi của Biểu đồ số La Mã. Khối xây dựng cơ bản là một nút. Bạn cũng có thể sử dụng một div chung , nhưng tôi thấy nút này phản hồi nhanh hơn.

Đầu tiên, các nút được đặt thành hàng, các nút này lần lượt được đặt vào vùng chứa linh hoạt.

Multiplication Table

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

Kiến trúc hoặc yếu tố được sử dụng không nhất thiết phải là duy nhất và bạn có thể thêm nét độc đáo của riêng mình. Tôi đã áp dụng các truy vấn về kiểu dáng và phương tiện để cho phép xem thoải mái trên các thiết bị khác nhau.

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

Hiệu ứng hình ảnh đạt được thông qua CSS. Tôi quyết định giới thiệu các yếu tố âm thanh bằng JavaScript. Tôi rất vui khi biết rằng biên tập viên này đã hỗ trợ nó.

Mỗi nút đại diện cho một kết quả của phép nhân được kết nối với một hàm. Một hàm trả về một phần tử âm thanh phát một tệp âm thanh duy nhất cho phần tử đó. Một sự kiện nhấp chuột đóng vai trò như một kích hoạt, gọi chức năng đó.

Các ký tự mẫu không được hỗ trợ ở đây. Vì vậy, mọi lệnh gọi hàm phải được kết nối thành các phần tử và được định nghĩa riêng lẻ.

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

Rất cám ơn các chuyên gia đã tạo ra và duy trì thư viện âm thanh này. Bạn có thể tìm thấy mã hoàn chỉnh dưới dạng repo Github bằng cách nhấp vào đây.

Biểu đồ nhân. Di chuột và nhấp

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

Làm thế nào để xây dựng một trò chơi nhân

Vì thực hành là cách tốt nhất để học và phép nhân cũng không ngoại lệ, tôi quyết định viết một trò chơi nhỏ, bạn có thể xem bên dưới.

Nhập câu trả lời của bạn và nhấp vào Gửi

Gửi đi

Chính xác:

Sai:

Khởi động lại

Trong cửa sổ trên cùng bên trái, có một câu hỏi thách thức. Bên cạnh nó là một yếu tố đầu vào nhận câu trả lời. Nhấp vào nút Gửi sẽ đánh giá câu trả lời đó và xuất ra thông báo cho biết nó có đúng hay không.

Câu trả lời đúng được thêm vào bộ đếm "Câu trả lời đúng" màu xanh lá cây, trong khi câu trả lời sai được thêm vào bảng màu đỏ bên cạnh nó.

Khi câu trả lời được đánh giá, một câu hỏi thử thách mới được tạo bằng cách sử dụng một bộ tạo số ngẫu nhiên và chu kỳ lặp lại. Sau khi mười chu kỳ câu hỏi kết thúc, trò chơi dừng lại và kết quả cuối cùng được hiển thị, kèm theo việc phát một tệp âm thanh.

Nhấn nút Khởi động lại bắt đầu một trò chơi mười câu hỏi mới. Việc nhấn nút Gửi mà không nhập câu trả lời sẽ kích hoạt thông báo và âm thanh cảnh báo.

Bạn có thể dễ dàng thay đổi thiết kế trực quan và vị trí của các phần tử trong giới hạn của trình chỉnh sửa. Ngoài ra, logic được sử dụng ở đây cũng có thể được áp dụng trong việc thiết kế các trò chơi khác. Ví dụ, Multiplication có thể được thay đổi thành Movie Trivia và nhiều hơn nữa.

Bạn có thể truy cập mã Hoàn chỉnh với các bình luận dưới dạng repo Github bằng cách nhấp vào đây.