Що таке iframe і як додати інтерактивні матеріали до курсу WeStudy

Ви підготували презентацію, знайшли вдалу інтерактивну вправу й створили анкету для студентів. Залишається об’єднати їх у зрозумілий урок. Через iframe зовнішній матеріал можна показати безпосередньо в курсі: студент працює з ним у навчальному середовищі, а викладач продовжує редагувати оригінал у звичному сервісі.

Що таке iframe простими словами

Iframe — це HTML-елемент, який вбудовує одну вебсторінку в іншу. Уявіть вікно всередині уроку: навколо залишається ваш курс, а всередині працює презентація, плеєр або вправа із зовнішнього сайту. Вміст завантажується з цього сервісу, а не перетворюється на файл WeStudy.

Звичайне посилання пропонує перейти на іншу сторінку. Iframe показує матеріал тут же. Наприклад, студент може гортати слайди або відповідати на запитання, залишаючись на сторінці навчального матеріалу. Конкретні можливості залежать від сервісу, який надав код.

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

Що можна додати до курсу WeStudy

У WeStudy є окремий тип матеріалу iFrame. Він допомагає доповнювати навчальну програму ресурсами, створеними в інших інструментах. Почніть із завдання уроку: що саме має зробити студент?

• Презентація для самостійного опрацювання. Студент переглядає слайди у власному темпі, а після них виконує коротке завдання. Приклад — презентація Google Slides.

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

• Інтерактивна вправа. Для мовного курсу це можуть бути картки чи тренування граматики. На скриншоті нижче показано приклад вправи Wordwall у редакторі WeStudy.

• Форма зворотного зв’язку. Вбудоване опитування Google Forms допоможе зібрати запитання перед заняттям або враження після модуля. Відповіді обробляються за правилами зовнішнього сервісу.

• Таблиця, календар або карта. Покажіть дані для аналізу, розклад консультацій чи місце практичного заняття, якщо сервіс дозволяє вбудовування.

Переглянути каталог iFrame-інтеграцій та інструкції для сервісів →

Умови доступу й можливість вбудовування відрізняються між сервісами та тарифами. Наявність посилання на ресурс ще не означає, що його можна показати через iframe.

Як додати iframe у WeStudy

1. Відкрийте потрібний курс і перейдіть до редагування його змісту. У потрібному модулі додайте новий матеріал.

2. У меню виберіть розділ iFrame та Інтеграції, а в ньому — iFrame.

3. Заповніть назву, короткий опис і зображення матеріалу. Назва має пояснювати навчальну дію: наприклад, «Потренуйте часові форми» замість «Зовнішній ресурс».

4. У сервісі, де створений контент, знайдіть команду вбудовування: Embed, «Вбудувати» або відповідну опцію в меню поширення. Скопіюйте повний HTML-код iframe.

5. У налаштуваннях матеріалу WeStudy відкрийте секцію iFrame та вставте код у поле для HTML-коду iframe-елемента.

6. Скористайтеся переглядом: перевірте завантаження, кнопки й зручність роботи. Налаштуйте проходження та оцінювання, якщо вони потрібні, і збережіть матеріал. Відкривайте доступ студентам після перевірки.

Так виглядає вибір iFrame-матеріалу в редакторі курсу WeStudy. Скриншот із бази знань платформи.

Відкрити покрокову інструкцію зі скриншотами →

Посилання й код для вбудовування — різні речі

Адреса сторінки з презентацією або вправою не завжди підходить для iframe. Сервіс може створювати спеціальну адресу для вбудовування та додавати потрібні параметри. Тому найнадійніший початок — готовий код із його меню Embed, а не самостійне перетворення звичайного посилання.

У коді src вказує адресу матеріалу, а title коротко описує його призначення. Розміри визначають область показу. Не змінюйте навмання службові параметри готового коду: від них можуть залежати кнопки, повноекранний режим і поведінка вбудованого сервісу.

Приклад: інтерактивна вправа в мовному курсі

Після пояснення Present Perfect запропонуйте студентам коротку вправу з картками. Додайте її як iFrame-матеріал і сформулюйте завдання: скласти п’ять речень, пояснити вибір часу та занотувати один складний випадок. Так зовнішня інтерактивність працює на конкретний результат уроку.

Реальний приклад із бази знань WeStudy: вправа відображається в центральній частині редактора, а код вбудовування — у панелі налаштувань праворуч.

Щоб оцінити навчальний результат, можна доповнити вправу окремим завданням у курсі: попросити надіслати речення або пояснення. Тоді викладач бачить, як студент застосував матеріал, а не лише те, що відкрив сторінку.

Чи передає iframe оцінки та прогрес

Саме вбудовування не означає автоматичного обміну оцінками. У WeStudy для iFrame-матеріалу є налаштування навчання та оцінювання: спосіб оцінювання проходження, XP-бали, участь у рейтингу та обов’язковість для завершення курсу. Але це не гарантує, що результат тесту із зовнішнього сервісу автоматично потрапить у звітність LMS.

Якщо вам потрібні відповіді, кількість спроб або підсумковий бал, заздалегідь перевірте спосіб їх отримання. Для контрольної роботи оберіть інструмент із підтвердженим обліком результатів або передбачте окрему перевірку викладачем. Iframe доречно використовувати як частину навчального сценарію, не приписуючи йому можливостей повноцінної інтеграції.

Чому вбудований матеріал може не відкриватися

• Заборонене вбудовування. Власник сайту може блокувати показ на інших доменах через X-Frame-Options або Content-Security-Policy. Потрібен дозволений спосіб вбудовування від самого сервісу.

• Неправильні права доступу. У викладача ресурс відкривається, бо він увійшов у свій обліковий запис, а студент бачить запит дозволу. Перевірте доступ із ролі студента.

• Скопійовано звичайне посилання. Поверніться до меню вбудовування та перевірте повноту коду.

• Незручний розмір. Занадто низька область або неадаптивний зовнішній матеріал можуть ускладнити роботу з телефона. Перевірте весь сценарій, а не лише перший екран.

Якщо сервіс не дозволяє iframe, залиште зрозуміле пряме посилання та поясніть, що студент має зробити після переходу. Це також корисний запасний шлях у разі тимчасового збою.

Як зробити iframe корисною частиною уроку

• Додайте коротку інструкцію перед матеріалом: мета, очікувана дія й орієнтовний час.

• Перевірте доступ як студент, зокрема без авторизації у вашому особистому акаунті зовнішнього сервісу.

• Відкрийте матеріал на телефоні: текст, кнопки та поля мають залишатися зручними.

• Заздалегідь визначте, як студент підтвердить виконання і де викладач побачить результат.

• Використовуйте матеріали, які маєте право поширювати, та не відкривайте зайві персональні дані заради вбудовування.

Почніть з одного ресурсу, який уже допомагає вашим студентам: презентації, відео або вправи. Додайте його до потрібного модуля WeStudy, перевірте шлях студента й пов’яжіть із практичним завданням. Тоді iframe допоможе зібрати змістовний урок із готових інструментів.

Знайти інструкцію для свого сервісу в каталозі WeStudy →

Джерела

WeStudy: каталог iFrame-інтеграцій

WeStudy: як додати iFrame до курсу

MDN: HTML-елемент iframe

MDN: обмеження вбудовування X-Frame-Options