Online-система для подготовки к единому государственному экзамену

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

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

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

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

• 1.    Анализ схожих систем

Для подготовки к Единому государственному экзамену школьники и абитуриенты уже пользуются различными системами. Чаще других они выбирают специализированные сайты и социальные сети, такие как «ВКонтакте», « YouTube », « Instagram ». Кроме этого, некоторые большие корпорации также предоставляют такие возможности. Например, у «Яндекса» есть специальные раздел называемый «Яндекс Репетитор», где располагается множество тестов и заданий, а также имеются видеоматериалы с отснятыми заранее уроками.

Проведем сравнительный анализ некоторых схожих систем:

• -  Образовательный портал «Решу ЕГЭ» [1];

• -  Онлайн-школа «Фоксфорд» [2];

• -    Яндекс Репетитор [3];

• -    Сообщества в социальной сети «ВКонтакте» [4];

• -  Каналы на платформе «Y ouTube » [5].

Образовательный портал «Решу ЕГЭ» больше рассчитан для внеклассной подготовки учителями в школах своих учеников. Учителя могут создавать «комнаты», приглашать туда учеников и использовать для подготовки материалы сайта. Онлайн-школа «Фоксфорд» предназначен в первую очередь для платной подготовки учеников к сдаче ЕГЭ. Кроме этого, на сайте присутствует и бесплатный материал для самостоятельной подготовки. В социальной сети «ВКонтакте» присутствует возможность создания сообществ любой тематики. Сообщества для подготовки к ЕГЭ, созданные там, ничем по своему функционалу не отличаются от блогов путешественников, которые создаются на этой же платформе. В социальной сети « YouTube » присутствует возможность загружать видео, вести трансляции и общаться в комментариях.

Таблица 1. Сравнение функциональных возможностей существующих систем

Критерий	Решу ЕГЭ	Фоксфорд	Яндекс Репетитор	Вконтакте	YouTube
Создание страницы для размещения собственных материалов (сообщества)	Нет	Нет	Нет	Да	Да
Публикация собственных методик подготовки	Нет	Нет	Нет	Да	Да
Обучение с «учителем»	Да	Да	Нет	Да	Нет
Возможности для создания курса подготовки, включающих в себя уроки, материалы и тесты	Нет	Нет	Нет	Нет	Нет
Связь с преподавателем	Да	Да	Нет	Да	Нет
Альтернативные методики подготовки, представленные разными пользователями	Нет	Нет	Нет	Да	Да
Личная заинтересованность преподавателя в результате	Да	Да/Нет	Нет	Да/Нет	Да/Нет
Возможность продавать доступ к своим материалам	Нет	Нет	Нет	Да	Нет
Привлечение новых учеников с помощью публикации материала на сайте	Нет	Нет	Нет	Да	Да

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

Отметим наиболее важные преимущества разрабатываемой системы:

• -    Единый интерфейс. В системе может быть неограниченное количество сообществ, курсов, статей, но интерфейс внутри сайта будет единообразным. Если пользователь захочет учиться у другого преподавателя, ему не нужно будет привыкать к интерфейсу другого сайта. Изучая другой курс, он будет знать, где находится кнопка «написать» преподавателю или сохранить курс в закладки.

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

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

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

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

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

• 2.    Проектная часть

Система должна быть доступна как неавторизованным пользователям, так и пользователям, прошедшим процедуру авторизации. Неавторизованные пользователи могут просматривать всю информацию, размещенную в открытом доступе, но не могут ее комментировать, оценивать или добавлять. Модель структуры системы представлена на рис. 1.

Рис. 1. Модель структуры системы

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

Группы имеет несколько разделов:

• -    записи;

• -    статьи;

• -    курсы;

• -    тесты.

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

На диаграмме вариантов использования (рис. 2) представлены 3 типа ролей пользователей:

• -    администратор;

• -    автор;

• -    модератор.

  

  CreateGroup

  Delegate

  Group

  GroupAdmiir

  GroupAuthor

  GroupModer

  EditGroupPost

  Delete

  Edit

  DeleteGroupPosi

  GroupArticle,

  roupCoi

  'GroupPost

  Delete Comment

  AddBookmarks

  AddComment

  Create

  Рис. 2. Диаграмма вариантов использования группы

  
  
  
  

При создании группы система автоматически назначает администратором группы ее создателя. Администратор группы имеет следующие возможности:

• -    назначение пользователей на разные роли;

• -    добавление материалов в группу;

• -    формирование курсов;

• -    модерация курсов, статей, тестов.

• -    удаление комментариев.

В возможности автора входит наполнение группы контентом:

• -    добавление материалов в группу (статей, тестов);

• -    формирование курсов;

• -    модерация курсов, статей, тестов.

• 3.    Техническая часть

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

Типичный сайт сегодня строится на основе клиент-серверной архитектуры, при этом, как правило, используются следующие технологии: языки: HTML , CSS , JavaScript [6] и любой серверный язык (чаще всего PHP ) [7]. Первые 3 языка отвечают за разработку интерфейса web -приложения, то есть frontend -разработку. PHP же серверный язык, требующий для своей работы определенный набор программ, который обычно предоставляется на большинстве хостинг-серверов [8].

