Дипломная (вкр): Разработка системы онлайн-тестирования

·        Экзамен (Exam)

·        Викторина (Quiz)

·        Лабораторная работа (Assessment)

Интерфейс создания тестов на этом веб-сайте позволяет добавлять неограниченное количество вопросов. Разбиение вопросов на категории (секции) не допускается. При этом один вопрос может иметь не более четырех вариантов ответа и единственный верный вариант. Функционал сайта обеспечивает поддержку подсказок и пояснений к вопросам во время прохождения теста.

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

·        Статистика по тесту

·        Статистика по вопросу

·        Итоговые результаты

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

Адрес веб-сайта: https://www.onlineexambuilder.com/

ClassMaker

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

Интерфейс создания тестов интуитивен для пользователя, а набор возможных типов вопросов для добавления довольно велик. Система поддерживает следующие типы вопросов:

·        С несколькими вариантами ответа

·        «Правда или ложь»

·        Сопоставление

·        Короткий ответ

·        Эссе

·        Заполнение пропусков

·        Аудиовопрос

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

Аналитическая составляющая системы обладает следующими функциями:

·        Вывод результатов

·        Ранжирование по шкале оценок

·        Отправка персонализированных E-Mail с анализом работы

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

Адрес веб-сайта: https://www.classmarker.com/

MasterTest

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

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

·        Создание тестов

·        Подписка на тесты по E-Mail и SMS

·        Вывод данных в формате электронной таблицы

·        Выставление оценок

·        Генерация сертификатов

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

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

Ссылка на сайт: #"897224.files/image001.gif">

Рисунок 1 "Схема архитектуры системы"

Фронтенд, состоящий из одной HTML-страницы, включает в себя начальную разметку страницы, ссылки на таблицы стилей, метаинформацию о веб-документе, а также главный исполняемый JavaScript-файл “bundle.js”. Именно этот файл содержит код, компилированный из React-синтаксиса JSX в стандартный JS, поддерживающийся большинством веб-браузеров. В этом файле предусмотрены различные API-запросы, с помощью которых клиентский код получает или модифицирует данные из удаленного источника (REST API бэкенда). Пример архитектуры JSX компонентов, лежащих в основе исполняемого файла, будет представлен позже.

Бэкенд - это веб-приложение на платформе ASP.NET MVC 5, использующий язык C#. Его архитектура соответствует паттерну разработки под названием MVC (от англ. “Model-View-Controller” - “Модель, представление, контроллер”). Для взаимодействия с БД используется Entity Framework.

Аналитическая система содержит реляционное хранилище данных (на схеме “РХД”), процессы ETL с использованием MS SSIS и средство разработки кубов MS SSAS с отдельно созданным для веб-приложения кубом.

Получение данных для аналитики осуществляется за счет применения драйвера ADOMD.NET, который позволяет программно обращаться к удаленному кубу и осуществлять MDX-запросы.

Фронтенд на React

Используемый в системе тестирования фреймворк позволяет создавать сложные приложения за счет использования компонентов, которые можно встраивать друг в друга. Отрисовка страницы происходит после того, как браузер загрузит страницу, то есть изначально на странице не присутствует ничего кроме одного пустого блока, в который затем будет вставлено содержимое приложения. То, что именно будет вставлено в блок, описано в исполняемом файле “bundle.js”. Этот файл является результатом компиляции другого файла, написанного с использованием специального синтаксиса JSX, а также различных новых возможностей языка JavaScript, которые еще не в полной мере поддерживаются браузерами. Входной файл до компиляции содержит логику по вставке какого-то компонента в пустой блок на странице. Встраиваемый компонент может включать в себя другие компоненты, вызывая соответствующие методы по отрисовке данных.

Во входном файле “index.js” происходит вставка определенного компонента в пустой блок:

let layout = <Router history={browserHistory}>

<Route path="/exam" component={ExamPageContainer} />

<Route path="/" component={RootComponent}>

<Route path="/home" component={Home} />

…

<Route path="*" component={NotFoundComponent} />

</Route>

</Router>;app = document.getElementById("app");.render(<Provider store={store}>

{layout}

</Provider>, app);

