Интерактивное приложение «Математический футбол» как эффективное средство повышения интереса к учебному предмету

Автор: Вологжанина Дарья Сергеевна

Организация: НТГСПИ

Населенный пункт: Свердловская область, г. Нижний Тагил

Автор: Русинова Дарья Евгеньевна

Организация: НТГСПИ

Населенный пункт: Свердловская область, г. Нижний Тагил

Аннотация. В статье рассматривается интерактивное приложение «Математический футбол» как инновационный и эффективный инструмент повышения интереса школьников к изучению математики. Приложение ориентировано на развитие устного счета и построено в форме популярной спортивной игры, что способствует вовлечению учащихся в учебный процесс и повышению их мотивации. Использование игровых технологий и мультимедийных элементов создает динамичную образовательную среду, улучшает усвоение материала и развивает критическое мышление, самостоятельность и творческие способности. Особое внимание уделяется адаптации обучения под индивидуальные потребности детей, что повышает эффективность образовательного процесса и формирует положительное отношение к предмету.

Ключевые слова: интерактивное приложение, математический футбол, устный счет, мотивация к обучению, игровые технологии, развитие математических навыков, интерактивное обучение, образовательные приложения, адаптивное обучение, повышение интереса к математике

INTERACTIVE APPLICATION "MATHEMATICAL FOOTBALL" AS AN EFFECTIVE MEANS OF INCREASING INTEREST IN THE SUBJECT

Annotation. The article discusses the interactive application "Mathematical Football" as an innovative and effective tool for increasing schoolchildren's interest in studying mathematics. The application is focused on the development of mental arithmetic and is built in the form of a popular sports game, which helps to involve students in the educational process and increase their motivation. The use of gaming technologies and multimedia elements creates a dynamic educational environment, improves the assimilation of material and develops critical thinking, independence and creativity. Particular attention is paid to adapting training to the individual needs of children, which increases the effectiveness of the educational process and forms a positive attitude towards the subject.

Keywords: interactive application, mathematical football, mental arithmetic, motivation for learning, gaming technologies, development of mathematical skills, interactive learning, educational applications, adaptive learning, increasing interest in mathematics

Математика традиционно считается одним из самых сложных школьных предметов. Это связано с тем, что темы учебной программы тесно взаимосвязаны: трудности с одной темой зачастую затрудняют освоение последующих. В результате у учащихся снижается мотивация к занятиям, падает уверенность в собственных знаниях и способностях.

Для решения этих проблем было разработано интерактивное приложение по математике, ориентированное на развитие устного счета. Устный счет играет ключевую роль в формировании прочных вычислительных навыков и умений, а также способствует развитию памяти, внимания, логического мышления и умения быстро и точно производить вычисления в повседневной жизни. Он помогает детям переключаться между видами деятельности, готовит к изучению новых тем и активизирует мыслительную деятельность. Чтобы повысить интерес учащихся, приложение выполнено в форме популярной игры «Футбол», что делает обучение более увлекательным и эффективным.

Интерактивные приложения представляют собой современный и действенный инструмент для повышения мотивации и вовлеченности детей в учебный процесс. Использование мультимедийных технологий, игровых элементов и интерактивных заданий создаёт динамичную и привлекательную образовательную среду, значительно повышая уровень внимания учащихся.

Кроме того, внедрение интерактивных методов способствует развитию самостоятельности, критического мышления и творческих способностей у детей. Игровые технологии и образовательные приложения стимулируют внутреннюю мотивацию школьников, превращая учебу в увлекательное приключение. Это особенно важно в условиях современной школы, где традиционные методы обучения часто не вызывают достаточного интереса.

Интерактивные платформы также позволяют адаптировать обучение под индивидуальные потребности каждого ребёнка, что значительно повышает эффективность образовательного процесса. В итоге дети не только лучше запоминают материал, но и развивают навыки самостоятельной работы с учебными материалами.

«Математический футбол» — это простая, но эффективная браузерная игра, где каждый правильный ответ приводит к голу в ворота соперника. Ученики видят пример, и один игрок от команды может ввести ответ и отправить мяч с помощью кнопки "Ударить!". Если ответ верный — мяч летит в ворота и засчитывается гол (добавляются очки). Если ошибся — вратарь отражает удар.

Игра создана с использованием стандартных веб-технологий:

1. В начале HTML задает структуру (основу), например, интерфейс, поле, мяч, ворота, т.е. те элементы, из которых будет состоять наша игра (листинг 1).

Листинг 1

Создание интерфейса приложения

<!DOCTYPE html>

<!-- Сообщаем браузеру, что это HTML5 -->

<html lang="ru">

<!—Устанавливаем русский язык-->

<head>

<meta charset="UTF-8">

<!-- Кодировка для того, чтобы русские буквы отображались правильно -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!—Для работы на телефонах -->

<title>Математический футбол</title>

<!-- Заголовок вкладки -->

<style>

…..

 

</style>

</head>

<body>

<!—Вся видимая часть веб-страницы -->

<h1>⚽ Математический футбол ⚽</h1>

<!-- Заголовок игры -->

<div id="game">

<!-- Основной блочный элемент (контейнер) игры -->

<div id="field">

<!-- Футбольное поле -->

<div id="ball"></div>

<!-- Мяч (начальное положение: левый нижний угол) -->

<div id="goalkeeper"></div>

<!-- Вратарь (начальное положение: справа) -->

<div id="goal"></div>

<!-- Ворота (рамка) -->

</div>

</div>

<div id="task">Реши пример:</div>

<!-- Текст с примером -->

<input type="number" id="answer" placeholder="Твой ответ">

<!-- Поле для ввода ответа -->

<button onclick="kick()">Ударить!</button>

<!-- Кнопка для удара по мячу -->

<div id="score">Очки: 0</div>

<!-- Счётчик очков -->

<script>

….

</script>

</body>

</html>

Рис.1. Интерфейс игры

2. Чтобы игра соответствовала футбольной тематике, потребуется яркое оформление: игровое поле, анимированные мяч (движущийся к воротам) и вратарь (отбивающий удары). Реализация выполняется средствами CSS (листинг 2).

Листинг 2

Задание стилей

<style>

body {

font-family: 'Lucida Console', sans-serif;

/* Шрифт текста */

text-align: center;

/* Выравнивание по центру */

background: #27ae60;;

/* Зелёный фон */

color: white;

/* Белый текст */

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

/* Тень у текста */

}

#game {

margin: 20px auto;

/* Отступы и центрирование */

width: 800px;

/* Ширина игрового поля */

}

#field {

width: 100%;

height: 400px;

/* Размер поля */

background: url('поле.png') no-repeat center;

/* Фон — изображение футбольного поля */

background-size: cover;

/* Размер изображение во весь блок */

position: relative;

/* Позиция вратаря и мяча внутри*/

overflow: hidden;

/* Всё, что выходит за границы —скрыто */

}

#ball {

width: 100px;

height: 100px;

/* Размер мяча */

background: url('мяч.png') no-repeat center;

/* Изображение мяча */

background-size: contain;

/* Изображение в блоке*/

position: absolute;

/* Позиционируем абсолютно (можно двигать) */

bottom: 50px;

/* Отступ снизу */

left: 50px;

/* Отступ слева */

transition: all 0.5s;

/* Плавное движение (анимация) */

}

#goalkeeper {

width: 200px;

height: 140px;

/* Размер вратаря */

background: url('вратарь.png') no-repeat center;

/* Изображение вратаря */

background-size: contain;

position: absolute;

bottom: 30px;

/* Позиция внизу справа */

right: 100px;

transition: all 0.3s;

/* Плавное движение */

}

#goal {

width: 100px;

height: 150px;

/* Размер ворот */

border: 4px dashed white;

/* Белая рамка */

position: absolute;

bottom: 30px;

right: 50px;

/* Позиция справа */

}

 

#task {

font-size: 48px;

/* Размер текста с примером */

margin: 30px;

/* Отступы */

padding: 20px;

background: rgba(0,0,0,0.2); /* Полупрозрачный черный фон */

border-radius: 10px;

}

button {

padding: 15px 30px; /* Размеры кнопки */

font-size: 24px; /* Размер шрифта для кнопки*/

background: red; /* Красный цвет кнопки */

color: white; /* Белый текст */

border: none; /* Без рамки */

cursor: pointer; /* Указатель при наведении */

border-radius: 8px; /* Закругленные углы */

margin: 20px; /* Внешние отступы */

transition: background 0.3s; /* Плавное изменение цвета */

}

button:hover {

background: #cc0000; /* Темно-красный цвет при наведении курсора */

}

