Кейсы и статьи
Кейсы и статьи
+7 (495) 660-38-43
+7 (495) 660-38-43
Услуги
Услуги
Решения
Решения
О нас
О нас
Функционал
Функционал
Тарифы
Тарифы
Список обновлений
Список обновлений
Мобильное приложение
Мобильное приложение
Обучайте мобильно в удобном приложении Teachbase
Платформа, где есть все
для эффективного обучения
Функционал платформы
Функционал платформы
Мастер-аккаунт
Мастер-аккаунт
Управляйте обучением сети из мастер-аккаунта
Для производства
Для производства
Для мотивации
Для мотивации
Для медицины
Для медицины
Для рекрутинга
Для рекрутинга
Карьерные треки
Карьерные треки
Администрирование платформы
Администрирование платформы
Спецпроекты
Спецпроекты
Обучаем разработке курсов
Обучаем разработке курсов
Библиотека курсов
Библиотека курсов
Разработка курсов
Разработка курсов
Статьи
Статьи
Кейсы
Кейсы
Вакансии
Вакансии
Партнерская программа
Партнерская программа
Мероприятия
Мероприятия

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

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

Но перейдем от теории к практике: в этой статье мы расскажем и покажем, как привнести интерактива в ваш курс за несколько минут.
Сразу ответим на вопрос – зачем вам это надо?
Для взаимодействия с учеником и его вовлеченности. Сервис H5P дает возможность быстро добавить в свой курс динамичные упражнения, игры, ленты времени и другие интересные фишки. Таким образом, ученик лучше усваивает полезную информацию и не теряет мотивацию в процессе обучения.
Как создать задание в H5P
С Сервис H5P имеет очень дружелюбный и интуитивно понятный интерфейс. Вам не составит труда освоить его – на это уйдет всего 2-3 минуты.

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

1. Открываем страницу https://h5p.org/ и нажимаем на кнопку "Create free account".
Главная страница H5P
Поздравляем! Теперь у Вас есть аккаунт на H5P!

2. Переходим в раздел "My account" и кликаем на ссылку "Create New Content".
Раздел My account в сервисе H5P
3. Откроется страница с первичными настройками создаваемого контента:
Первичные настройки создания контента в H5P
Доступные параметры для выбора:

  1. Название
  2. Выбор типа контента, который хотим создать: интерактивное видео, тест, эссе, диалоговые карточки и т.п.
  3. Теги. Предназначены для того, чтобы дальше Вам было проще ориентироваться в панели управления H5P.
  4. Опциональные настройки. Позволяют выбрать, какие из специальных системных кнопок следует отображать: «скачать», «встроить» и «авторское право» (для добавления официальной информации под объектом).
Далее мы рассмотрим пример создания интерактивного обучающего видео и встроим его в курс на платформе Teachbase. Создать другие типы контента в H5P также легко – экспериментируйте!

Ниже Вы можете увидеть уже готовый простой пример интерактивного видео, созданного с помощью H5P:

И еще один пример:
Теперь начинаем процесс создания интерактивного видео в H5P
Выбираем в списке "Select content type" пункт "Interactive Video":
Процесс создания интерактивного видео в H5P
Перед нами сразу откроется пошаговый этап создания интерактивного видео:
Пошаговый план создания интерактивного видео в H5P
Весь этап создания интерактивного видео разделен на 3 части:

  1. Загрузка видео (step 1);

  2. Добавление взаимодействий (step 2);

  3. Итоги (step 3).

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

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

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

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

  • видео с YouTube

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

Нажимаем на кнопку «+», чтобы добавить видеофайл:
Шаг 1: добавить видео
В этом шаге Вы должны выбрать, какое видео будете использовать:

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

  • видео с YouTube

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

Нажимаем на кнопку «+», чтобы добавить видеофайл:
Добавление видеофайла в H5P
Выбираем способ добавления видео:
Способ добавления видео в H5P
Настраиваем дополнительные параметры на этом этапе, если необходимо:
Добавление параметров при создании видео в H5P
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 пишутся на английском языке. Переведем их на русский, чтобы пользователям было привычнее:

