Разработка веб-портала для обучения английскому языку с элементами игровых механик



Разработка веб-портала для обучения английскому языку с элементами игровых механик

Александрович Ирина Олеговна, преподаватель английского языка

ООО «English discussions» (г. Пенза)

Ватолкина Елизавета Александровна, студент;

Короткова Екатерина Сергеевна, студент

Пензенский государственный технологический университет

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

Ключевые слова: веб-приложение; унифицированный язык UML2.0; проекты на JavaScript, HTML, CSS; обучение английскому языку с элементами игровых механик.

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

В данной работе представлена разработка веб-портала для обучения английскому языку с элементами игровых механик. Первый этап это анализ требований к реализации веб-портала. На втором этапе будет проведено проектирование веб-портала с помощью унифицированного языка моделирования UML2.0. Третий этап это разработка программного обеспечения веб-портала.

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

Требования к функциональным характеристикам.

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

‒ регистрация и хранение информации о клиентах;

‒ для ранее зарегистрированных пользователей в системе предусмотрена форма для авторизации;

‒ преподавателю должна быть доступна функция создания, изменения, удаления теоретических материалов;

‒ раздел «материалы» должен содержать окно с доступными материалами для изучения;

‒ раздел «тренировка» должен содержать окно с имеющимися играми для прохождения.

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

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

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

Рис. 1. Диаграмма вариантов использования веб-портала

Таблица 1

Таблица прецедентов

№	Название	Актер	Прецедент
1	Вход в ЛК	Посетитель	Авторизация
		Посетитель	Ввод логина
		Посетитель	Ввод пароля
		Сервер	Аутентификация
2	Просмотр материалов	Посетитель	Просмотр материалов
3	Добавление материалов	Преподаватель	Добавление материалов
		Сервер	Сохранение данных
4	Просмотр результатов студента	Преподаватель	Просмотр результатов студента
		Сервер	Хранение результатов заданий
5	Выполнение заданий	Студент	Просмотр теоретических материалов
		Студент	Прослушивание аудиоматериалов
		Студент	Добавление новых слов в словарь
		Студент	Прохождение игр
		Студент	Ответ на задания
		Сервер	Проверка ответа
		Сервер	Хранение результатов задания
6	Завершение сеанса	Посетитель	Завершение сеанса
		Преподаватель	Завершение сеанса
7	Запрос о повторном вводе данных	Сервер	Запрос о повторном вводе данных
		Сервер	Вывод ошибки ввода

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

Рис. 2. Диаграмма деятельности для варианта использования «Вход в личный кабинет»

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

Когда курсор попадает в узел разветвления, проверяются сторожевые условия на исходящих ребрах этого узла. Исходящих ребер может быть два и более. По одному из ребер, на котором сторожевое условие истинно, курсор управления передается дальше. Если таких ребер несколько — произвольным образом выбирается одно.

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

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

Рис. 3. Диаграмма компонентов

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

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

Были созданы таблицы: пользователи, словарь, теоретический материал, игры.

Рис. 4. Схема Базы данных

Для разработки программного обеспечения были выбраны следующие инструменты:

– для работы с БД должен использоваться язык запросов MySQL ;

– для работы с веб-порталом должен использоваться язык запросов PHP ;

– для работы с интерфейсом приложения должен использоваться язык JavaScript, HTML, CSS .

Разработано несколько обучающих игр:

– Animal Band Quiz, в которой нужно пройти викторину на тему музыки и музыкальных инструментов.

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

– Clean and Green, где необходимо сделать уборку в комнате. На первом этапе необходимо выбрать часть комнаты, затем будут предоставлены предметы, которые необходимо отсортировать. Игра направлена на развитие лексики по таким темам, как переработка мусора, окружающая среда и бытовые предметы.

Перейдем к разработке веб-интерфейса.

Главная страница имеет название LearnEnglish (рис. 5) и содержит следующие возможности:

– регистрация;

– авторизация;

– выбор главных разделов сайта, таких как словарь, грамматические материалы и игры.

Рис. 5. Главная страница

Главная страница содержит две формы Login и Sign Up , где пользователь может ввести свою личную информацию. Для новых пользователей форма регистрации содержит поля, а именно Kids и Teacher , на данном этапе происходит выбор роли аккаунта в качестве студента или преподавателя (рис. 6).

Рис. 6. Выбор типа аккаунта при регистрации

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

Рис. 7. Выбор имени пользователя при регистрации

Раздел Games (рис. 8) представляет собой расширяемый набор тем для игр, направленных на пополнение словарного запаса слов по определенной теме.

Рис. 8. Страница Games

Разработан интерфейс игры « Countdown » (рис. 9), в которой нужно выбрать в правильном порядке буквы английского алфавита, за ограниченное количество времени.

Рис. 9. Игра « Countdown »

Перед началом игры пользователю дается подробная инструкция для прохождения (рис. 10). Игра имеет звуковое сопровождение. Получение данных происходит на сервере.

Рис. 10. Инструкция для прохождения игры « Countdown »

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

Литература:

1. Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5–68 с. –Учебное пособие. — 2016.
2. Фрейен Бен HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств; Питер — Москва, 2016. — 304 c.
3. Гарькуша Н. В., Буторина Н. И. Особенности организации образовательного сайта // Научный журнал «Наука и перспективы». 2016. — № 4. — C. 32–39.
4. Емельянова, Н. З. Проектирование информационных систем: Учебное пособие / Н. З. Емельянова, Т. Л. Партыка, И. И. Попов. — М.: Форум, 2013. — 432 c.
5. Коваленко, В. В. Проектирование информационных систем: Учебное пособие / В. В. Коваленко. — М.: Форум, 2015. — 976 c.
6. Рамбо.Д. UML 2.0. Объектно-ориентированное моделирование и разработка; Питер,2007.- 545 c.