CC BY
123
УДК 004.92;004.89
Разработка веб-сервиса визуализации когнитивной карты предметной области для использования в интеллектуальной обучающей системе
О.Ю. Лазарева, Т.С. Грушина
Московский государственный университет печати имени Ивана Федорова 127550, Москва, ул. Прянишникова, 2А e-mail: lazarevaoy@gmail.com, spk.grushina@yandex.ru
В настоящее время в сфере образования все больше внимания уделяется интеллектуальным обучающим системам, то есть электронным обучающим системам, для разработки которых используются технологии искусственного интеллекта [1-4]. С их развитием и расширением использования стала актуальна разработка веб-сервиса, позволяющего в процессе работы с ИОС эксперту-преподавателю строить когнитивную карту учебной дисциплины.
Когнитивная карта - это модель предметной области (МПО), которая представлена в виде графа с отношениями «предыдущий - последующий» между дидактическими единицами (ДЕ) и назначением этим отношениям веса, характеризующего важность знания одной ДЕ при изучении другой. ДЕ - минимальная структурная единица учебного материала, используемая для описания изучаемой дисциплины [2].
Ниже представлена когнитивная карта (рис. 1), состоящая из 4 ДЕ со связями «предыдущий - последующий» [4].
Так как в настоящее время наиболее активно развиваются веб-ориентированные ИОС, будет крайне полезным иметь веб-сервис, позволяющий визуализировать когнитивную карту предметной области в виде графа дидактических единиц, редактировать и устанавливать отношения «предыдущий - последующий» между ними.
123
Рис. 1. Когнитивная карта предметной области
Для разработки подобного веб-сервиса будут использоваться следующие языки и технологии: HTML, CSS, SVG, JavaScript, AJAX и JavaScript-библиотека D3 [5], с помощью, которой можно создавать как статичные, так и динамичные визуализации сложных данных (рис. 2).
Рис. 2. Пример использования библиотеки D3.js
Веб-сервис должен реализовывать следующие функции:
• создание новых ДЕ щелчком мыши;
• установка однонаправленных связей между ними;
• графическое выделение элементов графа;
• изменение направления связи (с помощью клавиш L и R);
• возможность перемещения по полю объектов (при нажатии клавиши Ctrl);
• удаление узлов и связей (клавиши Delete и Backspace).
Рассмотрим алгоритм создания визуализации графа. Создается новый HTML-документ, в котором прописываются основные теги и подключается библиотека D3 [6], файл с кодом (graph.js), в котором создается граф со всеми его элементами и файл с оформлением внутренних объектов (graph.css).
124
В файле graph.js вначале создаются и настраиваются все объекты SVG (ДЕ, связи и поле отрисовки) как показано в листинге 1.
Листинг 1
var svg = d3.select('body') .append('svg') .attr('width', 600) .attr('height', 400);
var nodes = [
nodeLastId = 3, links = [
{source: nodes[0], target: nodes[2], left: false, right: true } ];
Элементу body добавляется элемент SVG размерами 600 на
400 px. Затем создаются переменные nodes и links, устанавливающие начальные узлы (ДЕ) и связи соответственно. Изначально отрисовываются три дидактические единицы со связью: ДЕ1 к ДЕЗ. На рис. 3 представлен результат работы программы.
В узлах отчет идет от нуля, то есть, ДЕ1 будет иметь нулевой порядковый номер и соединяться с ДЕ3, порядковый номер которой -два. Как видно из кода, приведенного в листинге 1, D3 позволяет применять технику цепочки методов, в которой методы вызываются последовательно один за другим в одной строке кода [7].
Инициализация расположения узлов в пространстве происходит с помощью метода библиотеки D3 - d3.layout.force() [6]. Это делается для того чтобы элементы когнитивной карты были динамичными, а не статичными, умели отталкиваться и притягиваться.
Далее приведены примеры некоторых функций, которые отвечают за интерактивность элементов графа и другие параметры. Функция ticks() отвечает за построение стрелки от центра узла и обновление ее расположения; вызывается автоматически при каждой итерации.
{id: 1}, {id: 2}, {id: 3} ],
\
Рис. 3. Начальное состояние графа
125
Изначально все события для мыши имеют значения null:
• node_selected - выбранная ДЕ;
• link_selected - выбранная стрелка;
• link_mousedown - нажатие на стрелку;
• node_mousedown - нажатие на ДЕ;
• node_mouseup - нажатая кнопка отпущена (ДЕ).
Функция update() отвечает за обновление графа и вызывается, когда нужна, например, когда создана новая ДЕ или связь. Командой path = path.data(links) обновляются данные о связях, при этом метод .data() привязывает значения к элементам, которые будут созданы.
Команда g.append('svg:circle') создает окружности (ДЕ), далее прописывается их радиус, оформление при определенных событиях мыши (листинг 2). Например, при добавлении связи у узла, увеличивается его радиус, когда появляется стрелка.
Листинг 2
g.append('svg:circle')
.attr('class', 'node')
.attr('r', 13)
.style('fill', function(d) { return (d === node_selected) ? d3.rgb(colors(d.id)).brighter().toString() : colors(d.id); })
.style('stroke', function(d) { return d3.rgb(colors(d.id)). darker().toString(); })
.on('mouseover', function(d) { if(!node_mousedown || d === node_mousedown) return;
d3.select(this).attr('transform', 'scale(1.2)'); })
Установка направления стрелок при добавлении связей («Left»/«Right») происходит с помощью переменных source, target, direction (начало, конец и направление). При условии, что id выделанного узла меньше id невыделенного, начало стрелки будет у выделенного, а конец у другого (направление 'right'). В противном случае 'left' (листинг 3).
Листинг 3
var source, target, direction; if(node_mousedown.id < node_mouseup.id) { source = node_mousedown; target = node_mouseup; direction = 'right';} else {
source = node_mouseup; target = node_mousedown; direction = 'left'; }
126
Функция mousedownO описывает события и действия, когда кнопка мыши опущена и определяет стиль для активной ссылки. Если не выделена связь, узел или не нажат Ctrl, то происходит вставка нового узла (листинг 4).
Листинг 4
var de = d3.mouse(this), node = {id: ++nodeLastId}; node.x = de[0]; node.y = de[1]; nodes.push(node);
Функция keydown() определяет событие нажатой клавиши. Создается переменная KeyDown_Last со значением -1. Затем идет проверка, если эта переменная равняется -1, то она получает значение в виде кода нажатой клавиши (d3.event.keyCode).
Для когнитивной карты будут использоваться следующие команды и клавиши:
• Ctrl - перетаскивание узлов (код клавиши 17);
• R - изменение направления стрелки «Right» (код 82);
• L - изменение направления стрелки «Left» (код 76);
• Backspace, Delete - удаление связей и узлов (код 8, 46).
В листинге 5 приведен пример кода для клавиши Ctrl. Функция force.drag библиотеки D3 используется для перетаскивания объектов, которую вызывает метод .call().
Листинг 5
if(d3.event.keyCode === 17) { circle.call(force.drag); svg.classed('ctrl', true);}
Чтобы получившийся граф выглядел более динамичным, необходимо его стилизовать. Цветовое решение ДЕ прописано с помощью метода d3.scale.category20(), применяемого к переменной colors. Этот метод позволяет использовать цветовую гамму, которой располагает библиотека D3. Он выдает готовую палитру цветовых вариантов (рис. 4). При создании узлов они будут менять цвет строго по порядку шкалы.
Чтобы графически выделить выбранный узел (осветление на несколько тонов), в функции udate() методом .selectAll('circle') выделяются все ДЕ и присваивается нужное свойство с помощью метода .style(), как показано в листинге 6.
127
# d3.scale.category20(}
Constructs a new ordinal scale with a range of twenty categorical colors:
B#1f77M
И#аес7е8
H#fT7f0e
H#m>t>70
И#2са02с
B#98df8a
■ #d62728 Н#П989Е И#9467М
■ #c5Md5 H #8c564-b H #c49c94 И#е377с2 H #f7b€d2 Ш #7f7f7f И#е7с7с7 H#bcbd22 И #dbdbSd
Ш #17 beef H
Рис. 4. Порядковая шкала с диапазоном в двадцать тонов
Листинг 6
drde.selectAN('drde')
.style('fill', function(d) { return (d === node_selected) ? d3.rgb(colors(d.id)).brighter().toStringO : colors(d.id); });
Остальное оформление SVG-объектов написано в файле graph.css. Например, при наведении курсора на узел и при создании связей, он принимает вид указателя (pointer). Также в файле прописан стиль обводки узлов и свойства связей: обычной стрелки и выделенной.
На рис. 5 представлен пример работы веб-сервиса: когнитивная карта предметной области, состоящей из десяти дидактических единиц.
Рис. 5. Визуализация когнитивной карты
128
Библиографический список
1. Лазарева О.Ю. Архитектура интеллектуальной обучающей системы для оценки компетенций учащихся вузов. // Известия высших учебных заведений. Проблемы полиграфии и издательского дела. -2014. - № 5. - С. 55-64.
2. Лазарева О.Ю. Использование SWI-Prolog в веб-ориентированной интеллектуальной обучающей системе / Актуальные проблемы современной науки: сборник статей Международной научно-практической конференции (1 августа 2014г., г. Уфа). - Уфа: Аэтерна, 2014. -С. 11-16.
3. Лазарева О.Ю. Когнитивная карта предметной области в интеллектуальной обучающей системе / Научно-образовательная информационная среда XXI века: материалы VIII Международной науч.-практ. конф. (15-18 сентября 2014 года). - Петрозаводск, 2014. - С. 134-137.
4. Лазарева О.Ю, Грушина Т.С. Визуализация когнитивной карты предметной области в интеллектуальной обучающей системе / Мобильные системы обработки медиаконтента: сборник материалов ; Моск. гос. ун-т печати имени Ивана Федорова. - М. : МГУП имени Ивана Федорова, 2015.
5. Scott Murray. Interactive Data Visualization for the Web -USA: O'Reilly Media, 2013. - 272c.
6. Официальная документация по библиотеке D3 [Электронный ресурс]. URL: https://github.com/mbostock/d3/wiki/API-Reference (Дата обращения: 19.04.2015).
7. D3. Краткое руководство на русском языке (перевод Иванов Сергей) [Электронный ресурс]. URL: http://serganbus.github.io/ d3tutorials/setup.html (Дата обращения: 19.04.2015).
129
