Универсальный конструктор Удоба. Часть 4. «Весёлые картинки»

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

А если сделать эти метки невидимыми? Тогда может получиться неплохая игра для смекалистых и догадливых!

Например, вот такая, сделанная с помощью сервиса Удоба.

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

Регистрация

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

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

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

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

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

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

В поисках секретной метки

Для создания игры выбираем шаблон «Поиск областей на изображении» (Find the Hotspot).

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

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

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

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

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

Когда все метки созданы и отредактированы, нажимаем “Сохранить”.

А если правильных ответов несколько?

Тогда можно попробовать шаблон «Найди множества областей изображения» (Find Multiple Hotspots).

Принцип работы всё тот же: сначала загружаем изображение…

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

Дополнительно в разделе “Hotspots” можно продублировать задание, дать название искомым меткам и отметить, сколько же верных ответов в игре.

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

Пора по парам

С помощью волшебного сервиса Удоба ещё и не то можно смастерить! Как вам игра «Найди пару»? Например, вот такая — «Литературные котики»? Нужно «мышью» перенести картинку из левого столбика в правый, собрав пару картинок вместе.

Смастерить такую игру несложно. Поможет шаблон «Пары изображений» (Image Pairing).

Придумываем название игры, даём хитрое задание. И загружаем попарно картинки. Чтобы добавить новую пару, нажимаем «Добавить Сard».

После нажатия «Сохранить» сервис быстренько перемешает все картинки — и можно играть.

Ну-ка, фрукты, встаньте в ряд…

Еще одна интересная игра — на расстановку картинок по порядку.

Шаблон для создания такой игрушки называется «Последовательность изображений» (Image Sequencing).

И опять всё по знакомому сценарию: придумываем название, находим шаблон, записываем задание к игре, а потом начинаем в нужном порядке загружать картинки с ПК. К ним еще и описания нужно добавить, правда, небольшие — в 30 знаков.