XII Международная студенческая научная конференция Студенческий научный форум - 2020

Введение

На сегодняшний момент основным источником информации является Интернет или «Всемирная паутина» – World Wide Web. Основной единицей сети интернет можно считать веб-сайт – один или несколько связанных документов, на которых может содержаться информация в текстовом, графическом или ином другом представлении. Использование веб-сайта как способа представления какой-либо информации имеет свои преимущества: информация, размещенная в интернете, становится видна любому пользователю «Всемирной паутины», её легко обновлять, удалять или поддерживать в актуальном формате, что дает возможность использовать веб-сайт как средство массового распространения информации. Так же преимуществом можно считать гибкость сайта в представлении информации, что дает возможность с помощью языков программирования создавать интерактивные сеансы взаимодействия с пользователем для обмена информации. Именно последнее достоинство станет ключевым для текущей работы.

Использование сайта как реализации образовательного квеста

Одной из главных особенностей любого квеста является интерактивность, то есть адаптация под действия участника квеста с целью его погружения в процесс, и, соответственно, большей заинтересованностью участника в прохождении. Для реализации квеста по проверке остаточных знаний низкоуровневого языка Assembler как нельзя лучше подходил сайт. Именно веб-документ давал возможность качественной и относительно простой реализации интерактивного API с графическим интерфейсом. Так же важным критерием выбора такого решения была кроссплатформенность: веб-страница поддерживается любым современным браузером.

Определение основных понятий для веб – страницы

Сайт в интернете состоит из веб-документов – текстовых файлов, размеченных на языке HTML. HTML (язык гипертекстовой разметки) позволяет размещать, структурировать и форматировать информацию на веб-странице, выделять функциональные элементы и области и т.д. Сайт для квеста по Assembler был создан на основе HTML5 – одной из современных официальных спецификаций, выпущенной в 2014 году.

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

Основным инструментом для создания интерактивности на сайте является JavaScript – высокоуровневый язык программирования, поддерживающий объектно-ориентированный, императивный и функциональный стили. Вся бизнес логика сайта для квеста по Assembler была написана на JavaScript, используя последнюю версию спецификации ECMAScript - ES2019, выпущенной в 2019 году. Для разработки сайта был использован только язык JavaScript и средство отладки Chrome, популярные библиотеки такие как JQuery, React, или же фреймворки Vue, Angular использованы не были.

Процесс разработки сайта

Сайт для квеста по Assembler предполагал запуск только на локальной машине, поэтому типичная схема «сервер - клиент» задействована не была: вся логика программы, а так данные хранились в статическом формате в виде документов с расширением .js, и прикреплялись к основной странице сайта с расширением .html. Каскадные таблицы стилей находись в файле .css. Все файлы проекта находились в одной директории. Там же присутствовали и картинки, задействованные в работе сайта.

Внешне оформление и приветственная страница

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

Рис. 1. Заглавная страница сайта

Разработка каркаса игры с использованием SVG

Суть квеста заключалась в том, что пользователю нужно было пройти 12 пунктов и на каждом пункте ответить на 3 вопроса по Assembler. За правильный ответ на все три давалась часть кода, который впоследствии объединялся в один, и на его основе нужно было составить слово.

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

Для программной реализации игровой области была выбрана SVG – масштабируемая векторная графика, или язык для описания двумерной графики в XML. Игровая область было создана с помощью SVG – графики в специальном редакторе, и за тем перенесена на HTML-страницу сайта.

Рис. 2. Игровое поле сайта

Добавление элементов управления

Элементы управления объединены в 3 блока: блок вопросов, блок справки и блок управления. Блок вопросов находиться в левом нижнем углу и имеет размер 700 на 250 пикселей. В этом блоке появляются вопросы, когда пользователь находиться на пункте игрового поля. Для каждого вопроса имеется 4 варианта ответа, помеченные радиокнопками, и кнопка «Ответить», при нажатии которой либо загружается следующий вопрос, либо подводятся итоги по всему пункту.

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

