Особенности разработки компьютерных систем тестирования и тестовых заданий для контроля успеваемости студентов в рамках дисциплины "инженерная графика"

66 ISSN 2500-0039. Педагогика. Вопросы теории и практики. № 2 (8) 2017

Размещено на http://www.allbest.ru/

Статья по теме:

Особенности разработки компьютерных систем тестирования и тестовых заданий для контроля успеваемости студентов в рамках дисциплины «инженерная графика»

Морозов Юрий Владимирович, Морозова Марина Алексеевна Московский государственный технический университет имени Н.Э. Баумана

В статье рассмотрены особенности программного обеспечения, применяемого для разработки систем дистанционного обучения и тестирования с учетом специфики графических дисциплин. Отмечается, что при использовании изображений форматов BMP, JPG, PNG и др., форматов растровой графики, возникает проблема алиасинга, обусловленная растеризацией векторного изображения. Попытки решить данную проблему путем привязки набора изображений к различным разрешениям дисплеев не всегда приводит к значимому повышению качества графических тестов. Поэтому одним из способов решения проблемы видится в применении для графических заданий по дисциплине "Инженерная графика" векторных форматов, например, SVG.

Ключевые слова и фразы: адаптивная среда тестирования; тестовое задание; графическое изображение; векторная графика; адаптивная верстка.

Компьютерное тестирование в образовательном процессе стало активно развиваться в России практически с появлением первых персональных компьютеров под управлением ОС Windows и достаточно быстро приобрело популярность как один из способов быстрой оценки знаний студентов.

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

С технической стороны в большинстве первых многопользовательских систем использовалась самописная клиент-серверная технология на основе TCP/IP и базы данных Microsoft Access. Такой стек технологий фактически ограничивал количество одновременных сессий тестирования примерно тридцатью, что обычно превосходило количество компьютеров в компьютерном классе университета.

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

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

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

кроссплатформенность (запуск приложений на различных ОС, таких как Windows, Linux, iOS, Android);

адаптивность (возможность использования приложения на устройствах с различным разрешением экранов);

доступ из интернета через браузер.

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

Современное состояние проблемы

Разработка тестовых заданий для дисциплин начертательной геометрии, инженерной и компьютерной графики, как правило, осуществляется в пакетах, использующих векторную графику, например, Autodesk AutoCad, Corel Draw и прочие. Однако подготовленные в этих программах изображения невозможно использовать для тестирования через интернет, поэтому в большинстве систем тестирования до сих пор используются форматы растровой графики, такие как JPG, PNG или BMP. При конвертации векторного изображения в растровое происходит процесс растеризации, в результате которого, фактически, получается отображение векторного изображения на растровую сетку.

Очевидно, что процесс растеризации завязан на физические размеры растрового изображения, поэтому при его масштабировании возникает эффект, получивший название алиасинга, т.е. вместо кривых линий на экране отображается лесенка из пикселей (Рис. 1):

Рис. 1 - Иллюстрация проблемы алиасинга

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

На сегодняшний день разрешение экрана электронных устройств, на которых возможно проводить компьютерное тестирование, может варьироваться от 1024*768 пикселей у планшетов первых поколений до5120*2880 у некоторых дисплеев фирмы Apple, поэтому процессу подготовки изображений для проведения тестирования необходимо уделять повышенное внимание.

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

@mediascreenand (device-width:768px) {background-image:url ('images/image768.jpg');}

@mediascreenand (device-width:1024px) {background-image:url ('images/image1024.jpg');}

Таблица 1 - Поддержка @media основными браузерами (номера версий)

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

Преимущества векторного формата SVG

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

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

Уменьшение HTTP-запросов: при использовании SVG сокращается количество обращений к серверу, соответственно увеличивается скорость загрузки сайта.

Стили и программирование: при помощи CSS можно менять параметры графики на сайте, например, фон, прозрачность или границы.

Анимация и редактирование: при помощи javascript можно анимировать SVG, а также редактировать в текстовом или графическом редакторе (InkScape или Adobe Illustrator).

Малый размер: объекты SVG весят намного меньше растровых изображений [8].

Таблица 2 - Поддержка SVG основными браузерами (номера версий)

C технической точки зрения, формат SVG - это текстовый файл формата XML, в котором формируется двумерное векторное изображение из предусмотренных стандартом примитивов:

Описание путей позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты. Команды позволяют описывать фигуры, состоящие из отрезков прямых(L, H, V),кривых Безье(C, S, Q, T) и дуг (A).*Описание основных геометрических фигур (многоугольники, прямоугольники, окружности ит.п.) [7; 8].

