H5P: как создавать задания в сервисе?

Мы уже рассказывали о полезном сервисе H5P.org и о том, насколько интересным может стать ваш обучающий курс — здесь.

Но перейдем от теории к практике: в этой статье мы расскажем и покажем, как привнести интерактива в ваш курс за несколько минут.

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

С Сервис H5P имеет очень дружелюбный и интуитивно понятный интерфейс. Вам не составит труда освоить его — на это уйдет всего 2−3 минуты.

Сначала необходимо создать аккаунт на сайте h5p.org.

1. Открываем страницу https://h5p.org/ и нажимаем на кнопку «Create free account».

Поздравляем! Теперь у Вас есть аккаунт на H5P!

2. Переходим в раздел «My account» и кликаем на ссылку «Create New Content».

3. Откроется страница с первичными настройками создаваемого контента:

И еще один пример:

Выбираем в списке "Select content type" пункт "Interactive Video":

Перед нами сразу откроется пошаговый этап создания интерактивного видео:

Весь этап создания интерактивного видео разделен на 3 части:

1. Загрузка видео (step 1);
2. Добавление взаимодействий (step 2);
3. Итоги (step 3).

По умолчанию, первой отображается вкладка «Загрузить видео», с нее и начнем.

Шаг 1: Добавить видео

В этом шаге Вы должны выбрать, какое видео будете использовать:

• загруженное с компьютера (не более 16 МБ)
• видео с YouTube

Если собираетесь загружать собственный видеофайл, то используйте формат .mp4, он будет воспроизводиться во всех современных браузерах.

Нажимаем на кнопку «+», чтобы добавить видеофайл:

В этом шаге Вы должны выбрать, какое видео будете использовать:

• загруженное с компьютера (не более 16 МБ)
• видео с YouTube

Если собираетесь загружать собственный видеофайл, то используйте формат .mp4, он будет воспроизводиться во всех современных браузерах.

Нажимаем на кнопку «+», чтобы добавить видеофайл:

Выбираем способ добавления видео:

Настраиваем дополнительные параметры на этом этапе, если необходимо:

1. Настройка стартового экрана (не поддерживается для видео с YouTube).

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

2. Настройка субтитров (не поддерживается для видео с YouTube).

Загрузите собственный файл с субтитрами для видео.

3. Дополнительные настройки.

Задайте стартовое время видео, активируйте автоматическое начало воспроизведения при его открытии, зациклите воспроизведение, настройте появление служебных кнопок: для просмотра правильного решения и старта новой попытки, после выполнения каких-либо тестов пользователем, отключите звук в видео и скройте навигационное меню плеера — в общем, почувствуйте себя главным.

4. Локализация.

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

Например, для нашего учебного интерактивного видео, используем настройку старта времени видео, зададим ее, чтобы пользователь сразу перешёл к нужной части видео, поясняющий процесс создания теста в LMS Teachbase. Для этого, кликаем на строку с настройками «Behavioural setting», в поле «Start video at» задаем время начала нужного эпизода: 0:09. Зацикливать это учебное видео и применять автозапуск нам нет необходимости, поэтому в параметрах «Auto-play video» и «Loop the video» оставляем настройку не активированной. Изменение стартового экрана и субтитров не будут сейчас актуальны, так как мы используем видео с YouTube, в таком случае, пропускаем настройки в поле «Start screen options» и «Text tracks».

Отдельное внимание уделим настройкам в поле «Text overrides and translations», так как, по умолчанию, все названия системных кнопок и надписей в H5P пишутся на английском языке. Переведем их на русский, чтобы пользователям было привычнее:

На данном этапе это все настройки, которые нам нужны, перейдем к шагу № 2 и добавим немного интерактива в наше обучающее видео.

Нажимаем на вкладку «Add interaction» в верхней части редактора. Вы увидите стартовую обложку видео, которое было добавлено на предыдущем шаге.

