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

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

На всякий случай — несколько слов о регистрации в сервисе.

Регистрация

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

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

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

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

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

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

Игра «Выбор изображения»

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

Для начала выбираем шаблон.

Придумываем название игре (поле «Заголовок»). В разделе «Media» можно добавить к вопросу дополнительный медиаконтент: текст (Text), изображение (Image), аудио (Audio) или видео (Video).

В поле «Question» вписываем вопрос.

А теперь в разделе «Без названия Image» загружаем для ответа картинку с ПК. Можно добавить к ней текст, который будет появляться при наведении курсора. Если нужно, отмечаем ответ как правильный (Correct).

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

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

В разделе «Overall Feedback» можно задать диапазон оценок, чтобы дать участникам обратную связь. Например, диапазон 0-30% — это плохая оценка, 31-70% — средняя, 71-100% — отличная оценка.

Для добавления нового диапазона оценок нажимаем одноимённую кнопку (Добавить Range). А если нажать на «Distribute Evently», сервис создаст диапазоны самостоятельно.

Переходим во вкладку «Behavioural settings». Здесь настраиваем показ кнопок и внешний вид вопроса (автоматический, с выбором одного ответа и с выбором нескольких ответов).

В поле «Maximum alternatives per row» устанавливаем, сколько ответов может максимально помещаться в одной строке (от 1 до 4).

Осталось перевести названия кнопок в игре на русский язык. Делается это в разделе «Переопределение текста и переводы» (вкладка «Image Choice»).

Игра готова? Значит, нажимаем на кнопку «Сохранить».

Игра «Найди пару изображений»

По-другому эта игра называется «Memory Game» (игра на запоминание). Задача игрока — переворачивая карточки, запоминать их местоположение и подбирать к ним пару: или точно такие же или логически с ними связанные. 

Пример моей игры — «Сказки А.С. Пушкина» (нужно собирать логически связанные пары-картинки).

Находим шаблон «Найди пару изображений».

Придумываем название игре и начинаем создавать пары карточек: загружаем картинку и, если нужно, аудиофайл (Звуковая дорожка) к первой карточке.

Если парная карточка будет точно такая же, то поля «Соответствующее изображение» и «Соответствующая звуковая дорожка» оставляем пустыми. А если парная карточка будет другая, то загружаем нужную картинку и аудио.

Чтобы создать новую пару, нажимаем на кнопку «Добавить Карточка«.

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

И нажимаем «Сохранить».

Перетаскивание

Еще одна интересная игра — «Перетаскивание»

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

Это пример такой игры.

Как всегда, начинаем с выбора шаблона.

Для начала придумываем название игры.

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

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

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

Устанавливаем, если нужно, дополнительные опции: «Эта область размещения может содержать только один элемент» (если правильным будет только один выбор) и «Включить авто-выравнивание».

Нажимаем «Done».

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

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

Добавляем варианты ответа на задание. Выбираем значок «Text» и вписываем нужный вариант ответа. Выбираем «зону вброса» из ранее созданных. Чтобы запутать игроков, можно выбрать сразу все отмеченные зоны (Select all). нажимаем «Done».

Похожим образом в качестве ответа можно добавить картинку с ПК (нажимаем на кнопку «Image»).

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

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

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

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

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

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

Да, и не забываем нажать «Сохранить».

И поделиться

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

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

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

<iframe src=»https://udoba.org/h5p/embed/57096» width=»606″ height=»492″ 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>

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

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