В этом фрагменте кода в блок с id “app” производится вставка компонента Provider, который включает в себя компонент, лежащий в переменной layout, то есть Router. Router также содержит несколько компонентов внутри - Route с различными атрибутами.

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

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

В случае, если пользователь не авторизовался, ему показывается форма ввода логина и пароля (рис. 2).

Рисунок 2 "Форма авторизации"

Регистрация доступна на промо-странице приложения, на которой расположена основная информация о системе и регистрационная форма (рис. 3)

Рисунок 3 "Регистрационная форма"

Главная страница находится по адресу “/home” начиная от корня веб-приложения и открывается автоматически при попытке перейти в корень сайта. На этой странице расположена информация о последних тестах и результативности групп (рис. 4).

Рисунок 4 "Домашняя страница"

Как видно из горизонтального меню приложения, существуют 4 раздела сайта: Домашняя страница (“Home”), открываемая по умолчанию, Тесты (“Tests”), Группы (“Audience”) и Аналитика (“Analytics”). В каждом из этих разделов могут быть подразделы - в случае со страницей «Тесты» существует 2 поддиректории: корневая «/» и директория «/add» с формой добавления теста (рис. 5).

Рисунок 5 "Форма создания теста"

На этой странице можно наглядно продемонстрировать глобальное состояние (глобальный store из компонента Provider). На основании объекта состояния, представленного на рис. 6, производится отрисовка элементов на странице. Изменение данных в полях для ввода вызывает изменение состояния, а затем уже страница перерисовывается. Такой подход является фундаментальным для React, так как позволяет на уровне веб-приложения манипулировать только данными и событиями по их изменению.

Рисунок 6 "Древовидное представление глобального состояния приложения"

Архитектура компонентов клиентской части приложения сложна и насчитывает множество файлов. Для демонстрации можно рассмотреть структуру страницы, используемой для сдачи теста. Она содержит название теста, его секции, вопросы и варианты ответа, а также кнопку отправки результатов в конце страницы. Для этой страницы предусмотрен путь “/exam”, который подставляет в пустое место страницы компонент ExamPageContainer.

Рисунок 7 "Схема компонентов страницы прохождения теста"

На рис. 7 визуально представлено деление веб-страницы на компоненты. Корневым компонентом в данном случае является ExamPageContainer. Он отвечает за загрузку данных о тесте с сервера и не имеет никакой отрисовки. После получение теста с сервера, дочерний компонент ExamPage начинает дальнейшую отрисовку элементов - заголовка теста (h2), секций теста (ExamSection). Каждый компонент секции затем инициирует отображение дочерних компонентов - название секции (h3), вопросы (ExamQuestion) и так далее.

На деле, компонентов на этой странице больше и некоторые из них были опущены для наглядности. Например, визуальное представление обьектов на странице осуществляется за счет использования компонентов Row и Col - строка и колонка, а в варианте ответа также присутствует элемент управления (checkbox или radiobutton).

Запросы к серверу из браузера посетителя веб-страницы осуществляются за счет библиотеки fetch. Она легко интегрируется в React-приложение и предоставляет широкие возможности для работы с HTTP-запросами. Эта библиотека представляет из себя функцию, первым параметром которой является URL запроса, а вторым - объект с параметрами запроса (такими как метод запроса - GET, POST, PUT, авторизационные данные - заголовок Authentication и т.п.). Данная функция возвращает результат отправленного HTTP-запроса, который используется для получения данных или обработки ошибки. Например, при запросе теста для прохождения экзамена используется следующий запрос:

GET #"897224.files/image008.gif">

Рисунок 8 "Схема данных сайта"

Для хранения данных используется программная прослойка между БД и веб-сервером, называемая Entity Framework. Данный фреймворк позволяет обращаться к объектам базы данных как объектам классов модели. Процессы добавления, редактирования и удаления сущностей из БД осуществляются путем вызова соответствующих методов объекта базы данных (Add, Update, Delete, AddRange и т.п.). Выборка данных производится с использованием языка запросов LINQ, поддерживаемым C#.

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

Логическая модель связей между сущностями модели данных представлена на рис. 9.

Рисунок 9 "Логическая модель данных"

В табл. 1 представлены все поля таблиц БД разрабатываемой системы, их тип данных и описание.

Таблица 1 "Описание полей таблиц БД"