Добавление материала в шаг через iframe

С помощью HTML-редактора и тега iframe вы можете вставлять видео, презентации, веб-формы, графики и другие материалы со сторонних ресурсов в шаги курса.

Пример использования тега iframe в нашем курсе: https://stepik.org/lesson/94857/step/5.

Подробнее о добавлении видео через iframe – в нашей статье: https://help.stepik.org/article/54802.

Отметим, что в мобильном приложении Stepik материалы могут отображаться некорректно из-за отсутствия адаптации iframe.

Как добавить материалы со стороннего ресурса в свой курс на Stepik

  1. В режиме HTML-редактора добавьте тег iframe и укажите нужную ссылку для атрибута src:

    <iframe src="место для ссылки на материал"></iframe><br><br><br>

    Или скопируйте готовый код из специальной формы.
    Пример кода в Yandex Forms:
  2. Откройте шаг, в который хотите добавить материал, и нажмите кнопку Source (режим HTML-редактора):
  3. Вставьте скопированный код и добавьте другие материалы по желанию. После этого сохраните шаг.


С помощью атрибутов вы можете настроить размер добавленного материала в коде iframe.
Настройка размера может повлиять на некорректное отображение материала в приложении Stepik.

  • height= высота окна в пикселях;
  • width= ширина окна в пикселях.

Пример:

<iframe height="500" src="место для ссылки на материал" width="430"> </iframe>

Инструкция по добавлению аудиофайла в шаг представлена в нашей статье: https://help.stepik.org/article/54794.

Вы также можете встроить уроки со Stepik на сторонний ресурс – подробнее в нашей статье: https://help.stepik.org/article/54830.

Ниже мы расскажем, как добавить материал по iframe на примере презентации.

Как добавить презентацию через iframe

  1. Загрузить презентацию на Google Диск (https://drive.google.com/);
  2. Открыть презентацию, сохраненную в нужном формате, найти в меню пункт "Файл" – "Поделиться" – "Опубликовать в интернете":

  3. В открывшемся окне выбрать вкладку "Встроить" и скопировать весь код, который находится ниже:
  4. В шаге, где вы хотите поместить презентацию, в меню текстового редактора нажать кнопку Source, откроется HTML-редактор;
  5. Вставить весь код в поле HTML-редактора, это будет выглядеть следующим образом:

  6. Сохранить шаг.