Демонстрація – письмове додавання і віднімання

Опис демонстрації «Письмове додавання і віднімання»

Призначення

Інтерактивний навчальний тренажер, який покроково візуалізує класичний спосіб письмового додавання та віднімання багатозначних чисел «стовпчиком» — так, як це подають у 2–4 класі початкової школи. Замість статичної картинки з формулою учень бачить, як народжується кожна цифра результату, звідки береться перенесення десятка при додаванні або позика при відніманні.

Як це працює

Введення даних. Користувач вводить два числа (до 6 цифр кожне) у відповідні поля та обирає дію — кругла кнопка з «+»/«−» перемикає між додаванням і відніманням одним кліком.

Покрокова анімація. Приклад розбивається на елементарні кроки:

• при додаванні — кожен розряд обробляється у 2 кроки: спочатку підсвічується колонка цифр, що додаються, потім з’являється цифра результату; якщо сума ≥10, над наступним розрядом плавно виринає підпис перенесення («+1»);
• при відніманні — розряд без позики проходить у 2 кроки (підсвітка → результат), а розряд з позикою — у 3 кроки (підсвітка → поява позики «−1» над сусіднім розрядом → результат після позики).

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

Керування показом:

• ▶ «Авто» — автоматичне відтворення всіх кроків з інтервалом 1,5 с (кнопка перетворюється на «Пауза» для зупинки в будь-який момент);
• стрілки вперед/назад — ручне гортання кроків у будь-якому напрямку, щоб повторити незрозумілий момент або призупинитися для пояснення;
• ⚡ «Швидка відповідь» — миттєво показує весь запис повністю (усі перенесення/позики та кінцевий результат), без покрокової анімації — зручно, коли потрібна лише відповідь;
• ↺ «Скинути» — повертає приклад до початкового стану (жоден крок ще не показано).

Масштаб цифр. Повзунок дозволяє змінювати розмір шрифту запису від 32 до 200 пікселів — зручно як для перегляду на маленькому екрані, так і для демонстрації на проєкторі/інтерактивній дошці в класі.

Технічні особливості

• Односторінковий файл, що не потребує інтернету, встановлення чи зовнішніх бібліотек — усе (розмітка, стилі, логіка) вбудовано в один .html-файл.
• Адаптивний дизайн: коректно відображається на десктопі, планшеті та смартфоні, зокрема в горизонтальній орієнтації (компонований інтерфейс, приховані підказки, зменшені відступи для економії вертикального простору).
• Обробка чисел відбувається безпосередньо в браузері (чиста математика на JavaScript), без відправки даних кудись назовні.

Кому підійде

• Вчителям початкової школи — для пояснення теми на уроці або на інтерактивній дошці;
• Батькам — для домашнього повторення матеріалу з дитиною;
• Учням — для самостійного тренування та перевірки, «а чому саме так виходить результат».