KQ-2053 · HINT/LADDER

Hint Ladder

A tutoring thread that answers with a ladder of hints instead of the solution: rungs are dealt face down on springs.snap in a cascade, and each turns over only when asked — a 180° flip on springs.snap with the hint on the far side of the card — while the ladder's rail fills on springs.glide with how much help was used. The worked answer waits behind a bar that fills linearly while held and drains back on springs.snap if let go, then unfolds to its measured height on springs.glide; checking the learner's working marks it line by line with ticks and crosses that draw on springs.flick. H turns the next hint, holding Space on the bar reveals the answer, and under 23rem the rungs become one deck you swipe up or press Enter on.

KQ-2053 · HINT/LADDER

Levelling · exercise 4

Fieldline Tutor · hints before answers

You:
Stuck on this one. Can you help without giving it away?
Reduce the level of peg C
From one set-up of the level, a backsight on benchmark BM reads 1.385 m and a foresight on peg C reads 2.910 m. BM stands at a reduced level of 41.250 m. What is the reduced level of C?
RL of BM
41.250 m
Backsight
1.385 m
Foresight
2.910 m
Fieldline Tutor:
Let’s climb it one rung at a time. Turn a hint over only when you’re stuck; the worked answer stays put until you hold for it.
Help used1 of 3 hints
1. Hint 1 · Where to startStart from the one height you know for certain: the benchmark's reduced level, 41.250 m.
2. Hint 2The method
3. Hint 3Nearly there
Hint 1 · Where to startStart from the one height you know for certain: the benchmark's reduced level, 41.250 m.
Press and hold, or hold Space on the bar. Try the next rung first.

1 of 3 hints · answer held back

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/hint-ladder

Props

problem: HintLadderProblem; default defaultHintLadderProblem; The exercise: title, statement and optional givens.
hints: HintRung[]; default defaultHintLadderHints; The rungs, easiest help first, each with a teaser shown face down and the hint text.
solution: string[]; default defaultHintLadderSolution; The worked answer, one line per step; the last line is the answer.
checks: HintLadderCheck[]; default defaultHintLadderChecks; Step values the checker recognises, right or wrong, with what to say.
value / defaultValue: number; default 0; Controlled or initial count of hints turned over.
onValueChange: (revealed: number) => void; default —; Fires from the press, key or swipe that turned a hint over.
onRevealHint: (index: number, hint: HintRung) => void; default —; A hint was turned over.
onAttempt: (lines: string[], marks: HintLadderMark[]) => void; default —; Check my work was pressed, with each line and its mark.
onRevealAnswer: () => void; default —; The worked answer was revealed.
defaultAttempt: string; default —; The learner's working when the surface mounts.
rungStyle: "card" | "index" | "tape"; default "card"; Raised cards that flip, ruled index cards, or slim rows sealed with tape that peels.
revealHold: number; default 900; Milliseconds the answer bar must be held.
accent: string; default "var(--accent-bright)"; The rail, turned cards and the hold fill — any CSS colour.
tutor: string; default "Fieldline Tutor"; Who is tutoring.
title: string; default "Levelling · exercise 4"; The surface's heading and accessible name.
status: "ready" | "loading" | "error"; default "ready"; Whether the exercise has arrived.
onRetry: () => void; default —; Try again was pressed after the exercise failed to load.
height: number; default 520; Height of the surface in px; the thread scrolls inside it.
disabled: boolean; default false; Read only: nothing can be turned, held or checked.
className: string; default —; Classes for the surface.

Prop	Type	Default	Description
problem	HintLadderProblem	defaultHintLadderProblem	The exercise: title, statement and optional givens.
hints	HintRung[]	defaultHintLadderHints	The rungs, easiest help first, each with a teaser shown face down and the hint text.
solution	string[]	defaultHintLadderSolution	The worked answer, one line per step; the last line is the answer.
checks	HintLadderCheck[]	defaultHintLadderChecks	Step values the checker recognises, right or wrong, with what to say.
value / defaultValue	number	0	Controlled or initial count of hints turned over.
onValueChange	(revealed: number) => void	—	Fires from the press, key or swipe that turned a hint over.
onRevealHint	(index: number, hint: HintRung) => void	—	A hint was turned over.
onAttempt	(lines: string[], marks: HintLadderMark[]) => void	—	Check my work was pressed, with each line and its mark.
onRevealAnswer	() => void	—	The worked answer was revealed.
defaultAttempt	string	—	The learner's working when the surface mounts.
rungStyle	"card" \| "index" \| "tape"	"card"	Raised cards that flip, ruled index cards, or slim rows sealed with tape that peels.
revealHold	number	900	Milliseconds the answer bar must be held.
accent	string	"var(--accent-bright)"	The rail, turned cards and the hold fill — any CSS colour.
tutor	string	"Fieldline Tutor"	Who is tutoring.
title	string	"Levelling · exercise 4"	The surface's heading and accessible name.
status	"ready" \| "loading" \| "error"	"ready"	Whether the exercise has arrived.
onRetry	() => void	—	Try again was pressed after the exercise failed to load.
height	number	520	Height of the surface in px; the thread scrolls inside it.
disabled	boolean	false	Read only: nothing can be turned, held or checked.
className	string	—	Classes for the surface.