KWIGA центр підтримки LMS (навчання) Створення курса та марафона Вставка коду iframe

Вставка коду iframe

Статті:

Подивитися ще

Доповнюйте уроки додатковими матеріалами, вставляючи презентації, таблиці та опитування одразу в урок!


У цій статті:


Вставка коду iframe

Під час створення уроків на курсі у Вас є можливість використовувати код iframe, щоб доповнити свій урок різноманітними матеріалами зі сторонніх ресурсів, наприклад: Google Sheets, Google Forms, Wordwall, або ж додати презентації з Canva, genial.ly та інших сервісів, які дозволяють поділитись і вставити код на сторінку.

Якщо Ви використовуєте вставку коду на Kwiga, в учнів немає необхідності переходити на іншу сторінку. Є можливість заповнювати форму, дивитись презентацію відразу, в самому уроці:

Приклад уроку знайдете за посиланням.

Як вставити код в урок?

Щоб додати код в урок, достатньо додати елемент Текст, зображення, вставка коду.

І на панелі вибрати кнопку Вставка коду і вставити безпосередньо сам код.

Якщо Ви хочете змінити висоту чи ширину об'єкта, який додаєте (презентації, таблиці, ігри та т.д.), то Ви можете додати розміри до коду width="640" height="1000", вказати при цьому потрібні значення.

Як знайти потрібний код?

Google Forms

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

Google Sheets

Відкрийте таблицю, якою плануєте поділитись.

Далі в меню Файл - Поділитись - Опублікувати - Вставити і налаштуйте вставку одного листа або всього документу. Після підтвердження буде згенеровано код, який можна використовувати і додавати в урок чи завдання на Kwiga.

Не забудьте, що розміри об'єкта Ви можете регулювати параметрами width="640" height="1000" (вказати потрібні значення).

Canvas

Відкрийте презентацію чи проект на Canva, яку Ви б хотіли використовувати в матеріалах уроку чи квіза. Натисніть кнопку Поділитись - Більше - Вбудувати, дайте згоду, що презентація стане публічною та опублікуйте. Використайте код HTML.

Genial.ly

Переконайтесь, що Ви опублікували створену презентацію в genial.ly. Поділитись чернеткою чи Приватною презентацією не вдасться.

Далі просто натисніть на кнопку Поділитись, яка біля кнопки Презентувати, натисніть вставити і копіювати код Iframe.

Якщо бажаєте змінити розміри презентації, то Ви можете відредагувати код і змінити параметри height і width.

WordWall

Відкрийте матеріал, який бажаєте додати в урок чи завдання на Kwiga, натисніть кнопку Поділитись, виберіть іконку коду і тип Iframe (встановлений за замовчуванням). Скопіюйте код і додайте його на Kwiga.

Як завжди, Ви можете відредагувати розміри матеріалу за допомогою зміни значень width і height.

Quizlet

Відкрийте сторінку з квізом на Quizlet, та знайдіть кнопку поділитися Share,  а поряд з нею кнопку “три крапки”. При натисканні на цю кнопку оберіть пункт вбудувати Embed:

У відкритому вікні Ви можете змінити режим для навчання, та знизу скопіювати код, який і потрібно додати до сторінки з уроком (позначено жовтим):

Dropbox

Ви можете використовувати відео, які завантажені на Dropbox і вставляти їх в урок. Для цього вам необхідно отримати посилання на відео (це не те посилання, яке доступне при натисканні на кнопку поділитися на сервісі!) і після цього вставити її як iframe. 

Нижче показані кроки:

  1. Відкрийте свій Dropbox обліковий запис, знайдіть потрібний файл і натисніть Поділитися. Переконайтеся, що налаштування дозволяють будь-якій людині переглядати цей файл за посиланням, скопіюйте посилання на будь-який зручний для Вас редактор тексту.

  1. В кінці посилання Ви знайдете dl=0, цю частину необхідно замінити на raw=1. На скріншоті нижче показано два посилання - зверху те, що копіюється п1, і знизу перетворена посилання.

  1. Скопіюйте перетворене посилання (знизу) в адресний рядок у браузері та натисніть Перейти. Після цього в адресному рядку буде зовсім інше посилання - це і є посилання на файл, який потрібно використовувати в уроці.

  2. Відкрийте урок, додайте блок Текст, зображення, вставка коду там у уроці, де плануєте вставити відео. Натисніть на +, додати HTML код, Iframe, в місці посилання вставте код відео (отриманий у пункті 3):

Зверніть увагу, що перегляд відео в такому випадку відбувається з серверів Dropbox, швидкість та якість відтворення відео залежать виключно від сервісу Dropbox. Також сервіс Dropbox може застосовувати обмеження, з якими можна ознайомитись за посиланням bandwidth limitations.