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

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

Shortiquiz

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

Шорткод 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 - t o l \leq о т в е т \leq n + t o l$ .
show - что показать на месте правильного ответа. Необязательный параметр.
hints - текст подсказки. Необязательный параметр.
mono - если значение параметра true, ответ выводится моноширным шрифтом.
size - ширина текстового поля (используется атрибут size тега input). Значение по умолчанию - 2. Необязательный параметр.

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

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

{{< qinput 10 tol=2 >}}

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

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

:::{.qmulti}

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

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

:::

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

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

Вывести значение переменной на экран и определить её тип по этому результату.

Использовать её в выражении, значение которого известно.

Посмотреть на описание переменной.

Использовать функцию type.

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

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

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

:::{.qmulti}

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

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

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

- 53

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

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

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

- 54

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

- 53.785

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

:::

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

print(int(53.785))

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

53.785

Открытый вопрос

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

:::{.qinput}

Каким будет результат выполнения кода:

```python
print(42)
```

> Обратите внимание на то, что написано в скобках.

- 42

- 24

  > Цифры перепутаны местами.

:::

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

Каким будет результат выполнения кода:

print(42)

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

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

:::{.qcheck}

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

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

:::

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

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

1st_name

_last_name

class

Student

sum

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

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

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

:::{.qcheck}

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

- [x] `True`

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

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

- [ ] `3 + 4`

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

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

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

- [ ] `"False"`

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

:::

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

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

"False"

3 == 4

True

3 + 4 == 7

3 + 4

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

Разметка для задания в котором необходимо расположить строки кода программы в правильном порядке. Атрибут 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

Элементы не являющиеся блоками кода считаются условием задачи.

Это могут быть изображения, диаграммы, таблицы.

while n > 0:

n = n - 1

n = int(input('Введите число'))

print(n)

Может понадобится объединить соседние строки кода в один блок инструкций. Это полезно, когда порядок следования этих инструкций не важен для правильности решения. Для этого через атрибут 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

if n % 2 == 0:

while n > 0:

n = int(input("n>"))
sum = 0

n = n - 1

print(n)

К блокам можно подмешать набор дистракторов - неправильных вариантов, которые усложнят выполнение задания. Дистракторы помещаются во второй блок кода внутри элемента .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

n = int(input())
sum = 1

while n > 0:

n = int(input())
sum = 0

n = n + 1

n = n - 1

print(n)

if n % 2 == 0:

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

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

::::{.qgroup}

:::{.qmulti}

...

:::

:::{.qcheck}

...

:::

:::{.qparson}

...

:::

::::

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

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

Условие задачи.

n = int(input('Введите число'))

print(n)

n = n - 1

while n > 0:

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

После x правильных ответов на эти x два вопроса, разблокируется следующий шаг инструкции. У вопросов должны быть указаны параметры gate - имя шага: {{< qinput два|2 gate=s1 >}}.

Очередной шаг помещается в блок с классом .qgate и атрибутом name - именем этапа:

::::{.qgate name=s1}

...

::::

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

В блоке .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("Осень")
```

:::

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

Флэшкарты

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

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

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

:::{.qflashcards}

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

  > `print()`

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

  > `input()`

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

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

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

  > `int()`

:::

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

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

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

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

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

StepByStep

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

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

Чтобы оформить набор действий в один шаг инструкции, их нужно обернуть в элемент с классом .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 и в соответствующем шорткоде должны быть уникальными. Иначе стрелки и подсветка будут работать неправильно.

Хотспот

Шорткод hs позволяет добавить активную точку с всплывающей подсказкой на изображение:

{{< hs "Текст подсказки" left top marker="1" >}}

Параметры шорткода:

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

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

🖈

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

:::{.hl-container}

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

{{< hs "Светодиод с резистором, ограничивающим ток." 73 66 marker="1" >}}

{{< hs "Фоторезистор меняет своё сопротивление в зависимости от уровня освещённости" 19.5 55 >}}

:::{.sbshs left=45 top=20 marker=2}

Следующий код включит светодиод:

```python
from machine import Pin
led = Pin(12, Pin.OUT)
led.on()
```

:::

:::

Skpython

Вставка Python-интерпретатора на страницу. Ссылка на GitHub.

```sk-python
sum_ch = 0
n = int(input(">"))
for i in range(n+1):
    sum_ch = sum_ch + i
print(sum_ch)
```

1
2
3
4
5
sum_ch = 0
n = int(input(">"))
for i in range(n+1):
    sum_ch = sum_ch + i
print(sum_ch)
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

sum_ch = 0
n = int(input(">"))
for i in range(n+1):
    sum_ch = sum_ch + i
print(sum_ch)

KbDisplay

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

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

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