Не секрет, что главная проблема при просмотре учебных (и не только) видеороликов — это пассивность зрителей.

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

Таким видеосюжетам найдется применение и в школе (учебные видеоролики с заданиями), и в библиотеке (видеовикторины). Давайте уже попробуем, что это за штука такая…

Для примера я смастерила вот такое видео про Мурманскую область

Регистрация

Для начала давайте зарегистрируемся. Заходим на стартовую страницу сервиса и нажимаем «Создать пользователя».

Заполняем предложенную форму: имя пользователя, адрес электронной почты, пароль, капча… В заключение нажимаем кнопку «Регистрация».

На указанный адрес электронной почты придёт письмо с одноразовой ссылкой для входа на сайт. Переходим по ней.

Осталось нажать «Войти», чтобы перейти к созданию собственной библиотеки на сайте.

Нажимаем на кнопку «Создать библиотеку». 

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

Загрузка и настройки

Для работы нам нужен шаблон «Интерактивное видео» (Interactive Video).

Для загрузки видео нажимаем на значок “+”. Добавить видео можно, загрузив его с ПК (размер — не более 16 мегабайт) или по ссылке с YouTube. 

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

В подразделе “Интерактивное видео” можно установить постер, который будет показать в начале видео. Опция не действует для видео с YouTube. К видео можно добавить краткое описание (необязательно) и опцию не показывать название на слайде с изображением.

А в подразделе «Текстовые дорожки» можно добавить субтитры, но тоже только для видео не с YouTube.

Ещё один полезный раздел — “Настройки поведения”. Здесь устанавливаем настройки показа видео: автовоспроизведение и воспроизведение «по кругу», показ кнопок «Показать решение» и «Попробовать ещё раз», отключение звука, показ меню и т.д.

Такие разные интерактивности

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

Переходим во вкладку “Добавить взаимодействия». В центре — видео для редактирования. Вверху — панель инструментов для добавления разных интерактивных элементов.

Смотрим и удивляемся. Итак, слева направо:

1. Надпись (Label).
2. Текст (Text).
3. Таблица (Table).
4. Ссылка (Link).
5. Изображение (Image).
6. Викторина на основе утверждений (Statements).
7. Вопрос с одним правильным ответом (Single Choice Set).
8. Вопрос с несколькими правильными ответами (Multiple Choice).
9. Вопрос «Правда или ложь?» (True/False Question).
10. Задание «Заполни пропуски» (Fill in the Blanks).
11. Задание «Drag and Drop».
12. Задание «Отметь слова» (Mark the Words).
13. Задание «Перенеси слова» (Drag Text).
14. Вопрос-ветвление (Crossroads).
15. «Горячая точка» (Navigation Hotspot).
16. Анкета (Questionnaire).
17. Вопрос с текстовым ответом (Free Text Question).

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

Открывается окошко редактора, в которое вписываем нужную информацию, устанавливаем время появления и исчезновения интерактивности на экране (по умолчанию — 10 секунд), при необходимости устанавливаем опцию “Остановить видео». Нажимаем “Готово”.

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

А это уже добавление текста. Можно выбрать вид показа: как текстовое окошко (Постер) или как кнопку.

Так же легко можно добавить таблицу. Заполняем колонки — и нажимаем «Готово».

Для добавления ссылки переносим на экран значок в виде цепочки (Link). Дополнительно можно указать цвет ссылки и добавить тень.

Ну и, наконец, добавляем картинку… Здесь настроек чуть больше. Можно указать альтернативный текст (текст, который будет появляться на экране, если изображение не удастся загрузить) и текст, который появится при наведении курсора на изображение (необязательно). 

В разделе «Оформление» для картинки можно подобрать фон и тень.

Но это ещё не всё! В разделе “Перейти по щелчку” можно прикрепить к изображению ссылку на другую веб-страницу (из выпадающего списка “Тип” выбираем “Другая страница (URL)” и указываем ссылку) или сделать отсылку к определенному моменту видео (из выпадающего списка “Тип” выбираем “Временной код” и указываем временную отсечку видео в формате “минуты: секунды” в графе “Перейти к”). “Кликабельность” изображения можно показать зрителю, для этого ставим “галочку” напротив “Внешний вид”. Нажимаем “Готово”.

Викторины, задания, упражнения…