input {

padding: 15px 25px; /* Размеры поля */

font-size: 24px; /* Размер шрифта для поля ввода*/

width: 200px; /* Ширина поля */

text-align: center; /* Выравнивание по центру */

border-radius: 8px; /* Закругленные углы */

border: none; /* Без рамки */

margin: 10px; /* Внешние отступы */

}

h1 {

font-size: 48px; /* Размер шрифта для заголовка */

}

#score {

padding: 15px 25px; /* Размеры */

font-size: 24px; /* Размер шрифта */

background: rgba(0,0,0,0.2); /* Полупрозрачный фон */

border-radius: 8px; /* Закругленные углы */

display: inline-block; /* Чтобы фон был только вокруг текста */

}

</style>

Рис.2. Применение стилей

3. JavaScript реализует логику игры: генерирует примеры, проверяет ответы, управляет движением мяча (листинг 3).

Листинг 3

Логика игры

<script>

let score = 0; // Переменная для хранения очков

let a, b, operation, correctAnswer; // Числа и правильный ответ

// Функция для создания нового примера

function generateTask() {

a = Math.floor(Math.random() * 100) + 1; // Первое число (от 1 до 100)

b = Math.floor(Math.random() * 100) + 1; // Второе число (от 1 до 100)

operation = ['+', '-', '*'][Math.floor(Math.random() * 3)]; // Случайная операция

// Вычисляем правильный ответ

if (operation === '+') correctAnswer = a + b;

if (operation === '-') correctAnswer = a - b;

if (operation === '*') correctAnswer = a * b;

// Выводим пример на экран

document.getElementById("task").textContent = `${a} ${operation} ${b} = ?`;

}

// Функция для удара по мячу

function kick() {

const userAnswer = parseFloat(document.getElementById("answer").value);

// Ответ игрока

const ball = document.getElementById("ball"); // Мяч

const goalkeeper = document.getElementById("goalkeeper"); // Вратарь

// Если ответ правильный

if (userAnswer === correctAnswer) {

ball.style.left = "650px"; // Мяч летит вправо (в ворота)

ball.style.bottom = "100px"; // И немного вверх

score++; // Увеличиваем счёт

document.getElementById("score").textContent = `Очки: ${score}`;

// Обновляем счётчик

}

// Если ответ неправильный

else {

goalkeeper.style.right = "70px"; // Вратарь смещается влево

ball.style.left = "500px"; // Мяч летит в него

}

// Через 1 секунду возвращаем всё на место

setTimeout(() => {

ball.style.left = "50px"; // Мяч — в исходную позицию

ball.style.bottom = "50px";

goalkeeper.style.right = "100px"; // Вратарь — на место

document.getElementById("answer").value = ""; // Очищаем поле ввода

generateTask(); // Генерируем новый пример

}, 1000);

}

// Запускаем игру при загрузке страницы

generateTask();

</script>

Рис.3. Итоговый вид игры

Рис.4. Анимация «мяч в воротах»

Объединив все блоки кода, мы получаем итоговый вариант (листинг 4).

Листинг 4.

Код игры «Математический футбол»

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Математический футбол</title>

<style>

body {

font-family: 'Lucida Console', sans-serif;

text-align: center;

background: #27ae60;

color: white;

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

}

#game {

margin: 20px auto;

width: 800px;

}

#field {

width: 100%;

height: 400px;

background: url('поле.png') no-repeat center;

background-size: cover;

position: relative;

overflow: hidden;

}

#ball {

width: 100px;

height: 100px;

background: url('мяч.png') no-repeat center;

background-size: contain;

position: absolute;

bottom: 50px;

left: 50px;

transition: all 0.5s;

}

#goalkeeper {

width: 200px;

height: 140px;

background: url('вратарь.png') no-repeat center;

background-size: contain;

position: absolute;

bottom: 30px;

right: 100px;

transition: all 0.3s;

}

#goal {

width: 100px;

height: 150px;

border: 4px dashed white;

position: absolute;

bottom: 30px;

right: 50px;

}

#task {

font-size: 48px;

margin: 30px;

padding: 20px;

background: rgba(0,0,0,0.2);

border-radius: 10px;

}

button {

padding: 15px 30px;

font-size: 24px;

background: red;

color: white;

border: none;

cursor: pointer;

border-radius: 8px;

margin: 20px;

transition: background 0.3s;

}

