Модель интеграции геймифицированного обучающего модуля в процесс изучения алгоритмов сортировки

Лицензировано по CC BY 4.0. Чтобы посмотреть копию этой лицензии, посетите

Алгоритмы сортировки являются одной из фундаментальных тем в курсах информатики и программирования. Однако их абстрактность, оперирование формальными структурами данных и циклическими процессами создают значительные трудности для учащихся на этапе первичного освоения. Типичными проблемами являются формальное заучивание шагов без понимания сути и смешение логики различных алгоритмов [1]. В этой связи актуальной задачей является разработка нового программного обеспечения для улучшения эффективности процесса обучения.

Применение принципов активного обучения и геймификации способно повысить мотивацию и вовлеченность обучающихся. Современные веб-технологии позволяют создавать интерактивные среды, где абстрактные процессы получают конкретное визуальное и деятельностное воплощение. В последние годы активно исследуется потенциал геймификации в обучении программированию, а также возможности искусственного интеллекта для создания образовательного контента. Однако работы, объединяющие эти направления в рамках единой модели, опирающейся на классическую теорию усвоения знаний, практически отсутствуют.

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

Разработанное веб-приложение "Путь Магистра Алгоритмических Искусств" представляет собой специализированное программное обеспечение, предназначенное для визуализации и интерактивного освоения базовых алгоритмов сортировки.

В качестве теоретико-методологической основы для разработки веб-приложения была выбрана теория поэтапного формирования умственных действий П. Я. Гальперина [2].

Теоретический обзор

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

Первое направление связано с созданием специализированных систем визуализации алгоритмов. Еще в 1980-1990-х годах было разработано первое программное обеспечение из серии пассивного наблюдения, такие как Balsa и Zeus, позволяющие следить за работой алгоритмов в режиме реального времени. Современные исследования в этой области направлены на интеграции алгоритмической визуализации в веб-среды и LMS-платформы. В работах ряда авторов отмечается, что визуализация абстрактных структур данных является ключевым фактором для понимания логики работы алгоритмов, особенно на этапе первичного знакомства с темой [3]. Однако пассивное наблюдение за анимацией без активного вовлечения обучающегося в процесс часто оказывается недостаточно эффективным.

Второе направление - применение геймификации в обучении программированию. В современной литературе геймификация рассматривается как инструмент повышения вовлеченности в образовании, при этом выделяются три уровня: мотивационная надстройка (баллы, значки), деятельностная геймификация (обучение через практику) и средовая геймификация (обучение в игровом пространстве) [4]. Для задач освоения алгоритмов наиболее перспективным представляется второй подход, когда игровая механика не просто мотивирует, но и моделирует логику выполнения алгоритмических операций.

Третье направление связано с применением современных веб-технологий для создания образовательных ресурсов. В научной литературе подробно рассматриваются особенности современных методов создания веб-ресурсов, включая применение объектно-ориентированного подхода в JavaScript, асинхронное программирование и современные технологии верстки CSS Grid и Flexbox [5]. Эти технологии обеспечивают кроссплатформенность и адаптивность образовательных приложений, что очень важно для их использования на различных устройствах. В контексте обучения алгоритмам особый интерес представляет возможность реализации пошагового выполнения операций с асинхронной анимацией, что позволяет студенту видеть не только результат, но и процесс работы алгоритма.

Примеры деятельностной геймификации подробно анализируются в работах, посвященных внедрению адаптивных образовательных игр в цифровую образовательную среду [6]. Авторы подчеркивают, что адаптивность игровых механик к уровню подготовки обучающегося является критическим фактором эффективности таких средств.

Еще одно современное направление - использование искусственного интеллекта при разработке образовательного контента. В научных исследованиях рассматриваются возможности применения генеративного искусственного интеллекта для создания образовательных ресурсов по информатике [7]. Отмечается, что современные языковые модели могут выступать в роли ассистента разработчика, позволяя преподавателям-методистам, не являющимся профессиональными программистами, создавать функциональные прототипы образовательных приложений.

В контексте теории обучения алгоритмам важное значение имеет понятие ориентировочной основы действия. Анализируя теорию П. Я. Гальперина, исследователи подчеркивают, что качество формируемого действия напрямую зависит от полноты ориентировочной основы, на которую опирается обучающийся при его выполнении [8]. В применении к обучению алгоритмам это означает необходимость создания такой программной среды, где каждая операция (сравнение, обмен, выбор минимума) была бы представлена в материализованной форме и сопровождалась пооперационным контролем.

Примеры реализации деятельностного подхода в образовательных средах можно найти в работах, анализирующих применение геймификации в электронной образовательной среде вуза [9]. Более широкий контекст применения симуляции и геймификации в современном образовательном пространстве рассматривается в исследованиях, посвященных формированию практических навыков [10].

