Діаграма множення - кодуйте таблицю власного часу за допомогою JavaScript

Вивчення таблиць часу є важливою навичкою і базовою частиною будь-якої математичної освіти. Таблиця множення - це зручний інструмент, який перетворює нудне запам’ятовування у веселу, логічну вправу.

На діаграмі представлені добутки двох чисел. Зазвичай один набір чисел (1-9) записують у лівій колонці, а інший - у верхньому рядку. Це утворює дві сторони візуального квадрата. Їх продукція заповнює решту площі. Подібно до цього:

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

Візуальна природа такого інструменту покращує навчання, використовуючи поняття областей. 2 x 3 дорівнює числу 6 , а також площі прямокутника з однією стороною 2, а іншою 3 .

Існує безліч способів представити стиль та функціональність для таблиць множення. Кожен автор додасть щось своє особливе. У цій статті я поділюсь одним із способів проектування та написання такої діаграми.        

Є одна важлива деталь, яку я повинен згадати перед тим, як перейти до опису діаграми. Блоки коду, вбудовані в цю статтю, можуть ніяк не пов’язані між собою.

Однак за лаштунками вони розміщуються всередині одного елемента на кожну статтю. Тому обов’язково використовуйте атрибути id та class, які є унікальними для кожного блоку. В іншому випадку клас або ідентифікатор із загальним іменем у двох або більше блоках може перешкоджати та негативно впливати на стиль та функціональність.

Як побудувати діаграму множення

Частина HTML є модифікованою версією римської цифрової діаграми. Основний будівельний блок - це кнопка. Ви також можете використовувати загальний div , але я знайшов цю кнопку більш чутливою.

Кнопки спочатку розміщуються в ряди, які, в свою чергу, розміщуються в гнучкому контейнері.

Multiplication Table

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

Архітектура чи елемент, який використовується, не повинен бути унікальним, і ви можете додати свій власний оригінальний штрих. Я застосував стилі та медіа-запити, щоб забезпечити зручний перегляд на різних пристроях.

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

Візуальні ефекти досягаються за допомогою CSS. Я вирішив представити аудіоелементи за допомогою JavaScript. Я був радий дізнатися, що цей редактор підтримав це.

Кожна кнопка, що представляє результат множення, підключена до функції. Функція повертає звуковий елемент, який відтворює звуковий файл, унікальний для цього елемента. Подія натискання служить тригером, викликаючи цю функцію.

Буквальні літерали тут не підтримуються. Таким чином, кожен виклик функції повинен бути жорстко з'єднаний в елементи і визначатися індивідуально.

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

Велике спасибі фахівцям, які створили та підтримують цю звукотеку. Повний код можна знайти як репо Github, натиснувши тут.

Діаграма множення. Наведіть курсор і натисніть

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

Як побудувати гру на множення

Оскільки практика є найкращим способом навчання, і множення не є винятком, я вирішив написати невеличку гру, яку ви можете побачити нижче.

Введіть свою відповідь і натисніть Надіслати

Подати

Правильно:

Неправильно:

Перезапустіть

У верхньому лівому вікні є виклик. Поруч знаходиться вхідний елемент, який приймає відповідь. Натискання кнопки «Надіслати» оцінює відповідь та видає повідомлення із вказівкою на правильність.

Правильні відповіді додаються до зеленого лічильника "Правильні відповіді", а Неправильні - до червоного поруч.

Після оцінки відповіді генерується нове запитання із використанням генератора випадкових чисел і цикл повторюється. Після закінчення десяти циклів запитань гра зупиняється і відображається кінцевий результат у супроводі відтворення звукового файлу.

Натисканням кнопки перезапуску розпочинається нова гра на десять запитань. Натискання кнопки "Надіслати" без введення відповіді викликає попереджувальне повідомлення та звук.

Ви можете легко змінити візуальний дизайн та розташування елементів в межах обмежень редактора. Крім того, використана тут логіка може бути застосована і при розробці інших ігор. Наприклад, функцію множення можна змінити на Movie Trivia та багато іншого.

Повний код із коментарями можна отримати як репо Github, натиснувши тут.