Добавление материала в шаг через iframe
С помощью HTML-редактора и тега iframe вы можете вставлять видео, презентации, веб-формы, графики и другие материалы со сторонних ресурсов в шаги курса.
Пример использования тега iframe в нашем курсе: https://stepik.org/lesson/94857/step/5.
Подробнее о добавлении видео через iframe – в нашей статье: https://help.stepik.org/article/54802.
Отметим, что в мобильном приложении Stepik материалы могут отображаться некорректно из-за отсутствия адаптации iframe.
Как добавить материалы со стороннего ресурса в свой курс на Stepik
- В режиме HTML-редактора добавьте тег iframe и укажите нужную ссылку для атрибута src:
<iframe src="место для ссылки на материал"></iframe><br><br><br>
Или скопируйте готовый код из специальной формы.
Пример кода в Yandex Forms:
- Откройте шаг, в который хотите добавить материал, и нажмите кнопку Source (режим HTML-редактора)
- Вставьте скопированный код и добавьте другие материалы по желанию. После этого сохраните шаг.
С помощью атрибутов вы можете настроить размер добавленного материала в коде 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
- Загрузить презентацию на Google Диск (https://drive.google.com/);
- Открыть презентацию, сохраненную в нужном формате, найти в меню пункт "Файл" – "Поделиться" – "Опубликовать в интернете":
- В открывшемся окне выбрать вкладку "Встроить" и скопировать весь код, который находится ниже:
- В шаге, где вы хотите поместить презентацию, в меню текстового редактора нажать кнопку Source, откроется HTML-редактор;
- Вставить весь код в поле HTML-редактора, это будет выглядеть следующим образом:
- Сохранить шаг.