Расширения для Quarto

Фильтры и шорткоды для системы Quarto.

Shortiquiz

С помощью этого расширения можно добавить тестовые задания на страницы сайта.

Шорткод qselect

Шорткод qselect добавляет в текст выпадающий список с вариантами ответов. Пример записи шорткода:

{{< qselect "int|float|str" show="int()" mono=true >}}

В результате получаем такой список: x int().

Параметры:

  • после названия шорткода указываются варианты ответов, разделённые символом |. Правильным будет считаться первый вариант ответа. Варианты перемешиваются перед показом.
  • show - что реально будет показано после правильного ответа. Необязательный параметр.
  • mono - если значение параметра true, ответ выводится моноширным шрифтом.
Цвет ответа

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

Шорткод qinput

Шорткод qinput добавляет текстовое поле для ввода ответа. После трёх неправильных ответов, можно предложить подсказку. Ответ отправляется на проверку после нажатия клавиши ↵Enter или снятия фокуса с поля ввода. Пример записи шорткода:

{{< qinput 2.5|2,5 hints="50% от значения напряжения" show="два с половиной" size=3 >}}

Параметры:

  • после названия шорткода указываются варианты ответов, разделённые символом |. Любой из перечисленных вариантов будет считаться правильным. После правильного ответа вместо текстового поля покажется первый указанный вариант ответа, если не указано значение параметра show.
  • tol - допуск по числовому значению. Применим только к числовым значениям. Если ответ равен \(n\), то правильным будет считаться число \(n - tol \le ответ \le n + tol\).
  • show - что показать на месте правильного ответа. Необязательный параметр.
  • hints - текст подсказки. Необязательный параметр.
  • mono - если значение параметра true, ответ выводится моноширным шрифтом.
  • size - ширина текстового поля (используется атрибут size тега input). Значение по умолчанию - 2. Необязательный параметр.

Вот пример использования этого шорткода. Рассмотрим ШИМ-сигнал с коэффициентом заполнения 50%. Если опорное напряжение равно 5 В, то среднее напряжение на выходе будет равно x ? два с половиной Вольта.

В следующее поле можно ввести в качестве ответа число от 8 до 12: x . В шорткоде используется параметр tol:

{{< qinput 10 tol=2 >}}

Вопрос с множественным выбором

Чтобы добавить вопрос, нужно подключить фильтр shortiquiz (ко всему проекту, или отдельной странице) и внутри блока с классом .qmulti добавить необходимую разметку. Пример минимальной разметки вопроса:

:::{.qmulti}

Как можно определить тип переменной?

- Использовать функцию `type`.
- Вывести значение переменной на экран и определить её тип по этому результату.
- Использовать её в выражении, значение которого известно.
- Посмотреть на описание переменной.

:::

В результате получается следующий вопрос:

✔

Как можно определить тип переменной?

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

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

В следующем примере показана разметка с подсказками и отзывами на каждый вариант ответа:

:::{.qmulti}

Какое значение выведется на экран:

```python
print(int(53.785))
```

> Как проще всего из целого числа получить вещественное?

- 53

  > Число 53.785 преобразуется в целое функцие `int`. Дробная часть исходного числа отбрасывается.

- Возникнет ошибка времени выполнения.

  > В этом выражении нет синтаксических ошибок.

- 54

  > Функция `int` не округляет вещественное число.

- 53.785

  > Функция `int` преобразует число в целое.

:::
✔

Какое значение выведется на экран:

print(int(53.785))

Как проще всего из целого числа получить вещественное?

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

В этом выражении нет синтаксических ошибок.

Функция int не округляет вещественное число.

Функция int преобразует число в целое.

Вопрос с несколькими правильными ответами

Внутри блока с классом .qcheck добавляется необходимая разметка. Пример минимальной разметки:

:::{.qcheck}

Выберите варианты с корректным именем переменной в Python.

- [x] `sum`
- [ ] `1st_name`
- [ ] `class`
- [x] `_last_name`
- [x] `Student`

:::

В результате получается следующий вопрос:

✔
±

Выберите варианты с корректным именем переменной в Python.

Правила разметки такие же как и для вопроса с множественным выбором. Варианты ответов помещаются в чек-лист. Правильные варианты ответов помечаются крестиком.

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

Пример разметки вопроса с отзывами:

:::{.qcheck}

Что из перечисленного является логическим выражением?

- [x] `True`

  > `True` и `False` - логические литералы. Их можно отнести к логическим выражениям.
  
- [x] `3 == 4`

  > Результат сравнения с помощью `==` принимает значение `True` или `False`.

- [ ] `3 + 4`

  > Значение этого выражения число.

- [x] `3 + 4 == 7`

  > Выражение 3+4 равно 7. `7 == 7` - логическое выражение.