Рис. 3. Основная страница сайта

Блок управления находиться в правом нижнем углу, и имеет две кнопки – «Вперёд» и «Вернуться». Кнопки позволяют перемещаться по игровому полю: вперёд и, соответственно, назад. Текущая позиция подсвечивается фиолетовым цветом.

Рис. 4. В данном случае текущая позиция – 1

Разработка логики программы

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

После выбора пользователем варианта ответа и нажатия кнопки «Ответить», если счётчик вопросов не равен 3, то ответ на вопрос сохраняется в массив текущих ответов и загружается следующий вопрос. Иначе, подводиться итог этапа: ответы на вопросы сравниваются с правильными, и, если они все верны, то этап считается пройденным. Пользователю, правильно ответившему на все вопросы в блоке, предоставляется часть кода на Assembler, текущий пункт игровой кривой окашивается в зелёный цвет и становиться больше недоступным для прохождения. Если же ответы не совпадают с правильными, то текущий пункт окашивается в красный цвет и пользователя в блоке вопросов оповестят о неверном ответе на вопросы. Если все 11 пунктов с вопросами пройдены правильно, то пользователь получает доступ к 12 пункту, который содержит в себе последнее задание, отличающееся от предыдущих: отгадать слово, основываясь на предложенном коде на Assembler. Правильный ответ пользователь вводит в поле ввода, и при валидном ответе игрока оповестят об успешном прохождении квеста. Проверка на валидность ответа пользователя заключается в проверке суммы значений каждого символа строки ответа, пропущенных через специальную функцию, о которой рассказано ниже.

Кибербезопасность

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

Система штрафов

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

если номер текущего пункта меньше 6, то первый дополнительный пункт вычисляется как текущий плюс 3, второй – текущий плюс 6;

если номер текущего пункта меньше 9 и больше 6, то первый дополнительный пункт вычисляется как текущий плюс 3, второй – текущий минус 3;

если номер текущего пункта меньше 12 и больше 9, то первый дополнительный пункт вычисляется как текущий минус 3, второй – текущий минус 6.

Заключение

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

Библиографическийсписок

Абрамова О.Ф. Методика организации практических занятий с использованием ролевого подхода и case-заданий [Электронный ресурс] / О.Ф. Абрамова // Санкт-Петербургский образовательный вестник : электрон. науч.-практ. журнал. - 2017. - № 8 (12). - C. 9-15. – Режим доступа : http://ru.calameo.com/read/005072235e4dd2e099704.

Абрамова О.Ф. Визуализация паттерна поведения пользователя web-системы / О.Ф. Абрамова // Кибернетика и программирование : электронный журнал. - 2019. - № 3. - C. 43-52. – DOI: 10.25136/2644-5522.2019.3.23017. – URL : https://nbpublish.com/ library_read_article.php?id= 23017.

Лясин Д.Н. Основы проектирования Web-приложений: учеб. пособие / Д.Н. Лясин, О.Ф. Абрамова; ВПИ (филиал) ВолгГТУ. - Волжский, 2019 с.

Абрамова О.Ф. Программная реализация веб-системы для проведения дистанционных конкурсов с мультимедийным контентом / О.Ф. Абрамова // Актуальные вопросы профессионального образования (АВПО). - 2017. - № 4 (9) Декабрь. - C. 25-39.

Лясин Д.Н. Современные тенденции развития Web-технологий / Д.Н. Лясин, С.Г. Саньков, М. Петров // Взаимодействие науч. - исслед. подразделений промышл. предприятий и вузов по повышению эф-сти управления и производства: сб. матер. II Межрегион. н.-пр. конф., Волжский, 12-13.04.05 / ВПИ (филиал) ВолгГТУ и др. - Волгоград, 2005. - C. 48-52

Код для цитирования: Скопировать