Универсальный конструктор H5P. Часть 6. Интерактивное видео

Эта мастерилка устарела. Новую статью можно прочитать здесь.

***

И вот, когда мы попрактиковались в составлении викторин, создании лент времени и интерактивных плакатов, настала пора смастерить (та-дам!) нечто грандиозное. Так как насчет интерактивного видео в сервисе H5P?

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

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

Для примера Полярная Сова смастерила вот такое видео про витаминки. Здесь есть меню (нажимаем на "флажок") и несколько разных тестовых заданий (отмечены на временной шкале точками).



А теперь подробнее, как смастерить такое видео.

Регистрация + загрузка + настройки

Если вы впервые заглянули на сайт сервиса, нужно зарегистрироваться (подробнее о регистрации - здесь).

В личном кабинете нажимаем “Create New Content”, придумываем название для будущего видеоролика (Title) и выбираем из выпадающего списка подходящий шаблон. Называется он "Interactive Video".

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

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

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

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

Ещё один полезный раздел -  “Behavioural settings”. Здесь устанавливаем настройки показа видео: автовоспроизведение и воспроизведение "по кругу", показ кнопок "Показать решение" и "Попробовать ещё раз" (“Enabled” - показывать, “Disabled” - не показывать), отключение звука, показ меню и т.д.

В разделе "Text overrides and translations" корректируем надписи, которые будут появляться на экране во время просмотра видео. Вот некоторые варианты перевода:

• “Text displayed before number of statements solved in the summary task” - текст, который будет появляться по итогу выполненных заданий, например, “Выполнение заданий” или "Результат";
• “Text displayed before number of wrong statements selected in the summary task” - текст, который будет сообщать в итоге о неправильно выполненных заданиях, например: “Количество неверных ответов”;
• “Summary feedback header” - заключительная фраза, например: “Ваш результат”;
• “You got :num out of :total points” можно заменить фразой “Вы получили :num из :total баллов”.

На самом деле надписей для перевода здесь огромное количество: создатели сервиса предусмотрели практически любой вариант развития событий. Можно перевести на русский сразу всё, а можно выбрать только самое нужное (отмечено красными звёздочками). Чтобы не растеряться, предлагаю воспользоваться подсказками (картинки ниже можно листать стрелочкой).

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

Делаем глубокий вдох - самое скучное позади. Начинается творчество. Что же можно натворить, собственно?

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

Открывается новая страница. Переходим во вкладку “Edit” и далее - “Add interactions”. В центре - видео для редактирования. Вверху - панель инструментов для добавления разных интерактивных элементов.

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

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 секунд), при необходимости устанавливаем опцию “Остановить видео на время показа". Нажимаем “Done”.

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

А это уже добавление текста.

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

Так же легко можно добавить таблицу.

Заполняем колонки - и нажимаем "Done".

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

Ну и, наконец, добавляем картинку...

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

Но это ещё не всё! В разделе “Go to on click” можно прикрепить к изображению ссылку на другую веб-страницу (из выпадающего списка “Type” выбираем “Another Page (URL)” и указываем ссылку) или сделать отсылку к определенному моменту видео (из выпадающего списка “Type” выбираем “Time Code” и указываем временную отсечку видео в формате “минуты: секунды” в графе “Go To”).  “Кликабельность” изображения можно показать зрителю, для этого ставим “галочку” напротив “Visualize”. Нажимаем “Done”.

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

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

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

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

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

В графу “Introduction text” вписываем задание, например: “Выберите из предложенных утверждений верное”.  В графы “Statement” вносим утверждения, первое из них - верное. В разделе “Tip” можно добавить подсказку отвечающему.

В разделе "Overall Feedback" можно настроить обратную связь. Нажимаем "Add Range" и добавляем оценки в зависимости от количества правильных ответов. Например, если правильных ответов всего 20%, выбираем оценку "неплохо", если от 20 до 80% - "хороший результат", от 80 до 100% - "отлично". Кстати, сервис может распределить оценки автоматически: достаточно нажать "Distribute Evenly".

К одному моменту видео можно добавить несколько заданий-утверждений. Чтобы добавить новый набор утверждений, нажимаем большую синюю кнопку “Add statements”.


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

К одному моменту видео можно прикрепить сразу несколько вопросов. Первый вариант ответа верный, остальные - неверные. Чтобы добавить ещё вариант ответа, нажимаем “Add answer”.

В разделе "Overall Feedback" настраиваем обратную связь. Нажимаем "Add Range" и добавляем оценки в зависимости от количества правильных ответов. Например, если правильных ответов всего 20%, выбираем оценку "неплохо", если от 20 до 80% - "хороший результат", от 80 до 100% - "отлично". Кстати, сервис может распределить оценки автоматически: достаточно нажать "Distribute Evenly".

В разделе “Behavioural settings” можно установить время паузы в случае верных и неверных ответов, включить звуковые эффекты, кнопку повтора вопроса и кнопку “Показать решение”.

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

К одному моменту видео можно прикрепить сразу несколько вопросов: вписываем в нужные окошки вопрос и варианты ответов. Правильные ответы помечаем галочкой. В разделе “Tips and feedback” можно добавить подсказки и обратную связь к каждому варианту ответа, а в разделе "Media" - прикрепить к вопросу видео или картинку.

