Интерактивное видео
И вот, когда мы попрактиковались в составлении викторин, созданиилент времени и интерактивных плакатов, настала пора смастерить (та-дам!) нечто грандиозное. Так как насчет интерактивного видео в сервисе H5P?
Не секрет, что главная проблема при просмотре учебных (и не только) видеороликов — это пассивность зрителей. А очень хочется прикрепить к видео интересные задания и викторины, организовать опрос или обсуждение, снабдить видеоролик дополнительной информацией или ссылками на веб-ресурсы. То есть сделать видео интерактивным.
Таким видеосюжетам найдется применение и в школе (учебные видеоролики с заданиями), и в библиотеке (видеовикторины). Давайте уже попробуем, что это за штука такая...
Для примера Полярная Сова смастерила вот такое видео про витаминки. Здесь есть меню (нажимаем на "флажок") и несколько разных тестовых заданий (отмечены на временной шкале точками).
https://h5p.org/h5p/embed/45270
А теперь подробнее, как смастерить такое видео.
Регистрация + загрузка + настройки
Если вы впервые заглянули на сайт сервиса, нужно зарегистрироваться (подробнее о регистрации -здесь).
В личном кабинете нажимаем “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” (не забудьте указать в открывшемся окошке размеры в пикселях, чтобы видеоролик вписался в блог).
А это парочка примеров интерактивного видеотворчества из Совиного мастер-класса "Интерактивное видео своими руками":
Даль Владимир Иванович (автор - В.А. Сергеева)
Поэма Пушкина "Медный всадник" (автор - М.Г. Карновская)