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

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

22 ученика × 9 микро-навыков темы «Defineerimine» (те же 9 столбцов из прогрессионной матрицы — T1/T2/T3 × +/− , ×/÷ , mix). Жми «Прогнать урок» — каждый ученик решает по 2 задачи на каждый навык, и BKT обновляет состояние в реальном времени. Наводи на ячейки — видно $P(L)$ и $P(solve)$.

▶ Прогнать урок↺ Reset

низковысоко

	T1 +/−	T1 ×/÷	T1 ±·	T2 +/−	T2 ×/÷	T2 ±·	T3 +/−	T3 ×/÷	T3 ±·	средн
Ivan	.95	.92	.62	.69	.60	.58	.52	.47	.22	0.62
Maria	.74	.70	.51	.46	.41	.32	.29	.19	.06	0.41
Jüri	.98	.98	.95	.98	.88	.81	.75	.73	.43	0.83
Anna	.97	.90	.67	.78	.62	.44	.48	.42	.30	0.62
Mikk	.84	.87	.65	.62	.62	.44	.37	.36	.17	0.55
Liisa	.86	.78	.53	.58	.55	.45	.29	.26	.08	0.48
Karl	.98	.91	.77	.85	.63	.55	.56	.56	.36	0.69
Eva	.89	.81	.71	.72	.47	.44	.33	.32	.15	0.54
Mart	.88	.84	.67	.70	.67	.51	.40	.36	.34	0.60
Linda	.76	.77	.47	.52	.39	.40	.37	.33	.07	0.45
Janek	.91	.80	.73	.63	.52	.48	.38	.33	.20	0.55
Helen	.87	.77	.58	.53	.55	.34	.27	.37	.16	0.49
Toomas	.98	.92	.82	.77	.69	.53	.45	.41	.34	0.66
Kadi	.90	.88	.64	.68	.62	.45	.42	.34	.18	0.57
Rauno	.87	.92	.61	.69	.55	.51	.43	.36	.26	0.58
Triin	.78	.58	.41	.50	.32	.28	.21	.25	.05	0.38
Henri	.98	.86	.82	.78	.73	.60	.48	.44	.32	0.67
Kristiina	.86	.81	.72	.75	.57	.43	.46	.44	.20	0.58
Oskar	.89	.85	.61	.58	.52	.50	.35	.40	.23	0.55
Pille	.86	.75	.59	.54	.43	.48	.32	.35	.19	0.50
Indrek	.67	.63	.62	.49	.53	.40	.23	.25	.09	0.43
Heli	.81	.82	.56	.53	.45	.31	.26	.23	.21	0.47
↓ слабых	0/22	0/22	2/22	2/22	6/22	14/22	19/22	20/22	22/22

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

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

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

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

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

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

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

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

              [T1 +/−][T1 ×/÷][T1 mix][T2 +/−][T2 ×/÷][T2 mix][T3 +/−][T3 ×/÷][T3 mix]
Ivan            0.88    0.79    0.62    0.66    0.51    0.40    0.38    0.30    0.18
Maria           0.72    0.68    0.51    0.49    0.42    0.30    0.28    0.22    0.10
Jüri            0.96    0.94    0.85    0.85    0.78    0.72    0.62    0.55    0.40
Anna            0.85    0.80    0.68    0.62    0.55    0.45    0.40    0.32    0.18
...

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

• правая колонка T3 mix — везде красно (никто пока не вытягивает «boss»-задачи матрицы — задачи 17–20);
• строка Maria — глобально слабо: даже T1 на грани (отстающая);
• строка Jüri — почти зелёная до самого T3, и T3 mix уже на грани жёлтого (передовик, готов к комбинированным задачам).

Что делает учитель: «Завтра — лист на T2.mix (контекстные задачи сразу с +/− и ×/÷). Maria — лист на повторение T1. Jüri — задачи 17–20 из матрицы.»

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

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 в плане):

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

Aggregate insights

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

У 21 из 22 учеников P(T3 mix) < 0.5
У 17 из 22 P(T3 +/−) < 0.5
В среднем класс силён в "T1 +/−" (mean P = 0.86)

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

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

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

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

Связано

• Прогрессионная матрица — откуда взялись ровно эти 9 столбцов и в каком порядке. Heatmap — это её BKT-проекция на 22 ученика.
• Selector в действии — откуда берутся индивидуальные рекомендации, на которых строится heatmap.
• Объяснимость — что показать в tooltip при наведении на ячейку.