Интерактивная распределенная система обучения и контроля знаний на графических объектах

В.В.Макаров
ст.н.с./доц.,
к.т.н., ст.н.с.
г.Москва

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

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

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

Основные реализованные возможности, кроме указанных выше, следующие:

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

- тестирование проходит в режиме диалога с компьютером в реальном времени;

- время тестирования ограничено, задается преподавателем или при настройке системы при использовании ее в монопольном режиме;

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

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

Система реализована на примерах из атласов по анатомии домашних животных [1]. Для разработки обучающей системы по анатомии животных использовался главным образом язык HTML, а основным ее стержнем является использование графических объектов. Каждый графический объект разделен с помощью тега <MAP> на множество активных областей, при наведении курсором мыши на которые, появляются всплывающие подсказки с названием той или иной части объекта. Этот компонент обучающей системы может рассматриваться как информационно-справочная система, потому что по образу элемента можно получить справку о его названии и, если необходимо, о его параметрах.

Система контроля знаний включает в себя:

- базу данных, в которой хранятся все данные о пользователях и их результаты тестирования;

- подсистему аутентификации, которая отвечает за предоставление прав доступа к системе и регистрацию новых посетителей;

- подсистему тестирования, в которой пользователь осуществляет проверку своих знаний;

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

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

Подсистема проверки знаний состоит из ряда тестов, базирующихся на графических объектах. Рассмотрим один из тестов по иллюстрации «Скелет собаки» из альбома по анатомии домашних животных. Этот графический объект разделен с помощью тега MAP на множество активных областей, при наведении курсором мыши на каждый из которых появляется слово «Нажмите» (Рис.1).

Рис.1. Реакция системы при наведении курсора на активную область объекта «Скелет собаки».

Рассмотрим фрагмент листинга разделения графического объекта на активные области:

Тег <area> в листинге задает активную область. Активные области могут перекрываться. В случае, если некоторая точка относится к нескольким активным областям, то будет реализована та ссылка, описание которой располагается первым в списке областей. Параметр тега <area> shape определяет форму активной области. Допустимыми значениями являются rect, circle, poly, default. Эти значения задают области в виде прямоугольника, круга, многоугольника. Последнее значение -default- определяет все точки области.

Для графического объекта «Скелет собаки» параметром для <area> выбран poly, т.е. иллюстрация разделена на множество многоугольников. Многоугольники выбраны потому, что любая отдельная часть скелета не имеет правильной формы и соответственно ее не возможно описать прямоугольником или кругом. Для области poly задается множество координат вершин многоугольника в нужном порядке. Определение множественности вершин позволят описать необходимую область с максимальной точностью, даже если эта область неправильной формы.

После щелчка по активной области, появляется диалоговое окно с вопросом: «Как называется эта часть скелета?» и вариантами ответов, из которых пользователю необходимо выбрать правильный ответ (Рис.2).

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

Появляющиеся диалоговые окна реализованы с помощью слоев средствами CSS. При загрузке страницы с тестом эти слои имеют свойство «hidden», т.е. невидимы. Как только происходит событие Click на какой-либо активной области, то соответствующий ей слой меняет свойство «hidden» на «visible», т.е. становится видимым.

<!--

#layer1{

background-color:#FF9966;

height:100px;

width:300px;

left:30px;

position:absolute;

top:30px;

z-index:1;

visibility:hidden;

}

-->

</style>

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

Количество слоев соответствует количеству активных областей, на которые разделен объект. Иллюстрация «скелет собаки» разделена на 24 активные области, а значит и число слоев для этой иллюстрации составляет 24.

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

Список всех вариантов ответов организован в поле «select». Ввод текстовых данных в форму можно осуществить в поле <textarea> или с помощью тега <input type = “text”>, но при использовании этих способов возникает проблема при проверке правильности выбранного ответа. Эта проблема главным образом заключается в том, что очень сложно предугадать, как именно будет оформлен ответ, так например «череп» и «ЧЕРЕП» воспринимаются, как два абсолютно разных ответа и правильным будет считаться тот, который предусмотрен в программном коде. А поле <select> представляет собой уже готовый набор ответов и пользователю остается только выбрать правильный.

В окошке – слое также имеется две кнопки “ok” и “сброс”. После нажатия “ok” выбранный ответ запоминается и слой приобретает свойство «hidden», т.е. становится невидимым, а после нажатия “сброс” строчка в поле <select> становится нейтральной, т.е. ей присваивается значение «пусто».

Пользователю необходимо последовательно выбрать правильные ответы в каждом слое – окошке, привязанном к конкретной области.

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

var intLeft = 300; // Seconds until navigation occurs

function leavePage() {

if (0 == intLeft) // Time is up--navigate.

location.replace("Konec_vrem.html")

else {

// Count down and output updated time by

// changing the contents of the element.

intLeft -= 1;

document.all.countdown.innerText = intLeft+ " ";

// Wait another second.

setTimeout("leavePage()", 1000);

}

</SCRIPT>

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

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

После ее нажатия появляется окошко (рис. 3), где отображаются:

- правильный ответ

- ответ, который выбрал пользователь

- результат, т.е. правильно или не правильно, причем слово «правильно» написано зеленым цветом, а «не правильно» - красным.

Рис.3. Результаты тестирования.

После нажатия кнопки «Сохранить результат», данные из формы, а именно количество правильных ответов передается методом post на сервер и обрабатывается соответствующей программой PHP.

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

Для защиты системы от несанкционированного копирования и искажения информации представленной сервером в сети, реализована многоуровневая защита контента на JavaScript.

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

Используемые серверные компоненты – комплекс программ «Денвер», включающий Web-сервер Apach с поддержкой PHP, Perl и сервер MySQL. Объём серверного пакета 3.1М. Система функционирует под управлением всей линейки MS Windows 95/98/Me/NT/2000/XP.

Литература

1. Макаров В.В., Бобкова К.Н. Технология разработки интерактивных графических информационных ресурсов сети Интернет для обучения. /Труды международной научно-практической конференции: Математика, информатика, естествознание в экономике и обществе. М.: МФЮА, 2005, 175с.