Не секрет, что главная проблема при просмотре учебных (и не только) видеороликов — это пассивность зрителей.
А очень хочется прикрепить к видео интересные задания и викторины, организовать опрос или обсуждение, снабдить видеоролик дополнительной информацией или ссылками на веб-ресурсы. То есть сделать видео интерактивным.
Таким видеосюжетам найдется применение и в школе (учебные видеоролики с заданиями), и в библиотеке (видеовикторины). Давайте уже попробуем, что это за штука такая…
Для примера я смастерила вот такое видео про Мурманскую область.
Регистрация
Для начала давайте зарегистрируемся. Заходим на стартовую страницу сервиса и нажимаем «Создать пользователя».
Заполняем предложенную форму: имя пользователя, адрес электронной почты, пароль, капча… В заключение нажимаем кнопку «Регистрация».
На указанный адрес электронной почты придёт письмо с одноразовой ссылкой для входа на сайт. Переходим по ней.
Осталось нажать «Войти», чтобы перейти к созданию собственной библиотеки на сайте.
Нажимаем на кнопку «Создать библиотеку».
В открывшейся библиотеке нажимаем на кнопку «Добавить», а потом выбираем опцию «Интерактивный контент» и переходим к созданию видео.
Загрузка и настройки
Для работы нам нужен шаблон «Интерактивное видео» (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>
Кстати, из этого кода можно извлечь ссылку для красивого полноэкранного просмотра. Эту ссылку я выделила красным.
Чтобы вновь вернуться к редактированию проекта, нажимаем на вкладку «Редактировать» вверху.