Процесс создания интерактивного видео в H5P
На данном этапе это все настройки, которые нам нужны, перейдем к шагу №2 и добавим немного интерактива в наше обучающее видео.
Шаг 2: Добавить взаимодействия
Нажимаем на вкладку «Add interaction» в верхней части редактора. Вы увидите стартовую обложку видео, которое было добавлено на предыдущем шаге.
Добавление взаимодействия с видео в H5P
Рассмотрим панель инструментов, которая находится над видео:
Панель инструментов видео в H5P
С помощью этой панели вы можете добавить следующие взаимодействия с пользователем:

  1. Текст

  2. Таблицы

  3. Ссылки

  4. Изображения

  5. Список перечислений

  6. Тестовые вопросы: единичный выбор и множественный выбор

  7. Заполнение пропусков в тексте, подстановка текстовых вариантов в пропуски

  8. Кнопки для перемещения к указанной части видео

  9. Опрос

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

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

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

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

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

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

Процесс создания интерактивного видео в H5P
  • Сразу, в виде окошка с текстом:
Создание теста на курсе Teachbase в H5P
Мы используем второй вариант, отображение текста сразу в отдельном окошке поверх видео: в настройке "Display As" выбираем пункт "Poster".

Далее, переходим к непосредственно самому тексту - вводим в текстовое поле "Text" всё, что считаем нужным. Для красоты и удобства пользователей, добавим под текстом пояснение "Нажмите, что бы продолжить просмотр".
Добавление текста для видео в H5P
Теперь, для того чтобы продолжение просмотра сработало по клику на окно с текстом, настроим параметры во вкладке "Go to on click". Данная настройка находится прямо под окном для редактирования текста.
Добавление таймкода для видео в H5P
Здесь стоит пояснить что настройка "Type", кроме возможности перейти к какой-либо части видео ("Timecode") позволяет добавить переход по любой внешней ссылке. Например, к инструкции на сайте и т.п.

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

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

Кликабельный объект в заданиях Teachbase
В качестве дополнения, во вкладке "Visuals" Вы можете изменить фон окошка и отображение тени под ним:
Фон окошка и тени при создании курса в Teachbase
Всё готово, осталось сохранить - кликаем на кнопку "Done" в верхнем правом углу. Затем, выбираем место на видео, где появится текстовое сообщение:
Место на видео, где появится текстовое окошко в H5P
Простым перетаскиваем размещаем наш текст на нужное место.

Обратите внимание на полосу тайминга видео (временная шкала). В соответствующем отрезке времени появилась синяя точка, которая означает, что здесь доступно взаимодействие:
Взаимодействие в H5P
Если необходимо быстро вернуться в редактирование созданного объекта – дважды кликните на него левой кнопкой мыши.
Добавим изображение
Добавить изображение в H5P
Добавим изображение – оно будет появляться в тот момент, когда на видео показывается процесс настройки тестирования. С помощью картинки покажем, как выглядит тест со стороны участника обучения.

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

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

  • Флаг "Turn into button on small screens". На мобильных устройствах, при определенном размере экрана, изображение будет заменено кнопкой, по клику на которую пользователь сможет его посмотреть.

  • "Image". Нажав на кнопку "Add" Вам будет предложено выбрать одно изображение для отображения на видео.

  • "Alternative text". Этот текст будет отображаться у пользователя, если изображение по каким-то причинам не загрузится.

  • "Hover text". Этот текст будет отображаться у пользователя, если он наведет мышку на изображение.

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

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

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

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

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

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

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

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

  • "Shape". Позволяет выбрать форму кнопки из трех вариантов: квадратная, квадратная с закругленными углами и круглая\овальная.

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

Добавить изображение в H5P
Последнее, зададим название кнопке, что бы пользователь понимал, что произойдет, если на неё кликнуть:
Описание к кнопке в H5P
Нажимаем "Done" и располагаем кнопку в подходящем месте:
Расположение кнопки в удобном месте в H5P
И так, мы добавили уже 3 типа взаимодействия в этом видео: текст, картинка и кнопка для перехода к нужной части видео.

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

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

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

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

