Инструкции
“Весёлые картинки”
Если на изображении разместить несколько меток и прикрепить к ним тексты, ссылки и другие “интересности”, то получится интерактивный плакат.
А если сделать эти метки невидимыми? Тогда может получиться неплохая игра для смекалистых и догадливых!
В поисках секретной метки
Цель такой игры - отвечая на вопрос, найти на изображении правильный ответ, который обозначен невидимой меткой в виде круга или квадрата.
Чтобы смастерить что-то подобное, заходим в сервис H5P
Даем название будущему шедевру (Title), выбираем из выпадающего списка шаблон “Find the Hotspot”.
В графу “The title of this question” вписываем вопрос (задание) к изображению. Теперь самое время загрузить загадочную картинку с ПК (не более 16 Mb). По желанию можно её немножко подредактировать (обрезать, повернуть) или указать копирайт (авторство).
Переходим во вкладку “Hotspots”. В графе “Task description” можно дать инструкцию для выполнения задания. Теперь выбираем вид метки (круг, квадрат) и переносим её “мышкой” на изображение.
Открывается окно для редактирования. Здесь указываем, правильно (Correct) или неверно найдена метка и даём обратную связь (“Правильно!” или “Попробуй еще раз!”). Нажимаем “Done” и перемещаем метку на нужное место. “Мышкой” можно увеличить или уменьшить её размеры, захватив нужную часть картинки. На изображении может быть несколько меток (“горячих точек”), одна из них обозначает правильный ответ на вопрос.
В графу “Feedback if the user selects an empty spot” вписываем текст, который появляется, если игрок не найдет ни одной “горячей точки” на изображении. Когда все метки созданы и отредактированы, нажимаем “Save”.
А если правильных ответов несколько?
Тогда можно попробовать шаблон “Find Multiple Hotspots”. Принцип работы всё тот же: сначала загружаем изображение…
А потом добавляем на него метки так же, как и в предыдущей игре. Отмечаем правильные ответы (Correct), настраиваем обратную связь на случай неправильного ответа. Дополнительно в разделе “Hotspots” можно продублировать задание, дать название искомым меткам и отметить, сколько же верных ответов в игре.
В заключение придумываем по желанию обратную связь, если не найдено ни одной метки или метка нашлась аж два раза. И нажимаем “Save”.
Пора по парам. С помощью волшебного сервиса H5P ещё и не то можно смастерить! Как вам игра “Найди пару”? Например, вот такая - “Литературные котики”? Нужно “мышью” перенести картинку из левого столбика в правый, собрав пару картинок вместе.
Смастерить такую игру несложно. Поможет шаблон “Image Pairing”. Придумываем название игры, выбираем из выпадающего списка нужный шаблон, даём хитрое задание. И загружаем попарно картинки. Чтобы добавить новую пару, нажимаем “Аdd card”.
После нажатия “Save” сервис быстренько перемешает все картинки - и можно играть.
Кстати, в разделе “Behavioural settings” добавляется кнопка повтора игры, а в разделе “Text overrides and translations” - перевод надписей на русский язык.
Еще одна интересная игра - на расстановку картинок по порядку. Шаблон для создания такой игрушки называется “Image Sequencing”.
И опять всё по знакомому сценарию: придумываем название, находим шаблон, записываем задание к игре, а потом начинаем в нужном порядке загружать картинки с ПК. К ним еще и описания нужно добавить, правда, небольшие - в 30 знаков.
В разделе “Text overrides and translations”, как всегда, можно перевести все надписи на русский язык.
Да, и не забываем нажать “Save”.
И поделиться…
Ссылку на любую игру можно скопировать из строки браузера вверху. А код появится, если нажать “Embed” на предварительном просмотре (слева внизу). Перед копированием кода можно подкорректировать размеры игры, чтобы она поместилась в блоге.
Лента времени
Лента времени - хороший способ визуализировать информацию. Это временная шкала, на которую в хронологической последовательности наносятся даты событий. К каждому эпизоду можно добавить изображения, видео, ссылки на веб-ресурсы. С помощью лент времени (цифровых хроник) можно рассказать о биографии и творчестве писателя, истории родного города и о многом другом.
На просторах Интернета более десятка онлайн-сервисов для создания таких цифровых хроник. Один из самых простых и функциональных - наш знакомыйH5P.
Лента времени состоит из двух блоков. Первый – это временная шкала с событиями, которые привязаны к конкретным датам. Второй блок – это слайдер, который отображает подробный контент каждого события: тексты, фото, ссылки на различные медиа (видео, аудио, контент из соцсетей).
Встречают по одёжке обложкеИтак, создаём ленту времени. Для начала регистрируемся в сервисе, если впервые решили его использовать (подробнее о регистрации - здесь). Нажимаем “Create New Content”.
Придумываем название будущей работе (Title). Выбираем из выпадающего списка подходящий шаблон - “Timeline”.
В графу “Headline” вписываем название ленты времени, которое будет отображаться на первом слайде. Дополнительные данные и описание можно разместить в графе “Body Text” (необязательно). В графе “Default zoom level” задается уровень масштабирования ленты времени: количество раз, в которое она будет уменьшаться / увеличиваться при нажатии на неё. По умолчанию масштабирования нет (0). На обложку можно добавить изображение (не более 16 Mb) и установить размер ленты времени по высоте (по умолчанию - 600).
Теперь наносим на график временные точки. У каждого события на ленте времени указываем даты начала и окончания в формате ГГГГ, ММ, ДД. Например, дата 4 октября 1916 года будет выглядеть вот так: 1916,10,04 (без пробелов). Минимальное требование сервиса - указать год начала события.
Потом даём название событию, добавляем описание и ключевые слова (тэги).
В разделе “Asset” добавляем ссылки на изображение (да-да, картинки добавляются из Сети по ссылке) и другие медиа (контент из Twitter и Flickr, видео из YouTube и Vimeo, Google-карты и аудио из SoundCloud). К одному эпизоду можно прикрепить один объект (либо видео, либо картинку, либо что-то другое).
Чтобы добавить на график новое событие, нажимаем “Add item”. Количество событий не ограничено.
Ссылку на ленту времени можно взять вверху из строки браузера в режиме просмотра (View). Для того, чтобы получить код для встраивания на страницу сайта или блога, нажимаем внизу “Embed” (не забудьте указать в открывшемся окошке размеры работы в пикселях, чтобы она вписалась в блог).
0 Комментарии