# Контентные блоки

Здесь описаны все контентные блоки и их возможности.

# Как добавлять контентные блоки?

**Предусмотрено 3 варианта действий:**

##### Если вы в самом начале создания проекта

- Нажмите кнопку «Добавить блок». В выпадающем меню справа выберите нужный блок и он добавится в проект.  
    [![add_block_1.webp](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/add-block-1.webp)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/add-block-1.webp)  
    <span style="color: rgb(149, 165, 166);">*Нажмите на гифку, чтобы ее увеличить*</span>
- Выберите что-то из базовых блоков на самой странице проекта и нажмите для создания первого блока.  
    [![gif-4.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2022-12/gif-4.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2022-12/gif-4.gif)  
    <span style="color: rgb(149, 165, 166);">*Нажмите на гифку, чтобы ее увеличить*</span>

##### <span style="color: rgb(0, 0, 0);">**Если вы уже в процессе создания проекта (т.е. уже создан первый блок)**</span>

- Чтобы добавить новый блок в конец проекта, нажмите после последнего блока в проекта кнопку «Добавить блок». Выберите в выпадающем меню новый блок и он добавится.  
    [![add_block_3.webp](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/add-block-3.webp)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/add-block-3.webp)  
    <span style="color: rgb(149, 165, 166);">*Нажмите на гифку, чтобы ее увеличить*</span>
- Чтобы добавить новый блок в конкретное место, а не в конец проекта, нажмите кнопку «+» под тем блоком, после которого вы хотите добавить новый контент.  
    [![add_block_4.webp](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/add-block-4.webp)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/add-block-4.webp)  
    <span style="color: rgb(149, 165, 166);">*Нажмите на гифку, чтобы ее увеличить*</span>  
    <p class="callout info">Впрочем, таким же способом вы можете добавить контент и в конец проекта вместо предыдущего способа :)</p>

# Аккордеон

### Как добавить блок?

