Prediction Card

Сначала предположение читателя, затем ответ и разбор. Бесплатно, MIT · Контент и соцсети › Интерактивные объяснения

Установка

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';

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.