Статистические методы обработки данных практических экспериментов подробно рассматриваются в литературе, где обосновывается применение непараметрических критериев при малых объемах выборок и порядковой природе данных [11]. Модели оценивания результатов обучения, включая модель Киркпатрика, подробно проанализированы в работах, выделяющих четыре уровня оценки: реакция, усвоение, поведение, результаты [12].

Анализ зарубежных исследований показывает, что в мировой практике активно развивается направление Algorithm Visualization (AV) и Program Visualization (PV). Современные работы в этой области сосредоточены на интеграции визуализации с технологиями машинного обучения для адаптации сложности материала под индивидуальные особенности обучающегося. Однако, как отмечается в обзорах, большинство существующих систем ориентированы на пассивное наблюдение и не обеспечивают полноценного деятельностного включения студента в выполнение алгоритмических операций.

Разработка веб-приложения для обучения алгоритмам сортировки, объединяющего современные технологии программирования, методы геймификации и теоретически обоснованный дидактический дизайн, является актуальной задачей, лежащей в основе вычислительной математики, теоретической информатики и технологий разработки программного обеспечения. При этом ключевыми требованиями к такому приложению выступают: визуализация абстрактных операций, деятельностный характер взаимодействия, пооперационный контроль, адаптивность интерфейса и доступность на различных устройствах.

Проектирование игровых механик на основе теории поэтапного формирования действий

Разработка структуры уровней и игровых механик веб-приложения "Путь Магистра Алгоритмических Искусств" опирается на теорию поэтапного формирования умственных действий П. Я. Гальперина [8]. Согласно этой теории, всякое умственное действие формируется извне через развернутую материальную форму, в которой объект и последовательность операций представлены обучающемуся непосредственно. В разработанном приложении данная функция реализуется через игровую метафору:

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

Рис. 1. Снимок экрана уровня 2 "Мост выбора" (сортировка выборам). Поле справа -неотсортированная последовательность, поле слева - формируемая отсортированная последовательность

Операции сравнения, обмена, выбора минимума или разделения выполняются пользователем как прямые действия с этими объектами. Такой подход согласуется с современными исследованиями в области проектирования цифровых образовательных средств, где подчеркивается важность визуализации абстрактных понятий [3, 8].

Разработанное веб-приложение ориентировано на широкий круг пользователей, осваивающих алгоритмы сортировки. Основными целевыми группами являются: учащиеся старших классов общеобразовательных школ (14–17 лет) при изучении темы "Алгоритмизация и программирование" в курсе информатики; студенты младших курсов высших учебных заведений, обучающиеся по направлениям, не связанным с углубленным изучением программирования (гуманитарные, социально-экономические специальности), для которых визуализация абстрактных понятий является критически важной; а также лица, осваивающие основы программирования самостоятельно в рамках дополнительного образования. Для каждой из указанных групп приложение может использоваться на этапе первичного знакомства с алгоритмами для формирования базовых представлений о логике их работы.

Приложение может быть использовано в различных формах организации учебной деятельности. В рамках аудиторной работы ресурс может применяться для демонстрации работы алгоритмов преподавателем с помощью проектора, а также для индивидуальной работы студентов на практических или лабораторных занятиях при закреплении теоретического материала. В условиях самостоятельной работы приложение доступно обучающимся для повторения и самоконтроля во внеаудиторное время благодаря размещению на платформе GitHub Pages. При дистанционном обучении ресурс может быть интегрирован в электронные курсы (например, Moodle) в качестве интерактивного тренажера для самостоятельного освоения темы.

Структура приложения включает четыре уровня, каждый из которых моделирует конкретный алгоритм сортировки: пузырьковую, выбором, вставками и быструю. Выбор именно этих алгоритмов обусловлен их фундаментальностью в курсах дискретной математики и информатики [1]. На каждом уровне реализована система пооперационного контроля: среда реагирует на каждое действие пользователя, подтверждая корректность операции. Когда пользователь выделяет пару лягушек для сравнения, подсвечиваются именно те элементы, которые должны быть сопоставлены. При попытке вставить кристалл в неподходящую позицию маркер не активируется. Такой подход соответствует гальперинскому принципу контроля по ходу выполнения каждой операции, а не только по конечному результату [8].

В ресурсе ориентировочная основа выстраивается многоуровнево. Архимаг Алактик (рис. 2) выполняет функцию наставника: от постановки задачи к инструкции и последующей рефлексии. Расширенная справка от Профессора Сортиуса дает развернутое теоретическое описание алгоритма.

Перед тобой Болото Мудрых Амфибий — древняя лаборатория, где изучали попарные сравнения. Лягушки-оракулы когда-то предсказывали будущее, выстраиваясь в цепочки. Теперь они мечутся в беспорядке, и их пророчества стали бессмысленными.

