Главы и уроки

Права на создание и редактирование курсов и их элементов есть у следующих пользователей:

  • Администраторы
  • Группа HR-отдела
  • Группа авторов курсов
  • Пользователи, которым отдельно даны права на создание и редактирование курсов

Онлайн-курсы: основные понятия

Курс может включать в себя следующие элементы:

  1. Глава — тематический раздел или подраздел курса, который может содержать любое количество дочерних элементов (подразделов и уроков). Без вложенных уроков глава является обычным уроком.

  2. Урок — отдельная страница с информационным наполнением. Если в урок вложить другой урок, то он станет главой.

  3. Тест — инструмент оценки знаний, который создается на основе вопросов к конкретным урокам или ко всему курсу.

  4. Вопрос — элемент теста, который используется для оценки знаний и понимания сотрудниками пройденного материала. Вопросы могут быть привязаны к конкретным урокам/главам, так и к курсам в целом.

Добавление урока/главы (редактор «Сайты 24»)

Принцип создания уроков и глав одинаков. При добавлении нового раздела курса вы создаете урок. Урок становится главой только после добавления в него уроков или подглав. Создать новый урок/главу можно из двух мест: из описания курса и из текущей главы/урока.

Создание урока из описания курса

Для добавления урока нажмите на колесо шестеренки (⚙️) и выберите опцию «Добавить главу/урок».

На слайдере добавления урока/главы вы увидите следующие поля:

  1. Название. В этом поле укажите наименование главы/урока. Поле обязательно для заполнения.

  1. Символьный код. С помощью этого кода создается уникальная ссылка на главу/урок. По умолчанию символьный код совпадает с названием главы, но его можно указать вручную. Для этого кликните на кнопку справа от строки с названием или символьным кодом. После этого символьный код будет доступен для редактирования.

  1. Предпросмотр страницы. В это поле вы можете загрузить изображение, которое станет обложкой (превью) для данного урока/главы. Подробнее о превью написано ниже.

После заполнения нужных полей нажмите «Создать» — вы попадете на страницу для наполнения урока/главы контентом. Здесь выберите место расположения урока/главы: в корне курса или внутри другого урока/главы.

Если урок А привязывается к уроку Б, то урок Б, соответственно, становится главой.

Изменить привязку и расположение глав/уроков курса вы всегда сможете через интерфейс управления структурой курса.

Создание нового урока из текущего урока

Откройте нужный урок или главу курса и нажмите на шестеренку. Выберите опцию «Добавить урок/главу».

Затем выберите, куда именно добавить новый урок/главу:

  • На один уровень с текущим уроком. Урок будет добавлен сразу после текущего урока.

  • Вложенный в текущий урок. Урок будет добавлен внутрь текущего урока. Текущий урок станет главой.

При необходимости через данный интерфейс также можно прикрепить к уроку вопросы для тестов. Подробнее о работе с вопросами написано в отдельной статье.

Наполнение глав/уроков контентом

После добавления урока/главы можно приступать к созданию контента. Для этого выберите опцию «Добавить блок».

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

Подробнее о работе с редактором «Сайты24» вы можете узнать из этой статьи.

Редактирование урока/главы

Чтобы отредактировать урок или главу, откройте нужный слайдер и нажмите «Редактировать».

После этого вы попадете в режим редактирования контента главы/урока. Здесь вы можете добавлять или удалять блоки, создавать ссылки и так далее. Чтобы отредактировать название, символьный код и обложку (превью) главы, нажмите на шестеренку в правом верхнем углу.

Так вы попадете на слайдер для изменения урока/главы. Здесь в блоке «Превью страницы» появляется опция «Снять скрин».

Эта опция позволяет сделать скриншот верхней части главы/урока и использовать его в качестве превью.

Обратите внимание, что если в статью добавлены фото, которые хранятся на другом домене, то они не будут отображаться на скриншоте.

Превью урока/главы используется для более удобной работы с курсом. Увидеть превью можно при создании внутренней перелинковки курса.

Например, в тексте урока/главы можно сделать ссылку на другую страницу курса:

В этом случае откроется список глав и уроков данного курса, на которые можно сделать ссылку. Здесь главы и уроки будут отображаться вместе со своими обложками, что позволит лучше в них ориентироваться.

Использование HTML-кода для наполнения уроков

Помимо уже готовых блоков конструктор «Сайты24» позволяет добавлять в уроки HTML-код. Благодаря этому, имея знания HTML и CSS, в курсах можно создавать самый разнообразный контент и добавлять в уроки те блоки, которых нет в шаблонах конструктора.

Добавление HTML-блока

Чтобы добавить блок HTML-кода в курс откройте нужную главу курса и нажмите «Редактировать».

Затем наведите курсор на нужную часть страницы и нажмите на кнопку «Добавить блок».

В списке блоков выберите раздел «Другое» и блок «Онлайн-курс: HTML-код».

Наведите курсор на добавленный блок и нажмите «Редактировать».

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

Чтобы увидеть результат добавленного кода обновите страницу после сохранения слайдера.

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

Пример HTML-кода для этого блока вы можете скачать здесь. Обратите внимание, что представленный код не адаптирован для мобильного приложения Битрикс24.

Загрузка видео через HTML-блок

С помощью HTML-блоков вы также можете добавлять в уроки видеоматериалы. Хотя среди блоков Сайтов24 есть те, что позволяют вставлять ссылки на видео с сервисов Youtube, VK видео, RuTube или Vimeo, их не всегда бывает достаточно. Есть материалы, которые компания не считает нужным выкладывать в открытый доступ и хранит только на корпоративном портале. HTML-блок удобно использовать для добавления именно таких видео.

Предварительно загрузите нужное вам видео на корпоративный портал. Например, в раздел «Медиабиблиотека».

В медиабиблиотеке дважды кликните на загруженное видео и нажмите «Прямая ссылка на файл». Скопируйте появившуюся ссылку.

Затем вставьте в HTML-блок код показанный ниже и укажите в нем желаемую ширину видео и ссылку на него. Представленный код будет также корректно отображаться в мобильном приложении Битрикс24.

<div style="width:100%; max-width:960px; margin:0 auto;">
          <video
            width="100%"
            height="auto"
            controls
            autoplay
            playsinline
            style="display:block; border-radius:4px;">
            <source src="Ссылка на видео" type="video/mp4">
          </video>
        </div>
        

Примеры ширины для видео (max-width):

  • 960px

  • 640px

  • 560px

После завершения настройки нажмите «Сохранить» и обновите страницу. Видео будет отображено в уроке.