UniColt Probe — Incremental Chart Diagnosis

Layer 0 — Environment

Chart.js

Alpine.js

CSRF Token

meta[name=csrf-token]

LocalStorage

R/W Test

Layer 1 — Baseline Chart (No Container Interference)

Canvas rendered in normal document flow. No fixed/absolute parent. Hardcoded data [8,5,9,4,7,6,8,3,9]. If this fails, CDN or browser is the issue.

Radar Render — Normal Flow

Geometry at Render Time

Metric	Value	Verdict
width
height
offsetParent

Layer 2 — Fixed Inset-0 Container (Real Quiz Structure)

Exact same structure as the quiz: position:fixed; inset:0 parent → inner container → canvas. This is where the real app's chart dies if geometry is zero. We test at 3 timing points: immediate / $nextTick / 150ms setTimeout.

Opens overlay exactly like the real quiz, then runs geometry probes

Layer 3 — Score Data Flow (responses → chart datasets)

Mocks responses exactly as saveAndEvaluate() builds them (score = raw*10 since API returns 0-10 scaled to 0-100). Verifies that updateCharts() builds the correct data array and pushes it to Chart.js.

Mock Responses Object

Idx	Label	Answer (truncated)	Score in responses	Goes to Chart

updateCharts() Output Verification

dimData (D1-D9 → indices 0-8)

eitrData (E1-E9 → indices 9-17)

Critical check: responses[i].score must be a number (not string). Type check:

Layer 3: Visual Verification — Charts with Mock Data

Normal flow canvas. If shapes match the mock scores table above → data pipeline is correct.

D1-D9 with mock scores

E1-E9 with mock scores

Layer 4 — Live API Probes

Tests actual server endpoints. Authentication required for some routes.

UniColt Chart Probe