Кроме этого, для построения сайта часто используют CMS , например, WordPress [9] или Joomla [9]. CMS - почти готовое решение, сайт, который разработчику требуется настроить под себя путем добавления и отключения разных модулей.

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

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

Для хранения информации веб-сайта, как правило, необходима база данных. Наиболее часто используются такие БД, как MySQL, PostgreSQL , MongoDB . Первые две являются реляционными базами данных, MongoDB – нереляционная [11]. В нереляционных БД данные хранятся в коллекциях виде пар - ключ-значение, что очень удобно в случае модернизации самой системы. MongoDB имеет официальные драйвера для основных языков программирования, но кроме этого, так же существует множество неофициальных, поддерживающихся сообществом драйверов. Наиболее популярным считается mongoose.

На основе проведенного анализа [12] предпочтение было отдано следующему стеку технологий:

• 1.    Клиент:

  • 1.1.    Язык гипертекстовой разметки: HTML ;

  • 1.2.    Каскадные таблицы стилей: CSS (диалект SCSS );

  • 1.3.    Язык сценариев JavaScript ;

  • 1.4.    Фреймворки Vue.JS [13], Nuxt.JS [14].

• 2.    Сервер

  • 2.1.    Среда выполнения кода JavaScript – Node.JS [15];

  • 2.2.    Фреймворк Express ;

  • 2.3.    Паттерн MVC для построения архитектуры сервиса;

  • 2.4.    База данных Mongo , драйвер mongoose [16].

• 4.    Результат

Разрабатываемая online -система (сайт) предполагает блочную структуру. Каждый отдельный блок передает пользователю определенную информацию. И каждый оконченный «кусочек» структуры помещает в свой собственный блок, имеющий обрамление. Для предоставления основной информации был выбран светло-серый цвет, не нагружающий глаза пользователя и легкий краснооранжевый цвет с малиновым оттенком для отделения шапки сайта и структурных кнопок.

Главная страница

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

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

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

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

[Ц] Как освежить знания перед экзаменом

В Предмет: русский язык $ Часть: Часть А. Часть Б Ф Рейтинг: 7.24

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

новости

При посещении сайта для неавторизованного пользователя выводятся следующие данные:

• -    обычные посты – записи, оставляемые на «стене» модератором сообщества;

• -    посты типа «курс», которые являются ссылкой на курс, с комментарием автора;

• -    посты типа «статьи», которые являются ссылкой на статьи, тоже с комментарием автора.

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

Кроме этого, пользователь в правом меню может выбрать записи, которые хочет просмотреть. Например, последние добавленные на сайт, либо популярные – собравшие большое количество отметок «нравится».

При попадании на индексную страницу система получает ID пользователя с помощью индивидуального token’а сохраненного в cookies браузера пользователя, после чего обращается к таблице сессий в базе данных и передает ей токен пользователя. Результатом работы запроса к таблице по токену является ID пользователя.

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

Страница Группы

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

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

Рис. 4. Группа

Страница Курса

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

Страница «Курса» (рис. 5) также имеет блочную структуру. Вверху всей страницы располагается навигационная панель с интерактивными кнопками, в которой указан путь, по которому пользователь пришел на эту страницу.

Основное содержимое страницы размещается в центральном блоке и включает в себя:

• -    наименование курса;

• -    описание;

• -    состав курса (метаданные);

• -    данные каждого урока.

Кроме этого, страница включает в себя 3 следующих блока:

• -    преподаватели;

• -    участники;

• -    материалы.

При нажатии на кнопку «раскрыть» («показать всех») открывается модальное окно с более подробной информацией.

«ЕГЭ Группы шсолз‘yiwevt" Кура-   Ругсиы к.ил ат А до Я                                                                                             Артур Артуров

Русский язык or А до Я

Описание

Данный курс предназначен для подготовки * ЕГЭ по предмету "Русский язык* Курс включает е себя 5 уроков, в каждом из которых есть статья и видео

Состав курса

И Предмет: русский язык

Щ Часть: Часть А, Часть б

Количество уроков: 5

@ Стать*: Да

(В Видео: Ла

И Дата: 12 01 2020 18:00 00

Д Участников:4 / 24

* Яентннг: 7 24

Виталин Тарасов

Эрик Борисов

Дарья Калылова

Дмитрий Мартынов

Материалы

Причастия

Сложные проложения

Рис. 5. Курс

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

Заключение

Разработана система, позволяющая накапливать и хранить информацию для подготовки к ЕГЭ, предоставлять к ней дифференцированный доступ, а также производить обмен информацией от пользователя к пользователю. Система обладает рядом преимуществ по сравнению с аналогами, в частности, позволяет создавать группы пользователей, формировать курсы с использованием материалов группы; обеспечивать единообразный подход к размещению материалов внутри системы. Использование кэширования позволило обеспечить высокую производительность разработанной online -системы.