---
title: "Інтерактивний контент H5P"
canonical: "https://docs.mocotms.com/space/UAUGDLEARN/21889063/%D0%86%D0%BD%D1%82%D0%B5%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9%20%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%20H5P"
format: markdown
---
За допомогою цього плагіна ви зможете додавати до ваших курсів різноманітний інтерактивний контент.  
Після встановлення плагіна у меню додавання діяльностей та ресурсів у вас з'явиться діяльність** Інтерактивний контент**.


![1.png](media://43c20d20-e2d1-4430-9a40-8597f709077e)


Додаємо до курсу діяльність** Інтерактивний контент**, потім переходимо до його редагування.


![2.png](media://4f634ce2-5031-493e-a629-6cf72cf3ffb0)


![3.png](media://76cf2954-a8d2-4b9c-b2e3-081e851e0fd2)


Як тільки ви відкриєте H5P Hub — ви отримаєте список усіх типів контенту, які доступні для встановлення. Натисніть **Отримати** для будь-якого типу контенту, щоб перейти на сторінку відомостей про тип контенту.


![4.png](media://2328cf2c-9aa5-48ff-88bf-1c0585a6e7a3)


На *деталі типу вмісту* сторінки ви можете прочитати докладну інформацію про кожен тип вмісту див. Screenshoots та прикладів використання. Натисніть **Встановити**, щоб встановити вибраний тип контенту.


![5.png](media://86b2d707-1bbf-4d30-b000-c8e2b9144627)


Тип контенту тепер встановлений та готовий до використання. Натисніть **Використовувати**, щоб відкрити редактор і розпочати створення вмісту.


![6.png](media://8cca3645-742e-4ba2-83c8-27a7dce9111e)


Є два списки типів контенту на вибір: Все і Мої типи контенту.  
**Мої типи контенту **надасть вам список усіх типів контенту, які ви встановили на своєму сайті.  
**Все** надасть вам список усіх доступних типів контенту H5P. Всі нові види контенту, які ми випускаємо, доступні для встановлення тут.


![7.png](media://5d286c88-f6f3-4b7c-98be-827ec0af80f7)


Коли поруч із типом контенту стоїть мітка **Доступні оновлення** — ми випустили для нього оновлення.  
Натисніть кнопку **Оновити** на сторінці відомостей про тип контенту, щоб отримати останні оновлення!


![8.png](media://968e9967-0946-4164-bf1e-95459890f058)


Використовуючи H5P Hub, можна завантажувати існуючий контент h5p. Клацніть на вкладці **Завантажити **вгорі, щоб завантажити існуючий файл .h5p.


![10.png](media://390b6fbd-1038-42b8-8d3f-74c1d34c7a67)


1. Завершіть створення або завантаження вмісту H5P
2. Збережіть активність внизу форми


![9.png](media://8fc0b762-17aa-4a54-90d4-6cb39168d666)


**Вміст Інтерактивного контенту**

**Multiple choice** — множинний вибір.  
Питання типу множинний вибір найчастіше використовують у тестах. Питання з численним вибором можуть мати одну або кілька правильних відповідей.


![11.png](media://fdc06702-79e6-4ae3-acfd-e43d4fa454eb)


**Accordion** — акордеон  
Скоротіть обсяг видимого читачам тексту за допомогою цього інструменту. Читачі вирішують, які заголовки уважніше подивитися, натиснувши на заголовок. Добре підходить для швидкого огляду з додатковими поясненнями.


![12.png](media://7c030c67-eaa5-49d7-a190-a2aec51dc279)


**Arithmetic Quiz** — арифметична вікторина  
Створюйте арифметичні тести, що складаються з кількох варіантів відповідей. Все, що вам потрібно зробити, це вибрати тип (множення, віднімання тощо) та кількість питань. Ви можете відстежити результати та час, що витрачається учнями на рішення вікторини.


![13.png](media://4edd4e9e-fa5b-4924-a513-7dd1ee6e585f)


 **Chart** — діаграма.  
Потрібно уявити прості статистичні дані у графічному вигляді, не створюючи графіку вручну? Тоді діаграма – ваш вибір.


![14.png](media://9caf8865-e6a4-4cb6-8d75-b79f840c40af)


**Collage **— колаж  
Інструмент "Колаж" дозволяє організувати зображення в гармонійну композицію.


![15.png](media://cc2687bf-5b38-4283-b68c-8d01b6d038b5)


**Column** — колонка

Організуйте весь навчальний матеріал різного типу на одну тему. Ви можете розбавити текст лекції зображеннями, відео чи навіть тестами. Творці курсів можуть проявити творчий підхід, об'єднавши майже всі типи контенту за допомогою цього інструменту.


![16.png](media://545250f5-debb-4567-8e6e-a0a76c749ac7)


**Course Presentation** — презентація  
Презентації складаються зі слайдів з мультимедіа, текстом та різними типами інтерактивної взаємодії, такими як питання з кількома варіантами відповідей та інтерактивні відеоролики. Ви можете використовувати кілька слайдів, щоб розповісти про тему, а потім кілька слайдів, на яких перевіряються знання учня.


![17.png](media://377e1571-6667-4f5b-b0a0-b1527500aecd)


**Dialog Cards** — діалогові картки  
Діалогові картки можуть використовуватися як вправа, щоб допомогти учням запам'ятати слова, вирази чи речення. На лицьовій стороні картки є підказка для слова чи висловлювання. Повертаючи картку, учень виявляє відповідне слово чи вираз. Діалогові картки можна використовувати при вивченні мови або допомогти учням запам'ятати історичні події, формули або імена.


![18.png](media://8ac1dc37-ed0b-4320-823a-b8670650535a)


**Documentation Tool **— інструмент для створення документів  
Інструмент для створення документів дозволяє учневі ввести дані та створити документ із усіма введеними даними. Цей документ можна завантажити.


![19.png](media://cbef5d6d-4f12-4233-85ef-0a8520b2f999)


**Drag and Drop** — перетягування  
Перетягування дозволяє учню зв'язати кілька елементів та візуально встановити логічні зв'язки.


![20.png](media://14c01f53-171e-4ddb-ad19-027e25c186a0)


**Drag the Words **— перетягування слів  
Перетягування слів дозволяє творцю курсу створювати тексти з відсутніми фрагментами. Учень перетягує бракуючий фрагмент тексту в потрібне місце, щоб сформувати закінчений вираз.


![21.png](media://c9a0439d-71d1-47cf-9626-fb3424627a6a)


**Fill in the Blanks **— заповнення перепусток  
Учні додають пропущені слова до тексту. Учню можна показати рішення після заповнення всіх пропусків або після кожного пропуску залежно від налаштувань.


![22.png](media://922f9236-5822-463a-ae0a-7dd87b64e0ef)


**Find the Hotspot** — знайди «гарячу точку»  
Цей тип контенту дозволяє учням натискати на зображення та отримувати відгуки про те, чи було це правильно чи неправильно відповідно до завдання. Автор курсу завантажує зображення і виділяє різні «гарячі точки» на ньому. "Гарячі точки" можуть бути визначені як правильні або неправильні, і після натискання можна показати відповідний текст зворотного зв'язку.


![23.png](media://7448b5a8-2546-4592-820d-0d89d7a0e1b9)


**Guess the Answer** — вгадай відповідь  
Цей тип контенту дозволяє авторам завантажити зображення та додати відповідний опис. Учні можуть подумати і натиснути кнопку «Показати відповідь» під зображенням, щоб дізнатися правильну відповідь.


![24.png](media://23ffa33c-771e-44b2-b163-a81706c17326)


**Iframe Embedder** — вбудовування плаваючих кадрів  
Цей інструмент дозволяє легко створювати контент для H5P з існуючих програм JavaScript.  
**Interactive Video **— інтерактивне відео  
Додайте відео з поясненнями, додатковими фотографіями, таблицями та запитаннями. Запитання підтримують адаптивність, що означає, що ви можете перейти до іншої частини відео залежно від відповіді учня. Інтерактивні відео створюються та редагуються за допомогою інструмента розробки H5P у звичайному веб-браузері.


![25.png](media://fdabcf88-13bc-4322-b88f-526463c66955)


**Mark the Words** — виділи слова  
Цей інструмент дозволяє створювати тексти з певним набором правильних слів. Учень виділяє слова відповідно до завдання та отримує оцінку.


![26.png](media://ea5f1028-81e4-49cd-9431-d631ee9c8491)


**Memory Game** — гра на запам'ятовування  
Створюйте власні ігри на запам'ятовування з перевертанням карток і перевіряйте пам'ять учнів за допомогою цієї простої, але красивої HTML5-гри.


![27.png](media://c2d17268-52f5-42fe-9ea9-791cf7584cd1)


**Personality Quiz** — особистісний тест  
Цей інструмент дозволяє створити кілька запитань з відповідями, де кожна відповідь порівнюється з одним чи кількома предметами. Наприкінці тесту кінцевий користувач побачить, який предмет найкраще підходить. У результаті виходить тест на кшталт «Який ви герой книги» або «Який ви фрукт».


![28.png](media://0067a88e-60e6-41bb-8952-000581ef5221)


**Quiz (Question Set)** — вікторина  
Цей інструмент дозволяє створити послідовність різних типів питань, таких як «Множинний вибір», «Перетягування» та «Заповнення пропусків».  
**Single Choice Set** — питання з одним варіантом відповіді  
Цей інструмент дозволяє створювати послідовність питань із одним правильним варіантом відповіді. Учень отримує негайний зворотний зв'язок після надсилання кожної відповіді.  
**Summary** — висновки  
Цей інструмент допомагає учню запам'ятовувати ключову інформацію з тексту, відео або презентації, активно складаючи висновки з цієї теми. Коли учень заповнив висновки, відображається повний перелік вірних тверджень на тему.


![29.png](media://cda57903-7cce-4508-8276-4e964ec6c0ee)


**Timeline** — часова шкала  
Цей тип контенту H5P дозволяє розміщувати послідовність подій у хронологічному порядку. Для кожної події можна додати зображення та тексти. Ви також можете додати ресурси з Twitter, YouTube, Flickr, Vimeo, Google Maps та SoundCloud.


![30.png](media://21c0330f-1f49-46bc-afea-d57977346953)


**True/False Question** — питання типу «вірно/невірно»  
Питання типу «правильно/неправильно» - це простий і зрозумілий тип контенту, який може використовуватися сам по собі або вставлятися в інші типи контенту, такі як презентація. Складніше питання можна створити, додавши зображення або відео.


![31.png](media://8d7642ed-bcdb-41f9-aa1b-cb8d0a4fae37)


**Twitter User feed** — стрічка користувача Twitter  
Ви можете додати стрічку Twitter на свою сторінку. Відмінний спосіб додати соціальну активність і дозволити більшій кількості ваших учнів спілкуватися з вами в Twitter.


![32.png](media://839a7cb1-2291-49e8-9ae2-fe66e2098fb1)


**Image Hotspots** — «гарячі точки» на зображенні  
Цей інструмент дозволяє створювати зображення з інтерактивними гарячими точками. Коли учень натискає на «гарячу точку», відображається спливаюче вікно, що містить текст або відео.


![33.png](media://d4511c1a-d0c8-455f-87f3-f04c7564d480)


**Find Multiple Hotspots** — знайди кілька «гарячих точок»  
Цей інструмент дозволяє створювати тест з урахуванням зображення, де учень повинен знайти правильні «гарячі точки».


![34.png](media://02fd111a-774c-48a7-8f1e-a8bcb46feccb)


**Image Juxtaposition** — зіставлення зображень  
Цей інструмент дозволяє учням порівнювати два зображення в інтерактивному режимі.


![35.png](media://d98f3fc3-7f2d-48fc-8958-a94875737c33)


**Audio** — аудіо  
Завантажуйте аудіозаписи у форматі .mp3, .wav, .ogg або вкажіть посилання на аудіозапис.


![36.png](media://666dce90-da9e-4be6-af60-059700862c67)


**Audio Recorder** — аудіозапис  
Запишіть свій голос і відтворіть або завантажте WAV-файл аудіозапису.


![37.png](media://918c06db-3975-4ed6-9576-55f111cc6cf4)


**Speak the Words** — вимов слова  
Цей інструмент підтримується лише у браузерах, у яких реалізовано Web Speech API (браузери Chrome, крім Chrome для iOS). Вам потрібний мікрофон, щоб відповісти на запитання. Запитайте користувачів і запропонуйте їм відповісти, використовуючи свій голос. Ви можете вказати кілька відповідей. Користувач зможе побачити, як його слова витлумачили, і наскільки близько це було до правильних відповідей.


![38.png](media://0bca719e-af58-4eee-8b4f-dbf77afc640a)


**Agamotto (Image Blender)** — Агамотто  
Додайте кілька зображень, які потрібно дивитися послідовно. Наприклад, фотографії предмета, який змінюється з часом, схеми або карти, організовані в різні шари, або зображення, що розкривають дедалі більше деталей.


![39.png](media://04f283b2-61e0-47f8-84a0-ed04053b7752)


**Image Sequencing** — послідовність зображень  
Цей інструмент дозволяє творцю курсу додавати послідовність своїх зображень (і опис зображень) у гру в певному порядку. Послідовність зображень буде випадковою і гравцям доведеться впорядковувати їх відповідно до завдання.


![40.png](media://ce12cf39-826c-4968-8e1c-1d21a3c79302)


**Flashcards** — картки  
Цей тип контенту дозволяє створювати одну картку або набір карток, де на кожній картці є зображення у парі із запитанням. Учні повинні заповнити текстове поле, потім перевірити правильність свого рішення.


![41.png](media://705f48be-0270-4af0-8bbb-9676ed0d8166)


**Speak the Words Set** — кілька питань на кшталт «вимов слова»  
Цей інструмент підтримується лише у браузерах, у яких реалізовано Web Speech API (браузери Chrome, крім Chrome для iOS). Вам потрібний мікрофон, щоб відповісти на запитання. Запитайте користувачів і запропонуйте їм відповісти, використовуючи свій голос. Ви можете вибрати кілька відповідей. Користувач зможе побачити, як його слова витлумачили, і наскільки близько це було до правильних відповідей.


![42.png](media://0138a990-e3d3-452b-842d-06ade04d06a4)


**Image Slider **— слайдер зображень  
Уявіть ваші зображення у привабливому вигляді. Вам просто потрібно завантажити зображення та додати описи. Наступні два зображення завжди попередньо завантажені, тому перемикання між зображеннями зазвичай відбувається швидко та без затримок.


![43.png](media://df29b585-3018-47e9-a653-5901169ed1e1)


**Essay** — есе  
У цьому типі контенту автор курсу визначає набір ключових слів, які розкривають важливі аспекти теми. Ці ключові слова порівнюються з текстом, складеним учнем, і можуть використовуватися для негайного зворотного зв'язку — або запропонувати переглянути відповідь, якщо немає ключового слова, або підтвердити ідеї учня, якщо текст містить ключове слово.


![44.png](media://aa88c0c3-ad8a-43e2-96b8-67666ba87ee1)


**Image Pairing** — зіставлення зображень  
Зіставлення зображень - це проста і ефективна вправа, що вимагає від учнів зіставлення пар зображень. Оскільки не потрібно, щоб обидва зображення у парі були обов'язково однаковими, ви можете перевірити розуміння взаємозв'язку між двома різними зображеннями.


![45.png](media://a81b39e0-f9b7-4c62-a436-2d478008111e)


**Dictation **— диктант  
Ви можете додати аудіо зразки та ввести правильну транскрипцію. Ваші студенти можуть прослухати зразки та ввести те, що вони почули у текстове поле. Їхні відповіді будуть оцінюватися автоматично. При бажанні ви можете додати другий зразок, в якому може бути повільно вимовлена версія. Ви також можете встановити обмеження на частоту відтворення зразка та визначити, чи важлива пунктуація для оцінки.


![46.png](media://e982db1f-f219-457d-b9a3-8745231a8a44)


**Branching Scenario** — сценарій розгалуження  
Сценарій розгалуження дозволяє творцю курсу подати учням різноманітний інтерактивний контент на вибір. Вибір, який роблять учні, визначатиме наступний контент, який вони побачать. Може використовуватися для створення дилем, інтерактивних рольових ігор та самостійного навчання.


![47.png](media://d48957f2-bed1-4cdd-adf8-3c44a7236b1b)


**Virtual Tour (360) **— віртуальний тур  
Цей інструмент дозволяє створити віртуальний тур по приміщенню. Зображення можуть бути збагачені такими інтерактивними елементами, як пояснення, відео, звуки та інтерактивні запитання. Зображення створюють сцени, які можуть бути пов'язані між собою, щоб створити в користувача враження переміщення між приміщеннями або між різними точками в одному приміщеннями.


![48.png](media://7a1ea52f-2bb0-41ae-b594-df6ae493c942)