С помощью сервиса сервис Удоба можно создать интерактивную книгу.

На её страницы добавляются не только тексты, видео и картинки, но и викторины, презентации, встриваемые объекты, диалог-карточки и многое-многое другое. Более 30 разных инфо-блоков.

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

Регистрация

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

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

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

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

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

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

Первые шаги

Для работы выбираем шаблон, который так и называется — “Интерактивная книга”.

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

Чуть ниже находятся настройки книги. Отмечаем то, что необходимо.

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

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

Итак, приступаем к редактированию. Придумываем название страницы. В разделе «Список содержимого контента» выбираем из выпадающего списка «Контент» нужный инфо-блок.

Вот что можно добавить в книгу:

— Аккордеон (большой объём текста, скрытый под заголовками: при нажатии на заголовок открывается текст).
— Слайдер (одно изображение плавно переходит в другое).
— Аудио.
— Онлайн-аудиозапись.
— Игра «Заполни пропуски».
— Диаграмма.
— Коллаж.
— Презентация.
— Диалог-карты.
— Задание «Drag and Drop».
— Задание «Перенеси слова».
— Эссе.
— Игра «Угадай ответ».
— Таблица.
— Текст.
— Встраиваемый объект.
— Изображение.
— Интерактивный плакат.

И ещё в списке контента:

— Задание «Найди горячую точку».
— Фотогалерея.

— Интерактивное видео.
— Ссылка.
— Задание с выделением слов.
— Игра на запоминание.
— Вопрос с несколькими верными вариантами ответа.
— Опросник.
— Набор вопросов.
— Вопрос с одним правильным ответом.
— Викторина на основе утверждений.
— Лента времени.
— Вопрос «Правда или ложь?».
— Видео.

Аккордеон

Аккордеон — это большой текстовый блок с подзаголовками. При нажатии на подзаголовок открывается текст, относящийся к нему.

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

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

Слайдер Agamotto

Agamotto — это слайдер, в котором одна фотография при просмотре будет медленно превращаться в другую. Хорошо подойдёт для иллюстрации «что было-что стало», например.

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

Аудио

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

Онлайн-аудиозапись

Аудиорекодер (Audio Recorder) — это блок для аудиозаписи онлайн. Читатель книги может нажать на кнопку записи и создать аудиотрек. А готовую запись можно скачать на ПК. Опция подходит только для браузера Google Chrome.

Нужно только придумать название блоку (Заголовок) и сопроводительный текст для записи (Описание задачи).

Игра «Заполни пропуски» (Fill in the Blanks)

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

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

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

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

Диаграмма

Для создания диаграммы выбираем шаблон “Chart” и устанавливаем её тип: круговая или гистограмма.

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

Коллаж

Для создания коллажа выбираем одноимённый шаблон — “Collage”. Можно создать коллаж из 2-6 фотографий. Изображения масштабируем, нажимая на значки «+» и «-» в левом верхнем углу каждой фотографии.

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

Презентация

Чтобы добавить внутрь книги презентацию, выбираем шаблон «Course Presentation».

Подробнее о создании презентации можно прочитать здесь.

Диалог-карты

Диалоговые карточки добавляются с помощью шаблона «Dialog Cards».

Выбираем режим показа карточек (обычный или повторяющийся).

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

Раздел “Текст” — текст на лицевой стороне карточки (вопрос). Раздел “Ответ” — текст для оборотной стороны (ответ). К каждой карточке можно прикрепить изображение и аудиофайл, загрузив его с ПК.

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

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

Задание «Drag and Drop» (Тащи и бросай)

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

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

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

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

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

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

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

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

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

Задание «Перенеси слова»

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

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

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

Эссе

Эссе (Essay) — это задание, в котором участник должен в ответ на вопрос создать небольшое высказывание-сочинение с использованием ключевых слов (по этим ключевым словам, которые задаёт создатель книги, и будет происходить оценивание и начисление баллов).

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

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

Игра «Угадай ответ» (Guess the Answer)

Инфо-блок «Guess the Word» — это вопрос с картинкой. Читатель книги отвечает на вопрос, а затем нажимает на кнопку, чтобы проверить ответ.

Придумываем вопрос, записываем в нужную графу решение, а в разделе «Медиа» прикрепляем к вопросу картинку (Image) или видео (Video).

