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

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

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

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

Цель

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

Задачи

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

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

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

4. Протестировать игру при участии учеников ГБОУ Школа № 1583 и ГБОУ Школа № 2098 имени Героя Советского Союза Л. М. Доватора.

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

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

• Компьютер
• Телефон
• Учебник по химии 8–9 классов

Описание

1. Авторы осуществляли отбор содержательного контента (формулы неорганических веществ разных классов – кислоты, соли, основания, оксиды), используя учебники 8–9 классов по химии. 8 класс – тема «Основные классы неорганических соединений», 9 класс – «Электролитическая диссоциация», химия элементов (металлы, неметаллы и их соединения). Таким образом, авторами была подготовлена база данных химических веществ, которые «участвуют» в игре. Выбор химических веществ – это первый этап работы.

2. Авторы разработали программный продукт, который является web-приложением. Это такая компьютерная программа, которая предназначена для выполнения в браузере пользователя. Она написана на языке Javascript с использованием библиотеки ReactJS.

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

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

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

{name: 'азотная кислота',

type: 'Кислота',

formula: 'HNO3',}.

Формула записывается текстом. Однако перед отображением на экране она преобразуется с помощью функции formulaRender в такую HTML разметку:

<div>HNO₃</div>. Это сделано для того, чтобы числовые индексы в формуле выглядели правильно.

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

Одновременно с этим программа инициировала в браузере внутренний запрос (XMLHttpRequest) для проигрывания аудиоконтента. Это приводило к проигрыванию заданного нами звукового файла для реализации звукового сопровождения программы.

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

По окончании игры её результаты записывались в local storage браузера. Это такое постоянное хранилище данных, чтобы пользователь мог посмотреть свою игровую статистику, а также свои ошибки. Таким образом, пользователь получал обратную связь на свои действия.

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

3. Авторы опубликовали web-приложение: https://sergeygulin.github.io/chem/ и протестировали его.

Результаты работы/выводы

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

2. Создали универсальное web-приложение и опубликовали в интернете. Это web-приложение работает во всех современных браузерах на всех устройствах: телефонах, планшетах, ноутбуках и десктопах. Языком программирования, на котором работали авторы, является JavaScript, который «понимают» все браузеры. Современные web-приложения создаются с использованием фреймворков для разработки. В проекте авторами используется библиотека ReactJS, которая занимает первое место в мире по популярности использования для построения web-приложений.

Все анимации, перемещения и изменения в игре сделаны авторами с помощью CSS классов со свойством transition, которое позволяет задать время (скорость) анимации и её тип.

Для хранения файлов кода программы авторами используются бесплатный портал github.com и программа управления версиями git, которые применяются большинством веб-разработчиков.

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

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

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

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

1. Первый МГМУ им. И. М. Сеченова.

2. ООО «EPAM Systems».

Награды/достижения

Открытая городская научно-практическая конференция «Инженеры будущего» – призёр.