вторник, 31 июля 2018 г.

Универсальный конструктор 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” (не забудьте указать в открывшемся окошке размеры в пикселях, чтобы видеоролик вписался в блог).

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



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

Комментариев нет:

Отправить комментарий

Этот пост ждёт ваших комментариев.
Не знаете, как оставить комментарий?
Тогда эта инструкция для вас!

- Нажмите на стрелку рядом с окошком "Подпись комментария".
- Выберите "Имя/URL".
- Напишите своё имя, строчку URL можно оставить пустой.
- Нажмите "Продолжить" и комментируйте.

Заранее спасибо!

Related Posts Plugin for WordPress, Blogger...