Рассмотрим панель инструментов, которая находится над видео:

С помощью этой панели вы можете добавить следующие взаимодействия с пользователем:

1. Текст
2. Таблицы
3. Ссылки
4. Изображения
5. Список перечислений
6. Тестовые вопросы: единичный выбор и множественный выбор
7. Заполнение пропусков в тексте, подстановка текстовых вариантов в пропуски
8. Кнопки для перемещения к указанной части видео
9. Опрос

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

Добавим текст

Добавим короткий текст на видео, с пояснением, в чем суть этого видео. Пользователь увидит его в самом начале видео.

Кликаем на тип взаимодействия «Текст», нажав кнопку «Текст» на панели инструментов, появится окно с настройками:

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

На предыдущем этапе мы выставили время старта самого видео с 0:09. Поэтому, имеет смысл показывать надпись с описанием видео на временном промежутке от 0:09 до 0:10. Заносим эти данные в настройку «Display time», а также, активируем параметр «Pause video», чтобы у пользователя было время спокойно ознакомиться с текстом и принять решение, просматривать дальше видео или нет.

Следующим шагом, предлагается выбрать, в каком виде будет отображаться текст.

• По нажатию на кнопку:

Мы используем второй вариант, отображение текста сразу в отдельном окошке поверх видео: в настройке «Display As» выбираем пункт «Poster».

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

Теперь, для того чтобы продолжение просмотра сработало по клику на окно с текстом, настроим параметры во вкладке «Go to on click». Данная настройка находится прямо под окном для редактирования текста.

Здесь стоит пояснить что настройка «Type», кроме возможности перейти к какой-либо части видео («Timecode») позволяет добавить переход по любой внешней ссылке. Например, к инструкции на сайте и т. п.

Выставляем «Type» как «Timecode», тогда, при клике, пользователь переместиться на указанный тайминг в видео. Тайминг нужной части видео задается в «Go To» — определяем его как 0:11.

Флаг на «Visualize» добавит к окошку с текстом рамку и специальную иконку, которая служит обозначаем того, что этот объект кликабельный:

В качестве дополнения, во вкладке «Visuals» Вы можете изменить фон окошка и отображение тени под ним:

Все готово, осталось сохранить — кликаем на кнопку «Done» в верхнем правом углу. Затем, выбираем место на видео, где появится текстовое сообщение:

Простым перетаскиваем размещаем наш текст на нужное место.

Обратите внимание на полосу тайминга видео (временная шкала). В соответствующем отрезке времени появилась синяя точка, которая означает, что здесь доступно взаимодействие:

Если необходимо быстро вернуться в редактирование созданного объекта — дважды кликните на него левой кнопкой мыши.

Добавим изображение

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

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

Далее, всё по тому же принципу, как и текст из предыдущего пункта.

Поясним назначение тех параметров, которые отсутствовали, когда мы добавляли текст на видео в предыдущем пункте.

• Флаг «Turn into button on small screens». На мобильных устройствах, при определенном размере экрана, изображение будет заменено кнопкой, по клику на которую пользователь сможет его посмотреть.
• «Image». Нажав на кнопку «Add» Вам будет предложено выбрать одно изображение для отображения на видео.
• «Alternative text». Этот текст будет отображаться у пользователя, если изображение по каким-то причинам не загрузится.
• «Hover text». Этот текст будет отображаться у пользователя, если он наведет мышку на изображение.

Настраиваем.

Для разнообразия, выберем в «Display as» тип «Button» — тогда пользователь сможет сам выбрать просматривать картинку или нет, кликнув на специальную кнопку. Кроме того, это поможет не «захламлять» лишний раз экран при просмотре.

Название кнопки зададим в параметре «Label».

Далее, как и всегда, жмем «Done» и располагаем кнопку в удобном месте:

Добавляем кнопку для перехода к указанной части видео

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

Здесь мы как раз и используем специальную кнопку для перехода к нужному таймингу в видео.