Верни лягушек на их кувшинки в порядке возрастания размеров. Принцип прост: сравнивай соседей и меняй их местами, если они стоят неправильно. Самые крупные должны постепенно "всплывать" к концу цепочки — это суть Пузырьковой сортировки.

Продолжить

Рис. 2. Диалоговое окно с Архимагом Алактик (инструкция к уровню)

Уровень 1 "Пузырьковый ручей "  моделирует пузырьковую сортировку.

Пусть Л[0.. и — 1] исходный массив. Алгоритм пузырьковой сортировки выполняет последовательные проходы по массиву, сравнивая и при необходимости обменивая соседние элементы:

for i = 0 to n-2

for j = 0 to n-2-i if A[j] > A[j+1] then swap(A[j], A[j+1])

В худшем случае ( Л отсортирован по убыванию) выполняется "(" 1) = 0(п²) сравнений и столько же обменов. В лучшем случае ( Л уже отсортирован) и — 1 = 0(п) сравнение и 0 обменов (при оптимизации с флагом).

Пользователь последовательно сравнивает пары соседних лягушек на кувшинках и при необходимости выполняет обмен. Каждое действие соответствует элементарной операции алгоритма.

Уровень 2 "Мост выбора " .

Алгоритм сортировки выбором делит массив на отсортированную часть A[0.. i — 1] и неотсортированную A[i..n — 1] . На каждом шаге i от 0 до п — 2 в неотсортированной части ищется минимальный элемент и меняется местами с A[i] :

for i = 0 to n-2

minIndex = i for j = i+1 to n-1

if A[j] < A[minIndex] then minIndex = j swap(A[i], A[minIndex])

Число сравнений всегда равно 0(п²) независимо от исходных данных. Число обменов ровно 0(п) . После i шагов ( i от 0 до п— 1 ) первые i элементов массива содержат i наименьших элементов исходного массива, упорядоченных по возрастанию, и находятся на своих окончательных позициях.

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

Уровень 3 "Магия вставок".

Сортировка вставками строит отсортированную последовательность, последовательно вставляя элементы из неотсортированной части в правильную позицию среди уже отсортированных:

for i = 1 to n-1

key = A[i]

j = i-1

while j >= 0 and A[j] > key

A[j+1] = A[j]

j = j-1

A[j+1] = key

Сложность 0(п²) в среднем и худшем, 0(п) в лучшем. Алгоритм сохраняет относительный порядок элементов с одинаковыми значениями (свойство устойчивости).

Уровень моделирует сортировку вставками через последовательный перенос кристаллов на алтарь. Система динамических маркеров визуализирует процесс сравнения и сдвига элементов.

Уровень 4 "Быстрые врата "  реализует быструю сортировку.

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

В среднем случае выполняется О(п1одп) сравнений и обменов. В худшем случае (например, на уже отсортированном массиве при неудачном выборе опорного элемента) сложность 0(п²) .

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

С технической точки зрения приложение представляет собой клиентское вебприложение, реализованное на HTML5, CSS3 и JavaScript (ES6+). Архитектура построена на объектно-ориентированном подходе с использованием классов ES6. Каждый игровой уровень представлен отдельным классом, инкапсулирующим состояние и методы обработки событий. Для управления анимацией применяется асинхронное программирование на основе промисов (Promise) и конструкций async/await. Например, в методе confirmSelection() сначала элементу присваивается класс CSS, запускающий анимацию, затем выполнение приостанавливается на заданное время с помощью await this.delay(1000), и только после завершения анимации происходит фактическое изменение структуры данных. Это обеспечивает синхронизацию визуальных эффектов с логикой алгоритма [5].

Обработка пользовательских взаимодействий осуществляется через события DOM (Document Object Model). Для сложных сценариев применяются комбинированные события, например подтверждение выбора минимального элемента через двойной клик. Интерфейс построен на технологиях CSS Grid и Flexbox, что гарантирует адаптивность отображения на устройствах с различным разрешением экрана [5].

Приложение размещено на платформе GitHub Pages, обеспечивающей постоянный бесплатный хостинг и доступность без серверной инфраструктуры. Данное решение демонстрирует пользователям практический пример того, как созданные на HTML, CSS и JavaScript ресурсы могут быть легко развернуты в глобальной сети.

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

Пилотное исследование приложения

С целью предварительной оценки функциональности разработанного вебприложения и выявления направлений его дальнейшего совершенствования было проведено пилотное исследование с участием 24 студентов 4 курса направления подготовки 44.03.05 "Педагогическое образование" (профили "Физика" и "Информатика"). Обе подгруппы (по 12 человек) изучили одинаковый теоретический материал по алгоритмам сортировки, после чего экспериментальная группа (ЭГ) работала с приложением "Путь Магистра Алгоритмических Искусств", а контрольная группа (КГ) закрепляла знания по традиционным учебным материалам (текстовое описание с GIF-анимацией).