button:hover {

background: #cc0000;

}

input {

padding: 15px 25px;

font-size: 24px;

width: 200px;

text-align: center;

border-radius: 8px;

border: none;

margin: 10px;

}

h1 {

font-size: 48px;

}

#score {

padding: 15px 25px;

font-size: 24px;

background: rgba(0,0,0,0.2);

border-radius: 8px;

display: inline-block;

}

</style>

</head>

<body>

<h1>⚽ Математический футбол ⚽</h1>

<div id="game">

<div id="field">

<div id="ball"></div>

<div id="goalkeeper"></div>

<div id="goal"></div>

</div>

</div>

<div id="task">Реши пример:</div>

<input type="number" id="answer" placeholder="Твой ответ">

<button onclick="kick()">Ударить!</button>

<div id="score">Очки: 0</div>

<script>

let score = 0;

let a, b, operation, correctAnswer;

function generateTask() {

a = Math.floor(Math.random() * 100) + 1;

b = Math.floor(Math.random() * 100) + 1;

operation = ['+', '-', '*'][Math.floor(Math.random() * 3)];

if (operation === '+') correctAnswer = a + b;

if (operation === '-') correctAnswer = a - b;

if (operation === '*') correctAnswer = a * b;

document.getElementById("task").textContent = `${a} ${operation} ${b} = ?`;

}

function kick() {

const userAnswer = parseFloat(document.getElementById("answer").value);

const ball = document.getElementById("ball");

const goalkeeper = document.getElementById("goalkeeper");

if (userAnswer === correctAnswer) {

ball.style.left = "650px";

ball.style.bottom = "100px";

score++;

document.getElementById("score").textContent = `Очки: ${score}`; }

else {

goalkeeper.style.right = "70px";

ball.style.left = "500px";

}

setTimeout(() => {

ball.style.left = "50px";

ball.style.bottom = "50px";

goalkeeper.style.right = "100px";

document.getElementById("answer").value = "";

generateTask();

}, 1000);

}

generateTask();

</script>

</body>

</html>

Код игры учителя могут изменить под свои задачи. Например, можно повысить сложность примеров (добавить дроби, действия со скобками и т.д.), добавить новые типы заданий, настроить визуальное оформление под свои цели. Тематика игры может быть так же изменена, например, зимой для учеников можно сделать математический хоккей или совсем отойти от темы спорта.

Данная игра имеет преимущества на уроках математики, поскольку её игровая форма и соревновательный элемент мотивирует детей к решению примеров, ученики наглядно видят результат своих действий. Для использования игры достаточно просто открыть её в браузере — никакой установки не требуется, доступна на всех устройствах. Это делает «Математический футбол» полезным инструментом для современных учителей.

На уроках «Математический футбол» можно применять как для индивидуальных, так и для групповых форм работы. Возможно использовать как разминку в начале урока, где 2-4 минут игры помогут настроиться на обучение, как актуализацию знаний по прошлым темам или закрепление новых (например, сложение положительных и отрицательных чисел), как самоконтроль в конце урока, когда каждый ученик на планшетах в своём темпе может набирать очки по пройденному материалу.

Таким образом, использование интерактивных игровых приложений, таких как «Математический футбол», способствует созданию более интересного, эффективного и персонализированного обучения. Особое внимание развитию устного счета помогает учащимся овладеть необходимыми вычислительными навыками, развить мышление и уверенность в своих силах, что значительно облегчает изучение математики и формирует положительное отношение к предмету. Такая игровая форма — это не замена традиционным методам обучения, а их эффективное дополнение.

 

Список литературы

1. Коваленко В. В., Гончарова И. В. Интерактивные образовательные платформы как средство повышения интереса к учебе у младших школьников. Вестник педагогических наук № 2. 2020. с. 112–119.

2. Кузнецова Н. В., Лебедева М. А. Интерактивные методы обучения в современной школе: теория и практика. Санкт-Петербург: Питер, 2018 — 256 с.

3. Михайлова Е. В., Иванова Т. А. Использование игровых технологий в обучении школьников: опыт и перспективы. Образование и инновации № 4. 2019. с. 45–52.

4. Федеральный государственный образовательный стандарт (ФГОС) общего образования. 2020.

1. file0.docx (2,4 МБ)
2. file1.zip (444,7 КБ)

Опубликовано: 02.06.2025