LIFEL
рекомендует

Упражнение drag-n-drop в CourseLab без переменных

21.09.2019
Андрей Матюков
Пример создания drag-n-drop из различных объектов без кода в редакторе КурсЛаб
Если вам приходилось создавать упражнения с перетаскиванием в редакторе CourseLab, отличное от встроенного парного соответствия, то знаете, что на это уходило много ручной работы. Всё надо было предусмотреть, использовать переменные, вручную осуществлять проверки. И это без эффекта примагничивания перетаскиваемых объектов к области назначения.

В то же время, если вы пользуетесь iSpring Suite 9 или Articulate Storyline, знаете, что там из размещенных на слайде различных объектов можно сделать упражнение на перетаскивание, указав, что будет «drag», а что — «drop».
CourseLab, WebSoft, Алексей Корольков
Есть подобный объект и в CourseLab версии 3.1. Имеет он довольно длинное название «Многообъектное взаимодействие с распределением объектов по группам» и является прозрачным.

Чтобы его использовать, для начала подготовим объекты на слайде. В качестве наглядного упражнения я использовал распределение городов России, которые относятся к Европе или Азии. Одни надо перенести на поле «Запад», другие — на поле «Восток». Когда все города окажутся на этих частях, появится кнопка «Принять ответ».
CourseLab, WebSoft, Алексей Корольков
В данном случае я взял две автофигуры (Запад и Восток) в качестве «баз». К примеру, в Articulate они бы имели название «Drop Target», а в iSpring — «Область назначения».
Роль «перетаскиваемых объектов» (iSpring) или «drag items» (Articulate) сыграют здесь стандартные текстовые блоки CourseLab, где они называются «элементами» баз. Им надо не забыть поставить галочку — «можно перетаскивать мышкой».
CourseLab, WebSoft, Алексей Корольков
Ну и главный объект, который заставит взаимодействовать элементы с базами — это «Распределение». Находится он на полке библиотеки «Тестирование» .
CourseLab, WebSoft, Алексей Корольков
Как видно выше, выбираются две базы (ранее размещенные автофигуры) и в них указываются правильные элементы (текстовые блоки с названиями городов).

В контекстном меню выставляется расстояние между элементами и максимальное количество элементов, которое может разместиться на базе.
В основных настройках указывается тип привязки к базе (например, сверху вниз), вид завершения (текущее состояние), тип показа элементов (все сразу), количество попыток (1) и способ приема ответа (по нажатию на кнопку). Для последнего добавляем еще кнопку («Принять ответ»), роль которой сыграет текстовое поле, подобное перетаскиваемым «городам».
CourseLab, WebSoft, Алексей Корольков
Настроим и обратную связь, добавив и указав в настройках «Распределения» соответствующие объекты с положительной и отрицательной реакцией.
CourseLab, WebSoft, Алексей Корольков
Ну, вот и во всё, без строчки «действий» упражнение работает и проверяет правильность распределения перетаскиваемых объектов. Проверено в билде редактора от 08.06.2019.

Ниже представлена демонстрация положительного результата:
CourseLab, WebSoft, Алексей Корольков
А это отрицательный:
CourseLab, WebSoft, Алексей Корольков
Понравилась статья? Нажми на Лайфика!
статьи по теме