7  Создание презентаций

В Quarto можно создавать разнообразные типы презентаций в зависимости от выходного формата. Это может быть PowerPoint (*.pptx, MS Office), Beamer (*.pdf, \(\LaTeX\)), однако основной формат, который мы рассмотрим, — это Quarto RevealJS, который основан на HTML-фреймворке с открытым исходным кодом для презентаций.

Фреймворк RevealJS обладает широким набором функций, включая вложенные слайды, поддержку Markdown, подсветку синтаксиса кода, экспорт в PDF, заметки докладчика, поддержку \(\LaTeX\) и многое другое.

7.1 Создание слайдов

7.1.1 Структура слайдов

Слайды презентаций создаются нв основе Markdown-стилистики: для деления презентаций на разделы используются заголовки первого уровня (#), а заголовки каждого слайда внутри презентации используют заголовки второго уровня (##).

Quarto

---
title: "Пример презентации"
author: "А.С. Пушкин и М.Ю. Лермонтов"
format: revealjs
---

# А.С. Пушкин

## Пророк

- Духовной жаждою томим,
- ...

## Пророк (продолжение)

- Перстами легкими как сон
- ...

# М.Ю. Лермонтов

## Пророк

- С тех пор как Вечный Судия
- ...

## Пророк (продолжение)

- Провозглашать я стал любви
- ...

Раскрыть слайды на полное окно

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

Quarto

---
title: "Пример презентации"
author: "А.С. Пушкин и М.Ю. Лермонтов"
format: revealjs
---

- Духовной жаждою томим,
- ...

---

- Перстами легкими как сон
- ...

Большинство слайдов состоят из заголовка и содержания, но в некоторых случаях можно не указывать заголовок на слайде, например, если вам нужно полноразмерное изображение. В Quarto можно использовать слайды без заголовков, но если вы хотите, чтобы они корректно отображались в структуре презентации, необходимо сделать следующее: определить идентификатор слайда (#slide-id), который будет использоваться в URL-адресе слайда и определить data-menu-title="Заголовок слайда" для использования в содержании презентации.

## {#slide3-id data-menu-title="Слайд 3 - для отображения в содержании"}

Слайд 3 - у этого слайда нет заголовка, но есть идентификатор слайда и параметр `data-menu-title`.

Можно выбрать, чтобы в URL-адресе отображались номера слайдов, а не их ярлыки на основе идентификаторов слайдов, установив hash-type: number как указано ниже.

format:
  revealjs: 
    hash-type: number

7.1.2 Последовательные списки

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

Quarto

---
format:
  revealjs:
    incremental: true   
---

## Часть 1

- Духовной жаждою томим,
- В пустыне мрачной я влачился, —

## Часть 2

- И шестикрылый серафим
- На перепутье мне явился.

Раскрыть слайды на полное окно

Включить опцию incremental можно не только глобально, но и локально для индивидуального списка:

Quarto

::: {.incremental}
- И шестикрылый серафим
- На перепутье мне явился.
:::

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

Quarto

---
format: revealjs   
---

## Две части после паузы

- Духовной жаждою томим,
- В пустыне мрачной я влачился, —

. . .

- И шестикрылый серафим
- На перепутье мне явился.

Раскрыть слайды на полное окно

7.1.3 Фрагменты

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

Пример фрагментов

::: {.fragment .fade-out}
Эффект исчезновения
:::

::: {.fragment}
Эффект возникновения
:::

::: {.fragment .fade-down}
Эффект проявления
:::

::: {.fragment .fade-in-then-out}
Эффект возникновения, затем исчезновения 
:::

::: {.fragment .fade-in-then-semi-out}
Эффект возникновения, затем затухания до 50%
:::

::: {.fragment .fade-up}
Скольжение вверх с постепенным появлением
:::

---

::: {.fragment .shrink}
Уменьшение масштаба
:::

::: {.fragment .strike}
Зачеркивание
:::

<br>

::: {.fragment .highlight-red}
Выделение красным цветом
:::

::: {.fragment .highlight-current-red}
Выделение красным цветом, а затем возврат к исходному виду
:::

Раскрыть слайды на полное окно

Порядок отображения элементов фрагмента можно изменять.

::: {.fragment fragment-index=2}
Последний элемент
:::

Первый элемент

::: {.fragment fragment-index=1}
Появится вторым
:::

Раскрыть слайды на полное окно

Фрагменты эффективно комбинировать с различными эффектами. Отметим, что для выделения текста в слайдах ниже используется расширение Highlight-text, для работы которого после установки необходимо прописать в YAML:

filters:
  - highlight-text

Quarto

## До визуализации графика

:::{.fragment .fade-in-then-semi-out}
1. Определите все [типы переменных]{bg-colour="#c9f2e4"} (это могут быть числовые, факторы, временные и т. д.), проработайте пропущенные данные
:::

...

Раскрыть слайды на полное окно

7.1.4 Фон слайдов

Фон презентации можно задать различными способами, например, выбрав определенный HEX-цвет или создав градиент.

## Птица  цвета `aquamarine` {background-color="aquamarine"}

## {background-color="black" background-image="https://placekitten.com/100/100" background-size="100px" background-repeat="repeat"}

(Слайд без заголовка)

## {background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)" style="color: white;"}

(Линейный градиент)

## {background-gradient="radial-gradient(#283b95, #17b2c3)" style="color: white;"}

(Радиальный градиент)

Раскрыть слайды на полное окно

Существует возможность указывать в качестве фона видео с помощью аттрибута background-video (см. опции для воспроизведения видео). Веб-сайты также можно указывать как фон слайда, для этого указывается URL-адрес для его загрузки в аттрибуте background-iframe, при этом можно выключить взаимодействие с содержимым слайда, указав background-interactive: false.

Параметры фона основного титульного слайда задаются отдельно в опции title-slide-attributes:

---
title: "Презентация"
author: "Автор"
format: 
  revealjs:
    theme: night
    controls: true
    title-slide-attributes: 
      data-background-image: "/path/to/title_image.png"
      data-background-size: cover
      data-background-position: "center"
      data-background-opacity: "0.8"
---

# Начало {#first-slide}

Раскрыть слайды на полное окно

7.1.5 Нумерация слайдов

Нумерацию слайдов можно добавить, указав параметр slide-number: true в YAML-поле revealjs:, либо указав спецификацию на основе таблицы ниже.

Таблица 7.1: Форматы нумерации слайдов

Значение	Описание
c/t	Номер слайда / общее количество слайдов
c	Только номер слайда
h/v	Количество горизонтальных / вертикальных слайдов
h.v	Количество горизонтальных.вертикальных слайдов

Если необходимо исключить определённый слайд из нумерации — например, если это титульный слайд нового раздела или вспомогательный слайд, который не должен учитываться — укажите в его заголовке параметр {visibility="uncounted"}. В этом случае нумерация продолжится, на данном слайде номер будет соответствовать предыдущему слайду. Чтобы полностью скрыть слайд из показа, используйте параметр {visibility="hidden"}.

---
title: "Заголовок"
author: "Автор"
format: 
  revealjs:
    theme: dracula
    controls: true
    slide-number: c/t
---

# Раздел 1 {visibility="uncounted"}

## Слайд 1

(номер текущего слайда указан в правом нижнем углу)

## Слайд 2

(следующий слайд будет скрыт)

## Слайд 3 {visibility="hidden"}

# Раздел 2 {visibility="uncounted"}

## Слайд 4

Раскрыть слайды на полное окно

7.1.6 Нижний колонтитул и логотип

В презентацию легко добавить нижний колонтитул и логотип:

---
format:
  revealjs:
    logo: logo.png
    footer: "Текст нижнего колонтитула"
    theme: [league, slides.scss]
---

## Слайд

(следующий слайд будет без нижнего колонтитула)

## Слайд {footer=false}

Раскрыть слайды на полное окно

Управлять размером логотипа как в примере выше можно, например, поместив в папку проекта стилевой файл slides.scss, содержащий параметры расположения логотипа.

/*-- scss:rules --*/

.reveal .slide-logo {
  height: 60px !important;
  max-height: 8rem !important;
  padding-bottom: 8px !important;
}

Рисунок 7.1: Пример настроек SCSS-фала для определения параметров логотипа презентации

7.1.7 Размер слайдов

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

Таблица 7.2: Размер слайдов

Значение	Описание
width	Ширина слайда (по умолчанию 1050)
height	Высота слайда (по умолчанию 700)
margin	Коэффициент размера экрана, который должен оставаться пустым вокруг содержимого слайда (по умолчанию равен 0.1)
min-scale	Наименьший возможный масштаб всего содержимого (от значения по умолчанию до 0.2)
max-scale	Наибольший возможный масштаб всего содержимого (от значения по умолчанию до 2.0)

7.1.8 Настройка тем

Подробно настройка и кастомизация тем в презентациях RevealJS описана на странице Reveal Themes документации Quarto (см. также More About Quarto Themes). Для RevealJS презентаций предусмотрено несколько предустановленных тем (beige, blood, dark, default, dracula, league, moon, night, serif, simple, sky, solarized), которые включаются с помощью опции theme.

---
title: "Презентация"
format:
  revealjs: 
    theme: dark
---

Также допускается совместное использование CSS и SCSS-тем.

---
title: "Презентация"
format:
  revealjs: 
    theme: [theme.scss, dark]
---

Помимо прочего, темы презентаций поддерживают “брендирование” с помощью файла _brand.yml, как это описано в главе Эффективное использование тем и брендирование в Quarto.

---
title: "Презентация"
format:
  revealjs:
    theme:
      - dark
      - theme.scss
      - brand
---

7.1.9 Печать слайдов в PDF

Для того, чтобы экспортировать презентацию RevealJS в PDF, необходимо выполнить следующие действия:

1. Переключитесь в режим просмотра печати с помощью клавиши F (это также можно сделать в режиме навигации).
2. Откройте диалоговое окно печати в браузере (Ctrl / Cmd + P).
3. Отметьте в настойках Сохранить как PDF.
4. Измените макет на альбомную ориентацию, если есть данная опция в параметрах.
5. Значение параметра Поля измените на Нет.
6. Включите опцию Фоновая графика.
7. Нажмите Сохранить.

Рисунок 7.2: Пример настроек экспорта RevealJS презентации в PDF

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

1. Сгенерируйте HTML-презентацию как обычно.
2. Откройте файл с презентацией presentation.html в браузере.
3. Добавьте ?print-pdf в конец URL-адреса.
4. Откройте меню печати (Ctrl / Cmd + P) и выберите Сохранить как PDF как в действиях выше.

УведомлениеЗамечание

Отметим, что для экспорта интерактивных презентаций, можно использовать такой инструмент как decktape — headless-утилиту Chrome для захвата веб-страниц в формате PDF-файлов, как это описал в своем блоге Mickaël Canouil.

7.2 Код в презентациях

Код в презентациях Quarto можно вставлять обычными способами, делая его исполняемым с интерактивными элементами, в том числе из файла:

```{python}
#| file: path/to/script.py
```

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

7.2.1 Подсветка строк

Напомним, что значения параметра code-line-numbers помогут выделить определенные строки для выделения и/или анимации между наборами выделенных строк в презентациях RevealJS: диапазоны показа строк выделяются как 1,2,4-5, последовательные шаги разделяются символом |. Сначала покажем, как выглядит выборочное выделение строк кода в презентации:

#| code-line-numbers="4-7"

library(ggridges)

ridges_graph + 
  geom_density_ridges_gradient(scale = 3, 
                               rel_min_height = 0.01,
                               linewidth = 0.4,
                               bandwidth = 1.7)

Раскрыть слайды на полное окно

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

#| code-line-numbers="1|3,4|5-7"

library(ggridges)

ridges_graph + 
  geom_density_ridges_gradient(scale = 3, 
                               rel_min_height = 0.01,
                               linewidth = 0.4,
                               bandwidth = 1.7)

Раскрыть слайды на полное окно

7.2.2 Отложенный показ выходных данных

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

Функция фрагментации имеет следующие значения параметра output-location:

1. fragment: отображать результат как фрагмент, т.е. показывать его только после явного перехода к следующему шагу на слайде;
2. slide: отображать результат на следующем слайде;
3. column: отображать результат в колонке рядом с кодом. Это разделяет слайд на две колонки, каждая из которых занимает 50% ширины слайда;
4. column-fragment: отображать результат в колонке рядом с кодом и показывать его только после явного перехода к следующему шагу на слайде.

Например:

R

#| output-location: column-fragment

ridges_graph + 
  geom_density_ridges_gradient(
               scale = 3, 
               rel_min_height = 0.01,
               alpha = 0.7,
               linewidth = 0.3,
                bandwidth = 1.7) 

Раскрыть слайды на полное окно

7.2.3 Стилизованные блоки с кодом

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

Terminal

quarto add emilhvitfeldt/quarto-revealjs-codewindow

Далее в YAML-презентации необходимо указать:

Quarto

---
title: "Заголовок презентации"
format: revealjs
revealjs-plugins:
  - codewindow
---

Непосредственно в Quarto-документе блок с кодом оформляется так:

::: {.codewindow}

Блок с кодом

:::

Раскрыть слайды на полное окно

7.3 Показ слайдов

7.3.1 Управление навигацией внутри презентации

• F — раскрыть слайды на полный экран;
• S — режим докладчика, в котором будут отображаться время с начала доклада, следующий слайд и заметки;
• O — обзор презентации в виде миниатюр слайдов;
• E — экспорт для печати, например, в PDF;
• R — режим горизонтальной прокрутки;
• M — скрыть меню навигации;
• G — переход к слайду по его номеру.

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

7.3.2 Меню навигации

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

Рисунок 7.3: Пример меню навигации слайдов

Для настройки внешнего вида и поведения меню можно использовать настройки YAML.

format:
  revealjs:
    menu:
      side: right
      width: wide

Здесь могут быть использованы следующие параметры:

Таблица 7.3: Форматы нумерации слайдов

Параметр	Описание
side	Сторона презентации, где будет показано меню — left или right; по умолчанию left
width	Ширина меню (normal, wide, third, half, full, или любое допустимое значение длины CSS); по умолчанию normal
numbers	Добавление номеров слайдов к пунктам меню

В том случае, если необходимо скрыть меню навигации, это можно сделать, указав опцию menu: false:

format:
  revealjs:
    menu: false

7.3.3 Заметки докладчика

Заметки докладчика в презентациях RevealJS предназначены для того, чтобы предоставить докладчику вспомогательный текст или подсказки, которые не видны аудитории во время презентации. Они отображаются на экране докладчика в специальном режиме и помогают видеть время с начала доклада, следующий слайд и заметки, что помогает докладчику ориентироваться во время доклада. Для добавления заметок используется Div класс .notes.

# А.С. Пушкин

## Пророк

- Духовной жаждою томим,
- ...

::: {.notes}
Заметки докладчика: Первая публикация этого стихотворения состоялась в «Московском вестнике» (№ 3) за 1828 год.
:::

Для отображения заметок докладчика можно открыть меню навигации и выбрать в инструментах: Tools: SpeakerView или нажать S во время презентации.

Рисунок 7.4: Пример заметок докладчика

СоветСовет

Если нажать Alt в Windows (Option в macOS, Ctrl в Linux), то кликнув на любой элемент презентации в режиме показа, он будет увеличен.

Можно настроить презентацию Quarto таким образом, чтобы она воспроизводила звук при переходе к следующему слайду:

format:
  revealjs:
    slide-tone: true

7.3.4 Переходы слайдов

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

Таблица 7.4: Виды переходов слайдов

Переход	Описание
none	нет перехода (мгновенное переключение)
fade	переход cross-fade (перекрестное затухание)
slide	горизонтальное скольжение
convex	переход под выпуклым углом
concave	переход под вогнутым углом
zoom	масштабирование слайда таким образом, чтобы он увеличивался по сравнению с центром экрана

Глобально стиль перехода можно установить как для слайдов, так и для фона:

---
title: "Презентация"
format:
  revealjs:
    transition: slide
    background-transition: fade
---

Вы также можете указать скорость перехода по умолчанию (default), быструю (fast) или медленную (slow):

---
title: "Презентация"
format:
  revealjs:
    transition: zoom
    transition-speed: fast
---

Также можно указать переход и/или скорость перехода для отдельного слайда:

## Заголовок слайда {transition="fade" transition-speed="fast"}

Вы также можете указать отдельные входные и выходные переходы, например:

## Заголовок слайда {transition="fade-in slide-out"}

Раскрыть слайды на полное окно

УведомлениеЗамечание

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

7.3.5 Режим заметок

В презентациях RevealJS можно включить режим, открывающий пустую доску в презентации, на которой можно рисовать. Для этого в YAML-настройках необходимо указать:

title: "Презентация"
format:
  revealjs:
    chalkboard: true

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

Рисунок 7.5: Режим доски заметок

Помимо того, что можно открыть доску, существует возможность делать заметки поверх слайдов, нажав на кнопку или нажав на клавишу C.

Рисунок 7.6: Режим заметок

7.3.6 Абсолютное позиционирование

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

---
format: 
  revealjs:
    theme: moon
    controls: true
---

## Пример позиционирования

[Нам нравится]{.absolute top=100 left=0}

[абсолютное позиционирование]{.absolute top="50%" left="50%"}

[и кое-что еще.]{.absolute bottom=0 right=0}

Рисунок 7.7: Пример абсолютного позиционирования

Также отметим, что для того, чтобы текст полностью заполнял слайд шрифтом максимально большого размера без переполнения, можно воспользоваться классом {.r-fit-text}.

## Новый слайд {.dark-theme}

:::{.r-fit-text}
Раздел 3: 

описательная статистика
:::

Рисунок 7.8: Пример заполнения текста

7.3.7 Анимация

В RevealJS возможно автоматически анимировать элементы на слайдах, за это отвечает параметр auto-animate.

## Послание {auto-animate=true}

::: {style="margin-top: 100px;"}
Я тебе приснюсь!
:::

## Послание {auto-animate=true}

::: {style="margin-top: 200px; font-size: 3em; color: lightpink;"}
Я тебе приснюсь!
:::

---

## Пример анимации {auto-animate=true}

Анимация

## Пример анимации {auto-animate=true}

С подвохом

Анимация

Раскрыть слайды на полное окно

Анимацию можно также использовать, чтобы показать изменения в коде.

## {auto-animate="true"}

```{r}
penguins |> 
  na.omit() |> 
  ggplot(aes(x = bill_length_mm,
             y = bill_depth_mm,
             fill = species,
             size = body_mass_g))
```

## {auto-animate="true"}

```{r}
penguins |> 
  na.omit() |> 
  ggplot(aes(x = bill_length_mm,
             y = bill_depth_mm,
             fill = species,
             size = body_mass_g)) + 
  geom_point(pch = 21,
             color = "white", 
             alpha = 0.7)
```

Раскрыть слайды на полное окно

7.3.8 Автоматический показ слайдов

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

format:
  revealjs:
    auto-slide: 5000  # Интервал в миллисекундах (т. е. 5 сек)
    loop: true        # Зациклить презентацию
    transition: fade  # Анимация перехода

Если необходимо различное время для показа каждого слайда, то используется параметр data-autoslide:

## Слайд 1 {autoslide=3000}

Содержимое (показ 3 секунды)

---

## Слайд 2 {autoslide=7000}

Содержимое (показ 7 секунд)

7.3.9 Multiplex

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

Включение такой опции довольно просто: необходимо указать параметр multiplex: true:

title: "Презентация"
format:
  revealjs:
    multiplex: true

При создании рендера проекта будут созданы два файла:

• presentation.html — файл, который вы должны опубликовать в Интернете и который будет видеть ваша аудитория;
• presentation-speaker.html — файл для презентации, который хранится локально на вашем компьютере.

Две версии при демонстрации презентации будут синхронизированы таким образом, что когда докладчик переключит слайд, все зрители одновременно перейдут к тому же слайду. Также можно создать собственный Multiplex-сервер, как это описано на странице документации Quarto.

7.4 Расширения RevealJS

Выделим несколько полезных источников:

• стандартный список расширений Quarto Extensions на странице документации Quarto, касающийся презентаций RevealJS;

• страница Quarto Extensions (автор Mickaël Canouil) содержит большое количество различных расширений и RevealJS-шаблонов;

• коллекция записей блога Slidecraft 101 (автор Emil Hvitfeldt) в доступной форме излагает вопросы стилизации, использования авторских расширений и советов по настройке презентаций RevealJS в Quarto.

Далее рассмотрим в качестве примеров некоторые полезные расширения для создания RevalJS-презентаций в Quarto.

7.4.1 Embedio

Для того, чтобы вставлять RevealJS-презентации в HTML-документы, можно воспользоваться конструкцией, позволяющей внедрять презентации как <iframe>:

```{=html}
<iframe width="800px" height="533px" style="border:2px solid #dee2e6;" src="output-location.html"></iframe>
```

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

Рисунок 7.9: Пример кода для внедрения RevealJS презентации в документ Quarto

7.4.2 Countdown

Библиотека {countdown} языка R добавляет таймер отсчета в слайды и HTML-документы, написанные на Quarto. Установить библиотеку с CRAN можно с помощью команды:

install.packages("countdown")

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

---
format: revealjs
---

## Пример презентации с таймером

```{r}
library(countdown)

# настройки таймера
countdown(minutes = 0, 
          seconds = 42)
```

Нажмите на таймер, чтобы начать обратный отсчет.

Текст презентации...

Раскрыть слайды на полное окно

7.4.3 Quiz Extension — опросы в презентациях

С помощью расширения Quiz Extension можно устраивать опросы непосредственно в презентациях. Для установки расширения необходимо использовать в директории проекта команду:

Terminal

quarto add parmsam/quarto-quiz

Далее в YAML-шапке документа-презентации необходимо прописать:

Quarto

---
title: "Заголовок презентации"
format:
  revealjs: default
revealjs-plugins:
  - quiz
---

Теперь для составления опроса достаточно написать в содержимом Quarto-файла:

## Наш опрос {.quiz-question}

- Выбор 1
- [Выбор 2 является верным]{.correct}
- Выбор 3
- Выбор 4

Раскрыть слайды на полное окно

7.4.4 Verticator — вертикальное расположение слайдов

Расширение Quarto Verticator используется для вертикальной демонстрации слайдов. Плагин указывает с помощью индикатора количество слайдов в вертикальной ориентации и обладает дополнительными настройками выбора цвета и стилизации.

Раскрыть слайды на полное окно

Установка Verticator происходит стандартным образом:

Terminal

quarto add martinomagnifico/quarto-verticator

В YAML-части презентации необходимо указать:

Quarto

---
title: "Заголовок презентации"
format:
  revealjs: default
revealjs-plugins:
  - verticator
---

Горизонтальный переход контролируется заголовками первого уровня, вертикальные — заголовками второго уровня.

7.4.5 Quarto clean theme

Минималистичная элегантная тема для презентаций Quarto clean позволяет создавать красивые презентации, которые хорошо смотрятся. Для установки перейдите в терминале в папку проекта и наберите команду:

Terminal

quarto use template grantmcdermott/quarto-revealjs-clean

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

Раскрыть слайды на полное окно

Заключение