Практически для всех заданий, вопросов и упражнений сервис предусмотрел одинаковую настройку — “Адаптивность”. В этом разделе указываем порядок действий при правильном и неправильном ответах (настройка необязательная, но всё же…):

  • перейти к определенному моменту видео (время указываем в формате “минуты:секунды”);
  • разрешить пропустить вопрос и продолжить;
  • показать текстовое сообщение.

А теперь подробнее о вопросах и заданиях…

Викторина на основе утверждений (Statements)

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

В графы “Определение утверждений” вносим утверждения, первое из них — верное. Чтобы добавить новое утверждение, нажимаем “Добавить утверждение”. Если необходимо, в разделе “Подсказка” добавляем подсказку.

Чтобы добавить новый набор утверждений, нажимаем на кнопку внизу “Добавить утверждения”.

В разделе «Общая обратная связь» можно настроить обратную связь. Нажимаем «Добавить диапазон» и добавляем оценки в зависимости от количества правильных ответов.

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Distribute Evenly».

Вопрос с одним правильным ответом (Single Choice Set)

Вписываем в соответствующие графы вопрос и варианты ответов. Первый из вариантов — правильный. Чтобы добавить новый вариант, нажимаем “Добавить ответ”. А новый вопрос добавляет кнопка “Добавить вопрос”. 

В разделе «Общий отзыв» можно настроить обратную связь. Нажимаем «Добавить диапазон» и добавляем оценки в зависимости от количества правильных ответов.

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Distribute Evenly».

В разделе «Настройки поведения» тоже есть несколько дополнительных опций для показа вопроса.

Вопрос с несколькими верными вариантами ответа (Multiple Choice)

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

Новый вариант ответа добавляем, нажав на кнопку «Добавить Option».

В разделе «Meдиа» к вопросу можно прикрепить картинку или видео, загрузив их с ПК. По желанию в разделе «Подсказки и обратная связь» даём подсказки отвечающему.

В разделе «Полная обратная связь» можно настроить обратную связь. Нажимаем «Добавить диапазон» и добавляем оценки в зависимости от количества правильных ответов.

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Distribute Evenly».

В разделе «Настройки поведения» тоже есть несколько дополнительных опций для показа вопроса.

Вопрос «Правда или ложь?»(True/False Question)

Всё просто: в графу “Вопрос” вносим какое-нибудь утверждение и отмечаем, правда это или нет. В разделе “Медиа” можно прикрепить изображение (Image) или видео (Video) к заданию.

Дополнительные настройки показа ищем в разделе «Настройки поведения».

Задание с заполнением пропусков (Fill in the Blanks)

В этом задании надо заполнить пропуски в предложенном тексте, вставляя подходящие по смыслу слова. В разделе “Mедиа” можно прикрепить изображение (Image) или видео (Video).

В графу “Описание задачи” вписываем задание. В разделе “Текстовые блоки” помещаем текст с пропусками, которые нужно заполнить. «Секретное» слово на месте пропуска отмечаем с двух сторон “звездочками”. Например: Осло — столица *Норвегии*.

В одну графу можно добавить только одно предложение с пропуском. Чтобы добавить новое предложение, нажимаем “Добавить текстовый блок”.

Дополнительные опции — в разделах «Общий отзыв» и «Настройки поведения».

Задание «Drag and Drop» (дословно: «Тяни и бросай»)

Для начала придумываем задание. Например: «Как называется это животное? Перенесите «мышью» на изображение верный ответ».

В разделе «Настройки» загружаем картинку, к которой нужно будет подобрать пару: текст, слово, изображение. На языке сервиса картинка называется «территорией вброса».

В разделе «Задача» нажимаем на значок с изображением точки (Add Drop Zone) и перетягиваем его на нашу картинку.

Появляется рамочка, обозначающая границы «территории вброса». Границы можно растянуть на всё изображение или только на его часть.

Добавляем варианты ответа на задание. Выбираем значок «Text» и переносим его на картинку, вписываем нужный вариант ответа, меняем границы, если надо.

Если вариант ответа — это картинка, выбираем значок «Image» (он находится рядом, справа) и повторяем манипуляции (изображение загружается с ПК).

Для дальнейшего редактирования текстов и картинок нажимаем во всплывающем меню на значок «карандаш», для удаления — на значок «корзинка».