Через меню добавления контентных блоков. [Подробнее о блоках](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Скриншот кнопки в меню блока</summary>

![Image 001.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/image-001.jpg)

</details>### Как выглядит блок?

[![accordeon1-look-1.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon1-look-1.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon1-look-1.gif)

### Как работать с блоком?

Все просто. Создайте блок и начните заполнять пустые поля вашим контентом. В блоке «**Аккордеон**» можно добавить:

- заголовок каждой вкладки
- текст для каждой вкладки
- картинку для каждой вкладки

Картинки, которые вы добавили во «**Аккордеон**», всегда могут быть просмотрены учениками в полном размере.

<details id="bkmrk-%D0%97%D0%B0%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0"><summary>Заполнение блока</summary>

[![accordeon2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon2-create.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Еще есть возможность сгенерировать картинку с помощью нейросети.

<details id="bkmrk-%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8"><summary>Генерация картинки</summary>

 [![bandicam 2024-08-05 13-45-50-986.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-08/bandicam-2024-08-05-13-45-50-986.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-08/bandicam-2024-08-05-13-45-50-986.gif)

</details>
#### Как добавлять и удалять вкладки?

Количество вкладок в «**Аккордеоне**» не ограничено. Вы можете добавить любое количество, нажав на кнопку «**Добавить новую вкладку**» внизу. А удалить ненужные вкладки можно, нажав на значок «**Корзина**».

<p class="callout warning">Обратите внимание, что после удаления, восстановить вкладку невозможно.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%BE"><summary>Удаление и добавление вкладок</summary>

[![accordeon3-tabs.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon3-tabs.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon3-tabs.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как изменить внешний вид?

##### Текст

Вы можете отформатировать текст внутри вкладки [с помощью текстового редактора](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst). Так он будет выглядеть аккуратнее.

##### Подсказка

Вы можете изменить текст подсказки.

<details id="bkmrk-%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%BF%D0%BE%D0%B4"><summary>Изменение текста подсказки</summary>

[![accordeon4-info.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon4-info.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon4-info.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>##### Цвет

Цвет открытой вкладки наследуется из цветовой темы лонгрида.

### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- Для дополнительной информации: можно сделать аккордеон с одной вкладкой и <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">вынести </span>туда дополнительную информацию, которую не страшно пропустить в лонгриде. Например, историческую справку по какому-то процессу или познавательные факты.
- Для разделения информации на разные категории: например, кратко описать 3 основных продукта компании.

# Аудио

Блок «**Аудио**» позволяет добавить к лонгриду аудиофайл и настроить его внешний вид.

### Как выглядит блок?

[![audio0-look2.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/scaled-1680-/audio0-look2.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/audio0-look2.jpg)

### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-"><summary>Как выглядит блок в меню</summary>

[![audio01-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/scaled-1680-/audio01-menu.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/audio01-menu.jpg)

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0"><summary>Добавление блока</summary>

[![audio2-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/audio2-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/audio2-new.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить содержимое?

Чтобы добавить аудио, нажмите на кнопку «**Добавить аудиофайл**».

<p class="callout info">Вы можете добавить файл только в формате **MP3** и **WAV**, размером до **500 Мб**.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B0%D1%83"><summary>Добавление аудио</summary>

[![audio3ai-fill.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/audio3ai-fill.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/audio3ai-fill.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить внешний вид?

В блоке «**Аудио**» можно изменить:

- шаблон блока
- текст заголовка и описания (в 2-х типах)
- изображение

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%BF%D0%B5%D1%80%D0%B5%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D1%8F-"><summary>Шаблон блока</summary>

##### Шаблон блока

Вы можете выбрать один из 3-х шаблонов блока, имеющих разный внешний вид: "**Простой**", "**С заголовком и описанием**", "**Подкаст**".

[![audio4-type.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/audio4-type.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/audio4-type.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA-%D0%B8-%D0%BE%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5"><summary>Заголовок и описание</summary>

##### Заголовок и описание

В шаблонах "**<span class="text-sm">С заголовком и описанием</span>**" и "**Подкаст**" к аудиофайлу можно добавить заголовок и описание. Вы можете ввести свой текст, нажав на соответствующие поля. Вы также можете отформатировать текст в описании с помощью текстового редактора. [Подробнее о редакторе.](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst)

[![audio6-text.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/audio6-text.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/audio6-text.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-%D0%92-%D1%82%D0%B8%D0%BF%D0%B5-%D0%B1"><summary>Изображение</summary>

##### Изображение

В типе блока "**Подкаст**" к блоку добавляется изображение. Вы можете вставить своё собственное изображение, нажав на картинку.

[![audio5-image.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/audio5-image.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/audio5-image.gif)

Еще есть возможность сгенерировать картинку с помощью нейросети.

<details id="bkmrk-%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8"><summary>Генерация картинки</summary>

[![bandicam 2024-08-05 13-46-25-014.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-08/bandicam-2024-08-05-13-46-25-014.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-08/bandicam-2024-08-05-13-46-25-014.gif)

</details>

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Есть ли особенности у блока?

Да. Ученики могут менять скорость воспроизведения при прослушивании. А также они могут скачать загруженный в блок аудиофайл.

### Как я могу использовать этот блок?

Рекомендуем вам использовать блок для таких целей:

- Пояснение сложных вещей с помощью голоса.   
    Бывает так, что некоторые темы проще рассказать, чем описывать текстом.
- Оформление серии учебных подкастов в одно пространство-курс.  
    Согласитесь, ведь удобно, когда все материалы собраны в одном месте и систематизированы.
- Аудиопримеры.  
    Например, звук двигателя автомобиля при неисправной выхлопной системе.
- Задания, где нужно послушать материал и в следующем блоке выбрать ответ.

---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>

# Веб-контент

<div id="bkmrk-"></div>Блок «**Веб-контент**» позволяет добавить в лонгрид ссылку на стороннюю веб-страницу, заархивированное веб-приложение или SCORM-пакет, а также настроить размер блока.

### Как выглядит блок?

[![Веб-контент - Вид.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/scaled-1680-/veb-kontent-vid.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/veb-kontent-vid.jpg)

### Как добавить блок?

[![Веб-контент - Как добавить.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/veb-kontent-kak-dobavit.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/veb-kontent-kak-dobavit.gif)

<details id="bkmrk-%D0%9A%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B3%D0%BB%D1%8F%D0%B4%D0%B8%D1%82-%D0%B1%D0%BB%D0%BE%D0%BA-%D0%B2-"><summary>Как выглядит блок в меню</summary>

[![Веб-конструктор - меню.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/veb-konstruktor-menyu.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/veb-kontent-kak-dobavit.gif)

</details>### Как изменить содержимое?

<details id="bkmrk-%D0%9A%D0%B0%D0%BA-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C-%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D1%83"><summary>Как добавить ссылку</summary>

[![Веб-конструктор - Как добавить ссылку.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/veb-konstruktor-kak-dobavit-ssylku.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/veb-konstruktor-kak-dobavit-ssylku.gif)

</details>1\. Если вы планируете добавить ссылку на веб-страницу, перейдите на вкладку «Ссылка на сайт» и вставьте ссылку в поле ввода. В окне предварительного просмотра автоматически отобразится содержимое веб-страницы.

<p class="callout warning">Обратите внимание! Не все сайты дают разрешение на отображение своего содержимого таким образом. Если в окне предпросмотра ничего не отображается, вероятнее всего, сайт запрещает отображать содержимое по ссылке.</p>

Если вы собираетесь размещать лонгрид в СДО, то убедитесь, что у ваших учеников есть доступ во внешний интернет. Иначе встроенный по ссылке контент не будет работать.

<details id="bkmrk-%D0%9A%D0%B0%D0%BA-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C-%D0%B0%D1%80%D1%85%D0%B8%D0%B2"><summary>Как добавить архив</summary>

[![Веб-конструктор - Как добавить архив.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/veb-konstruktor-kak-dobavit-arxiv.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/veb-konstruktor-kak-dobavit-arxiv.gif)

</details>2\. Если вы хотите добавить html-файл, папку с веб-контентом (веб-приложение) или SCORM-пакет, убедитесь, что:  
 • загружаемый контент запускается с помощью файла index.html или story.html;  
 • загружаемый контент запакован в виде zip-архива (даже в тех случаях, когда вы загружаете один единственный файл).  
Перейдите во вкладку «Загрузка веб-объекта», нажмите «Выбрать файл».

### Как изменить внешний вид?

[![Веб-конструктор - Как изменить размер.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/veb-konstruktor-kak-izmenit-razmer.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/veb-konstruktor-kak-izmenit-razmer.gif)

  
В блоке «Веб-контент» можно изменить размеры окна отображения контента.

<p class="callout info">Обратите внимание, что ширина и высота видео меняются независимо друг от друга. Поэтому пропорции видео могут нарушиться. Заранее подбирайте высоту и ширину так, чтобы сохранить пропорции.</p>

<p class="callout info">Максимальный размер файла который можно загрузить в блок Веб-Контент: **500Mb**</p>

### Есть ли альтернативные варианты этого блока?

  
Для размещения видео с внешних ресурсов вы можете воспользоваться блоком «Видео». Для перехода к внешним веб-ресурсам подходит блок «Внешняя ссылка».

### Как я могу использовать этот блок?

  
Вы можете использовать этот блок для вставки видео из внешних источников, веб-страниц, игр, интерактивов, разработанных в других редакторах, и любого контента, сохранённого в формате html (а также Javascript и CSS).

# Видео

Блок «**Видео**» позволяет добавить в лонгрид ссылку на видео на стороннем видехостинге и настроить его размер.

### Как выглядит блок?

[![video0-look2.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/scaled-1680-/video0-look2.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/video0-look2.jpg)

### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Как выглядит блок в меню</summary>

[![video1-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/scaled-1680-/video1-menu.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/video1-menu.jpg)

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%A7%D1%82%D0%BE"><summary>Добавление блока</summary>

[![video2-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/video2-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/video2-new.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить содержимое?

Чтобы добавить видео, откройте видео на видеохостинге, найдите под ним кнопку «**Поделиться**», нажмите на неё и в открывшемся окне скопируйте ссылку на видео. Затем вставьте эту ссылку в соответствующее поле в блоке.

<p class="callout info">Поддерживается вставка видео со следующих сайтов: **YouTube**, **Vimeo**, **RuTube**, **Kinescope, VK Видео.**</p>

<details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-%D0%A7%D1%82%D0%BE"><summary>Добавление видео</summary>

[![video3-fill.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/video3-fill.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/video3-fill.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>---

<p class="callout success">Как добавить видео из ВК Видео вы можете посмотреть в нашей статье: [Как добавить видео с VK Видео](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavit-video-s-vk-video)</p>

<p class="callout warning">Если вы собираетесь размещать лонгрид в СДО, то убедитесь, что у ваших учеников есть доступ во внешний интернет. Иначе встроенное по ссылке видео не будет работать.</p>

### Как изменить внешний вид?

В блоке «**Видео**» можно изменить:

- размер видео

<details id="bkmrk-%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%80-%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-%D0%A7%D1%82%D0%BE%D0%B1%D1%8B-%D1%83"><summary>Размер видео</summary>

[![video4-size.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/video4-size.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/video4-size.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><p class="callout info">Обратите внимание, что ширина и высота видео меняются независимо друг от друга. Поэтому пропорции видео могут нарушиться. Заранее подбирайте высоту и ширину так, чтобы сохранить пропорции.</p>

### Есть ли альтернативные варианты этого блока?

Да. Вы можете добавить другой тип контентного блока «[Видео с компьютера](https://wiki.scroll-tool.ru/books/razdel-longridy/page/video-s-kompyutera)».

### Как я могу использовать этот блок?

Этот блок хорошо подходит для размещения видео из интернета.

---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>

# Видео с компьютера

Блок «**Видео с компьютера**» позволяет добавить в лонгрид видео, находящееся у вас на компьютере (видеофайл).

### Как выглядит блок?

[![vidcomp0-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/vidcomp0-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/vidcomp0-look.gif)

### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Как выглядит блок в меню</summary>

[![vidcomp0-menu1.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/scaled-1680-/vidcomp0-menu1.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/vidcomp0-menu1.jpg)

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%A7%D1%82%D0%BE"><summary>Добавление блока</summary>

[![vidcomp2-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/vidcomp2-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/vidcomp2-new.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить содержимое?

Чтобы добавить своё видео, наведите курсор на видео по умолчанию. Сверху появится чёрная полоса. Нажмите на неё и выберите нужный файл в проводнике.

<p class="callout info">Вы можете добавить файл любого формата, размером до **500 Мб**.</p>

<details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-%D0%A7%D1%82%D0%BE"><summary>Добавление видео</summary>

[![vidcomp3-fill.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/vidcomp3-fill.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/vidcomp3-fill.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

<p class="callout success">Рекомендуем вам сжимать видео прежде, чем загружать его. Это можно сделать в разных программах, например, в бесплатной программе «[Handbrake](https://wiki.scroll-tool.ru/books/podborka-servisov/page/handbrake)».</p>

</details>
### Как изменить внешний вид?

В блоке «**Видео с компьютера**» можно изменить:

- размер

<details id="bkmrk-%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%80-%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-%D0%A7%D1%82%D0%BE%D0%B1%D1%8B-%D1%83"><summary>Изменение размера</summary>

Чтобы изменить размер видео, двигайте ползунок ширины в правую или левую сторону. Или просто нажимайте на него в нужном месте. Текущая ширина указана в пикселях слева от ползунка. При изменении размера начальные пропорции сохраняются.

[![vidcomp5-size.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/vidcomp5-size.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/vidcomp5-size.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как настроить?

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

По умолчанию скачивание видео разрешено. Чтобы его запретить, поставьте галочку в соответствующем поле в блоке.

<details id="bkmrk-%D0%97%D0%B0%D0%BF%D1%80%D0%B5%D1%82-%D1%81%D0%BA%D0%B0%D1%87%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B2%D0%B8"><summary>Запрет скачивания видео</summary>

[![vidcomp4-nodownload.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/vidcomp4-nodownload.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/vidcomp4-nodownload.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Есть ли особенности у блока?

Да. Ученики могут менять скорость воспроизведения при просмотре. И использовать функцию "Картинка в картинке" для более удобного просмотра параллельно с другими действиями. Также они могут скачать загруженный файл, но эту опцию можно отключить в настройке.

### Есть ли альтернативные варианты этого блока?

Да. Вы можете добавить другой тип контентного блока [«Видео»](https://wiki.scroll-tool.ru/books/razdel-longridy/page/video).

### Как я могу использовать этот блок?

Этот блок хорошо подходит для размещения собственных видеороликов.

---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>

# Вкладки

### Как добавить блок?

Через меню добавления контентных блоков. [<span style="color: rgb(35, 111, 161);">Подробнее о блоках</span>.](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki)

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Скриншот кнопки в меню блока</summary>

[![tab_1.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/tab-1.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/tab-1.png)

</details>### Как выглядит блок?

[![tabs1-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/tabs1-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/tabs1-look.gif)

### Как работать с блоком?

Все просто. Создайте блок и начните заполнять пустые поля вашим контентом. В блоке «**Вкладки**» можно добавить:

- заголовок каждой вкладки
- текст для каждой вкладки
- картинку для каждой вкладки

Картинки, которые вы добавили во «**Вкладки**», всегда могут быть просмотрены учениками в полном размере.

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Создание и заполнение блока</summary>

[![tabs2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/tabs2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/tabs2-create.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Использование изображений

<details id="bkmrk-%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8"><summary>Загрузка изображения</summary>

</details>

Еще есть возможность сгенерировать картинку с помощью нейросети.

<details id="bkmrk-%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-%C2%A0"><summary>Генерация картинки</summary>

[![bandicam 2024-08-05 14-08-09-590.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-08/bandicam-2024-08-05-14-08-09-590.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-08/bandicam-2024-08-05-14-08-09-590.gif)

</details>

#### Как добавлять и удалять вкладки?

Количество вкладок в блоке «**Вкладки**» не ограничено. Вы можете добавить любое количество, нажав на кнопку «**Добавить новую вкладку**» внизу. А удалить ненужные вкладки можно, нажав на значок «**Корзина**».

<p class="callout warning">Обратите внимание, что после удаления, восстановить вкладку невозможно.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%BE"><summary>Удаление и добавление вкладок</summary>

[![tabs3-tabs.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/tabs3-tabs.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/tabs3-tabs.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как изменить внешний вид?

##### Текст

Вы можете отформатировать текст внутри вкладки с помощью текстового редактора. [<span style="color: rgb(35, 111, 161);">Подробнее о редакторе.</span>](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst)

##### Подсказка

Вы можете изменить текст подсказки.

<details id="bkmrk-%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%BF%D0%BE%D0%B4"><summary>Изменение текста подсказки</summary>

[![tabs4-info.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/tabs4-info.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/tabs4-info.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>##### Цвет

Цвет активной вкладки наследуется из цветовой темы лонгрида.


### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- Для разделения информации на разные категории.  
    Например, кратко описать 3 основных продукта компании.
- Для пошаговых пояснений.  
    1 вкладка = 1 шаг.

# Внешняя ссылка

Блок «**Внешняя ссылка**» позволяет добавить к лонгриду ссылку на сайт или файл, оформив её в виде отдельной кнопки с настраиваемым внешним видом.

### Как выглядит блок?

[![link0-view.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-01/link0-view.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-01/link0-view.gif)

### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%C2%A0"><summary>Как выглядит блок в меню</summary>

[![link1-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-01/scaled-1680-/link1-menu.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-01/link1-menu.jpg)

</details><details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Добавление блока</summary>

[![link2-add.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-01/link2-add.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-01/link2-add.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как вставить ссылку?

Чтобы добавить ссылку, вставьте её в специальное поле «**Ссылка**». Не забудьте также добавить текст на кнопку, чтобы ваши ученики поняли, куда они попадут, когда нажмут на неё.

<details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8-%D0%B8-"><summary>Добавление ссылки и текста</summary>

[![link3-link.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-01/link3-link.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-01/link3-link.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как настроить переход к другому разделу?

Чтобы настроить переход к другому разделу, вставьте номер раздела в специальное поле «**Ссылка**», в формате "**\#номер\_раздела**". Не забудьте также добавить текст на кнопку, чтобы ваши ученики поняли, куда они попадут, когда нажмут на неё.

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%BF%D0%B5%D1%80%D0%B5%D1%85%D0%BE%D0%B4%D0%B0-%D0%BA"><summary>Настройка перехода к другому разделу</summary>

[![image.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2025-08/scaled-1680-/9OEimage.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2025-08/9OEimage.png)

</details>### Как изменить внешний вид?

В блоке «**Внешняя ссылка**» можно изменить:

- цвет самой кнопки
- цвет текста и иконки
- иконку

<details id="bkmrk-%D0%98%D0%BA%D0%BE%D0%BD%D0%BA%D0%B0-%D0%98%D0%BA%D0%BE%D0%BD%D0%BA%D0%B0-%D0%95%D1%81%D0%BB%D0%B8-%D0%B2"><summary>Цвет кнопки</summary>

#### Цвет кнопки  


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

<p class="callout info">Добавить свои цвета в палитру можно в **Настройках лонгрида**. [Подробнее о своих цветах](https://wiki.scroll-tool.ru/link/47#bkmrk--0).</p>

[![button4-colour.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-12/button4-colour.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-12/button4-colour.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%A6%D0%B2%D0%B5%D1%82-%D0%A6%D0%B2%D0%B5%D1%82-%D0%92%D1%8B-%D0%BC%D0%BE%D0%B6%D0%B5%D1%82%D0%B5-"><summary>Цвет текста и иконки</summary>

#### Цвет текста и иконки  


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

Добавить свои цвета в палитру можно в **Настройках лонгрида**. [Подробнее о своих цветах](https://wiki.scroll-tool.ru/link/47#bkmrk--0).

[![button5-colourtext.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-12/button5-colourtext.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-12/button5-colourtext.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%98%D0%BA%D0%BE%D0%BD%D0%BA%D0%B0-%D0%98%D0%BA%D0%BE%D0%BD%D0%BA%D0%B0-%D0%92%D1%8B-%D1%82%D0%B0%D0%BA"><summary>Иконка</summary>

#### Иконка

Вы также можете выбрать иконку из встроенной базы иконок.

[![button6-icon.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-12/button6-icon.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-12/button6-icon.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как я могу использовать этот блок?

Рекомендуем вам использовать блок для таких целей:

- Перевести ученика на другой сайт.
- Поделиться с учеником файлом, хранящимся не на вашем компьютере.

---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>

# Вставка пропущенных слов

### Как добавить этот контентный блок?

[Через меню добавления контентных блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Скриншот кнопки в меню блока</summary>

[![Frame 1.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/nMVframe-1.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/nMVframe-1.png)

</details>### Как выглядит контентный блок?

[![Вставка пропущенных слов - Вид.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/vstavka-propushhennyx-slov-vid.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/vstavka-propushhennyx-slov-vid.png)

### Как работать с блоком?

Работа с блоком делится на 2 этапа:

1. Создайте блок и заполните его контентом.  
    Вставьте нужный текст и оформите пропуски.
2. Настройте влияние блока на результат лонгрида.

Разберем каждый этап.

#### Создание и заполнение блока

Вставьте в блок ваш текст. Чтобы оформите пропуски, определите, что в тексте должно быть пропущено. Затем эту часть выделите вот так: <span style="background-color: rgb(251, 238, 184);">{{Ваш пропущенный текст}}.</span>

<p class="callout warning">Если рядом с пропущенным словом есть знаки препинания, отделите их пробелом, например:   
Столица Франции – {{Париж}} .<span style="background-color: rgb(251, 238, 184);">  
</span></p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Пример оформления пропусков</summary>

[![Вставка-пропущенных-слов-Пример-оформления-пропусков_2.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/vstavka-propushhennyx-slov-primer-oformleniya-propuskov-2.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/vstavka-propushhennyx-slov-primer-oformleniya-propuskov-2.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Настройте влияние блока на оценку лонгрида

Для этого откройте меню настройки блока. В нем вы можете отметить, будет ли этот вопрос влиять на статус прохождения лонгрида и сколько <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">баллов</span><span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> </span>слушатель лонгрида получит за верный ответ.

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8-%D0%B2%D0%BB%D0%B8"><summary>Пример настройки влияния блока</summary>

[![Вставка-пропущенных-слов-Настройка-баллов_3.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/vstavka-propushhennyx-slov-nastroika-ballov-3.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/vstavka-propushhennyx-slov-nastroika-ballov-3.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Могу ли я изменить внешний вид блока?

Нет, внешний вид блока поменять нельзя. Ваша задача — только расставить пропуски в тексте.

### Есть ли особенности у блока?

Цветовое оформление блока наследуется из цветовой темы лонгрида.

### Как я могу использовать этот блок?

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

# Диалог

Блок «**Диалог**» позволяет добавить к лонгриду реплики и настроить их внешний вид.

### Как выглядит блок?

[![dial0-look.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/scaled-1680-/dial0-look.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/dial0-look.jpg)

### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%C2%A0"><summary>Как выглядит блок в меню</summary>

![dialog0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/dialog0-menu.jpg)

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%A7%D1%82%D0%BE"><summary>Добавление блока</summary>

[![dial2-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/dial2-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/dial2-new.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить содержимое?

В блоке «**Диалог**» можно добавить:

- текст реплики
- имя говорящего
- изображение говорящего
- отобразить текст с правой стороны

<p class="callout info">Вы можете использовать изображения в формате **JPG**, **PNG** и **SVG**.  
</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Заполнение блока</summary>

[![dial3-fill.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/dial3-fill.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/dial3-fill.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%A3%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B8-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8"><summary>Добавление и удаление реплик</summary>

Количество реплик в блоке «**Диалог**» не ограничено. Вы можете добавить любое количество, нажав на кнопку «**Добавить реплику**» внизу. А удалить ненужные реплики можно, нажав на значок «**Корзина**».

<p class="callout warning">Обратите внимание, что после удаления, восстановить реплику невозможно.</p>

[![dial4-add.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/dial4-add.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/dial4-add.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить внешний вид?

В блоке «**Диалог**» можно изменить:

- цвет реплики
- форматирование текста (вы можете отформатировать текст в имени говорящего и внутри реплики с помощью текстового редактора. [Подробнее о редакторе](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst).)

<details id="bkmrk-%D0%A6%D0%B2%D0%B5%D1%82-%D1%80%D0%B5%D0%BF%D0%BB%D0%B8%D0%BA%D0%B8-%D0%A6%D0%B2%D0%B5%D1%82-%D1%80%D0%B5"><summary>Цвет</summary>

##### Цвет реплики

Вы можете выбрать цвет для реплики из **палитры**. Откройте выпадающее меню палитры: там вам будут доступны цвета из базовой палитры и те цвета, которые вы добавили самостоятельно.

<p class="callout info">Добавить свои цвета в палитру можно в настройках лонгрида. [Подробнее о своих цветах](https://wiki.scroll-tool.ru/link/47#bkmrk--0).</p>

Также вы можете задать свой собственный цвет с помощью **HEX-кода**.

<p class="callout warning">Обратите внимание, что при вставке HEX-кода нельзя удалять символ решетки. Иначе цвет не будет работать.</p>

[![dial5-color.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/dial5-color.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/dial5-color.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как я отобразить текст с правой стороны?

Если вы использует нескольких персонажей в блоке "Диалог" то вы можете отобразить их по разным сторонам экрана, делается это с помощью настройки "Отображать справа".

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%BE%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8"><summary>Настройка отображение текста с правой стороны</summary>

![Снимок экрана 2025-05-05 060149.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2025-05/scaled-1680-/snimok-ekrana-2025-05-05-060149.png)

</details>### Как я могу использовать этот блок?

Рекомендуем вам использовать блок для таких целей:

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

---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>

# Заголовок

Блок «**Заголовок**» позволяет добавить к лонгриду крупный заголовок и настроить его внешний вид.

### Как выглядит блок?

[![header0-look.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/scaled-1680-/header0-look.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/header0-look.jpg)

### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-"><summary>Как выглядит блок в меню</summary>

[![header1-menu1.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/scaled-1680-/header1-menu1.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/header1-menu1.jpg)

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%A7%D1%82%D0%BE"><summary>Добавление блока</summary>

[![header2-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/header2-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/header2-new.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить содержимое?

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

<details id="bkmrk-%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%A7%D1%82%D0%BE%D0%B1"><summary>Введение текста</summary>

[![header3-fill.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/header3-fill.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/header3-fill.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить внешний вид?

В блоке «**Заголовок**» можно изменить:

- шрифт и размер текста
- цвет текста
- подсветку текста
- выравнивание текста
- добавить ссылку и перечеркивание

<p class="callout info">Цвет полосы под текстом наследуется из цветовой схемы лонгрида. [Подробнее о цветовой схеме](https://wiki.scroll-tool.ru/books/razdel-longridy/page/nastroika-vnesnego-vida-longrida#bkmrk--0).  
</p>

<details id="bkmrk-%D0%9F%D0%BE%D0%B4%D1%80%D0%BE%D0%B1%D0%BD%D0%B5%D0%B5-%D0%A8%D1%80%D0%B8%D1%84%D1%82-%D0%B8-%D1%80%D0%B0"><summary>Подробнее</summary>

##### Шрифт и размер текста

Шрифт и размер текста в заголовке можно установить в настройках лонгрида. Вы можете выбрать из базовых шрифтов или загрузить свой собственный. А также выбрать любой размер шрифта. [Подробнее о настройке шрифтов](https://wiki.scroll-tool.ru/books/razdel-longridy/page/nastroika-vnesnego-vida-longrida#bkmrk-%D0%A8%D1%80%D0%B8%D1%84%D1%82%D1%8B-%D0%BA%D1%83%D1%80%D1%81%D0%B0).

##### Другие параметры  


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

[![header4-color.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/header4-color.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/header4-color.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Есть ли альтернативные варианты этого блока?

Да. Вы можете добавить другой тип контентного блока «[Заголовок с подзаголовком](https://wiki.scroll-tool.ru/books/razdel-longridy/page/zagolovok-c-podzagolovkom)».

### Как я могу использовать этот блок?

Этот блок хорошо подходит для разделения урока на смысловые части. Например, чтобы выделить подтемы в уроке. Так слушатель лонгрида будет лучше ориентироваться в ваших материалах.

---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>

# Заголовок c подзаголовком

Блок «**Заголовок c подзаголовком**» позволяет добавить к лонгриду крупный заголовок и подзаголовок меньшего размера ниже, и настроить их внешний вид.

### Как выглядит блок?

[![headsub0-look.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/scaled-1680-/headsub0-look.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/headsub0-look.jpg)

### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%D0%9A%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B3%D0%BB%D1%8F%D0%B4%D0%B8%D1%82-%D0%B1%D0%BB%D0%BE%D0%BA-%D0%B2-"><summary>Как выглядит блок в меню</summary>

[![headsub1-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/scaled-1680-/headsub1-menu.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/headsub1-menu.jpg)

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%A7%D1%82%D0%BE"><summary>Добавление блока</summary>

[![headsub2-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/headsub2-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/headsub2-new.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить содержимое?

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

<details id="bkmrk-%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%A7%D1%82%D0%BE%D0%B1"><summary>Введение текста</summary>

[![headsub3-fill.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/headsub3-fill.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/headsub3-fill.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить внешний вид?

В блоке «**Заголовок c подзаголовком**» можно изменить:

- шрифт и размер текста
- цвет текста
- подсветку текста
- выравнивание текста
- добавить ссылку и перечеркивание

<details id="bkmrk-%D0%9F%D0%BE%D0%B4%D1%80%D0%BE%D0%B1%D0%BD%D0%B5%D0%B5-%D0%A8%D1%80%D0%B8%D1%84%D1%82-%D0%B8-%D1%80%D0%B0"><summary>Подробнее</summary>

##### Шрифт и размер текста

Шрифт и размер текста в заголовке можно установить в настройках лонгрида. Вы можете выбрать из базовых шрифтов или загрузить свой собственный. А также выбрать любой размер шрифта. [Подробнее о настройке шрифтов](https://wiki.scroll-tool.ru/books/razdel-longridy/page/nastroika-vnesnego-vida-longrida#bkmrk-%D0%A8%D1%80%D0%B8%D1%84%D1%82%D1%8B-%D0%BA%D1%83%D1%80%D1%81%D0%B0).

<p class="callout info">Обратите внимание, что отдельный шрифт, выбранный в настройках, в этом блоке будет применяться только к **заголовку**. А в **подзаголовке** будет использован тот же шрифт, что и в обычном тексте.  
</p>

##### Другие параметры  


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

[![headsub4-color.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/headsub4-color.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/headsub4-color.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Есть ли альтернативные варианты этого блока?

Да. Вы можете добавить другой тип контентного блока «[Заголовок](https://wiki.scroll-tool.ru/books/razdel-longridy/page/zagolovok)».

### Как я могу использовать этот блок?

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

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80"><summary>Пример</summary>

[![Screenshot_3.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/OpCscreenshot-3.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/OpCscreenshot-3.png)

</details>---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>

# Изображение

Блок «**Изображение**» позволяет добавить к лонгриду картинку и настроить её внешний вид.

### Как выглядит блок?

[![image1-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image1-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image1-look.gif)

### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-"><summary>Как выглядит блок в меню</summary>

![image0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/image0-menu.jpg)

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%A7%D1%82%D0%BE"><summary>Добавление блока</summary>

[![image2-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image2-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image2-new.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить содержимое?

Чтобы добавить своё изображение, нажмите на стартовую картинку и выберите нужный файл в проводнике.

<p class="callout info">Вы можете использовать изображения в формате **JPG**, **PNG**, **GIF**, **WEBP** и **SVG**.</p>

<p class="callout info">Максимальный размер файла изображения - **50Mb**</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F-%D1%80%D0%B0%D0%B7"><summary>Заполнение блока</summary>

[![image3-fill.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image3-fill.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image3-fill.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Еще есть возможность сгенерировать картинку с помощью нейросети.

<details id="bkmrk-%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8"><summary>Генерация картинки</summary>

[![bandicam 2024-06-24 09-59-08-886.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/bandicam-2024-06-24-09-59-08-886.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/bandicam-2024-06-24-09-59-08-886.gif)

</details>### Как изменить внешний вид?

В блоке «**Изображение**» можно изменить:

- размер картинки

<details id="bkmrk-%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0-%D0%A7%D1%82"><summary>Размер картинки</summary>

Чтобы изменить размер изображения, двигайте ползунок ширины в правую или левую сторону. Или просто нажимайте на него в нужном месте. Текущая ширина указана в пикселях слева от ползунка. При изменении размера исходные пропорции сохраняются.

[![image4-size.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image4-size.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image4-size.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как настроить?

Вы можете запретить ученикам **увеличивать изображение**. В таком случае они смогут посмотреть его только в том размере, который вы укажете.

По умолчанию увеличение изображения разрешено. Чтобы его запретить, нажмите на соответствующий переключатель.

<details id="bkmrk-%D0%97%D0%B0%D0%BF%D1%80%D0%B5%D1%82-%D1%83%D0%B2%D0%B5%D0%BB%D0%B8%D1%87%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BA%D0%B0"><summary>Запрет увеличения картинки</summary>

[![image5-download.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image5-download.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image5-download.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

<p class="callout info">**Совет**: если вы оставляете возможность для просмотра в полном размере **включенной**, то лучше не загружать в блок изображения с прозрачным фоном (такие изображения могут быть в формате png, gif, webp). Иначе при увеличении они не будут иметь фона.</p>

Пример с прозрачным фоном:

[![image3-transparent.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image3-transparent.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image3-transparent.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Есть ли альтернативные варианты этого блока?

Да. Вы можете добавить другой тип контентного блока [«Текст с изображением»](https://wiki.scroll-tool.ru/books/razdel-longridy/page/tekst-s-izobrazeniem).

### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- Чтобы повысить наглядность лонгрида.  
    Например, вы можете поместить в этот блок схему процесса или образец вашей продукции.
- Чтобы украсить лонгрид.  
    Блок не обязательно должен содержать полезную для обучения картинку. Можно разместить просто красивое изображение в тему лонгрида. Например, в конце урока можно поместить картинку, которая сообщает об окончании урока. Красиво и функционально!

---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>

# Изображение с метками

Блок «**Изображение с метками**» это интерактивный блок, позволяющий расставить метки на изображении. Его можно использовать, чтобы показать, как выглядят те или иные объекты.

### Как выглядит блок?

[![imgspot0-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot0-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot0-look.gif)

### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%C2%A0" style="box-sizing: border-box; outline-color: var(--color-primary); outline-width: 1px; margin: 0px 0px 1em; padding: 12px; border: 1px solid rgb(221, 221, 221); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: 400; font-stretch: inherit; font-size: 14px; line-height: inherit; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; vertical-align: baseline; display: block; color: rgb(68, 68, 68); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><summary style="box-sizing: border-box; outline-color: var(--color-primary); outline-width: 1px; margin: -12px; padding: 6px 12px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; background-color: rgb(238, 238, 238);">Как выглядит блок в меню</summary>

 [![map0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-08/scaled-1680-/map0-menu.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-08/map0-menu.jpg)

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%A7%D1%82%D0%BE"><summary>Добавление блока</summary>

[![imgspot2-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot2-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot2-new.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить содержимое?

В блоке «**Изображение с метками**» можно добавить:

- изображение
- метки
- подписи к меткам

<p class="callout info">Вы можете использовать изображения в формате **JPG**, **PNG**, **GIF**, **WEBP** и **SVG**.</p>

<details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-"><summary>Добавление картинки</summary>

Чтобы добавить своё изображение, нажмите на черную полосу над картинкой и выберите нужный файл в проводнике.

[![imgspot3-fill.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot3-fill.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot3-fill.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BC%D0%B5%D1%82%D0%BE%D0%BA-%D0%A7%D1%82%D0%BE"><summary>Добавление меток</summary>

Чтобы добавить метки на изображение, достаточно просто нажать на него в любом месте.

[![imgspot4-spots.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot4-spots.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot4-spots.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BF%D0%BE%D0%B4%D0%BF%D0%B8%D1%81%D0%B8-%D0%A7"><summary>Добавление подписи</summary>

Чтобы добавить подпись к метке, нажмите на метку. Откроется окошко, где вы сможете ввести свой текст. Нажмите на метку ещё раз, чтобы закрыть окошко.

[![imgspot5-label.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot5-label.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot5-label.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%A3%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BC%D0%B5%D1%82%D0%BA%D0%B8-%D0%A7%D1%82%D0%BE%D0%B1%D1%8B"><summary>Удаление метки</summary>

Чтобы удалить метку, нажмите на неё, откроется окошко для текста. Справа от текста вы увидите значок «**Корзина**». Нажмите на него, чтобы удалить эту метку.

[![imgspot6-deletespot.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot6-deletespot.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot6-deletespot.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%A8%D0%B8%D1%80%D0%B8%D0%BD%D0%B0-%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%80%D0%B0-%D0%92%D1%8B-%D0%BC%D0%BE"><summary>Ширина маркера</summary>

Вы можете изменить ширина маркера. По умолчанию стоит "**Адаптивно**", это значит, что после ввода текста размер маркера адаптируется по объем и формат текста, будет или широким или узким.  
Так же вы можете самостоятельно поставить "**Узко**" или **"Широко"**

[![image.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2025-11/scaled-1680-/image.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2025-11/image.png)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить внешний вид?

Вы можете настроить внешний вид меток. Можно выбрать:

- цвет метки
- иконку
- цвет иконки

Также в этом блоке вы можете ввести свой текст для подсказки к блоку.

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%80%D0%BE%D0%B2-%D0%A7"><summary>Настройка меток</summary>

##### Цвет метки

Вы можете выбрать цвет для метки из **палитры**. Откройте выпадающее меню палитры: там вам будут доступны цвета из базовой палитры и те цвета, которые вы добавили самостоятельно.

<p class="callout info">Добавить свои цвета в палитру можно в настройках лонгрида. [Подробнее о своих цветах](https://wiki.scroll-tool.ru/link/47#bkmrk--0).</p>

Также вы можете задать свой собственный цвет с помощью **HEX-кода**.

<p class="callout warning">Обратите внимание, что при вставке HEX-кода нельзя удалять символ решетки. Иначе цвет не будет работать.</p>

[![imgspot7-color.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot7-color.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot7-color.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

##### Иконка

Вы можете выбрать иконку из встроенной базы иконок. И выбрать её цвет, а также задать свой собственный цвет с помощью **HEX-кода**.

[![imgspot8-icon.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot8-icon.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgspot8-icon.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- Для различных карт, схем, планов. Можно добавить схему и отметить на ней нужные объекты, одновременно показывая, как они выглядят и давая дополнительную информацию.

---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>

# Карточки

### Как добавить блок?

Через меню добавления контентных блоков. [<span style="color: rgb(35, 111, 161);">Подробнее о блоках</span>.](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki)

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Скриншот кнопки в меню</summary>

![cards0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/cards0-menu.jpg)

</details>### Как выглядит блок?

[![cards1-look1.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/cards1-look1.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/cards1-look1.gif "Карточки - вид")

### Как работать с блоком?

Все просто. Создайте блок и начните заполнять пустые поля вашим контентом. В блоке «**Карточки**» можно добавить:

- текст/картинку для внешней стороны (обложки)
- текст/картинку для внутренней стороны

Текст для внешней и внутренней сторон имеет ограничение по количеству символов. И там, и там действует ограничение — не более **175** символов.

<p class="callout info">Рекомендуемый размер изображений — **238 на 350** пикселей.</p>

<p class="callout info">Максимальный размер загружаемого изображение - **50Мb**</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Создание и заполнение блока</summary>

[![cards2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/cards2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/cards2-create.gif "Карточки - создание")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Чтобы добавить картинку в карточку, нужно изменить её настройки. Нажмите на значок «**Шестерёнка**» и выберите шаблон с изображением. Затем загрузите картинку. Картинку можно добавить и на внешнюю, и на внутреннюю сторону карточки.

Картинки, которые вы добавляете в «**Карточки**», не могут быть просмотрены учениками в полном размере.

<details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD"><summary>Добавление изображения</summary>

[![cards3-image.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/cards3-image.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/cards3-image.gif "Карточки - картинки")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как добавлять и удалять карточки?

Количество карточек в блоке «**Карточки**» не ограничено. Вы можете добавить любое количество, нажав на кнопку «**Добавить карточку**» внизу. А удалить ненужные карточки можно, нажав на значок «**Корзина**».

<p class="callout warning">Обратите внимание, что после удаления, восстановить карточку невозможно.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%BE"><summary>Удаление и добавление карточек</summary>

[![cards4-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/cards4-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/cards4-new.gif "Карточки - новые")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как изменить внешний вид?

##### Текст

Вы можете отформатировать текст внутри карточки с помощью текстового редактора. [<span style="color: rgb(35, 111, 161);">Подробнее о редакторе.</span>](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst)

##### Подсказка

Вы можете изменить текст подсказки.

<details id="bkmrk-%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%BF%D0%BE%D0%B4"><summary>Изменение подсказки</summary>

[![cards5-info.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/cards5-info.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/cards5-info.gif "Карточки - подсказка")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>
### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- Для разделения информации на разные категории/этапы.  
    *Например, кратко описать 3 основных продукта компании.*

# Кнопка «Продолжить»

Кнопка «**Продолжить**» это блок, который скрывает остальную часть контента, находящуюся ниже него. Таким образом, эта кнопка помогает разделить контент на смысловые части в рамках одного урока. Это, с одной стороны, полезно для учащихся, так как они не увидят сразу весь урок целиком и не испугаются его большого объёма. С другой стороны, это позволяет автору лонгрида добавить активности (тестовые вопросы, опрос) в середину урока и сделать их прохождение обязательным. Так как остальная часть лонгрида будет заблокирована, пока учащийся не выполнит активность.

### Как добавить блок?

Через меню добавления контентных блоков. [<span style="color: rgb(35, 111, 161);">Подробнее о блоках</span>.](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki)

<details id="bkmrk-%C2%A0"><summary>Скриншот кнопки в меню блока</summary>

![Кнопка Продолжить.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/knopka-prodolzit.png)

</details>### Как выглядит блок?

[![next1-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/next1-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/next1-look.gif)

### Как работать с блоком?

Всё просто. Создайте блок и добавьте в него свой контент. В блоке «**Продолжить**» можно добавить:

- текст на заблокированной кнопке
- текст на разблокированной кнопке

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Создание и заполнение блока</summary>

[![next2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/next2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/next2-create.gif "Продолжить - создание")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Кроме этого, вы можете настроить кнопку. У неё может быть два состояния:

- кнопка всегда разблокирована и доступна для нажатия
- кнопка заблокирована до тех пор, пока не пройдены все активности

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%C2%A0"><summary>Настройка кнопки</summary>

[![next3-options.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/next3-options.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/next3-options.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Если вы выберете второй вариант, то кнопка будет не доступна для нажатия, пока учащиеся не пройдут все активности (тестовые вопросы, опросы) выше неё.

<details id="bkmrk-%D0%9A%D0%B0%D0%BA-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-%D0%B7%D0%B0%D0%B1%D0%BB%D0%BE%D0%BA%D0%B8"><summary>Как работает заблокированная кнопка</summary>

[![next4-block.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/next4-block.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/next4-block.gif "Продолжить - блок")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как изменить внешний вид?

##### Цвет

Цвет разблокированной кнопки наследуется из цветовой темы лонгрида. Заблокированная кнопка всегда остается серой.

### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- Для скрытия части урока, если он очень большой и учащихся может отпугнуть его объём.
- Для добавления обязательных активностей в середину урока, таких как: тестовые вопросы и опросы.

# Кнопка завершения просмотра

### Как добавить этот контентный блок?

[Через меню добавления контентных блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Скриншот кнопки в меню блока</summary>

[![Кнопка Завершения Просмотра - Вид.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/knopka-zaverseniya-prosmotra-vid.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/knopka-zaverseniya-prosmotra-vid.png)

</details>### Как выглядит контентный блок?

[![Кнопка Завершения просмотра - Вид.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-07/knopka-zaverseniya-prosmotra-vid.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/knopka-zaverseniya-prosmotra.png)

### Как он работает?

После нажатия кнопки «Завершить просмотр» блок передает в СДО статус успешного прохождения лонгрида и 100% прогресса.

<p class="callout warning">Кнопка завершения просмотра отображается в лонгриде сразу. Он не скрыт, в отличие от контентного блока «Результаты с оценкой».</p>

<p class="callout warning">Контентные блоки из серии «Завершение просмотра и блокеры» могут быть только один из трех. Добавляется только в самом последнем разделе, последним блоком.</p>

### Как работать с блоком?

Просто добавьте блок в лонгрид:)

### Настройка иконок и цвета в блока

Вы так же можете изменить цвет кнопки, цвет шрифта и добавить иконку из банка иконок.

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8"><summary>Настройка кнопки</summary>

[![Кнопка Завершения просмотра - Настройка блока.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-07/knopka-zaverseniya-prosmotra-nastroika-bloka.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-07/knopka-zaverseniya-prosmotra-nastroika-bloka.gif)

</details>
### Когда лучше использовать этот блок завершения просмотра?

Когда в лонгриде нет вопросов, влияющих на результат прохождения лонгрида, и вы сторонник простоты и минимализма, или хотите этот блок сочетать с каким-то другим блоком в лонгриде.

# Опрос

Блок «**Опрос**» похож на тестовые вопросы, но имеет одно существенное отличие. Ответы за этот блок не попадают в итоговый результат и не оцениваются. Ученик видит обратную связь сразу после своего ответа. Вы можете указать в ней правильное решение. Или добавить вопрос, на который нет правильного ответа. Например, спросить учеников об их личном опыте. Такие приёмы помогают учащимся создавать личную связь с информацией в лонгриде и лучше её запоминать.

### Как добавить блок?

Через меню добавления контентных блоков. [<span style="color: rgb(35, 111, 161);">Подробнее о блоках</span>.](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki)

<details id="bkmrk-%C2%A0"><summary>Скриншот кнопки в меню</summary>

![quiz0-menu1.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/quiz0-menu1.jpg)

</details>### Как выглядит блок?

[![quiz1-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/quiz1-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/quiz1-look.gif "Опрос - вид")

### Как работать с блоком?

Всё просто. Создайте блок и начните заполнять пустые поля вашим контентом. В блоке «**Опрос**» можно добавить:

- текст вопроса
- варианты ответа
- обратную связь
- изображение к вопросу

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Создание и заполнение блока</summary>

[![quiz2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/quiz2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/quiz2-create.gif "Опрос - создание")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>##### Обратная связь

Вы можете включить и отключить обратную связь для «**Опроса**». Для этого нажмите на переключатель в верхней части блока.

<details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B9-"><summary>Добавление обратной связи</summary>

[![quiz3-feedback.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/quiz3-feedback.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/quiz3-feedback.gif "Опрос - обратная связь")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Если вы не включите обратную связь, то после своего ответа ученик увидит стандартное сообщение с текстом по умолчанию. Это сообщение будет одинаковым независимо от того, какой вариант выберет ученик.

[![quiz4-default2.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/quiz4-default2.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/quiz4-default2.jpg)

##### Изображение

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

<p class="callout info">Совет: Изображения, добавленные в «**Опрос**», всегда будут отображаться в уроке в своём полном размере. Уменьшить их нельзя. Поэтому сразу подбирайте для блока небольшие по высоте изображения (рекомендуемая высота - не более 300 пикселей).</p>

[![quiz6-image.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/quiz6-image.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/quiz6-image.jpg)

Чтобы добавить изображение, раскройте поле «**Медиафайл к вопросу**» и загрузите изображение.

<details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD"><summary>Добавление изображения</summary>

[![quiz7-addimage.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/quiz7-addimage.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/quiz7-addimage.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><p class="callout warning">Картинки, которые вы добавляете в этот блок, всегда могут быть просмотрены учениками в полном размере.</p>

#### Как добавлять и удалять варианты ответа?

Количество вариантов ответа в блоке «**Опрос**» не ограничено. Вы можете добавить любое количество, нажав на кнопку «**Добавить вариант ответа**» внизу. А удалить ненужные варианты можно, нажав на значок «**Корзина**».

<p class="callout warning">Обратите внимание, что после удаления, восстановить вариант невозможно.</p>

<details id="bkmrk-%D0%A3%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B8-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8"><summary>Удаление и добавление вариантов</summary>

[![quiz5-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/quiz5-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/quiz5-new.gif "Опрос - новый")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как изменить внешний вид?

##### Текст

Вы можете отформатировать текст во всех полях с помощью текстового редактора. [<span style="color: rgb(35, 111, 161);">Подробнее о редакторе.</span>](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst)

##### Цвет

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

<p class="callout info">Совет: Мы рекомендуем дополнять блок «**Опрос**» блоком «**Кнопка "Продолжить"**». Это сделает ответ на опрос обязательным и избавит учащихся от соблазна его пропустить. [Подробнее о блоке «Продолжить».](https://wiki.scroll-tool.ru/books/razdel-longridy/page/knopka-prodolzit)</p>

### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- Для того, чтобы предложить учащимся подумать и акцентировать их внимание на важном учебном материале или идее.
- Для создания остановки (перерыва) в прохождении урока, чтобы дать учащимся возможность отдохнуть и переключиться.
- Для отделения одной темы от другой, так как остановка в виде вопроса будет служить хорошим маркером того, что закончилась одна тема и началась другая.
- Для закрепления пройденной информации по одной из тем внутри одного урока.

# Предупреждение

### Как добавить блок?

Через меню добавления контентных блоков. [<span style="color: rgb(35, 111, 161);">Подробнее о блоках</span>.](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki)

<details id="bkmrk-%C2%A0"><summary>Скриншот кнопки в меню блока</summary>

![warn0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/warn0-menu.jpg)

</details>### Как выглядит блок?

[![warning1-look.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/warning1-look.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/warning1-look.jpg)

### Как работать с блоком?

Всё просто. Создайте блок и добавьте в него свой контент. В блоке «**Предупреждение**» можно добавить:

- текст предупреждения

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Создание и заполнение блока</summary>

[![warning2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/warning2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/warning2-create.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как изменить внешний вид?

##### Текст

Вы можете отформатировать текст внутри вкладки с помощью текстового редактора. [<span style="color: rgb(35, 111, 161);">Подробнее о редакторе.</span>](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst)

##### Иконка

Вы можете выбрать иконку для предупреждения из большой базы иконок в конструкторе.

<details id="bkmrk-%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%BF%D0%BE%D0%B4"><summary>Изменение иконки</summary>

[![warning3-icons.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/warning3-icons.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list4-icons.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>##### Цвет

Цвет этого блока не наследуется из настроек лонгрида. Вы можете задать любой цвет и для фона предупреждения, и для его иконки. В настройках вам предлагается 5 цветов для фона и 2 цвета для иконки (чёрный и белый).

<details id="bkmrk-%D0%92%D1%8B%D0%B1%D0%BE%D1%80-%D1%86%D0%B2%D0%B5%D1%82%D0%B0-%D0%A7%D1%82%D0%BE%D0%B1%D1%8B-%D1%83%D0%B2"><summary>Выбор цвета</summary>

[![warning4-colors.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/warning4-colors.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list5-colors.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Также вы можете задать свой собственный цвет и для фона, и для иконки с помощью HEX-кода.

<p class="callout warning">Обратите внимание, что при вставке HEX-кода нельзя удалять символ решетки. Иначе цвет не будет работать.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B1%D0%BB"><summary>Добавление своего цвета</summary>

[![warning5-hex.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/warning5-hex.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list6-hex.gif)

*<span style="color: rgb(149, 165, 166);">Нажмите на демонстрацию, чтобы ее увеличить.</span>*

</details>### Как я могу использовать этот блок?

Рекомендуем вам использовать блок:

- Для акцентирования внимания на важном учебном материале или мысли.
- Для сообщений. Например, об окончании урока (хорошо сочетается с иконкой галочки).
- Для заданий. Например, открыть рабочую тетрадь на 20 странице и выполнить задание №3 (хорошо сочетается с иконкой документа).

[![Screenshot_2.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/ZuWscreenshot-2.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/ZuWscreenshot-2.png)

# Разделитель

Блок «**Разделитель**» позволяет визуально отделить части текста друг от друга. Его можно использовать, чтобы показать начало новой смысловой части внутри одного урока.

### Как выглядит блок?

[![divider1-view.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/divider1-view.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/divider1-view.jpg)

### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%C2%A0"><summary>Блок в меню</summary>

![divider0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/divider0-menu.jpg)

</details><details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Добавление блока</summary>

[![divider2-add.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/divider2-add.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/divider2-add.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить внешний вид?

В блоке «**Разделитель**» вы можете:

- выбрать тип разделителя
- выбрать иконку
- ввести текст
- настроить цвета
- настроить ширину

<details id="bkmrk-%D0%A2%D0%B8%D0%BF-%D1%80%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB%D0%B8%D1%82%D0%B5%D0%BB%D1%8F-%D0%A2%D0%B8%D0%BF-"><summary>Тип разделителя</summary>

#### Тип разделителя

Выберите один из 7 типов:

- сплошная/пунктирная линия без фигуры
- сплошная/пунктирная линия с фигурой по центру
- пустой разделитель (добавляет дополнительный отступ).

[![divider3-type.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/divider3-type.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/divider3-type.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%98%D0%BA%D0%BE%D0%BD%D0%BA%D0%B0-%D0%98%D0%BA%D0%BE%D0%BD%D0%BA%D0%B0-%D0%95%D1%81%D0%BB%D0%B8-%D0%B2"><summary>Иконка</summary>

#### Иконка

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

<p class="callout info">Если вы видите поле для ввода текста, то переключите тип поля на иконку.</p>

[![divider4-icon.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/divider4-icon.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/divider4-icon.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%A2%D0%B5%D0%BA%D1%81%D1%82-%D0%95%D1%81%D0%BB%D0%B8-%D0%B2%D1%8B-%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D0%BB"><summary>Текст</summary>

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

<p class="callout info">Если вы не видите поле для ввода текста, то переключите тип поля на текст.</p>

[![divider5-text.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/divider5-text.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/divider5-text.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

<p class="callout success">Введённый вами текст сохранится даже, если вы затем измените тип разделителя.</p>

</details><details id="bkmrk-%D0%A6%D0%B2%D0%B5%D1%82-%D0%A6%D0%B2%D0%B5%D1%82-%D0%92%D1%8B-%D0%BC%D0%BE%D0%B6%D0%B5%D1%82%D0%B5-"><summary>Цвета</summary>

#### Цвета

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

[![divider6-color.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/divider6-color.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/divider6-color.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

Вам будут доступны цвета из палитры по умолчанию. А также ваши собственные цвета, добавленные в палитру в **Настройках**. [Подробнее о своих цветах](https://wiki.scroll-tool.ru/link/47#bkmrk--0).

</details><details id="bkmrk-%D0%A8%D0%B8%D1%80%D0%B8%D0%BD%D0%B0-%D0%A8%D0%B8%D1%80%D0%B8%D0%BD%D0%B0-%D0%92%D1%8B-%D0%BC%D0%BE%D0%B6"><summary>Ширина</summary>

#### Ширина

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

[![divider7-width.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/divider7-width.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/divider7-width.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как я могу использовать этот блок?

Рекомендуем вам использовать блок:

- Для разделения логических частей урока.

# Ранжирование

Блок «**<span class="text-xs text-[#828794] font-medium">Ранжирование</span>**» это один из видов тестовых вопросов в нашем конструкторе. Его можно использовать, чтобы расставить объекты, этапы или действия в правильном порядке.

### Как добавить блок?

Через меню добавления контентных блоков. [<span style="color: rgb(35, 111, 161);">Подробнее о блоках</span>.](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki)

<details id="bkmrk-%C2%A0"><summary>Скриншот кнопки в меню</summary>

![Ранжирование-Меню.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/ranzirovanie-menyu.png)

</details>### Как выглядит блок?

[![testrange1-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange1-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange1-look.gif "Ранжирование - вид")

### Как работать с блоком?

Всё просто. Создайте блок и начните заполнять пустые поля вашим контентом. В блоке «**<span class="text-xs text-[#828794] font-medium">Ранжирование</span>**» можно добавить:

- текст вопроса
- текст и/или изображение для вариантов ответа
- обратную связь

<p class="callout warning">Картинки, которые вы добавляете в «**<span class="text-xs text-[#828794] font-medium">Ранжирование</span>**», всегда могут быть просмотрены учениками в полном размере.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Создание и заполнение блока</summary>

[![testrange2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange2-create.gif "Ранжирование - создание")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>У блока «**<span class="text-xs text-[#828794] font-medium">Ранжирование</span>**», как и у других тестовых вопросов, есть ряд специфичных настроек. Можно настроить:

- оценивается или не оценивается вопрос
- количество баллов за верный ответ
- обратную связь (включить/отключить, текст сообщений, показ правильного ответа)
- количество попыток

Давайте разберём каждую настройку.

##### Настройки прохождения

По умолчанию, все тестовые вопросы оцениваются, то есть учитываются в итоговом балле. И за каждый вопрос ученик получает 10 баллов.

Вы можете изменить эти настройки. То есть выбрать, будет ли вопрос учитываться в итоговом балле за лонгрид и сколько баллов ученик получит за правильный ответ. Для этого раскройте поле «**Показать настройки**», затем поле «**Настройки прохождения**» и нажмите на переключатель «**Вопрос влияет на оценку всего курса**». Затем введите баллы за верный ответ или оставьте число по умолчанию (10 баллов).

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%BF%D1%80%D0%BE%D1%85%D0%BE%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8"><summary>Настройка прохождения</summary>

[![testrange3-points.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange3-points.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange3-points.gif "Ранжирование - баллы")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>##### Обратная связь и попытки

По умолчанию, обратная связь выключена. Если вы оставите её выключенной, то у ученика будет всего 1 попытка на прохождение и после своего ответа он увидит стандартное сообщение. Это сообщение будет одинаковым, независимо от выбранного ответа.

[![testrange6-default.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/testrange6-default.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange6-default.jpg)

Вы можете включить обратную связь. Для этого раскройте поле «**Показать настройки**», затем поле «**Обратная связь и попытки**» и нажмите на переключатель «**Обратная связь после ответа**». Здесь вы можете ввести текст для обратной связи. И задать количество попыток.

<details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B9-"><summary>Добавление обратной связи</summary>

[![testrange4-feedback.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange4-feedback.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange4-feedback.gif "Ранжирование - фидбэк")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Вы также можете включить правильный ответ в обратную связь. Тогда ученик сможет увидеть правильный ответ после неверных ответов. Если все ответы ученика были неверными, то, после последней попытки, он увидит правильное решение. Верные ответы будут выделены зелёным цветом, а неверные — красным.

[![testrange5-correct1.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/testrange5-correct1.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange5-correct1.jpg "Ранжирование - правильный")

[![testrange5-correct2.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/testrange5-correct2.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange5-correct2.jpg "Ранжирование - правильный")

<details id="bkmrk-%D0%92%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3"><summary>Включение правильного ответа</summary>

[![testrange5-correct.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange5-correct.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange5-correct.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как добавлять и удалять варианты ответа?

Количество вариантов ответа в блоке «**<span class="text-xs text-[#828794] font-medium">Ранжирование</span>**» не ограничено. Вы можете добавить любое количество, нажав на кнопку «**Добавить вариант ответа**» внизу. А удалить ненужные варианты можно, нажав на значок «**Корзина**».

<p class="callout warning">Обратите внимание, что после удаления, восстановить вариант невозможно.</p>

<details id="bkmrk-%D0%A3%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B8-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8"><summary>Удаление и добавление вариантов</summary>

[![testrange7-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange7-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testrange7-new.gif "Ранжирование - новый")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как изменить внешний вид?

##### Текст

Вы можете отформатировать текст во всех полях с помощью текстового редактора. [<span style="color: rgb(35, 111, 161);">Подробнее о редакторе.</span>](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst)

##### Цвет

Цвет кнопок наследуется из цветовой темы лонгрида.

### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- Для контроля за тем, запомнили ли ваши ученики правильный порядок чего-либо.  
    *Например, чтобы показать правильные действия кладовщика при приёме продукции (заполнить документы, разложить товар, занести товар в базу).*

# Результаты без оценки

### Как добавить этот контентный блок?

[Через меню добавления контентных блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Скриншот кнопки в меню блока</summary>

[![Результаты без оценки-Меню.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/rezultaty-bez-ocenki-menyu.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/rezultaty-bez-ocenki-menyu.png)

</details>### Как выглядит контентный блок?

[![Результаты без оценки.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/rezultaty-bez-ocenki.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/rezultaty-bez-ocenki.png)

### Как он работает?

После нажатия кнопки «Завершить просмотр» блок передает в СДО статус успешного прохождения лонгрида и 100 баллов.

<p class="callout warning">Завершающий контентный блок отображается в проекте сразу. Он не скрыт, в отличие от контентного блока «Результаты с оценкой».</p>

<p class="callout warning">Контентные блоки из серии «Завершение просмотра и блокеры» могут быть только один из трех. Добавляется только в самом последнем разделе, последним блоком.</p>

### Как работать с блоком?

1. Добавьте блок.
2. Выберите шаблон блока.
3. Оформите текст и загрузите картинку (опционально).

[![no_grade_6.webp](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/no-grade-6.webp)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/no-grade-6.webp)


*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%B2%D0%BD%D0%B5%D1%88%D0%BD%D0%B5%D0%B3%D0%BE-%D0%B2"><summary>Настройка внешнего вида кнопки</summary>

[![bandicam 2024-07-05 01-14-39-555.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-07/bandicam-2024-07-05-01-14-39-555.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-07/bandicam-2024-07-05-01-14-39-555.gif)

</details>Еще есть возможность сгенерировать картинку с помощью нейросети.

<details id="bkmrk-%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8"><summary>Генерация картинки</summary>

</details>

### Когда лучше использовать этот блок завершения проекта?

Когда в проекте нет вопросов, влияющих на результат прохождения лонгрида.

# Результаты с оценкой

### Как добавить этот контентный блок?

Через меню добавления контентных блоков. [<span style="color: rgb(35, 111, 161);">Подробнее о блоках</span>.](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki)

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Скриншот кнопки в меню блока</summary>

![resscore0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/resscore0-menu.jpg)

</details>### Как выглядит контентный блок?

[![result1-look.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/result1-look.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/result1-look.jpg)

### Как он работает?

Проходные баллы считаются по контентным блокам из группы «Тесты»:

- Ранжирование
- Сопоставление
- Тестовый вопрос
- Вставка пропущенных слов

<p class="callout warning">Баллы считаются только за те контентные блоки, в которых выставлена настройка влияния на оценку лонгрида.[![Результаты с оценкой - Пример.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/rezultaty-s-ocenkoi-primer.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/rezultaty-s-ocenkoi-primer.png)</p>

В качестве 100 баллов (100%) принимается максимальное число баллов за все верные ответы в лонгрида.

[![Результаты с оценкой - Пример 2.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/rezultaty-s-ocenkoi-primer-2.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/rezultaty-s-ocenkoi-primer-2.png)

Например, у вас в лонгриде 10 оцениваемых контентных блоков. Каждый из них приносит 1 балл. В сумме все могут принести 10 баллов = 100%. Если вы хотите, чтобы проходной балл за лонгрид был 80%, то <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">в настройках завершающего блока укажите </span>80. Это будет равно 8 верным ответам (8 баллов за лонгрид).

При нажатии на кнопку «Завершить просмотр» считается набранный балл и сравнивается с проходным баллом в настройках блока. После сравнения в СДО передается статус лонгрида «Пройден» или «Не пройден» и набранный балл.

<p class="callout warning">Завершающий контентный блок по умолчанию скрыт. Он становится видимым, когда слушатель лонгрида ответит на все оцениваемые задания в лонгриде.</p>

<p class="callout warning">Контентный блок из серии «Завершение просмотра и блокеры» может быть только один на весь лонгрид. Добавляется только в самом последнем разделе, последним блоком.</p>

<p class="callout info">Если в вашем лонгриде 5 и меньше тестовых вопросов, для корректного подсчета результатов рекомендуем снизить процент до 75 (при 3-5 вопросах) или до 50 (при 2 вопросах).  
</p>

### Как работать с блоком?

1. Добавьте блок
2. Настройте проходной балл и количество попыток
3. Добавьте оформление для двух возможных исходов: «Курс пройден» и «Курс не пройден»

Разберем каждый этап.

#### Добавление и настройка блока

<details id="bkmrk-%D0%A7%D1%82%D0%BE%D0%B1%D1%8B-%D1%83%D0%B2%D0%B5%D0%BB%D0%B8%D1%87%D0%B8%D1%82%D1%8C-%D0%B4%D0%B5%D0%BC%D0%BE"><summary>Добавление и настройка блока</summary>

[![result-score2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/result-score2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/result-score2-create.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Оформление блока

Когда вы выставили проходной балл за лонгрид, оформите экран результата. У вас два возможных исхода: слушатель завершил лонгрид успешно или неуспешно. Настройте каждый из них.

Настройте каждый результат лонгрида: выберите шаблон, загрузите картинку (в шаблоне с картинкой) и впишите свое сообщение слушателю лонгрида.

<details id="bkmrk-%D0%A7%D1%82%D0%BE%D0%B1%D1%8B-%D1%83%D0%B2%D0%B5%D0%BB%D0%B8%D1%87%D0%B8%D1%82%D1%8C-%D0%B4%D0%B5%D0%BC%D0%BE-0"><summary>Оформление блока</summary>

[![result-score3-design.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/result-score3-design.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/result-score3-design.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Еще есть возможность сгенерировать картинку с помощью нейросети.

<details id="bkmrk-%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8"><summary>Генерация картинки</summary>

</details>

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8"><summary>Настройка кнопки</summary>

[![bandicam 2024-07-05 01-17-47-104.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-07/bandicam-2024-07-05-01-17-47-104.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-07/bandicam-2024-07-05-01-17-47-104.gif)

</details><p class="callout info">Кстати! Вы можете сообщить слушателю лонгрида его прогресс по лонгриду с помощью переменных.</p>

- \*!resultPercentage!\* – процент правильных ответов пользователя.
- \*!resultScore!\* – набранные пользователем баллы.
- \*!passPercentage!\* – минимально необходимый процент правильных ответов.
- \*!passScore!\* – балл, минимально необходимый для прохождения лонгрида.

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

<p class="callout success">**Как выглядит шаблон:** Вы успешно завершили курс. Ваш результат: 80% правильных ответов.  
**Как надо написать:** Вы успешно завершили курс. Ваш результат: \*!resultPercentage!\* % правильных ответов.</p>

<p class="callout success">**Как выглядит шаблон:** Вы успешно завершили курс. Ваш результат: 5 баллов из 10.  
**Как надо написать:** Вы успешно завершили курс. Ваш результат: \*!resultScore!\* баллов из (ваше количество баллов за лонгрид).</p>

<p class="callout danger">**Как выглядит шаблон:** Вы не набрали проходной балл. Ваш результат 5 баллов. Проходной балл: 10.  
**Как надо написать:** Вы не набрали проходной балл. Ваш результат \*!resultScore!\* баллов. Проходной балл: \*!passScore!\*.</p>

<p class="callout danger">**Как выглядит шаблон:** Вы не набрали проходной балл. Курс завершен на 70%, а необходимо набрать 80%.  
**Как надо написать:** Вы не набрали проходной балл. Курс завершен на \*!resultPercentage!\*%, а необходимо набрать \*!passPercentage!\*%.</p>

### Когда лучше использовать этот блок?

Когда в лонгриде есть оцениваемые вопросы и набранный балл нужно передавать в систему дистанционного обучения.

# Скачиваемый файл

### Как добавить этот контентный блок?

[Через меню добавления контентных блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Скриншот кнопки в меню блока</summary>

[![Frame 1.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/rNaframe-1.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/rNaframe-1.png)

</details>### Как выглядит блок?

[![image.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2025-04/scaled-1680-/ouBimage.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2025-04/ouBimage.png)

### Как работать с блоком?

Создайте блок и добавьте в него свой файл.

<p class="callout warning">Размер файла ограничен (не более 10 Мб).</p>

<p class="callout info">Имя файла будет отображаться в блоке. Учитывайте это. Ученик не увидит, название файла.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Пример создания и заполнения контентного блока</summary>

[![file_3.webp](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/file-3.webp)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/file-3.webp)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как заменить загруженный файл?

Просто загрузите новый файл.

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%BE"><summary>Пример замены файла</summary>

[![file_4.webp](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/file-4.webp)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/file-4.webp)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Могу ли я изменить внешний вид блока?

Нет.

### Есть ли особенности у блока?

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

### Как я могу использовать этот блок?

Этот блок хорошо подходит для загрузки файлов. Например, можно загрузить файл и дать слушателю лонгрида <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">задание</span><span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;"> </span>поработать с ними. Или загрузить памятку с кратким конспектом <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">в конце лонгрида</span>.

# Слайдер

### Как добавить блок?

Через меню добавления контентных блоков. [<span style="color: rgb(35, 111, 161);">Подробнее о блоках</span>.](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki)

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Скриншот кнопки в меню блока</summary>

![slider0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/slider0-menu.jpg)

</details>### Как выглядит блок?

[![slider1-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider1-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider1-look.gif)

### Как работать с блоком?

Создайте блок и добавьте в него свои изображения. То изображение, которое вы загрузите первым, будет идти первым и в самом слайдере.

<p class="callout info">Рекомендуемый размер изображения — 1000 на 600 пикселей.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Создание блока</summary>

[![slider2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider2-create.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Вы можете выбрать, смогут ли ученики увеличить их при нажатии.

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%A7%D1%82%D0%BE%D0%B1"><summary>Настройка блока</summary>

[![slider3-popup.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider3-popup.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider2-create.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><p class="callout info">Совет: Если вы оставляете возможность для просмотра в полном размере включенной, то лучше не загружать в блок изображения с прозрачным фоном (такие изображения могут быть в формате png, gif, webp). Иначе при увеличении они не будут иметь фона.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81-%D0%BF%D1%80%D0%BE%D0%B7%D1%80%D0%B0%D1%87%D0%BD%D1%8B%D0%BC-"><summary>Пример с прозрачным фоном</summary>

[![image3-transparent.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image3-transparent.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image3-transparent.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как удалять и передвигать изображения?

Количество изображений в «**Слайдере**» не ограничено. Вы можете добавить любое количество, нажав на кнопку «**Добавить изображение**». Удалить ненужные изображения можно, нажав на значок «**Корзина**». А переместить можно, нажимая на **стрелки**.

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%BE"><summary>Перемещение и удаление изображений</summary>

[![slider4-order.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider4-order.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider4-order.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как изменить внешний вид?

##### Подсказка

Вы можете изменить текст подсказки.

<details id="bkmrk-%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%BF%D0%BE%D0%B4"><summary>Изменение текста подсказки</summary>

[![slider5-info.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/slider5-info.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/accordeon4-info.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- для пошаговых инструкций
- демонстрации какого-то процесса
- группировки изображений по одному принципу

# Сопоставление

Блок «**Сопоставление**» это один из видов тестовых вопросов в нашем конструкторе. Его можно использовать, чтобы соотнести между собой разные объекты или понятия.

### Как добавить блок?

Через меню добавления контентных блоков. [<span style="color: rgb(35, 111, 161);">Подробнее о блоках</span>.](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki)

<details id="bkmrk-%C2%A0"><summary>Скриншот кнопки в меню</summary>

![testmatch0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/testmatch0-menu.jpg)

</details>### Как выглядит блок?

[![test-match1-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test-match1-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test-match1-look.gif "Сопоставление - вид")

### Как работать с блоком?

Всё просто. Создайте блок и начните заполнять пустые поля вашим контентом. В блоке «**Сопоставление**» можно добавить:

- текст вопроса
- текст/изображения для вариантов ответа
- обратную связь

<p class="callout warning">Картинки, которые вы добавляете в «**Сопоставление**», всегда могут быть просмотрены учениками в полном размере.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Создание и заполнение блока</summary>

[![test-match2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test-match2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test-match2-create.gif "Сопоставление - создание")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>У блока «**Сопоставление**», как и у других тестовых вопросов, есть ряд специфичных настроек. Можно настроить:

- оценивается или не оценивается вопрос
- количество баллов за верный ответ
- обратную связь (включить/отключить, текст сообщений, показ правильного ответа)
- количество попыток

Давайте разберём каждую настройку.

##### Настройки прохождения

По умолчанию, все тестовые вопросы оцениваются, то есть учитываются в итоговом балле. И за каждый вопрос ученик получает 10 баллов.

Вы можете изменить эти настройки. То есть выбрать, будет ли этот вопрос влиять на итоговый балл и сколько баллов ученик получит за правильный ответ. Для этого раскройте поле «**Показать настройки**», затем поле «**Настройки прохождения**» и нажмите на переключатель «**Вопрос влияет на оценку всего курса**». Затем введите баллы за верный ответ или оставьте число по умолчанию (10 баллов).

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%BF%D1%80%D0%BE%D1%85%D0%BE%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8"><summary>Настройка прохождения</summary>

[![testmatch3-score.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testmatch3-score.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testmatch3-score.gif "Сопоставление - баллы")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>##### Обратная связь и попытки

По умолчанию, обратная связь выключена. Если вы оставите её выключенной, то у ученика будет всего 1 попытка на прохождение и после своего ответа он увидит стандартное сообщение. Это сообщение будет одинаковым, независимо от выбранного ответа.

[![testmatch-default.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/testmatch-default.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testmatch-default.jpg)

Вы можете включить обратную связь. Для этого раскройте поле «**Показать настройки**», затем поле «**Обратная связь и попытки**» и нажмите на переключатель «**Обратная связь после ответа**». Здесь вы можете ввести текст для обратной связи. И задать количество попыток.

<details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B9-"><summary>Добавление обратной связи</summary>

[![testmatch4-feedback.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testmatch4-feedback.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testmatch4-feedback.gif "Сопоставление - фидбэк")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Вы также можете выбрать, будет ли ученику показан правильный ответ после его ошибки. Если вы включите эту функцию, то в случае, если все ответы ученика были неверными, после последней попытки он увидит правильное решение. Верные сопоставления будут выделены зелёным цветом, а неверные — красным.

[![testmatch5-correct1.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/testmatch5-correct1.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testmatch5-correct1.jpg)

[![testmatch5-correct2.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/testmatch5-correct2.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testmatch5-correct2.jpg)

<details id="bkmrk-%D0%92%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3"><summary>Включение правильного ответа</summary>

[![testmatch5-correct.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testmatch5-correct.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testmatch5-correct.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как добавлять и удалять варианты ответа?

Количество вариантов ответа в блоке «**Сопоставление**» не ограничено. Вы можете добавить любое количество, нажав на кнопку «**Добавить вариант ответа**» внизу. А удалить ненужные варианты можно, нажав на значок «**Корзина**».

<p class="callout warning">Обратите внимание, что после удаления, восстановить вариант невозможно.</p>

<details id="bkmrk-%D0%A3%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B8-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8"><summary>Удаление и добавление вариантов</summary>

[![testmatch7-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testmatch7-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/testmatch7-new.gif "Сопоставление - новый")

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как изменить внешний вид?

##### Текст

Вы можете отформатировать текст во всех полях с помощью текстового редактора. [<span style="color: rgb(35, 111, 161);">Подробнее о редакторе.</span>](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst)

##### Цвет

Цвет кнопок наследуется из цветовой темы лонгрида.

### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- Для вопросов, где можно соотнести одно понятие или явление с другим.

# Список

### Как добавить блок?

Через меню добавления контентных блоков. [<span style="color: rgb(35, 111, 161);">Подробнее о блоках</span>.](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki)

<details id="bkmrk-%C2%A0"><summary>Скриншот кнопки в меню блока</summary>

![list0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/list0-menu.jpg)

</details>### Как выглядит блок?

[![list1-look2.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list1-look2.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list1-look2.jpg)

### Как работать с блоком?

Все просто. Создайте блок и добавьте в него свой контент. В блоке «**Список**» можно добавить:

- общий заголовок для списка
- текст для каждого пункта списка

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Создание и заполнение блока</summary>

[![list2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list2-create.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как добавлять и удалять пункты списка?

Количество пунктов в блоке «**Список**» не ограничено. Вы можете добавить любое количество, нажав на кнопку «**Добавить элемент списка**» внизу. А удалить ненужные пункты можно, нажав на значок «**Корзина**».

<p class="callout warning">Обратите внимание, что после удаления, восстановить пункт списка невозможно.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%BE"><summary>Удаление и добавление пунктов</summary>

[![list3-items.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list3-items.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list3-items.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как изменить внешний вид?

##### Текст

Вы можете отформатировать текст внутри вкладки с помощью текстового редактора. [<span style="color: rgb(35, 111, 161);">Подробнее о редакторе.</span>](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst)

##### Иконки

Вы можете выбрать иконку для пунктов списка из большой базы иконок в конструкторе.

<details id="bkmrk-%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%BF%D0%BE%D0%B4"><summary>Изменение иконки</summary>

[![list4-icons.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list4-icons.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list4-icons.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>##### Цвет

Цвет этого блока не наследуется из настроек лонгрида. Вы можете задать любой цвет для фона иконок и для самих иконок. В настройках вам предлагается 6 цветов для фона и 2 цвета для иконок (чёрный и белый).

Если вы выберете светлый фон, то, возможно, цвет иконки стоит поменять на чёрный.

<details id="bkmrk-%D0%92%D1%8B%D0%B1%D0%BE%D1%80-%D1%86%D0%B2%D0%B5%D1%82%D0%B0-%D0%A7%D1%82%D0%BE%D0%B1%D1%8B-%D1%83%D0%B2"><summary>Выбор цвета</summary>

[![list5-colors.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list5-colors.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list5-colors.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Также вы можете задать свой собственный цвет с помощью HEX-кода как для фона, так и для самой иконки.

<p class="callout warning">Обратите внимание, что при вставке HEX-кода нельзя удалять символ решетки. Иначе цвет не будет работать.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B1%D0%BB"><summary>Добавление своего цвета</summary>

[![list6-hex.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list6-hex.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/list6-hex.gif)

*<span style="color: rgb(149, 165, 166);">Нажмите на демонстрацию, чтобы ее увеличить.</span>*

</details>### Как я могу использовать этот блок?

Рекомендуем вам использовать блок:

- для наглядного отображения последовательности действий
- акцента на важных моментах (выводы к уроку, разделу)

# Таблица

### Как добавить этот контентный блок?

[Через меню добавления контентных блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B4%D0%BE%D0%B1%D0%B0"><summary>Скриншот кнопки добавления блока в меню блоков</summary>

[![Frame 1.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/59nframe-1.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/59nframe-1.png)

</details>### Как выглядит этот контентный блок?

[![Screenshot_1.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/screenshot-1.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/screenshot-1.png)

### Могу ли я изменить его внешний вид?

Нет. Вы можете только отформатировать таблицу с помощью панели над ней.

[![Screenshot_2.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/8XHscreenshot-2.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/8XHscreenshot-2.png)

Кнопки сгруппированы по своему назначению. Разберем каждую группу:

<p class="callout info">Большинство кнопок работают относительно той строки или ячейки, в которой стоит курсор ввода. Т.е. если вы работаете со 2 строкой и нажмете «Добавить новую строку сверху», то строка добавится над 2 строкой таблицы.</p>

#### Работа со колонками

[![Screenshot_3.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/c1escreenshot-3.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/c1escreenshot-3.png)  
**Значения кнопок:**

- - - добавить колонку слева
        - добавить колонку справа
        - удалить выделенную колонку (или ту, в которой стоит курсор ввода)

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B"><summary>Пример работы</summary>

[![1.webp](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/xPP1.webp)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/xPP1.webp)

</details>---

#### Работа со строками  
[![Screenshot_4.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/screenshot-4.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/screenshot-4.png)  


**Значения кнопок:**

- - - добавить строку сверху
        - добавить строку снизу
        - удалить выделенную строку (или ту, в которой стоит курсор ввода)

---

#### Работа с ячейками  
[![Screenshot_5.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/screenshot-5.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/screenshot-5.png)

**Значения кнопок:**

- - - объединить выделенные ячейки
        - разбить выделенные ячейки

---

#### Работа с заголовками  
[![Screenshot_6.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/screenshot-6.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/screenshot-6.png)  


**Значения кнопок:**

- - выделить или снять выделение с первой колонки
    - выделить или снять выделение с первой строки

### Есть ли особенности у блока?

Да!

#### Особенность №1: Scrolltool + MS Excel или Google таблица = ❤️

Блок дружит с MS Excel и Google Таблицы. Вы можете скопировать вашу таблицу и перенести ее в лонгрид за несколько секунд.

[![Table_2.webp](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/1.webp)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-01/1.webp)

<p class="callout warning">Будьте осторожны с нестандартными таблицами, где есть различное форматирование и формулы.</p>

#### Особенность №2: Работа с клавиатуры

С таблицей удобно работать с клавиатуры. Рабочие кнопки:

- Tab  
    Переключает ввод на ячейку справа. Как доходит до последней ячейки, в строке происходит переключение на первую ячейку строки ниже. Если вы нажимаете клавишу в последней ячейке последней строки, то создастся новая строка. С помощью этой клавиши можно быстро заполнять ячейки таблицы и создавать новые строки не отвлекаясь на мышку.
- Клавиши стрелок  
    С их помощью можно переключаться по ячейкам и строкам. Тут все просто. Какую стрелку нажмете, туда и переместится мигающий указатель ввода.

### Как я могу использовать этот блок?

Мы рекомендуем использовать блок для того, чтобы:

- Отобразить данные в читаемом виде: например, тариф по банковской карте.
- Сравнить какие-то параметры: например, параметры разных двигателей.

# Текст

### Как добавить блок?

Через меню добавления контентных блоков. [Подробнее о блоках](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B4%D0%BE%D0%B1%D0%B0"><summary>Скриншот кнопки в меню</summary>

![text0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/text0-menu.jpg)

</details>### Как выглядит блок?

[![text1-look2.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/text1-look2.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/text1-look2.jpg)

### Как работать с блоком?

Все просто. Создайте блок и добавьте в него контент. В блоке «**Текст**» можно добавить:

- текст

Вы можете набрать текст вручную. Или вставить его из другого источника.

<details id="bkmrk-%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0"><summary>Создание блока</summary>

[![text2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/text2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/text2-create.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><p class="callout success">Преимущество блока: Если вы копируете текст из другого источника, то большая часть форматирования текста сохранится (жирность, курсив, ссылки, верхние или нижние индексы, цитаты и т.д.).</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B2%D1%81%D1%82%D0%B0%D0%B2%D0%BA%D0%B8-%D1%82%D0%B5%D0%BA%D1%81%D1%82"><summary>Пример копирования текста из Википедии</summary>

[![text3-paste.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/text3-paste.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/text3-paste.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить внешний вид?

##### Текст

Вы можете отформатировать текст внутри вкладки с помощью текстового редактора.

**Возможности редактора:**

- выделение текста (курсив, жирность)
- изменение цвета текста
- добавление ссылок
- добавление заголовков 2-го и 3-го уровня
- создание списков (маркированных, нумерованных)
- добавление цитаты, разделителя
- добавление верхних и нижних индексов
- вставка кода с подсветкой
- изменить текст с помощью ИИ

Подробнее о текстовом редакторе читайте [в этой статье](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst).

### Есть ли особенности у этого блока?

Да. Анимация проигрывается сразу на весь блок. Это означает, что во время скролла вашего лонгрида блок с текстом появляется с анимацией целиком. Если у вас большой объем текста, то он будет статичен во время скролла.

Если вы хотите чтобы блок текста аккуратно появлялся с анимацией по мере скролла, то большие объемы текста можно разбивать на отдельные текстовые блоки. Так лонгрид будет выглядеть динамичнее.

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8-%D0%9E%D0%B1%D1%80%D0%B0"><summary>Пример анимации</summary>

<p class="callout info">Обратите внимание, первый блок появляется целиком и без анимации. Второй появляется с поэтапной анимацией.</p>

[![text_animation.webp](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/text-animation.webp)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/text-animation.webp)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как я могу использовать этот блок?

Текст — это базовая единица контента. Пусть он и выглядит просто, не пренебрегайте им. Может, иногда стоит <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400;">добавить аккуратно отформатированный текстовый блок </span>вместо целого зоопарка блоков и интерактивов? Сила может быть и в простоте.

#### Совет (как добавить активную ссылку на почту и телефон)  


Если вам нужно оставить в лонгриде свои контакты, то вы можете сделать их активными. Для этого можно использовать ссылку в тексте. Когда ученик нажмёт на текст с такой ссылкой, у него автоматически откроется почтовая программа, где он сразу сможет написать письмо по указанному адресу. А при просмотре лонгрида с телефона, ученик сможет нажать на указанный номер телефона, чтобы позвонить по нему.

<details id="bkmrk-%D0%9A%D0%B0%D0%BA-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0-"><summary>Как работает активная ссылка на почту</summary>

[![link-mailto.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-01/link-mailto.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-01/link-mailto.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Чтобы создать такую активную ссылку, добавьте в текст ваш адрес электронной почты, выделите его и в открывшемся редакторе нажмите кнопку "**Создать гиперссылку**". [Подробнее о редакторе текста](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst).

В открывшемся окне вставьте ссылку с текстом: **mailto:адрес электронной почты**. А вместо слов "адрес электронной почты" подставьте свою почту.

<p class="callout info">Ссылка для почты: "**mailto:адрес электронной почты**" (например: "mailto:info@scroll-tool.ru").  
</p>

Если вы хотите сделать активный номер телефона, то вставьте ссылку с текстом: **tel:номер телефона**. А вместо слов "номер телефона" подставьте свой телефон в международном формате.

<p class="callout info">Ссылка для телефона: "**tel:номер телефона**" (например: "tel:+74951202768").</p>

---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>

# Текст с изображением

Блок «**Текст с изображением**» позволяет добавить к лонгриду текст и картинку рядом с ним, и настроить их внешний вид.

### Как выглядит блок?

[![text-image1-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/text-image1-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/text-image1-look.gif)

### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-"><summary>Как выглядит блок в меню</summary>

![text-image0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/text-image0-menu.jpg)

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%A7%D1%82%D0%BE"><summary>Добавление блока</summary>

[![imgtext2-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext2-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext2-new.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить содержимое?

В блоке «**Текст с изображением**» можно добавить:

- изображение с компьютера
- текст

<p class="callout info">Вы можете использовать изображения в формате **JPG**, **PNG**, **GIF**, **WEBP** и **SVG**.</p>

<details id="bkmrk-%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0"><summary>Заполнение блока</summary>

Чтобы добавить своё изображение, нажмите на стартовую картинку и выберите нужный файл в проводнике. Чтобы ввести свой текст, поставьте курсор в текстовое поле и наберите его.

[![imgtext3-fill.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext3-fill.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext3-fill.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Еще есть возможность сгенерировать картинку с помощью нейросети.

<details id="bkmrk-%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8"><summary>Генерация картинки</summary>

[![bandicam 2024-07-04 13-37-00-691.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-07/bandicam-2024-07-04-13-37-00-691.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-07/bandicam-2024-07-04-13-37-00-691.gif)

</details>### Как изменить внешний вид?

В блоке «**Текст с изображением**» можно изменить:

- шаблон
- размер картинки
- форматирование текста (вы можете отформатировать текст с помощью текстового редактора. [Подробнее о редакторе](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst).)

<details id="bkmrk-%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD-%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD-%D0%92%D1%8B%D0%B1%D0%BE%D1%80-"><summary>Шаблон</summary>

##### Шаблон

Выбор шаблона позволяет разместить картинку справа или слева от текста. Чтобы изменить шаблон, выберите соответствующий пункт.

[![text-image4-layout.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/text-image4-layout.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/text-image4-layout.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%80-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-%D0%A0%D0%B0%D0%B7%D0%BC"><summary>Размер картинки</summary>

##### Размер картинки

Чтобы изменить размер изображения, двигайте ползунок ширины в правую или левую сторону. Или просто нажимайте на него в нужном месте. Текущая ширина указана в пикселях слева от ползунка. При изменении размера исходные пропорции сохраняются.

[![imgtext5-size.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext5-size.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext5-size.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как настроить?

Вы можете запретить ученикам **увеличивать изображение**. В таком случае они смогут посмотреть его только в том размере, который вы укажете. По умолчанию увеличение изображения разрешено. Чтобы его запретить, нажмите на соответствующий переключатель.

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0"><summary>Запрет увеличения картинки</summary>

[![imgtext6-download.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext6-download.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext6-download.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

<p class="callout info">**Совет**: Если вы оставляете возможность для просмотра в полном размере **включенной**, то лучше не загружать в блок изображения с прозрачным фоном (такие изображения могут быть в формате png, gif, webp). Иначе при увеличении они не будут иметь фона.</p>

Пример с прозрачным фоном:

[![image3-transparent.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image3-transparent.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image3-transparent.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Есть ли альтернативные варианты этого блока?

Да. Вы можете добавить другой тип контентного блока <span style="color: rgb(35, 111, 161);">[<span style="color: rgb(0, 0, 0);">«</span>Изображение<span style="color: rgb(0, 0, 0);">»</span>](https://wiki.scroll-tool.ru/books/razdel-longridy/page/izobrazenie)</span>.

### Как я могу использовать этот блок?

Этот блок хорошо подходит, чтобы:

- Повысить наглядность лонгрида.  
    Вставьте свое изображение и дайте развернутый комментарий к нему.
- Украсить лонгрид или сделать акцент на какой-то теме.  
    Можно украсить текст лонгрида изображениями в тему. Так лонгрид будет восприниматься лучше.

---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>

# Тестовый вопрос

Блок «**<span class="text-xs text-[#828794] font-medium">Тестовый вопрос</span>**» это один из видов тестовых вопросов в нашем конструкторе. Его можно использовать, чтобы задавать вопросы с одним или несколькими правильными ответами.

### Как выглядит блок?

[![test1-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test1-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test1-look.gif)

---

### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%C2%A0"><summary>Как выглядит блок в меню</summary>

[![test1-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/scaled-1680-/test1-menu.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/test1-menu.jpg)

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%C2%A0"><summary>Добавление блока</summary>

[![test2-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/test2-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/test2-new.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>---

### Как изменить содержимое?

В блоке «**<span class="text-xs text-[#828794] font-medium">Тестовый вопрос</span>**» можно добавить:

- текст вопроса
- варианты ответов
- изображение к вопросу
- обратную связь (рассматривается в разделе "Как настроить?")

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Текст вопроса и вариантов</summary>

##### Текст вопроса и варианты ответов

Вы можете ввести свой текст, нажав на соответствующие поля.

[![test3-fill1.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/test3-fill1.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/test3-fill1.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B8-%D1%83%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8"><summary>Добавление и удаление вариантов</summary>

Количество вариантов ответа в блоке не ограничено. Вы можете добавить любое количество, нажав на кнопку «**Добавить вариант ответа**» внизу. А удалить ненужные варианты можно, нажав на значок «**Корзина**».

<p class="callout warning">Обратите внимание, что после удаления, восстановить вариант невозможно.</p>

[![test10-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test10-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test10-new.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5"><summary>Изображение</summary>

##### Изображение

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

<p class="callout info">**Совет**: Картинки, добавленные в «Тестовый вопрос», всегда будут отображаться в уроке в своём полном размере. Уменьшить их нельзя. Поэтому сразу подбирайте для блока небольшие по высоте изображения (рекомендуемая высота - не более 400 пикселей).</p>

[![test9-image.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/test9-image.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test9-image.jpg)

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

[![test9-image.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test9-image.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test9-image.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

<p class="callout warning">Картинки, которые вы добавляете в этот блок, всегда могут быть просмотрены учениками в полном размере.</p>

</details>---

### Как изменить внешний вид?

В блоке «**<span class="text-xs text-[#828794] font-medium">Тестовый вопрос</span>**» можно изменить:

- форматирование текста (вы можете отформатировать текст во всех полях с помощью текстового редактора. [Подробнее о редакторе](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst).)

<p class="callout info">Цвет кнопок и выбранных вариантов наследуется из цветовой схемы лонгрида. [Подробнее о цветовой схеме](https://wiki.scroll-tool.ru/books/razdel-longridy/page/nastroika-vnesnego-vida-longrida#bkmrk--0).</p>

---

### Как настроить?

В блоке «**<span class="text-xs text-[#828794] font-medium">Тестовый вопрос</span>**» можно настроить:

- тип вопроса (вопрос с одним правильным ответом или с несколькими)
- перемешивание ответов
- оценивается или не оценивается вопрос
- количество баллов за верный ответ
- обратную связь (включить/отключить, текст сообщений, показ правильного ответа)
- количество попыток

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D0%BE%D0%B2-%D0%A7%D1%82"><summary>Тип вопроса</summary>

##### Тип вопроса

Вы можете выбрать тип вопроса: вопрос с одним правильным ответом или с несколькими правильными ответами. Для этого нужно переключить настройку в верхней части блока. Те ответы, которые вы отметили синим кружком или галочками, будут считаться правильными.

[![test3-answers.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test3-answers.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test3-answers.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%9F%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D1%88%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D0%BE"><summary>Перемешивание ответов</summary>

##### Перемешивание ответов

Вы можете настроить, будут ли ответы перемешиваться при показе вопроса в лонгриде. Для этого раскройте поле «**Показать настройки**», затем поле «**Настройки прохождения**» и нажмите на переключатель «**Перемешивать варианты ответов**».

[![test4-mix.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test4-mix.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test4-mix.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%9E%D1%86%D0%B5%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81%D0%B0-%D0%B8"><summary>Оценивание вопроса и баллы</summary>

##### Оценивание вопроса и баллы

По умолчанию, все тестовые вопросы оцениваются, то есть учитываются в итоговом балле. И за каждый вопрос ученик получает 10 баллов.

Вы можете изменить эти настройки. То есть выбрать, будет ли вопрос учитываться в итоговом балле за лонгрид и сколько баллов ученик получит за правильный ответ. Для этого раскройте поле «**Показать настройки**», затем поле «**Настройки прохождения**» и нажмите на переключатель «**Вопрос влияет на оценку всего курса**». Затем введите баллы за верный ответ или оставьте число по умолчанию (10 баллов).

[![test5-points.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test5-points.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test5-points.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%9E%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%B0%D1%8F-%D1%81%D0%B2%D1%8F%D0%B7%D1%8C-%D0%B8-%D0%BF%D0%BE%D0%BF"><summary>Обратная связь и попытки</summary>

##### Обратная связь и попытки

По умолчанию, обратная связь выключена. Если вы оставите её выключенной, то у ученика будет всего 1 попытка на прохождение и после своего ответа он увидит стандартное сообщение. Это сообщение будет одинаковым, независимо от выбранного ответа.

[![test6-default.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/test6-default.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test6-default.jpg)

Вы можете включить обратную связь. Для этого раскройте поле «**Показать настройки**», затем поле «**Обратная связь и попытки**» и нажмите на переключатель «**Обратная связь после ответа**». Здесь вы можете ввести текст для обратной связи. И задать количество попыток.

[![test7-feedback.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test7-feedback.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test7-feedback.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

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

[![test8-correct.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/scaled-1680-/test8-correct.jpg)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test8-correct.jpg)

Включение правильного ответа в обратную связь:

[![test8-correct.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test8-correct.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/test8-correct.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>---

### Есть ли альтернативные варианты этого блока?

Да. Вы можете добавить другой вид тестового вопроса: «[Ранжирование](https://wiki.scroll-tool.ru/books/razdel-longridy/page/ranzirovanie)», «[Сопоставление](https://wiki.scroll-tool.ru/books/razdel-longridy/page/sopostavlenie)» или «[Вставка пропущенных слов](https://wiki.scroll-tool.ru/books/razdel-longridy/page/vstavka-propushhennyx-slov)».

### Как я могу использовать этот блок?

Этот блок хорошо подходит, чтобы:

- Проверить знания учеников, используя вопросы с одним или несколькими вариантами ответа.

---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>

# Цитата

### Как добавить этот контентный блок?

[Через меню добавления контентных блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Скриншот кнопки в меню блока</summary>

[![Frame 1.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/MIGframe-1.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/MIGframe-1.png)

</details>### Как выглядит блок?

[![Screenshot_1.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/scaled-1680-/DF8screenshot-1.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-02/DF8screenshot-1.png)

### Как работать с блоком?

1. Добавьте блок.
2. Впишите цитату.
3. Впишите автора цитаты.

[![Цитата-Как работать.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/citata-kak-rabotat.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-05/citata-kak-rabotat.gif)

### Могу ли я изменить внешний вид блока?

Да. Вы можете отформатировать текст внутри цитаты [с помощью текстового редактора](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst).

### Есть ли особенности у блока?

Цветовое оформление блока наследуется из цветовой темы лонгрида.

### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- для выделения ключевых мыслей и идей
- цитирования высказываний и источников информации

# Шаги

### Как добавить блок?

Через меню добавления контентных блоков. [<span style="color: rgb(35, 111, 161);">Подробнее о блоках</span>.](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki)

<details id="bkmrk-%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%B2-%D0%BC%D0%B5"><summary>Скриншот кнопки в меню блока</summary>

![steps0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/steps0-menu.jpg)

</details>### Как выглядит блок?

[![steps1-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/steps1-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/steps1-look.gif)

### Как работать с блоком?

Все просто. Создайте блок и начните заполнять пустые поля вашим контентом. В блоке «**Шаги**» можно добавить:

- название для шагов/этапов
- текст для каждого шага
- картинку для каждого шага

Картинки, которые вы добавляете в «**Шаги**», всегда могут быть просмотрены учениками в полном размере.

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%B8-%D0%B7%D0%B0"><summary>Создание и заполнение блока</summary>

[![steps2-create.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/steps2-create.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/tabs2-create.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Вы можете изменить название шагов на своё усмотрение. Название, которое вы вводите в блоке, появляется в заголовке каждого шага.

<details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BD%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F-"><summary>Изменение названия шагов</summary>

[![steps3-name.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/steps3-name.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/steps3-name.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><p class="callout info">Совет: Если вы оставляете возможность для просмотра в полном размере включенной, то лучше не загружать в блок изображения с прозрачным фоном (такие изображения могут быть в формате png, gif, webp). Иначе при увеличении они не будут иметь фона.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D1%81-%D0%BF%D1%80%D0%BE%D0%B7%D1%80%D0%B0%D1%87%D0%BD%D1%8B%D0%BC-"><summary>Пример с прозрачным фоном</summary>

[![image3-transparent.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image3-transparent.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image3-transparent.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Еще есть возможность сгенерировать картинку с помощью нейросети.

<details id="bkmrk-%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8"><summary>Генерация картинки</summary>

</details>

#### Как добавлять и удалять шаги?

Количество шагов в блоке «**Шаги**» не ограничено. Вы можете добавить любое количество, нажав на кнопку «**Добавить новый шаг**» внизу. А удалить ненужные шаги можно, нажав на значок «**Корзина**».

<p class="callout warning">Обратите внимание, что после удаления, восстановить вкладку невозможно.</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%BE"><summary>Удаление и добавление вкладок</summary>

[![steps4-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/steps4-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/tabs3-tabs.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>#### Как изменить внешний вид?

##### Текст

Вы можете отформатировать текст внутри вкладки с помощью текстового редактора. [<span style="color: rgb(35, 111, 161);">Подробнее о редакторе.</span>](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst)

##### Подсказка

Вы можете изменить текст подсказки.

<details id="bkmrk-%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%BF%D0%BE%D0%B4"><summary>Изменение текста подсказки</summary>

[![steps5-info.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/steps5-info.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/tabs4-info.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>##### Цвет

Цвет активного шага наследуется из цветовой темы лонгрида.

### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- Для пошаговых инструкций.
- Для показа истории и таймлайна.
- Для перечисления этапов какого-либо процесса.

# Копирование контентных блоков

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

### Как копировать блок?

Все достаточно просто, нажимаете на "три точки" и появится меню где необходимо нажать "Копировать в буфер"

[![image.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-10/scaled-1680-/W2himage.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-10/W2himage.png)

### Как вставить блок?

Есть несколько вариантов как вставить блок.

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

[![bandicam 2024-10-23 17-28-17-658.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-10/bandicam-2024-10-23-17-28-17-658.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-10/bandicam-2024-10-23-17-28-17-658.gif)

И второй вариант, в меню снизу страницы.

[![bandicam 2024-10-23 17-28-29-029.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-10/bandicam-2024-10-23-17-28-29-029.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-10/bandicam-2024-10-23-17-28-29-029.gif)