Class heatmap

Play with it now

22 students × 8 skills. Press “Run lesson” — each learner tackles two tasks per skill while BKT updates live. Hover cells for $P(L)$ and $P(\text{solve})$.

▶ Run lesson↺ Reset

lowhigh

	T1 +/−	T1 ×/÷	T1 ±·	T2 +/−	T2 ×/÷	T2 ±·	T3 +/−	T3 ×/÷	T3 ±·	mean
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
↓ weak	0/22	0/22	2/22	2/22	6/22	14/22	19/22	20/22	22/22

Hover over a cell — details by student and skill.

What it is

Heatmap matrix $22 \times 8$:

• rows — students (Ivan, Maria, Jüri, …);
• columns — topic micro-skills (parentheses, signs, rearranging, …);
• cell $(i,j)$ — student $i$’s $P(L)$ on skill $j$;
• color — red (0) through yellow (0.5) to green (1).

Teachers within seconds spot:

• Class-wide gaps (vertical red stripe);
• Lagging individuals (horizontal red band);
• Unique strengths (lonely bright cell).

This is the strongest demo visual — teams usually zoom here first to show class-wide gaps and outliers in seconds.

Example (mock data)

                 [parens][signs][move ][frac ][dist ][like ][check][divide]
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
...

Teacher reads:

• “fractions” column red everywhere — shared weakness;
• Maria’s row weak overall — needs remediation packet;
• Jüri’s row strong — assign stretch items.

Teacher acts: “Tomorrow — worksheet on fractions. Maria — review basics. Jüri — harder problems.”

Build pipeline

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

Pure projection of each learner’s state — no extra model. Heatmap rides directly on BKT.

Color palette

Plan: classic red–yellow–green (RdYlGn) like 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
}

Alternative — continuous gradient via CSS hsl(120 * pL, 70%, 50%) — but discrete steps read faster.

Interactivity (widget roadmap)

Once interactive (see widgets overview — phase 3 plan):

1. Hover cell → tooltip with exact $P(L)$, skill, student.
2. Click cell → drill into student timeline.
3. Click column → tasks targeting that skill sorted for chosen student.
4. Click row → suggested plan for tomorrow.
5. “Run lesson” → simulate next batch of tasks updating heatmap via BKT.

Aggregate insights

Above the grid show summary tiles:

18 / 22 students have P(fractions) < 0.5
14 / 22 have P(parens) < 0.5
Class average strong on “verify solution” (mean P = 0.78)

→ Button: “Draft tomorrow’s worksheet focusing on class weak spots”

Covers the headline workflow: open MATx, five seconds, action plan. Planning time → zero.

Talking points: class heatmap

“Class map is a direct visualization of BKT state. Teachers finally see the whole classroom picture — previously only possible by hand-grading 22 tests and tallying mistake types. Hours → seconds.”

Related

• Selector in action — individual recommendations underpinning the grid.
• Explainability — tooltip copy ideas.
• Future: interactive ClassHeatmap widget playground.