В поисках информации об алгоритмах обхода графа я натолкнулся на страницу Introduction to the A* Algorithm блога Red Blob Games. Это было довольно давно, когда я только начал работать преподавателем. Тогда меня сильно удивил подход к объяснению работы алгоритмов. В первую очередь, автор сразу указал на практическую значимость этих алгоритмов. Блог посвящен разработке игр и алгоритмы обхода графов важны для навигации персонажей в компьютерном мире. Следующее, что удивило ещё больше - интерактивность всех иллюстраций, возможность проследить по шагам за выполнением алгоритма, поменять стартовые условия и, в реальном времени, увидеть результаты правок. Причём взаимодействие необязательно. Статью можно прочитать как обычный текст. Сейчас я встретил более строгое определение для такой подачи материала - Explorable explanation.
Основой для этой заметки станет эссе Брэта Виктора Explorable Explanations. Он же считается автором этого термина. Трудно подобрать хороший перевод, но я остановлюсь на словосочетании исследуемое объяснение. Надеюсь дальше по тексту станет понятно, почему этот перевод отражает задумку автора. По крайней мере, я на это надеюсь.
Сразу стоит сказать, что сам Брэт Виктор не предполагает использование описанных принципов лишь в педагогическом контексте. Исследуемое объяснение не обязательно должно учить, а скорее убедить читателя в корректности предложенных тезисов (см. дополнение к оригинальному эссе от 2024 года).
Располагают ли привычные для нас источники информации к активному её усвоению? Задаём ли мы сами себе вопросы по тексту или надеемся, что предоставленная нам информация верна? Чаще мы выступаем в роли пассивных читателей, так как сами ресурсы располагают к этому. Печатная книга не ответит на наши вопросы. Веб-страница может обладать динамическим поведением, но всё же, зачастую ничем не отличается от печатного источника. Как быть читателю, который хочет проверить собственные гипотезы, убедиться, что предлагаемая автором точка зрения верна? Активный читатель не хочет быть простым потребителем информации, но предпочтёт среду поощряющую критическое мышление.
Брэт Виктор предлагает следующие три принципа для создания исследуемых объяснений:
Подробнее рассмотрим каждый из трёх принципов.
Читатель реактивного документа взаимодействует с данными, приведёнными в статье, меняет значения и сразу видит результат изменения параметров. Модель, заложенная в основу объяснения, интерпретируется автором текста. Интерпретации могут быть ошибочными или намеренно вводящими в заблуждение. Если процесс обработки данных, зависимость величин друг от друга, исходный код модели доступен читателю, активный читатель самостоятельно сформирует понимание изучаемого материала.
В следующем примере показан фрагмент реактивного документа. Речь идёт об одной из тем в цифровой электронике - преобразовании аналогового сигнала в цифровой и разрядности аналогово-цифрового преобразователя. Текст объяснения можно прочитать и без взаимодействия с ним. Но пытливый читатель захочет посмотреть, как разрядность повлияет на диапазон выходных значений. Для этого попробуйте подвести мышь к подчёркнутому пунктиром значению и, зажав кнопку мыши, подвинуть курсор в разные стороны. Число бит поменяется и вместе с ним поменяются значения в формуле.
import {Tangle} from "@mbostock/tangle"
viewof b = Inputs.input(3)
md`АЦП характеризуется своей разрядностью *n*. АЦП вернёт значения от ${tex`0`} до ${tex`2^{n}-1`}. Например, если разрядность АЦП равна ${Inputs.bind(Tangle({min: 2, max: 10, minWidth: "2em"}), viewof b)}, то максимальное значений на выходе АЦП равно ${tex`2^{${b}}-1=${Math.pow(2, b)-1}`}.`Для самых любопытных я оставил исходный код демонстрации. Кликните по тексту Код чтобы показать его. Реактивность реализована с помощь фреймворка ObservableJS.
Следующий фрагмент объяснения также посвящён цифровой электронике, а точнее широтно-импульсной модуляции. В тексте рассказывается, что такое коэффициент заполнения и как он влияет на выходное напряжение. Значения, подчёркнутые пунктиром, всё также можно изменить.
viewof dutyCicle = Inputs.input(50)
viewof freq = Inputs.input(5)
rangeConverter = d3.scaleQuantize([0, 100], d3.range(30, 95));
seq = {
let arr = Array(1000).fill(0)
const period = Math.round(1000 / freq)
const highCount = Math.round(dutyCicle * period / 100)
const lowCount = period - highCount
let onePeriodArray = Array(highCount).fill(5)
onePeriodArray.push(...Array(lowCount).fill(0))
let fullSec = []
for (let index = 0; index < 50; ++index) {
fullSec.push(...onePeriodArray)
}
return fullSec.slice(0, 1000)
}
Vout = 5 * dutyCicle / 100
pwmResult = {
let s = ""
if(dutyCicle<=0)
s = "светодиод перестанет гореть"
if(dutyCicle>0 && dutyCicle< 50)
s = "светодиод будет гореть тусклo"
if(dutyCicle>=50 && dutyCicle < 99)
s = "светодиод будет гореть ярко"
if(dutyCicle === 100)
s = "светодиод будет гореть максимально ярко"
return s
}
md`Значение усредненного напряжения зависит от соотношения времени, когда значение на выходе пина равно 0 или 5 В. Если значение коэффициента заполнения равно ${Inputs.bind(Tangle({min: 0, max: 100, minWidth: "2em"}), viewof dutyCicle)}%, то среднее значение напряжения на контактах светодиода будет равно **<span style="color: #E64848">${Vout.toFixed(1)} В</span>** при максимально возможных 5 В. Это значит, что *${pwmResult}*. Множитель частоты: ${Inputs.bind(Tangle({min: 2, max: 20, minWidth: "2em"}), viewof freq)}.`Plot.plot({
x: {label: "Время, с"},
y:{domain:[0,5], label: "Напряжение, В"},
height: 200,
marks: [
Plot.ruleY([0]),
Plot.ruleY([Vout], {strokeWidth: 2, stroke: "#E64848"}),
Plot.lineY(seq, {x: (d,i) => i, stroke: "#2192FF", strokeWidth: 2}),
],
})
svg`<svg width="{width}" height="72px" viewBox="0 0 {width} 72" id="emoji" xmlns="http://www.w3.org/2000/svg">
<g id="color">
<path fill="hsl(201deg 100% ${rangeConverter(dutyCicle)}%)" stroke="none" d="M31.3882,26.7177c0,0,9.2367-1.8188,8.4221-9.1964c-1.3538-12.261-1.4678-10.4237-1.4678-10.4237 l-5.5293,1.0104C32.8133,8.1081,35.9998,21.7018,31.3882,26.7177z"/>
<path fill="hsl(201deg 100% ${rangeConverter(dutyCicle)}%)" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M34.5417,7.0359c-8.1462,0-14.75,7.496-14.75,16.7427v16.388h29.5"/>
<rect x="26.8333" y="44.5" width="4" height="22.095" fill="#d0cfce" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<rect x="41.3333" y="44.5" width="4" height="16.4792" fill="#d0cfce" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="hsl(201deg 100% ${rangeConverter(dutyCicle)}%)" stroke="none" d="M34.5417,7.5625c0,0,15.3232,0.5495,15.9047,13.875c0.9664,22.1458,0.0665,18.9191,0.0665,18.9191 l-9.3254-0.19C41.1875,40.1667,42.6247,15.125,34.5417,7.5625z"/>
<rect x="43.3333" y="40.7917" width="11.8333" height="3.0833" fill="#61b2e4" stroke="none"/>
<rect x="16.3353" y="40.7917" width="26.998" height="3.0833" fill="#92d3f5" stroke="none"/>
</g>
<g id="hair"/>
<g id="skin"/>
<g id="skin-shadow"/>
<g id="line">
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M34.5417,7.0359c-8.1462,0-14.75,7.496-14.75,16.7427v16.388h29.5"/>
<rect x="26.8333" y="44.5" width="4" height="22.095" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<rect x="41.3333" y="44.5" width="4" height="16.4792" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M25.8125,19.0625"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M35.2497,7.0359c8.1462,0,14.75,7.496,14.75,16.7427v7.388"/>
<polygon fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" points="16,44.5 45.5309,44.5 45.9063,44.5 56,44.5 56,40.1667 45.9063,40.1667 45.4999,40.1667 16,40.1667"/>
</g>
</svg>`Благодаря множественному представлению одной и той же концепции с помощью текста, графика и наглядного изображения светодиода, учащийся сформирует собственное представление о явлении, посмотрит на него под разными углами. Ученик не обязан останавливаться на примере значения коэффициента заполнения, предложенного преподавателем. Взаимодействие с исследуемым примером поможет найти ответы на возникшие вопросы, сделать открытия не заложенные в объяснение напрямую. Если в примере выше попробовать поменять множитель частоты, то среднее значение напряжения и яркость светодиода не изменяться. Такое открытие попросту не возможно сделать, изучая статичный текст.
Важный момент, на который обращает внимание Брэт Виктор - подобные исследуемые примеры всё ещё можно изучать без взаимодействия с реактивным документом. Автор не заставляет читателя взаимодействовать с примером. Важна не сама интерактивность, а интеграция исследуемого примера с объяснением автора.
Автор эссе подмечает, что в некоторых случаях читателю дают своеобразную интерактивную песочницу, ожидая, что он самостоятельно разберётся что к чему. Автор должен так структурировать текст, чтобы направить внимание читателя в нужном направлении, пробудить любопытство. Только после этого активный читатель сможет сформулировать собственные вопросы и гипотезы.
Невозможно предугадать заранее, какая дополнительная информация потребуется активному читателю, чтобы сформировать понимание темы. В таком случае, нужно предусмотреть ситуацию, когда активный читатель, столкнувшись с тезисом не подкреплённым интерактивным примером, или увидев незнакомый термин, захочет узнать подробности. Один из вариантов - выделить текст с незнакомым словом, скопировать его, открыть вкладку с поисковиком и найти значение. По словам Брэта Виктора, возникает дилемма выбора между любознательностью и ленью. В эссе демонстрируется любопытный способ решения проблемы: наведя курсор на интересующее слово, читатель нажимает клавишу W и видит всплывающее окно с фрагментом статьи из Википедии. В текстовое поле можно ввести дополнительные слова, чтобы найти раздел из вики-статьи.
В своих инструкциях к лабораторным я попробовал внедрить более простой вариант - глоссарий с терминами, о которых шла речь на прошлых занятиях. Например слово находится в глоссарии и с помощью специальной разметки добавляется на страницу. Если подвести мышь к слову, появится более подробная информация.
В каких случаях исследуемые объяснения более уместны нежели статичный текст? Авторы статьи Communicating with Interactive Articles предлагают следующие варианты: журналистские публикации, научные статьи и учебные материалы. На двух последних вариантах остановимся подробнее.
Концепция исследуемого объяснения хорошо подходит для научной статьи. Автор исследования излагает свои тезисы и сразу же подкрепляет их интерактивной демонстрацией, графиком или моделью. Активный читатель самостоятельно убедится в правильности выводов и корректности расчётов.
Пример издания с таким подходом - Distill. Опубликованные статьи следуют сформулированным выше принципам и при этом рецензируются1.
Больше всего меня заинтересовали образовательные возможности исследуемых объяснений. Помимо поощрения активного чтения материала, такой формат учебных материалов обладает и другими полезными свойствами.
Интерактивная симуляция на веб-странице не требует от читателя развертывания и настройки специализированного программного обеспечения. Эксперимент по физике или статистике можно организовать в браузере учащегося. Например ресурс Seeing Theory знакомит читателя с основами теории вероятности. Чтобы наглядно показать, что такое математическое ожидание, авторы ресурса предлагают симуляцию броска виртуального игрального кубика. Симулировав многократный бросок кубика, получаем, что результат стремится к значению 3,5:
Следующая положительная сторона интерактивности - способность реализовать самопроверку изученного, рефлексию2. В отличие от статичных вопросов в конце главы или параграфа, интерактивное объяснение даёт быструю обратную связь. В следующем видео показан пример исследуемого объяснения на сайте Mathigon. Помимо интерактивных элементов в тексте, которые подсвечивают элементы окружности, также появляется выпадающий список с вариантом продолжения предложения. Правильный ответ становится частью объяснения и открывает доступ к следующему абзацу текста:
Третий положительный момент - сокращение когнитивной нагрузки на читателя. Автор исследуемого объяснения должен руководствоваться принципом “контекстная информация по запросу” - доступ к дополнительной информации нужно сделать быстрым и простым. Например, почему бы не снабдить формулу пояснениями, которые учащийся включает только тогда, когда они нужны. Причём напомнить можно не только о самих параметрах формулы, но и о значении математических символов3:
Сюда же отнесу пример с книгой “Начала” Евклида, составленной математиком Оливером Бирном. Особенность его издания - цветные иллюстрации и пояснения к доказательствам4. Существует интерактивная версия книги, в которой элементы внутри доказательств и теорем подсвечивают элементы основного рисунка:
Множество других примеров исследуемых объяснений можно найти на сайте explorabl.es.
Несмотря на пользу описанного подхода к созданию учебных материалов, простых и удобных инструментов для разработки исследуемых объяснений нет. Большинство примеров, которые попали в эту заметку - уникальные разработки.
Среди доступных инструментов я бы выделил язык разметки Idyll. Но для его использования требуются минимальные знания в веб-разработке, использовании языка разметки Markdown и JS-библиотеки React.
Ещё один вариант, о котором я уже писал выше - фреймворк ObservableJS. С его помощью были реализованы интерактивные объяснения в некоторых инструкциях к лабораторным работам на этом сайте. Этот фреймворк показался мне более гибким. Тем более инструмент с помощью которого создан этот сайт5 поддерживает фреймворк “из коробки”.
Много времени ушло на то, чтобы сформулировать основные идеи, лежащие в основе исследуемых объяснений. Трудно сказать, получилось ли. К большому сожалению, подавляющее большинство ресурсов, которые мне попадались - на английском языке. В любом случае, у меня есть идеи, как реализовать обозначенные выше принципы на практике в своей работе.
К сожалению, новые публикации пока не принимаются. Причина не совсем понятна, но наверняка существуют похожие агрегаторы интерактивных публикаций.↩︎
О самопроверке и повторении изученного тоже есть материалы, оформленные в формате интерактивного объяснения. Например следующие рассказ про интервальное повторение.↩︎
Примеры с цветовым оформлением формул можно увидеть в заметке на сайте Better Explaned. На мой взгляд это очень удачная идея.↩︎
Книгу с русским переводом можно найти по этой ссылке.↩︎
Система для создания научных и технических публикаций Quarto↩︎