Стандартно:
Добавление теста с единичным вариантов ответа в H5P
Используем "Display as" как "Poster", чтобы тест появился сразу же, без лишних манипуляций с кнопкой.

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

  • "Question" - вопрос.

  • "Alternative" - вариант ответа.

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

Вводим текст вопроса:
Текст вопроса в H5P
Далее, варианты ответа на вопросы:
Варианты ответа на вопросы в H5P
Новый вопрос можно добавить с помощью кнопки "Add Question".

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

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

Задаем значение верных ответов в %, а в соседнее поле вводим текст сообщения, которое будет появляться при достижении указанных значений.
Значение верных ответов в процентах в H5P
Далее, дополнительные настройки "Behavioural settings" и "Adaptivity", позволяют улучшить обратную связь от теста:

  • Флаг "Auto continue". Автоматически переходить к следующему вопросу, как только выбран вариант ответа.

  • Флаг "Enable sound effects". Включить звуковые эффекты.

  • Флаг "Enable retry button". Отобразить кнопку "Повторить" для перезапуска теста пользователем.

  • Флаг "Enable show solution button". Отобразить кнопку "Показать ответ".

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

Таким образом, вы можете строить адаптивный сценарий прохождения видеокурса пользователем.
Адаптивный сценарий прохождения видеокурса пользователем в H5P
Нажимаем "Done" и располагаем тест в нужном месте:
Расположение теста в H5P
На этом создание теста завершено.
Шаг 3: Итоги
В конце интерактивного видео разработчики предлагают добавить итоговый раздел, чтобы ученик задумался о просмотренном и проверил свои знания. Добавляем его – не зря же Вы старались!

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

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

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

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

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

Пример того, как это выглядит на видео:
Пример, как это выглядит на видео в H5P
Дополнительные возможности: Добавление закладок
Закладки используются для обозначения новой темы, важного взаимодействия или события в видео и добавляются на полосу тайминга.
Для этого вернемся на шаг 2 «Добавление взаимодействий», нажав на эту вкладку в верхней части редактора.

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

«Закладка» отображается рядом с кнопкой для воспроизведения видео:
Добавление закладок в H5P
Каждая закладка обозначается вертикальной серой линией на панели тайминга. Теперь пользователи могут перейти к нужной главе в один клик.
Добавление закладок в H5P
Теперь, когда всё настроено, нажимаем на кнопку "Save", чтобы сохранить интерактивное видео в H5P:
Сохранение интерактивного видео в H5P
Быстро и легко, согласитесь? Вставить это видео в свой обучающий курс на Teachbase еще проще.
Добавляем материал H5P в курс на платформе Teachbase
Перейдите в свой аккаунт на сайте h5p.org

Нажмите на название нужного материале в списке "Recent Content", который хотите использовать в Teachbase.
Материал от H5P в Teachbase
Нажмите на кнопку "Embed" (под полосой тайминга видео):
Материал от H5P в Teachbase
Скопируйте весь html-код из указанного поля (полностью!):
Материал от H5P в Teachbase
Перейдите в свой личный кабинет на платформе Teachbase, откройте редактирование нужного курса и нажмите на кнопку «Добавить материал»:
Добавление материала в Teachbase
Введите название материала и нажмите на кнопку «Загрузить файл»:
Название материала в Teachbase
Выберите тип материала "Embed-код или ссылка", вставьте скопированный код из пункта №4 в окошко и нажмите на кнопку «Добавить»:
Материал от H5P в Teachbase
Сохраните созданный материал.

Готово! Теперь Ваш курс точно интереснее, чем у конкурентов.

Появление сервиса H5P стало настоящим открытием в мире онлайн образования (как в свое время это было с LearningsApp). Приятным бонусом идет то, что сервис абсолютно бесплатный и активно развивается.

Используйте интерактивные материалы и задания в своих учебных курсах и создавайте по-настоящему увлекательный обучающий контент вместе с Teachbase!
Потому что у нас есть все инструменты для запуска обучения, которое работает и помогает бизнесу добиться целей.
Эффективное обучение —
это норма
Эффективное обучение с Teachbase