- [ ] `"False"`

  > Значение в двойных кавычках, значит это строка.

:::

Вопрос, созданный по этой разметке:

✔
±

Что из перечисленного является логическим выражением?

True и False - логические литералы. Их можно отнести к логическим выражениям.

Результат сравнения с помощью == принимает значение True или False.

Значение этого выражения число.

Значение в двойных кавычках, значит это строка.

Выражение 3+4 равно 7. 7 == 7 - логическое выражение.

Задачи Парсона

Разметка для задания в котором необходимо расположить строки кода программы в правильном порядке. Атрибут spaces указывает на количество пробелов в отступе. По умолчанию значение равно 4.

Пример разметки:

:::{.qparson spaces=4}

```python
n = int(input('Введите число'))
while n > 0:
    print(n)
    n = n - 1
```

:::

Результат:

n = int(input('Введите число'))
while n > 0:
    print(n)
    n = n - 1
✔
print(n)
n = n - 1
while n > 0:
n = int(input('Введите число'))

Может понадобится объединить соседние строки кода в один блок инструкций. Это полезно, когда порядок следования этих инструкций не важен для правильности решения. Для этого через атрибут sep указывается произвольный сепаратор, который будет разделителем блоков для задания. Пример разметки со строкой-сепаратором ##:

:::{.qparson sep=##}

```python
n = int(input("n>"))
sum = 0##
while n > 0:##
    if n % 2 == 0:##
        print(n)
        n = n - 1##
```

:::

Результат:

n = int(input("n>"))
sum = 0
while n > 0:
    if n % 2 == 0:
        print(n)
        n = n - 1
✔
n = int(input("n>")) sum = 0
while n > 0:
if n % 2 == 0:
print(n) n = n - 1

К блокам можно подмешать набор дистракторов - неправильных вариантов, которые усложнят выполнение задания. Дистракторы помещаются во второй блок кода внутри элемента .qparson. На этот блок также распространяется сепаратор из атрибута sep. Пример разметки с одним дистрактором:

:::{.qparson spaces=4 sep=##}

```python
n = int(input())
sum = 0##
while n > 0:##
    if n % 2 == 0:##
        print(n)
        n = n - 1##
```

```py
n = int(input())
sum = 1##
```

:::

Результат:

n = int(input())
sum = 0
while n > 0:
    if n % 2 == 0:
        print(n)
        n = n - 1
✔
if n % 2 == 0:
n = int(input()) sum = 1
print(n) n = n - 1
while n > 0:
n = int(input()) sum = 0

Группировка вопросов

Несколько идущих подряд вопросов qmulti и qcheck можно сгруппировать с помощью блока qgroup.

:::{.qgroup}

:::{.qmulti}

...

:::

:::{.qcheck}

...

:::

:::

Пример результата:

 
✔
±

Что из перечисленного является логическим выражением?

True и False - логические литералы. Их можно отнести к логическим выражениям.

Значение в двойных кавычках, значит это строка.

Значение этого выражения число.

Выражение 3+4 равно 7. 7 == 7 - логическое выражение.

Результат сравнения с помощью == принимает значение True или False.

✔

Какое значение выведется на экран:

print(int(53.785))

Как проще всего из целого числа получить вещественное?

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

В этом выражении нет синтаксических ошибок.

Функция int не округляет вещественное число.

Функция int преобразует число в целое.

✔
±

Какие из логических выражений помогут определить, что значение переменной x лежит между 0 и 5?

Значение этого логического выражения всегда будет равно True, так как любое число больше 0 или меньше 5.

Правильный вариант. Значение x одновременно больше 0 и меньше 5.

Как не странно, такой вариант записи условия допустим в Python.

Не хватает x в правой части оператора and.

Разблокировка этапов

После правильных x да ответов (1) x разблокируется следующий шаг инструкции.

Этот контент будет скрыт, пока нет правильных ответов на два вопроса выше. В самом тексте могут быть новые инструкции. После правильных x да ответов (1) x разблокируется следующий шаг инструкции.

Это второй этап.

Это этап, открываемый по нажатию на кнопку.

Подсказки к решению задачи

В блоке .qsolution размещаются подсказки к решению задачи. Каждая подсказка - элемент нумерованного или ненумерованного списка. Внутри элемента списка может быть любая разметка. Подсказки открываются последовательно. Если в блоке .qsolution есть блок с кодом, он будет считаться решением задачи. Блок с решением доступен только после того, как открыты все подсказки. Изначально строки программы скрыты и открываются последовательно. После десятой открытой строки решения можно открыть код целиком.

Пример разметки:

:::{.qsolution}

1. Используйте каскадную форму записи инструкции ветвления.
2. Учтите, что к зимним относятся месяцы с номерами 1, 2 и 12.
3. Достаточно прописать логические выражения для трёх пор года. Если ни одно из трёх условий не выполнится, значит выполнится ветвь `else` для оставшейся последней поры года. Так получится сократить код.

```python
month = int(input("Введите номер месяца (от 1 до 12): "))

if month == 1 or month == 2 or month == 12:
    print("Зима")
elif month >=3 and month <=5:
    print("Весна")
elif month >= 6 and month <= 8:
    print("Лето")
else:
    print("Осень")
```

:::

Результат обработки этой разметки:

Используйте каскадную форму записи инструкции ветвления.
Учтите, что к зимним относятся месяцы с номерами 1, 2 и 12.
Достаточно прописать логические выражения для трёх пор года. Если ни одно из трёх условий не выполнится, значит выполнится ветвь else для оставшейся последней поры года. Так получится сократить код. 
month = int(input("Введите номер месяца (от 1 до 12): "))

if month == 1 or month == 2 or month == 12:
    print("Зима")
elif month >=3 and month <=5:
    print("Весна")
elif month >= 6 and month <= 8:
    print("Лето")
else:
    print("Осень")

Флэшкарты

Компонент добавляет на страницу набор карточек с вопросами и ответами. Учащийся читает вопрос и должен вспомнить ответ. После появления ответа учащийся выбирает из двух вариантов - удалось вспомнить ответ или нет. Если выбрать ответ Не помню, карточка добавляется в конец стопки.

Вопросы размещаются внутри блока с классом .qflashcards. Каждый вопрос - это элемент списка. Элемент цитата внутри элемента списка содержит ответ. Остальные элементы будут находится в формулировке вопроса.

Пример разметки:

:::{.qflashcards}

- Функция для вывода значений на экран.

  > `print()`

- Функция для ввода значений с клавиатуры.

  > `input()`

- Значения какого типа возвращает функция `input()`?

  > Строкового (`str`)

- Функция для преобразования значений в целые числа.

  > `int()`

:::

Результат обработки этой разметки:

Функция для вывода значений на экран.

print()

Функция для ввода значений с клавиатуры.

input()

Значения какого типа возвращает функция input()?

Строкового (str)

Функция для преобразования значений в целые числа.

int()

StepByStep

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

Шаги задания и самостоятельная работа

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

:::{.sbsaction}
Первое действие.
:::

Пояснения

:::{.sbsaction}
Второе действие.
:::

Дальнейшие пояснения

:::{.sbstask}
Что нужно сделать самостоятельно.
:::

Результат:

Первое действие.

Пояснения

Второе действие.

Дальнейшие пояснения

Что нужно сделать самостоятельно.

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

С помощью шорткода sbsreset добавляется кнопка, которая убирает все галочки с выполненных блоков:

{{< sbsreset >}}

Результат использования шорткода: .

Подсветка элементов изображения

Шорткоды element и pin создают элементы оформления, которые указывают на подсвечиваемые области изображения:

Подключите {{< element фоторезистор  hl="ldr" >}} одним из контактов к пину {{< pin 14  hl="pin14-02" >}}.

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

Изображение, элементы которого нужно подсветить помещается в блок с классом .hl-container. Кроме изображения в контейнер помещаются шорткоды hl в которых указывается id этого элемента подсветки (см. параметр hl в шорткоде element или pin), а также параметр pos, который содержит значение атрибутов top, left, width и height разделённые пробелом. Значение атрибутов указывается в процентах.

Полный пример разметки:

Подключите {{< element фоторезистор  hl="ldr" >}} одним из контактов к пину {{< pin 14  hl="pin14-02" >}}.

:::{.hl-container}

![](../../docs/iot/020.assets/image-20240827155913754.png)

{{< hl pin14-02 pos="39 75.3 3 5" >}}

{{< hl ldr pos="56 22.3 18 11" >}}

:::

Результат:

Подключите фоторезистор одним из контактов к пину 14.

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

Идентификаторы

Имена идентификаторов в параметре hl и в соответствующем шорткоде должны быть уникальными. Иначе стрелки и подсветка будут работать неправильно.

KbDisplay

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

Чтобы вставить на страницу изображение клавишу из алфавитно-цифровой области достаточно написать следующее: ++СИМВОЛ++. Например ++w++ преобразуется в W .

В клавиатурных комбинациях клавиши нужно разделить символом +. Иконки появятся рядом со специальными клавишами, если использовать следующие слова: shift, ctrl, alt, up, down, left, right, tab, backspace (или back), enter и win. К примеру разметка ++ctrl+shift+c++ преобразуется в ⌃Ctrl + ⇧Shift + C .