Тепловая карта класса

Поиграй сразу

22 ученика × 8 навыков. Жми «Прогнать урок» — каждый ученик решает по 2 задачи на каждый навык, и BKT обновляет состояние в реальном времени. Наводи на ячейки — видно $P(L)$ и $P(\text{solve})$ .

низковысоко

	скобки	знаки	перенос	дробь	распред	подобн	проверка	деление	средн
Ivan	.71	.83	.56	.50	.65	.80	.87	.83	0.72
Maria	.52	.64	.54	.27	.50	.52	.64	.53	0.52
Jüri	.88	.98	.89	.77	.91	.97	.98	.98	0.92
Anna	.81	.87	.69	.71	.76	.61	.86	.81	0.77
Mikk	.64	.87	.73	.50	.81	.67	.72	.77	0.71
Liisa	.73	.76	.57	.48	.74	.74	.64	.66	0.66
Karl	.84	.77	.76	.71	.66	.70	.88	.95	0.78
Eva	.73	.77	.81	.66	.55	.68	.66	.70	0.69
Mart	.66	.76	.70	.57	.84	.74	.73	.71	0.71
Linda	.62	.81	.53	.43	.53	.71	.84	.83	0.66
Janek	.77	.75	.86	.51	.64	.74	.75	.72	0.72
Helen	.75	.75	.65	.39	.74	.56	.62	.84	0.66
Toomas	.81	.84	.90	.63	.82	.71	.76	.74	0.78
Kadi	.74	.88	.71	.59	.81	.69	.81	.73	0.75
Rauno	.64	.89	.61	.55	.64	.74	.78	.72	0.69
Triin	.70	.55	.48	.45	.47	.57	.62	.74	0.57
Henri	.84	.70	.85	.60	.82	.78	.75	.74	0.76
Kristiina	.62	.71	.78	.66	.67	.61	.83	.85	0.72
Oskar	.72	.83	.66	.43	.64	.78	.70	.84	0.70
Pille	.73	.72	.67	.41	.55	.79	.70	.80	0.67
Indrek	.46	.57	.77	.38	.77	.72	.61	.69	0.62
Heli	.64	.84	.62	.40	.58	.51	.60	.61	0.60
↓ слабых	1/22	0/22	1/22	10/22	2/22	0/22	0/22	0/22

Наведи на ячейку — детали по ученику и навыку.

Что это и зачем

Heatmap — это матрица $22 \times 8$ :

по строкам — ученики класса (Ivan, Maria, Jüri, …);
по столбцам — микро-навыки темы (скобки, знаки, перенос, …);
ячейка $i, j$ — $P(L)$ ученика $i$ по навыку $j$ ;
цвет — от красного (0) через жёлтый (0.5) до зелёного (1).

Учитель за две секунды видит:

где общая дыра в классе (вертикальная красная полоса);
кто отстаёт от всех (горизонтальная красная полоса);
кто уникально хорош (одинокая зелёная клетка).

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

Пример (моковые данные)

                 [скобки][знаки][перенос][дробь][распред][подобн][проверка][деление]
Ivan              0.42    0.83    0.66    0.30    0.55    0.71    0.40       0.78
Maria             0.31    0.40    0.55    0.20    0.45    0.60    0.30       0.62
Jüri              0.78    0.85    0.81    0.70    0.80    0.85    0.75       0.88
Anna              0.55    0.62    0.71    0.40    0.60    0.68    0.50       0.74
...

Что видит учитель:

столбец «дробь» — везде красно (у всех проблема);
строка Maria — везде слабо (отстающая);
строка Jüri — везде сильно (передовик).

Что делает учитель: «Завтра — лист на дроби. Maria — лист на повторение базы. Jüri — что-то посложнее.»

Алгоритм построения

const heatmap = students.map(student => ({
  name: student.name,
  cells: microskills.map(skill => ({
    skill: skill.id,
    pL: student.mastery[skill.id] ?? params.pInit,
  }))
}));

То есть это просто проекция state’ов всех учеников. Никакой дополнительной модели — heatmap живёт напрямую на BKT-карте.

Цветовая схема

Сейчас в плане использовать стандартную «red-yellow-green» (RdYlGn) из matplotlib:

function color(pL: number): string {
  if (pL < 0.3) return '#dc2626';     // red
  if (pL < 0.5) return '#f59e0b';     // amber
  if (pL < 0.7) return '#eab308';     // yellow
  if (pL < 0.85) return '#84cc16';    // lime
  return '#16a34a';                   // green
}

Альтернатива — непрерывный градиент через CSS hsl(120 * pL, 70%, 50%), но дискретные ступени читаются легче.

Интерактивность (для виджета `ClassHeatmap`)

Когда у нас будет интерактивный компонент (см. главу про виджеты — фаза 3 в плане):

Hover на ячейке → tooltip с точным $P(L)$ , навыком и учеником.
Click на ячейке → переход на «карту ученика» с подробной историей.
Click на колонке → группировка задач, тренирующих этот навык, отсортированных для нужного ученика.
Click на строке → план для этого ученика на завтра.
«Прогнать урок» → симулирует, как изменилась бы карта после следующего набора задач (using BKT update).

Aggregate insights

Над heatmap можно показать сводку:

У 18 из 22 учеников P(дробь) < 0.5
У 14 из 22 P(скобки) < 0.5
В среднем класс силен в "проверка решения" (mean P = 0.78)

→ Кнопка: «Собрать листок на завтра, фокус — слабые места класса»

Это закрывает явный сценарий: учитель открывает MATx, пять секунд смотрит, понимает что делать. Время на план — ноль.

Короткая формулировка для ответа про heatmap

«Карта класса — прямая визуализация BKT-состояния. У учителя теперь то, чего раньше не было: картина класса целиком. До MATx единственный способ это иметь — проверить 22 теста вручную и посчитать ошибки по типам. Это часы работы. У нас — секунды.»

Связано

Selector в действии — откуда берутся индивидуальные рекомендации, на которых строится heatmap.
Объяснимость — что показать в tooltip при наведении на ячейку.
В будущем: интерактивный виджет ClassHeatmap — играешь руками.