Химия – просто! История создания одной компьютерной игры

Актуальность

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

Цель

Исследовать использование компьютерных игр в школьном курсе химии по теме «Основные классы неорганических соединений».

Задачи

1. Систематизировать знания по теме «Основные классы неорганических соединений».

2. Создать базу данных химических веществ для формирования разноуровневой компьютерной игры по теме исследования.

3. Разработать на языке программирования JavaScript разноуровневую игру для изучения классификации неорганических веществ и загрузить её в Интернет для доступа с любых гаджетов.

4. Провести апробацию разработанной игры.

5. Провести опрос среди учащихся по результатам использования игры во время изучения темы «Основные классы неорганических соединений».

Оснащение и оборудование, использованное в работе

• Компьютер

• Телефон

Описание

На первом этапе авторы работы провели отбор содержательного контента для будущей игры. Были подобраны формулы неорганических веществ разных классов – кислоты, соли, основания, оксиды.

На следующем этапе разработали программный продукт, который являлся веб-приложением, написанном на языке JavaScript с использованием библиотеки React.JS. В основе работы этой библиотеки лежит концепция «состояния» – state. Состояние – это объект JavaScript, который автор создаёт в начале работы программы и меняет в зависимости от действий пользователя. Главная идея библиотеки React.JS состоит в том, что всё, что нарисовано на экране пользователя, является чистой функций от состояния: если меняется состояние программы, изменяется и картинка на экране компьютера.

Для анимации использовали браузерный АПИ и CSS классы. При изменении CSS класса какого-либо элемента (например, химической формулы) на экране пользователя, изменялись координаты этой формулы. Чтобы это происходило не мгновенно, а плавно за определённое время, использовали CSS transition с указанием времени анимации.

Каждое вещество описывалось следующими параметрами: name, type и formula. Например,

name –азотная кислота, type – кислота, formula – HNO₃.

Формула записывалась текстом. Однако перед отображением на экране она преобразовывалась с помощью функции formulaRender в HTML разметку: <div>HNO₃</div>. Это сделано для того, чтобы числовые индексы в формуле выглядели правильно.

Затем авторы сделали разметку игрового поля для игры. Для позиционирования всех элементов на игровом поле использовали CSS свойство position: absolute. Когда пользователь совершал действие, например нажатие кнопки классификации, изменялся state программы и она переходила в другое состояние. При этом происходила перерисовка всего экрана, а координаты формулы менялись на новые. Браузер выполнял плавную анимацию, и формула начинала двигаться в другом направлении – в направлении нажатой кнопки. Одновременно с этим программа инициировала в браузере внутренний запрос (XMLHttpRequest) для проигрывания аудиоконтента. Это приводило к проигрыванию заданного звукового файла для реализации звукового сопровождения программы.

Одновременно с этим программа по базе формул вычисляла, правильно ли пользователь выбрал классификацию для данной формулы, и вела подсчёт правильных и неправильных ответов пользователя. Эти данные (игровая статистика) записывались в state, а браузер автоматически выводил их на игровой экран.

По окончании игры её результаты записывались в LocalStorage браузера, то есть пользователь получал обратную связь.

Все звуки для игры взяты с сайта https://freesound.org, который создан для того, чтобы разработчики звуков могли поделиться ими со всеми желающими для свободного использования под лицензией «Creative Commons licenses».

Интерфейс игры

После создания игры провели апробацию её работы и опрос среди 100 учащихся 8 классов ГБОУ Школа № 1583 и ГБОУ Школа № 2098.

Результаты
1. Сформирована база химических соединений, которая является основной частью компьютерной игры и хранится в файле ChemicalData.tsx.
2. Создано универсальное веб-приложение, которое опубликовано в Интернете и доступно любому пользователю. Для этого достаточно перейти по ссылке https://sergeygulin.github.io/chem/ или использовать QR-code.

3. Положительный отзыв об игре дали более 82 % опрошенных школьников.

Выводы

1. Любое устройство, в котором есть браузер, может загрузить и запустить игру, выполнить анимацию и воспроизвести звуки. Приложение является PWA-приложением (Progressive Web Application), что позволяет скачивать его из Интернета только один раз. Оно записывается в память устройства, отведённую для браузера, и будет запускаться из этой памяти. Таким образом, игру можно использовать даже при отсутствии Интернета.

2. Игра, положительные эмоции и соревнование стимулируют запоминание формул веществ, их названия и тем самым уменьшают психологическую нагрузку, что положительно влияет на изучение школьного предмета «Химия».

Перспективы использования результатов работы

Созданные варианты игры по теме «Основные классы неорганических соединений» можно использовать для изучения и закрепления темы на уроках химии, на дополнительных занятиях, а также во время дистанционного обучения.

Сотрудничество с вузом и учреждением при создании работы

1. ФГАОУ ВО Первый МГМУ им. И.М. Сеченова Минздрава России (Сеченовский Университет).

2. ООО «EPAM Systems».

Мнение автора                                 

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