В качестве зависимых переменных рассматривались удовлетворенность процессом обучения, субъективная понятность материала и эмоциональное отношение к теме. Измерение проводилось с помощью опросника, составленного на основе модели удовлетворенности и вовлеченности Киркпатрика [10]. Опросник включал 13 утверждений, оцениваемых по 5-балльной шкале.

Результаты статистического анализа показали, что студенты экспериментальной группы (ЭГ, п = 12 ), работавшие с новым ресурсом, продемонстрировали значительно более высокий уровень удовлетворенности ( М = 4.34, SD = 0.12), по сравнению с контрольной группой (КГ, п = 12 ), изучавшей те же алгоритмы по традиционным материалам ( М = 3.72, SD = 0.23). Сводные статистики приведены в таблице.

Таблица. Сводные статистические показатели по группам

Группа	Средний балл	Стандартное отклонение	Медиана
ЭГ	4.34	0.69	4.0
КГ	3.72	1.13	4.0

Различия между группами оказались статистически значимыми согласно U-критерию Манна-Уитни ( U = 143.5, р < 0.001 ). Ввиду малого объема выборок и порядковой природы данных, использовался непараметрический критерий Манна–

Уитни. При этом стоит отметить, что критерий Шапиро–Уилка не выявил формальных оснований для отклонения гипотезы о нормальности в обеих группах ( р >  0.05 ) [11].

Равенство медиан в обеих группах ( Me = 4.0 ) не противоречит наличию статистически значимых различий, а свидетельствует о специфике опроса по модели Киркпатрика. Размер эффекта ( г = 0.843 ) превышает пороговое значение для большого эффекта ( г > 0.5 по Коэну), что может свидетельствовать о высокой практической значимости выявленных различий [11].

Полученные данные позволяют сформулировать гипотезу о том, что использование разработанного приложения может способствовать повышению удовлетворенности студентов на этапе первичного знакомства с алгоритмами сортировки. Однако необходимо отметить существенные ограничения проведенного исследования:

• -    малый объем выборки ( n=12 в каждой группе) не позволяет делать статистически обоснованные выводы о генеральной совокупности,

• -    измерение субъективных показателей без оценки объективной успеваемости,

• -    отсутствие отсроченного контроля знаний.

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

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

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

С технологической точки зрения разработанное приложение демонстрирует эффективность применения объектно-ориентированного подхода и асинхронного программирования для создания образовательных интерактивных сред. Использование нативного JavaScript без дополнительных библиотек и фреймворков обеспечивает легкость развертывания, кроссплатформенность и отсутствие зависимости от серверной инфраструктуры. Размещение на платформе GitHub Pages делает приложение доступным для широкого круга пользователей без затрат на хостинг и администрирование, что особенно важно для образовательных учреждений с ограниченными техническими ресурсами.

Заключение

Предложенная модель проектирования игровых механик на основе теории поэтапного формирования действий показала свою реализуемость в рамках современных веб-технологий. Материализация абстрактных операций сравнения, обмена и рекурсивного разделения в виде визуальных объектов и действий с ними может быть полезна для начального этапа освоения алгоритмов, при этом техническая реализация таких механик не требует сложных программных решений и может быть выполнена силами преподавателей-методистов с привлечением генеративных языковых моделей.

Анализ результатов пилотного исследования позволяет выделить несколько направлений дальнейшего развития приложения. Первое направление связано с расширением функциональности путем добавления визуализации дополнительных алгоритмов, таких как сортировка слиянием и пирамидальная сортировка, а также реализации возможности сравнения их работы на одних и тех же исходных данных. Следующее направление предполагает интеграцию с системами управления обучением через разработку соответствующего API, что позволит автоматически учитывать результаты работы студентов в таких платформах, как Moodle или OpenEdX. В дальнейшем, в качестве совершенствования веб-приложения, необходимо добавить использование искусственного интеллекта для автоматической генерации индивидуальных вариантов исходных данных и проверки правильности выполнения алгоритмов, что особенно актуально в условиях массового обучения. После добавления совершенствований   веб-разработки   необходимо проведение полноценного эксперимента с участием не менее ста респондентов из разных образовательных учреждений, включение объективных показателей успеваемости и отсроченного контроля знаний для проверки выдвинутой гипотезы.

Необходимо отметить ограничения проведенного исследования. Помимо малого объема выборки, в рамках данной работы не оценивалась непосредственно эффективность формирования алгоритмического мышления, измерялась лишь субъективная удовлетворенность процессом обучения.

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