Рис. 2 - Пример SVG файла и соответствующее ему изображение

тестирование программный обеспечение алиасинг

Применение адаптивной верстки для систем тестирования

Использование в компьютерном тестировании векторного формата SVG позволяет решить все вопросы, связанные с качеством изображения на экране пользователей. Однако не менее важным остается процесс размещения изображений и текста на экране, так называемая «адаптивная верстка».

Адаптивная верстка - это дизайнвеб-страниц, обеспечивающий правильное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера. Целью адаптивной верстки является универсальность отображения содержимого веб-приложения для различных устройств с экранами различных разрешений [1; 2].

Сейчас самой используемой технологией адаптивной верстки является система колоночных сеток на основе Bootstrap. Система сеток разделяет видимую область экрана на заданное количество колонок, а ширина элементов задается количеством колонок. Bootstrap предусматривает использование 12-ти колонок для четырёх разрешений:

мобильные устройства (<768px), суффикс XS;

планшеты (>=768px), суффикс SM;

ноутбуки (>=992px), суффикс MD;

персональные компьютеры (>=1200px), суффикс LG [5].

Соответственно, Bootstrap определяет 12*4 доступных для использования классов, например, .col-xs-12 .col-md-8 задает ширину элемента во весь экран для мобильных устройств и 2/3 экрана для ноутбуков и ПК.

Рис. 3 - Пример разделения пространства экрана при колоночной верстке

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

<div class="row">

<div class="col-md-12 title">

<h1>На каком рисунке правильно изображено сечение?</h1>

Издательство ГРАМОТА

</div>

<div class="col-md-6 variant">

<div class="checkbox">

<label>

…

</div>

<img src="…" />

</div>

<div class="col-md-6 variant"><div class="checkbox">

…

</div>

<img src="…" />

</div>

<div class="col-md-6 variant"><div class="checkbox">

…

</div>

<img src="…" />

</div>

<div class="col-md-6 variant"><div class="checkbox">

…

</div>

<img src="…" />

</div></div>На экранах с шириной больше 992 пикселей, содержимое страницы будет отображено в 2-х столбиках:

Рис. 4 - Представление тестового задания на широких экранах

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

66 ISSN 2500-0039. Педагогика. Вопросы теории и практики. № 2 (8) 2017

Размещено на http://www.allbest.ru/

Рис. 5 - Представление тестового задания на мобильных устройствах

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

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

Список источников

1. Адаптивный веб-дизайн [Электронный ресурс]. URL: https://ru.wikipedia.org/wiki/Адаптивный_веб-дизайн (дата обращения: 25.05.2017).

2. Адаптивный дизайн на основе медиа-запросов[Электронный ресурс]. URL: https://habrahabr.ru/company/google/blog/173861/(дата обращения: 25.05.2017).

3. Демидов Д. Г., Попов Д. И.Подход к автоматизации процессов обучения и тестирования // Инновационные методы и средства оценки качества образования: Материалы 5-ой научно-методической конференции. М., 2007. С. 178 - 180.

4. Кривоногов С. В.Разработка информационной системы для контроля и оценки знаний студентов // Вестник Нижегородского государственного инженерно-экономического института. Нижний Новгород, 2016. № 8. С. 30 - 39.

5. Grid System[Электронный ресурс]. URL: https://v4-alpha.getbootstrap.com/layout/grid/(дата обращения: 25.05.2017).6.Kristof Beets, Dave Barron. Анализ методов сглаживания на основе super-sampling [Электронный ресурс]. URL: http://www.ixbt.com/video/fsaa-an-1.html(дата обращения: 25.05.2017).

6. 7.Scalable Vector Graphics (SVG) 1.1 (Second Edition)[Электронныйресурс]. URL: https://www.w3.org/TR/SVG/(дата обращения: 25.05.2017).8.SVG [Электронный ресурс]. URL: https://ru.wikipedia.org/wiki/SVG/(дата обращения: 25.05.2017).

The article considers the peculiarities of software used for the development of systems of distance learning and testing based on the specifics of graphic disciplines. It is noted that when using image formats like BMP, JPG, PNG, etc., applying bitmap graphics, the problem of aliasing arises due to the rasterization of vector images. Attempts to solve this problem by binding a set of images to different resolutions of displays does not always lead to significant improvement of the quality of the graphics tests. Soone of the ways of solving the problem lies in the use of vector formats like SVG for graphic tasks in the discipline “Engineering graphics”.

Key words and phrases:adaptive environment of testing; test task; graphical image; vector graphics; adaptive layout.

Размещено на Allbest.ru