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

А ещё можно встроить изображение, гиперссылку, таблицу, видео, аудио… Возможности практически безграничные.

Вот что получилось у меня. Слайды с заданиями и вопросами отмечены кружочками.

Регистрация

Для начала давайте зарегистрируемся. Заходим на стартовую страницу сервиса и нажимаем «Создать пользователя».

Заполняем предложенную форму: имя пользователя, адрес электронной почты, пароль, капча… В заключение нажимаем кнопку «Регистрация».

На указанный адрес электронной почты придёт письмо с одноразовой ссылкой для входа на сайт. Переходим по ней.

Осталось нажать «Войти», чтобы перейти к созданию собственной библиотеки на сайте.

Нажимаем на кнопку «Создать библиотеку». 

В открывшейся библиотеке нажимаем на кнопку «Добавить», а потом выбираем опцию «Интерактивный контент» и переходим к созданию презентации.

Первые шаги

Шаблон для создания презентации называется “Презентация курса”.

Открываем его, придумываем название работы и осматриваемся.

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

— Текст.
— Ссылка на веб-ресурсы.
— Изображение.
— Видео.
— Аудио.
— Гиперссылка с переходом на другой слайд.
— Задание с заполнением проспусков в тексте.
— Вопрос с выбором одного правильного ответа.
— Вопрос с выбором нескольких правильных ответов.
— Вопрос “Правда или ложь?”
— Задание «Drag and Drop».
— Викторина на основе утверждений.

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

— Упражнение с переносом слов.
— Упражнение “Отметь слова”.
— Диалог-карты.
— «Непрерывный текст» (большой текстовый массив).
— Экспортируемый текст
— Таблицу.
— Интерактивное видео (о том, как его создавать и редактировать — здесь).
— Контент из Twitter.

У каждого слайда можно устанавливать фоновое изображение, загружая его с ПК, или заливку фона. Чтобы добавить в презентацию новый слайд, нажимаем “+” справа внизу.

Для добавления элемента в презентацию щелкаем на него “мышью” на панели инструментов. Открывается окно для редактирования. Все объекты можно свободно перемещать “мышью” по рабочему полю, менять их размер и удалять.

Элементы презентации

Текст, добавляемый в презентацию, можно форматировать, прикреплять к нему ссылки, оформлять в виде кнопки (опция не действует при редактировании большого массива текста). Чтобы сохранить элемент презентации, нажимаем «Готово».

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

Экспортируемый текст отображается на слайдах презентации с дополнением в виде окошка, в которое зритель при желании может добавлять свои комментарии. Этот текст он может потом сохранить на ПК (своеобразные пометки к презентации). Вместо текста тут может быть вопрос, на который зритель должен дать ответ.

Это окно для добавления гиперссылки.

Изображение загружается с ПК.

А видео — по ссылке из YouTube или с компьютера. В разделах “Визуализация” и “Воспроизведение” скрываются дополнительные видеонастройки. Не проходим мимо!

Нажав на значок «Формы», можно добавить на слайды линии, прямоугольники и круги. Для каждого элемента — целый ряд настроек (цвет, размер, границы, заливка и т.д.). Например, это настройки для прямоугольника.

Аудиофайл загружаем с ПК или по ссылке из Сети. Можно устанавливать размер аудиоплеера, выбирать дизайн (обычный или минималистичный), настраивать автозапуск.

Сервис позволяет делать ссылки с одного слайда презентации на другой. Для этого нажимаем на значок “якорь” и указываем номер слайда для перехода или выбираем предыдущий / последующий слайд. Надпись для перехода можно сделать невидимой.

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

Викторины и задания

При добавлении в презентацию вопросов, упражнений и интерактивного видео открываются необходимые редакторы для работы. Остаётся только заполнить шаблон — и дело в шляпе!

Задание с заполнением пропусков (Fill in the Blanks)

В этом задании надо заполнить пропуски в предложенном тексте, вставляя подходящие по смыслу слова. В разделе “Mедиа” можно прикрепить изображение (Image) или видео (Video).

В графу “Описание задачи” вписываем задание. В разделе “Текстовые блоки” помещаем текст с пропусками, которые нужно заполнить. «Секретное» слово на месте пропуска отмечаем с двух сторон “звездочками”. Например: Осло — столица *Норвегии*.

В одну графу можно добавить только одно предложение с пропуском. Чтобы добавить новое предложение, нажимаем “Добавить текстовый блок”.

Дополнительные опции — в разделах «Общий отзыв» и «Настройки поведения».

Вопрос с одним правильным ответом (Single Choice Set)

Вписываем в соответствующие графы вопрос и варианты ответов. Первый из вариантов — правильный. Чтобы добавить новый вариант, нажимаем “Добавить ответ”. А новый вопрос добавляет кнопка “Добавить вопрос”. 

