Prediction Card

The reader guesses first, then sees the answer and the explanation. Free, MIT · Content and social › Interactive explainers

"Guess first": the reader picks an option or types a number, checks it, then sees the answer, how far off they were and the author's explanation. The answer is compared by id or numerically with a tolerance; a new questionId resets the attempt.

Installation

npx valyro-cli@latest add prediction-card

npx shadcn@latest add https://valyro.xyz/r/prediction-card.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { PredictionCard } from 'valyro-ui';

Props

Prop	Type	Default
`questionId` *	`string`		Id of the question: a new id resets the attempt.
`question` *	`ChoiceQuestion \| NumericQuestion`		The question: one choice among options, or a number.
`answer` *	`ChoiceAnswer \| NumericAnswer`		The prepared answer, of the same kind as the question. It is in the page data, so this is not a secure exam.
`explanation` *	`ReactNode`		The explanation shown after the reveal.
`details`	`ReactNode`		A longer breakdown, folded under the explanation.
`tolerance`	`number`	`0`	Numeric questions: how far a guess may be to count as close, in the question's unit. Default 0.
`allowRetry`	`boolean`	`true`	Shows "Try again" after the reveal. Default true.
`onReveal`	`(result: PredictionResult) => void`		Called once per reveal with the guess and how it compares.
`source`	`{ label: string; href: string }`		A link to the source of the explanation.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`3`	Level of the question heading. Default 3.
`labels`	`Partial<PredictionCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Feature Hotspots — Numbered points on an image that open a note about each detail
Exploded Layers — Prepared image layers pulled apart with captions
Detail Dial — Choose how deep an explanation goes: short, detailed or full
Version Scrubber — Step through prepared versions of a design with one slider
Page Minimap — Schematic map of a long page with the visible area
Article Header — Article header: section, headline, lede, authors and date
Byline — Byline: authors, published and updated dates, reading time
Article Figure — Image with caption and photo credit
Pull Quote — Pull quote with attribution
Key Points — “Key points” summary block
Editor Note — Update, correction, disclosure and sponsored-content notes
Article Toc — Article table of contents that tracks the current section

Previous: Exploded Layers · Next: Detail Dial · All Content and social