Выбираем этот тип взаимодействия, нажав кнопку «Navigation Hotspot» на панели инструментов.

Приступим к уже привычной настройке.

В настройках поля «Destination» выбираем тип («Type») как «Timecode» и ниже указываем ту часть видео, куда должна переносить кнопка.

Внешний вид кнопки настроим далее, через кнопку «Visual»:

• "Shape". Позволяет выбрать форму кнопки из трех вариантов: квадратная, квадратная с закругленными углами и круглая\овальная.
• «Use pointer cursor». При наведении на кнопку превратит обычный курсов в курсор, показывающий, что на этот элемент можно кликнуть.
• «Add blinking effect». Заставит кнопку периодически моргать.

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

Нажимаем «Done» и располагаем кнопку в подходящем месте:

И так, мы добавили уже 3 типа взаимодействия в этом видео: текст, картинка и кнопка для перехода к нужной части видео.

Рассмотрим чуть более интересный вариант взаимодействия с пользователем и добавим тест с единичным выбором ответа.

Добавляем тест с единичным выбором ответа

Наш небольшой тест, по усвоению информации из обучающего видео, будет располагаться сразу после того, как показаны все типы вопросов, доступные к использованию на платформе Teachbase.

Выбираем этот тип взаимодействия, нажав кнопку «Single Choice Set» на панели инструментов.

Настройка ничуть не сложнее, как в предыдущих пунктах.

Стандартно:

Используем «Display as» как «Poster», чтобы тест появился сразу же, без лишних манипуляций с кнопкой.

Переходим, непосредственно, к процессу добавления вопросов и ответов:

• «Question» — вопрос.
• «Alternative» — вариант ответа.

Обратите внимание: первый вариант ответа — должен являться верным ответом.

Вводим текст вопроса:

Далее, варианты ответа на вопросы:

Новый вопрос можно добавить с помощью кнопки «Add Question».

После добавления вопросов и ответов, переходим к настройке, которая будет определять, пройден тест или нет и выдавать рекомендации в зависимости от этого.

Открываем список настроек «Overall feedback».

Задаем значение верных ответов в %, а в соседнее поле вводим текст сообщения, которое будет появляться при достижении указанных значений.

Далее, дополнительные настройки «Behavioural settings» и «Adaptivity», позволяют улучшить обратную связь от теста:

• Флаг «Auto continue». Автоматически переходить к следующему вопросу, как только выбран вариант ответа.
• Флаг «Enable sound effects». Включить звуковые эффекты.
• Флаг «Enable retry button». Отобразить кнопку «Повторить» для перезапуска теста пользователем.
• Флаг «Enable show solution button». Отобразить кнопку «Показать ответ».

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

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

Нажимаем «Done» и располагаем тест в нужном месте:

На этом создание теста завершено.

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

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

В первом тесте создадим следующий набор утверждений:

1. В Teachbase можно создавать тесты с различными типами вопросов.
2. В Teachbase нельзя создавать тесты.

Указываем их в полях «Statement».

Поле «Tip» позволяет добавить подсказку-намек к правильному ответу, при необходимости.

Первый пункт считается верным ответом.

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

Пример того, как это выглядит на видео:

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

Для этого вернемся на шаг 2 «Добавление взаимодействий», нажав на эту вкладку в верхней части редактора.

Перемещаем ползунок в нужное место на полосе тайминга и нажимаем на кнопку «Закладка» для ввода ее названия.

«Закладка» отображается рядом с кнопкой для воспроизведения видео:

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

Теперь, когда все настроено, нажимаем на кнопку «Save», чтобы сохранить интерактивное видео в H5P:

Быстро и легко, согласитесь? Вставить это видео в свой обучающий курс на Teachbase еще проще.

Перейдите в свой аккаунт на сайте h5p.org

Нажмите на название нужного материале в списке «Recent Content», который хотите использовать в Teachbase.