H5P: как создавать задания в сервисе
Продемонстрируем механику платформы: за несколько минут узнаете о возможностях H5P и поймете, какие инструменты помогут лучше всего раскрыть определенные типы заданий. Будет много интерактивов!
Обновление статьи от 05.06.2018
25.11.2025 Чем полезен интерактив
Сразу ответим на вопрос — зачем вам это надо? Для взаимодействия с учеником и повышения его вовлеченности. Сервис H5P дает возможность быстро добавить в свой курс динамичные упражнения, игры, ленты времени и другие интересные фишки. Так ученик лучше усваивает полезную информацию и не теряет мотивацию в процессе обучения.
Мотивируем узнавать полезности ради мотивации в обучении. Поехали.
Интерактивные форматы в Teachbase
Чтобы было легче:
- Ученикам — не терять мотивацию
- Наставникам — вовлекать
- Бизнесу — обучать быстрее и эффективнее
Попробовать современный и удобный конструктор курсов бесплатно
Как создать задание в H5P
Сервис H5P имеет очень дружелюбный и интуитивно понятный интерфейс. Вам не составит труда освоить его — на это уйдет всего 10−15 минут.
Сначала необходимо создать аккаунт на сайте h5p.org.
1. Открываем страницу h5p.org и нажимаем на кнопку «Create free account».
Поздравляем! Теперь у Вас есть аккаунт на H5P!
2. Переходим в раздел «My account» и кликаем на кнопку «Create New Content».
3. Откроется страница с первичными настройками создаваемого контента:
Доступные параметры для выбора:
1. Название.
2. Выбор типа контента, который хотим создать: интерактивное видео, тест, эссе, диалоговые карточки и т. п.
3. Теги. Предназначены для того, чтобы в дальнейшем вам было проще ориентироваться в панели управления H5P.
4. Опциональные настройки. Позволяют выбрать, какие из специальных системных кнопок следует отображать: «скачать», «встроить» и «авторское право» (для добавления официальной информации под объектом).
Далее мы рассмотрим пример создания интерактивного обучающего видео и встроим его в курс на платформе Teachbase. Создать другие типы контента в H5P тоже легко — экспериментируйте!
Поможем создать серию образовательных видеокурсов
С запросом масштабного просвещения к нам обратились из «Атласа» — международной компании персонализированной медицины.
Как запускали проект:
1. Начали с самых востребованных тем.
2. Формат подачи выбирали, отталкиваясь от потребностей аудитории, — нужно, чтобы было доступно любым врачам.
3. Поняли, что просто видео недостаточно. А вот курс позволяет совместить видео, проверочные тесты и дополнительные материалы, которые можно скачать и использовать в работе (инструкции, таблицы и списки с важными данными).
4. Запустили пилотную версию курса и оперативно собрали обратную связь.
5. Наладили коммуникацию с экспертами и создали им комфортные условия. Это помогло расслабиться и креативить, когда нужно было объяснять сложные темы на языке ярких метафор.
В кейсе подробнее о том, как создать образовательный проект с экспертами и для экспертов.
Ниже Вы можете увидеть уже готовый простой пример интерактивного видео, созданного с помощью H5P:
Видео «Мой первый курс» на платформе Teachbase
И еще один пример:
Что-то есть захотелось…
Процесс создания интерактивного видео в H5P
Начинаем! Выбираем в списке «Select content type» пункт «Interactive Video»:
Перед нами сразу откроется пошаговый этап создания интерактивного видео:
Весь этап создания интерактивного видео разделен на три части:
1. Загрузка видео (step 1);
2. Добавление взаимодействий (step 2);
3. Итоги (step 3).
По умолчанию первой отображается вкладка «Загрузить видео», с нее и начнем.
Шаг 1: Добавить видео
В этом шаге надо выбрать, какое видео будете использовать:
- загруженное с компьютера (не более 16 МБ);
- видео с YouTube.
Если собираетесь загружать собственный видеофайл, то используйте формат .mp4, он будет воспроизводиться во всех современных браузерах.
Нажимаем на кнопку «+», чтобы добавить видеофайл:
Выбираем способ добавления видео:
Настраиваем дополнительные параметры на этом этапе, если необходимо:
Дополнительные параметры настройки:
1. Настройка стартового экрана (не поддерживается для видео с YouTube).
Настройте отображение стартового экрана видео: добавить описание, заголовок или измените его обложку.
2. Настройка субтитров (не поддерживается для видео с YouTube).
Загрузите собственный файл с субтитрами для видео.
3. Дополнительные настройки.
Задайте стартовое время видео, активируйте автоматическое начало воспроизведения при его открытии, зациклите воспроизведение, настройте появление служебных кнопок: для просмотра правильного решения и старта новой попытки, после выполнения каких-либо тестов пользователем, отключите звук в видео и скройте навигационное меню плеера — в общем, что душе угодно в пределах возможностей H5P.
4. Локализация.
Настройте язык взаимодействия с пользователем во время просмотра видео: системные кнопки, поля для вывода информации результатов, части текстового интерфейса, которые будут появляться у слушателя в процессе изучения видео. Ниже мы настроим их как нужно, так как по умолчанию все названия элементов написаны на английском языке.
Готовые обучающие материалы в нашей Библиотеке курсов
- Видео, интерактивные тренажеры, лонгриды, практикум и другое.
- Самые разные тематики: от коммуникаций, наставничества, менеджмента до охраны труда, продаж, управления проектами и развития бизнеса и продуктов.
Выбрать один или несколько
Например, для нашего учебного интерактивного видео используем настройку старта времени видео, зададим ее, чтобы пользователь сразу перешел к нужной части видео, поясняющий процесс создания теста в LMS Teachbase. Для этого кликаем на строку с настройками «Behavioural setting», в поле «Start video at» задаем время начала нужного эпизода: 0:09. Зацикливать это учебное видео и применять автозапуск нам нет необходимости, поэтому в параметрах «Autoplay video» и «Loop the video» оставляем настройку неактивированной. Изменение стартового экрана и субтитров не будут сейчас актуальны, так как мы используем видео с YouTube, в таком случае пропускаем настройки в поле «Start screen options» и «Text tracks».
Отдельное внимание уделим настройкам в поле «Text overrides and translations», так как по умолчанию все названия системных кнопок и надписей в H5P пишутся на английском языке. Переведем их на русский, чтобы пользователям было привычнее:
На данном этапе это все настройки, которые нам нужны, перейдем к шагу № 2 и добавим немного интерактива в наше обучающее видео.
Загружайте любой тип контента в курсы Teachbase
Удобный и интуитивно понятный конструктор курсов поддерживает текст, видео, аудио, презентации.
А весь интерфейс — на русском языке, ничего не придется переводить.
Узнать о возможностях платформы
Шаг 2: Добавить взаимодействия
Нажимаем на вкладку «Add interaction» в верхней части редактора. Вы увидите стартовую обложку видео, которое было добавлено на предыдущем шаге.
Рассмотрим панель инструментов, которая находится над видео:
Вот эта строка — панель инструментов. Она везде похожа
С помощью этой панели вы можете добавить следующие взаимодействия с пользователем:
- текст;
- таблицы;
- ссылки;
- изображения;
- список перечислений;
- тестовые вопросы: единичный выбор и множественный выбор;
- заполнение пропусков в тексте, подстановка текстовых вариантов в пропуски;
- кнопки для перемещения к указанной части видео;
- опрос.
В этом примере мы добавим: текст, изображение, кнопку для перехода к другой части видео и небольшой тест с единичным выбором ответа.
2.1. Добавим текст
Добавим короткий текст на видео — с пояснением, в чем суть этого видео. Пользователь увидит его в самом начале.
Кликаем на тип взаимодействия «Текст» — на панели инструментов появится окно с настройками:
Итак, установим время появления этого текста так, чтобы оно появлялось в самом начале видео.
На предыдущем этапе мы выставили время старта самого видео с 0:09. Поэтому будем показывать надпись с описанием видео на временном промежутке от 0:09 до 0:10. Заносим эти данные в настройку «Display time», а также активируем параметр «Pause video», чтобы у пользователя было время спокойно ознакомиться с текстом и принять решение, просматривать дальше видео или нет.
Следующим шагом предлагается выбрать, в каком виде будет отображаться текст:
По нажатию на кнопку
В виде окошка с текстом, которое появляется сразу
Мы используем второй вариант — отображение текста сразу в отдельном окошке поверх видео: в настройке «Display As» выбираем пункт «Poster».
Далее переходим к самому тексту — вводим в текстовое поле «Text» все, что считаем нужным. Для красоты и удобства пользователей добавим под текстом пояснение: «Нажмите, чтобы продолжить просмотр».
Вот такое окошко с текстом у нас получилось
Теперь, для того чтобы продолжение просмотра сработало по клику на окно с текстом, настроим параметры во вкладке «Go to on click». Данная настройка находится прямо под окном для редактирования текста.
Параметры во вкладке «Go to on click»
Здесь стоит пояснить, что настройка «Type» помимо возможности перейти к какой-либо части видео («Timecode») позволяет добавить переход по любой внешней ссылке. Например, к инструкции на сайте.
Выставляем «Type» как «Timecode», тогда при клике пользователь переместится на указанный тайминг в видео. Тайминг нужной части видео задается в «Go To» — определяем его как 0:11.
Флаг на «Visualize» добавит к окошку с текстом рамку и специальную иконку, которая служит обозначаем того, что этот объект кликабельный:
Так и хочется кликнуть
В качестве дополнения во вкладке «Visuals» вы можете изменить фон окошка и отображение тени под ним:
Вот эти настройки
Все готово, осталось сохранить — кликаем на кнопку «Done» в верхнем правом углу. Затем выбираем место на видео, где появится текстовое сообщение. И простым перетаскиванием ставим его на нужное место.
Просто перетащите окошко с текстом на экране с видео
Обратите внимание на полосу тайминга видео (временная шкала). В соответствующем отрезке времени появилась синяя точка, которая означает, что здесь доступно взаимодействие:
Если необходимо быстро вернуться в редактирование созданного объекта — дважды кликните на него левой кнопкой мыши
2.2. Добавим изображение
Добавим изображение — оно будет появляться в тот момент, когда на видео показывается процесс настройки тестирования. С помощью картинки покажем, как выглядит тест со стороны участника обучения.
Выбираем тип взаимодействия «изображение», нажав кнопку «Image» на панели инструментов.
Далее, все по тому же принципу, как и при работе с текстом из предыдущего пункта.
Почти все знакомо, сейчас расскажем про новые кнопки
Поясним назначение тех параметров, которые отсутствовали, когда мы добавляли текст на видео в предыдущем пункте:
1. Флаг «Turn into button on small screens». На мобильных устройствах при определенном размере экрана изображение будет заменено кнопкой, по клику на которую пользователь сможет его посмотреть.
2. «Image». Нажав на кнопку «Add» Вам будет предложено выбрать одно изображение для отображения на видео.
3. «Alternative text». Этот текст будет отображаться у пользователя, если изображение по каким-то причинам не загрузится.
4. «Hover text». Этот текст будет отображаться у пользователя, если он наведет мышку на изображение.
Настраиваем: для разнообразия выберем в «Display as» тип «Button» — тогда пользователь сможет сам выбрать, просматривать ему картинку или нет, кликнув на специальную кнопку. Кроме того, это поможет не перегружать лишний раз экран при просмотре.
Название кнопки зададим в параметре «Label».
Выбираем кнопку и задаем ей название, например: «Текст глазами участника»
Выбираем изображение для кнопки, прописываем текст, если оно не загрузилось, и текст, который появляется, когда на кнопку наводят курсор
Далее — жмем «Done» и располагаем кнопку в удобном месте, вы это уже умеете
2.3. Добавляем кнопку для перехода к указанной части видео
Предположим, что нам попался уже знакомый с системой пользователь и ему не очень интересно смотреть весь процесс создания теста. Дадим ему возможность перейти к той части обучающего видео, где показан процесс публикации части курса с уже готовым тестом.
Здесь мы как раз и используем специальную кнопку для перехода к нужному таймингу в видео. Выбираем этот тип взаимодействия, нажав кнопку «Navigation Hotspot» на панели инструментов.
Приступим. В настройках поля «Destination» выбираем «Type» → «Timecode» и ниже указываем ту часть видео, куда должна переносить кнопка.
Немного путешествий во времени
Внешний вид кнопки настроим через кнопку «Visual»:
- «Shape». Позволяет выбрать форму кнопки из трех вариантов: квадратная, квадратная с закругленными углами и круглая/овальная.
- «Use pointer cursor». При наведении на кнопку превратит обычный курсор в курсор, показывающий, что на этот элемент можно кликнуть.
- «Add blinking effect». Заставит кнопку периодически «моргать».
Делайте, как нравится, но помните, на кнопку должно хотеться нажать
И последнее: зададим название кнопке, чтобы пользователь понимал, что произойдет, если на нее кликнуть:
Например, «К просмотру части публикации»
Завершаем стандартно:
Нажимаем «Done» и располагаем кнопку в подходящем месте
Итак, мы добавили уже три типа взаимодействия в этом видео: текст, картинку и кнопку для перехода к нужной части видео.
Рассмотрим чуть более интересный вариант взаимодействия с пользователем и добавим тест с единичным выбором ответа.
2.4. Добавляем тест с единичным выбором ответа
Наш небольшой тест по усвоению информации из обучающего видео будет располагаться сразу после того, как показаны все типы вопросов, доступные к использованию на платформе Teachbase.
Даже тестирование может быть гибким
В Teachbase множество сценариев:
- выдачи вопросов ученикам,
- отображения результатов,
- как задавать проходной балл,
- какое время на прохождение дать,
- вариантов сгруппировать вопросы в категории и многое другое.
Отталкивайтесь от своих потребностей и попробуйте платформу в действии бесплатно
Выбираем тип взаимодействия, нажав кнопку «Single Choice Set» на панели инструментов.
Настройка не сложнее, чем в предыдущих пунктах
Используем «Display as» как «Poster», чтобы тест появился сразу же, без лишних манипуляций с кнопкой.
Переходим непосредственно к процессу добавления вопросов и ответов:
- «Question» — вопрос;
- «Alternative» — вариант ответа.
Обратите внимание: первый вариант ответа должен являться верным ответом.
Вводим текст вопроса:
Далее — варианты ответа на вопрос:
Первая Alternative является верным ответом на вопрос
Новый вопрос можно добавить с помощью кнопки «Add Question».
После добавления вопросов и ответов переходим к настройке, которая будет определять, пройден тест или нет, и выдавать рекомендации в зависимости от этого.
Открываем список настроек «Overall feedback».
Задаем значение верных ответов в процентах (%), а в соседнее поле вводим текст сообщения, которое будет появляться при достижении указанных значений.
Определите пользовательскую обратную связь для любого диапазона оценок. Например, от 0 до 50% — «Ты ответил правильно менее чем на половину вопросов. Попробуй еще». От 51 до 100%: «Поздравляем! Ты ответил на большее количество вопросов теста»
Дополнительные настройки «Behavioural settings» и «Adaptivity» позволяют улучшить обратную связь от теста:
- Флаг «Auto continue». Автоматически переходить к следующему вопросу, как только выбран вариант ответа.
- Флаг «Enable sound effects». Включить звуковые эффекты.
- Флаг «Enable retry button». Отобразить кнопку «Повторить» для перезапуска теста пользователем.
- Флаг «Enable show solution button». Отобразить кнопку «Показать ответ».
Кроме того, можно настроить события, которые будут срабатывать в случае, если все ответы правильные или неправильные, конкретно — перемещать пользователя на заданную часть тайминга видео в зависимости результатов его тестирования.
То есть вы можете строить адаптивный сценарий прохождения видеокурса пользователем.
Платформа подсказывает, что можно использовать эту опцию в сочетании с предотвращением перемотки видео вперед
Нажимаем «Done» и располагаем тест в нужном месте:
Тут все как всегда
На этом создание теста завершено.
Шаг 3: Итоги
В конце интерактивного видео разработчики предлагают добавить итоговый раздел, чтобы ученик задумался о просмотренном и проверил свои знания. Добавляем его — не зря же вы старались! Создадим короткий тест с несколькими утверждениями.
В первом тесте создадим следующий набор утверждений:
- «В Teachbase можно создавать тесты с различными типами вопросов».
- «В Teachbase нельзя создавать тесты».
Указываем их в полях «Statement». Поле «Tip» позволяет добавить подсказку-намек к правильному ответу при необходимости.
Первый пункт считается верным ответом.
Для создания большего количество утверждений нажимаем на знакомую кнопку «Add statements» внизу страницы и заполняем все поля по аналогии
Как это выглядит на видео
Дополнительные возможности: Добавление закладок
Закладки используются для обозначения новой темы, важного взаимодействия или события в видео и добавляются на полосу тайминга.
Для этого вернемся к шагу № 2 — «Добавление взаимодействий», нажав на эту вкладку в верхней части редактора.
Перемещаем ползунок в нужное место на полосе тайминга и нажимаем на кнопку «Закладка» для ввода ее названия.
Закладка отображается рядом с кнопкой для воспроизведения видео
Каждая закладка обозначается вертикальной серой линией на панели тайминга.
Немного магии — и пользователи могут перейти к нужной главе в один клик
Теперь, когда все настроено, нажимаем на кнопку «Save», чтобы сохранить интерактивное видео в H5P:
Сохраняем прогресс
Быстро и легко, согласитесь? Вставить это видео в свой обучающий курс на Teachbase еще проще.
Добавляем материал H5P в курс на платформе Teachbase
1. Перейдите в свой аккаунт на сайте h5p.org.
2. Нажмите на название нужного материала в списке «Recent Content», который хотите использовать в Teachbase.
«Мой аккаунт» → «Мое новое интерактивное видео»
3. Нажмите на кнопку «Embed» (под полосой тайминга видео):
«Встроить»
4. Скопируйте весь HTML-код из указанного поля:
Копируем код полностью
5. Перейдите в свой личный кабинет на платформе Teachbase, откройте редактирование нужного курса и нажмите на кнопку «Добавить» → «Медиафайл»:
Добавляем материал в режиме редактирования курса
Вставляем код в специальное окно → «Сохранить»
Сохраните созданный материал. Готово! Теперь вы знаете еще одну платформу, чтобы создавать задания, и еще один прием, чтобы сделать курс интереснее.
Нас рекомендуют
Анастасия Орлянская, руководитель отдела контроля качества YCLIENTS
Платформу выбирали полгода. Лучшим вариантом по цене и функционалу оказалась Teachbase. Поработав с платформой, полюбили автоназначение курсов — здесь минимум ручного труда, что экономит время. Также понравились гибкие тесты — можно в одном тесте дать разные вариан-ты вопросов, чтобы не замыливался глаз и не падала вовлеченность. Кроме того, полюбили техподдержку за то, что активно прислушивается к запросам и четко общаются.
Марина Ускова, cпециалист отдела обучения и развития персонала World Class
Интерфейс легкий, в нем можно разобраться интуитивно, без соответствующих инструкции. Также могу отметить быстроту формирования очных мероприятий в системе, сложностей при их создании не возникает.
Татьяна Комиссарова, ведущий специалист управления оценки, обучения и развития персонала АО «Атомстройэкспорт» (ГК Росатом)
Платформа закрывает все наши потребности. Поддерживает гибридный формат обучения — онлайн-курсы, вебинары и очные активности. Есть роли: ученик, специалист и менеджер.
Программы и курсы можно создавать из разных модулей, как из деталек Лего. А система мотивации пробуждает в учениках дух здорового соперничества.
Платформа автоматизирует работу. Создаешь сценарий — а дальше она сама назначает обучение, направляет уведомления. А эффективность курсов и результаты пользователей легко оценить с помощью сквозной аналитики.
Радует гибкий подход компании и скорость решения вопросов в режиме «одного окна». Мы просто пишем своему менеджеру и не ждем ответа от техподдержки.
Александра Алешкова, руководитель группы внутреннего обучения ICL Services
Остановились на Teachbase из-за соотношения цена-качество, а еще из-за адекватного общения и быстрой реакции на всех уровнях. Также понравился понятный интерфейс — даже те, кто не знаком с платформой, по минимальной инструкции могут сразу сделать курс. Нравится легкий подвижный дизайн, интуитивно понятный интерфейс. Очень нравится техподдержка, быстро отвечают.
Лиза Настатуха
Редактор-универсал. Помогает бизнесу закрывать разные текстовые задачи. Пишет все — от UX-текстов до книг. Чаще всего занимается бренд-медиа — как стратег, автор и менеджер.
Редактор-универсал. Помогает бизнесу закрывать разные текстовые задачи. Пишет все — от UX-текстов до книг. Чаще всего занимается бренд-медиа — как стратег, автор и менеджер.
АВТОР
София Полякова
Пишет и редактирует статьи, кейсы и рассылки. Рассказывает об обновлениях продукта и любых активностях Teachbase.
Пишет и редактирует статьи, кейсы и рассылки. Рассказывает об обновлениях продукта и любых активностях Teachbase.
редактор