В разделе “Behavioural settings” доступно несколько дополнительных настроек:

• включить кнопки “Показать решение” и “Попробовать ещё раз”;
• выбрать тип кнопки для ответа из выпадающего списка (автоматические, флажки, радиокнопки);
• давать один балл только за выполнение всего задания целиком;
• перемешивание ответов;
• требование решения перед показом ответа;
• отмена масштабирования изображения;
• показ диалога подтверждения на проверку решения и показ правильного ответа.

И еще немножко настроек:

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

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

И настройки к заданию:

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

Добавляем инструкцию и текст с пропущенным словом. Пропущенное слово выделяется в тексте “звездочками” с двух сторон. Можно добавить неправильный вариант ответа: в этом случае варианты нужно разделить косой чертой (/). Если необходимо добавить подсказку, ее добавляют после вариантов ответа и ставят перед ней двоеточие. Пример текста с пропуском: Сервис работает в *браузере / мобильном приложении : то, чем вы пользуетесь каждый день*.

К одному моменту видео можно привязать несколько текстов с пропусками. Чтобы добавить новый текст, нажимаем “Add text block”.

А ещё к вопросу можно добавить изображение (Image) или видео (Video), выбрав их из выпадающего списка в разделе “Media”.

В разделе “Behavioural settings” доступно несколько дополнительных настроек:
- включить кнопки “Показать решение” и “Попробовать ещё раз”;
- автоматическая проверка ответа;
- убеждаться, что слово написано точно так же, как и в ответе;
- требовать заполнить все поля перед показом ответа;
- показывать поля для ввода данных отдельными строками;
- отмена масштабирования изображения;
- показ диалога подтверждения на проверку решения и показ правильного ответа.

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

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

В разделе "Task" нажимаем на значок с изображением точки (Insert Drop Zone) и перетягиваем его на нашу картинку. Появляется рамочка, обозначающая границы "территории вброса". Границы можно растянуть на всё изображение или только на его часть.

Добавляем варианты ответа на задание. Выбираем значок "Text" и переносим его на картинку, вписываем нужный вариант ответа, меняем границы, если надо. Если вариант ответа - это картинка, выбираем значок "Image" (он находится рядом, справа) и повторяем манипуляции (изображение загружается с ПК).

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

Добавляем обратную связь (если нужно).

И ещё немножко настроек.

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

Добавляем инструкцию к заданию и даем список слов для выделения правильных. Правильные слова в списке выделяются звездочками с двух сторон, например: *правильный ответ*.

В разделе "Overall Feedback" можно настроить обратную связь (как в случае с заданием "Drag and Drop"). А в разделе “Behavioural settings” - включить кнопки “Правильный ответ” и “Попробовать ещё раз”.

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

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

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

А это нужные настройки.



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

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

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

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

“Горячая точка” (Hot Spot) -  это область видео, содержащая ссылку на какой-либо веб-ресурс. К “горячей точке” в конструкторе прикрепляем ссылку: на определенный фрагмент видео (Timecode) или на определенный веб-ресурс (Another page (URL)). В первом случае указываем временную отсечку в формате “М:СС”, где М - минуты, С - секунды. Во втором случае вставляем в открывшееся окно ссылку. Также можно выбрать форму (Rectangular - прямоугольная; Circular - круглая) и цвет “горячей точки”.

Кстати, к “горячей точке” можно добавить курсор-указатель и мигающий эффект.

Закладки, меню, анкеты

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

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

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

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

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

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

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

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

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

Вполне можно обойтись и без него. Но если вдруг захочется использовать, то искать его надо во вкладке “Summary Task”. Это задание-утверждение. Записываем инструкцию для отвечающих, например: “Выбери правильное утверждение”. Далее заполняем графы с верным и неверным утверждением (первое утверждение - верное, следующие - неверные). Для добавления вариантов нажимаем “Add statement”. В разделе “Tip” можно добавить подсказку отвечающему. Также устанавливаем время для показа итогового задания (по умолчанию - 3 секунды до конца видео).

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

Сохраняем и публикуем

Как только работа над видео будет закончена, нажимаем “Save”. Ссылку на готовый видеоролик можно взять вверху из строки браузера в режиме просмотра (View). Для того, чтобы получить код для встраивания на страницу сайта или блога, нажимаем внизу  “Embed” (не забудьте указать в открывшемся окошке размеры в пикселях, чтобы видеоролик вписался в блог).

А это парочка примеров интерактивного видеотворчества из Совиного мастер-класса "Интерактивное видео своими руками":

• Даль Владимир Иванович (автор - В.А. Сергеева)
• Поэма Пушкина "Медный всадник" (автор - М.Г. Карновская)

Удачных вам видеоэкспериментов!
Продолжение следует...

Что ещё почитать по теме?
Универсальный конструктор H5P. Часть 1. Викторины
Универсальный конструктор H5P. Часть 2. Интерактивный плакат
Универсальный конструктор H5P. Часть 3. "Весёлые картинки"
Универсальный конструктор H5P. Часть 4. Лента времени
Универсальный конструктор H5P. Часть 5. Флеш-карточки
Универсальный конструктор H5P. Часть 7. Презентация
Универсальный конструктор H5P. Часть 8. Полезные мелочи