Возвращаемся к основной картинке. Нажимаем на значок «карандашик» над ней и попадаем в редактор. Здесь «привязываем» картинку к нужному варианту ответа, отметив его галочкой, и, если надо, устанавливаем прозрачность изображения (чтобы его выделить). Не забываем нажать «Done».

А это несколько дополнительных настроек.

Задание с выделением слов (Mark the Words)

В этом задании ищем и выделяем в тексте нужные слова.

В графу “Описание задачи” вносим задание. В графу “Область ввода” вписываем текст со словами, которые нужно найти и отметить. Слова, которые будут правильными ответами на вопрос, отмечаем с двух сторон значком “звездочка”, например: *ответ*.

И ещё несколько дополнительных настроек.

Задание с переносом слов (Drag Text)

Очень похоже на задание «Fill in Blanks», только слова для заполнения пропусков в тексте нужно брать из предложенного списка.

В разделе “Описание задачи” — задание к упражнению. В разделе “Текст” помещаем текст с пропусками, которые нужно заполнить. Нужное слово на месте пропуска отмечаем с двух сторон “звездочками”. Например: Осло — столица *Норвегии*.

Так выглядят настройки.

Вопрос-ветвление (Crossroads)

Очень интересный вопрос. Чтобы его добавить, проигрываем видео до необходимого момента, ставим на “паузу” и переносим на экран соответствующий значок. Устанавливаем время появления и исчезания вопроса на экране (по умолчанию — 10 секунд), при необходимости устанавливаем опцию “Остановить видео”.

Задается вопрос и дается несколько вариантов ответа на него. Каждый ответ — это ссылка на определенное время демонстрации видео, которое вписывается вручную в формате “М:СС”, где М — минуты, С — секунды.  Следующий вариант добавляется нажатием кнопки «Добавить выбор».

Закончив настройки, нажимаем “Готово”.

«Горячие точки», закладки и меню

“Горячая точка” (Navigation Hotspot) — это область видео, содержащая ссылку на какой-либо веб-ресурс. К “горячей точке” в конструкторе прикрепляем ссылку: на определенный фрагмент видео (Таймкод) или на определенный веб-ресурс (Другая страница (URL)).

В первом случае указываем временную отсечку в формате “М:СС”, где М — минуты, С — секунды. Во втором случае вставляем в открывшееся окно ссылку. Также можно выбрать форму и цвет “горячей точки”.

Из последних нововведений сервиса — возможность добавить анкету к видео. Для этого нажимаем кнопку «Questionnaire».

В анкету можно добавить два вида вопросов: открытый (Open Ended Question) и вопрос с вариантами ответов (Simple Multi Choice).

В нужные окошки конструктора вписываем вопрос и варианты ответов на него (если они есть).

Чтобы добавить новый вопрос в анкету, нажимаем на кнопку «Добавить Element».

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

А как насчёт того, чтобы дать зрителю полную свободу творчества? Для этого есть кнопка «Free Text Question». С её помощью можно задать зрителям какой-нибудь проблемный вопрос для размышления.

Уф, с заданиями и вопросами покончили! Самое время создать меню видеозаписи для более удобного просмотра. И сначала сделаем несколько закладок. Проигрываем видео до необходимого момента, ставим на “паузу” и нажимаем на значок “флажок” внизу под видео слева. Далее нажимаем “Добавить закладку”.

В открывшееся поле вписываем название закладки.

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

Итоговое задание

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

Записываем инструкцию для отвечающих, например: “Выбери верное утверждение”. Далее заполняем графы с верным и неверным утверждением (первое утверждение — верное, следующие — неверные). Для добавления вариантов нажимаем “Добавить утверждение”.

В разделе “Подсказка” можно добавить подсказку отвечающему. Также устанавливаем время для показа итогового задания (по умолчанию — 3 секунды до конца видео).

К итоговому заданию можно прикрепить обратную связь.

Публикация

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

Копируем код из открывшегося окошечка.

Код будет выглядеть примерно вот так:

<iframe src=»https://udoba.org/h5p/embed/34911» width=»1014″ height=»632″ frameborder=»0″ allowfullscreen=»allowfullscreen» allow=»geolocation *; microphone *; camera *; midi *; encrypted-media *» title=»Мурманская область»></iframe><script src=»https://udoba.org/sites/all/modules/h5p/library/js/h5p-resizer.js» charset=»UTF-8″></script>

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

Чтобы вновь вернуться к редактированию проекта, нажимаем на вкладку «Редактировать» вверху.