Таблица

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

Текст

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

Встраиваемый объект

Чтобы добавить в книгу встраиваемый объект, выбираем шаблон «Iframe Embedder».

В графах «Ширина», «Минимальная ширина», «Высота» устанавливаем размеры встраиваемого объекта, а в графу «Источник» вставляем ссылку на веб-ресурс.

Изображение (Image)

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

Интерактивный плакат

Чтобы добавить в книгу интерактивный плакат (интерактивное изображение), выбираем шаблон «Image Hotspots».

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

Задание «Найди горячую точку»

Цель такой игры — отвечая на вопрос, найти на изображении правильный ответ, который обозначен невидимой меткой в виде круга или квадрата. Для её создания выбираем шаблон «Find the Hotspot».

В разделе «Фоновое изображение» загружаем загадковую картинку с ПК. По желанию можно её немножко подредактировать (обрезать, повернуть — «Изменить изображение») или указать копирайт (Изменить авторское право).

Переходим во вкладку “Активные точки”. В графе “Описание задания” можно дать инструкцию для выполнения. Теперь выбираем вид метки (круг, квадрат) и переносим её «мышкой» на изображение.

Открывается окно для редактирования. Здесь указываем, правильно или неверно найдена метка и даём обратную связь (“Правильно!” или “Попробуй еще раз!”). Нажимаем “Готово” и перемещаем метку на нужное место.

«Мышкой» можно увеличить или уменьшить её размеры, захватив нужную часть картинки. На изображении может быть несколько меток (“горячих точек”), одна из них обозначает правильный ответ на вопрос.

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

Фотогалерея

Шаблон для создания фотогалереи называется «Image Slide».

Загружаем нужные фотографии в определённом порядке и устанавливаем соотношение сторон слайдера: автоматическое, обычное, нефиксированное. По умолчанию режим автоматический.

Новое изображение добавляется в фотогалерею нажатием на кнопку «Добавить item».

Интерактивное видео

Шаблон для добавления интерактивного видео так и называется — «Interactive Video».

Подробнее о нём можно прочитать здесь.

Ссылка

Для добавления гиперссылки выбираем шаблон «Link».

Так выглядит окошко для её добавления.

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

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

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

И в конце — несколько дополнительных настроек.

Игра на запоминание (Memory Game)

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

Чтобы добавить в книгу такую игру, нужно загрузить несколько картинок с ПК — в разделе «Изображение». Дополнительно к ним можно добавить аудиофайлы (с ПК или по ссылке) — в разделе «Звуковая дорожка».

Новую картинку загружаем, нажав на кнопку «Добавить карточка».

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

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

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

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

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

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

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

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

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

Опросник (Questionnaire)

В книгу можно встроить опросник с открытыми или закрытыми вопросами. 

В разделе «Library» выбираем тип вопроса и переходим к заполнению шаблона.

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

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

Если вопрос обязательный, ставим «галочку», непротив «Required field».

Чтобы добавить новый вопрос, нажимаем на кнопку «Добавить Element»

Для закрытого вопроса выбираем, сколько ответов на вопрос принимается: один или несколько. Указываем вопрос и варианты ответов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лента времени (Timeline)

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

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

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

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

Видео (Video)

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

Викторина с разными типами вопросов

Сначала даём название нашей викторине, загружаем фоновое изображение для обложки.

Можно настроить индикаторы для показа процесса «отвечания» на вопросы викторины (точки или текст, по умолчанию — точки).

А ещё можно указать в процентах количество правильных ответов, необходимых, чтобы считать викторину пройденной (по умолчанию — 50%).

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

  • Multiple Choice — вопрос с одним или несколькими правильными ответами.
  • Drag and Drop — подбор пары: текста и изображения, двух изображений.
  • Fill in Blanks — заполнение пропусков в тексте или предложении.
  • Mark the Words — задание отметить нужные слова в списке или тексте.
  • Drag the Words — заполнение пропусков в тексте словами из предложенного списка.
  • True/False Question — вопрос «Правда или ложь».
  • Essay — эссе.

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

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

Публикация

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

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

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

<iframe src=»https://udoba.org/h5p/embed/50228» width=»925″ height=»698″ 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>

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

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