В разделе «Общий отзыв» можно настроить обратную связь. Нажимаем «Добавить диапазон» и добавляем оценки в зависимости от количества правильных ответов.

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Distribute Evenly».

В разделе «Настройки поведения» тоже есть несколько дополнительных опций для показа вопроса.

Вопрос с несколькими верными вариантами ответа (Multiple Choice)

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

Новый вариант ответа добавляем, нажав на кнопку «Добавить Option».

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

В разделе «Полная обратная связь» можно настроить обратную связь. Нажимаем «Добавить Range» и добавляем оценки в зависимости от количества правильных ответов.

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Distribute Evenly».

В разделе «Настройки поведения» тоже есть несколько дополнительных опций для показа вопроса.

Вопрос «Правда или ложь?»(True/False Question)

Всё просто: в графу “Вопрос” вносим какое-нибудь утверждение и отмечаем, правда это или нет. В разделе “Медиа” можно прикрепить изображение (Image) или видео (Video) к заданию.

Дополнительные настройки показа ищем в разделе «Настройки поведения».

Задание «Drag and Drop» (дословно: «Тяни и бросай»)

Для начала придумываем задание. Например: «Как называется это животное? Перенесите «мышью» на изображение верный ответ».

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

В разделе «Задача» нажимаем на значок с изображением точки (Add Drop Zone) и перетягиваем его на нашу картинку.

Появляется рамочка, обозначающая границы «территории вброса». Границы можно растянуть на всё изображение или только на его часть.

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

Если вариант ответа — это картинка, выбираем значок «Image» (он находится рядом, справа) и повторяем манипуляции (изображение загружается с ПК).

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

Возвращаемся к основной картинке. Нажимаем на значок «карандашик» над ней и попадаем в редактор. Здесь «привязываем» картинку к нужному варианту ответа, отметив его галочкой, и, если надо, устанавливаем прозрачность изображения (чтобы его выделить). Не забываем нажать «Done».

А это несколько дополнительных настроек.

Викторина на основе утверждений (Statements)

В графу “Вводный текст” вписываем задание, например: “Выберите из предложенных утверждений верное”.

В графы “Определение утверждений” вносим утверждения, первое из них — верное. Чтобы добавить новое утверждение, нажимаем “Добавить утверждение”. Если необходимо, в разделе “Подсказка” добавляем подсказку.

Чтобы добавить новый набор утверждений, нажимаем на кнопку внизу “Добавить утверждения”.

В разделе «Общая обратная связь» можно настроить обратную связь. Нажимаем «Добавить диапазон» и добавляем оценки в зависимости от количества правильных ответов.

Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».

Кстати, сервис может распределить оценки автоматически: достаточно нажать «Distribute Evenly».

Задание с переносом слов (Drag Text)

Очень похоже на задание «Fill in the Blanks», только слова для заполнения пропусков в тексте нужно брать из предложенного списка.

В разделе “Описание задачи” — задание к упражнению. В разделе “Текст” помещаем текст с пропусками, которые нужно заполнить. Нужное слово на месте пропуска отмечаем с двух сторон “звездочками”. Например: Осло — столица *Норвегии*.

Так выглядят настройки.

Задание с выделением слов (Mark the Words)

В этом задании ищем и выделяем в тексте нужные слова.

В графу “Описание задачи” вносим задание. В графу “Область ввода” вписываем текст со словами, которые нужно найти и отметить. Слова, которые будут правильными ответами на вопрос, отмечаем с двух сторон значком “звездочка”, например: *ответ*.

Диалог-карты (Dialog Cards)

В разделе “Описание задачи” помещаем задание. И начинаем создавать карточки.

Раздел “Текст” — текст на лицевой стороне карточки (вопрос). Раздел “Ответ” — текст для оборотной стороны (ответ).

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

Чтобы перейти к редактированию новой карточки, нажимаем “Добавить диалог” слева. Карточки можно менять местами, перемещая их “мышью”. Удалить их можно, нажав на значок “крестик” справа.

Из дополнительных опций — возможность добавлять подсказки. В разделе “Настройки обратной связи”, как всегда, несколько полезных настроек.

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

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

Публикация

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

Копируем код из открывшегося окошечка.

Код будет выглядеть примерно вот так:

<iframe src=»https://udoba.org/h5p/embed/3272» width=»1014″ height=»596″ frameborder=»0″ allowfullscreen=»allowfullscreen» allow=»geolocation *; microphone *; camera *; midi *; encrypted-media *» title=»Через тернии — к звёздам»></iframe><script src=»https://udoba.org/sites/all/modules/h5p/library/js/h5p-resizer.js» charset=»UTF-8″></script>

Кстати, из этого кода можно извлечь ссылку для красивого полноэкранного просмотра. Эту ссылку я выделила красным.

Чтобы вновь вернуться к редактированию проекта, нажимаем на вкладку «Редактировать» вверху.