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

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

Статьи:

Посмотреть еще

Дополняйте уроки дополнительными материалами, вставляя презентации, таблицы и опросы сразу в урок!


В этой статье:


Как вставить код iframe

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

Пример урока можно найти по ссылке.

Как вставить код в урок

Чтобы вставить код в урок, достаточно добавить элемент Текст, изображение, вставка кода

И на панели выбрать кнопку Вставка кода и вставить сам код.

Если Вы хотите изменить высоту или ширину вставляемого объекта (презентации, таблицы, игры и т.д.), то Вы можете добавить размеры к коду width="640" height="1000", записав любые значения в числах, подходящие вставляемым объектам.

Как найти код для вставки

Google Forms

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

Google Sheets

Откройте таблицу, которой хотите поделиться. Откройте в меню Файл - Поделиться - Опубликовать - Встроить и выберите, хотите ли Вы встроить только 1 лист или же весь документ. После подтверждения будет сгенерирован код, который можно использовать и добавлять в урок или задание на Kwiga. Не забудьте, что размеры встраиваемого объекта Вы можете регулировать параметрами width="640" height="1000" (указав любые желаемые значения).

Canva

Откройте презентацию или проект на 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