Study toolsPro

Flashcards, a quiz and a study guide outline made from the sources a person selected.

Markdown

On this page

ProFlip a card, mark it again or good, then try the quiz and the study guide.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/study-tools

Usage

tsx

import { StudyTools } from "@/components/ui/chatcn/pro/study-tools"

<StudyTools sources={selected} flashcards={cards} quiz={questions} guide={outline} />

Cards flip in place and only unlock Again and Good once the answer is showing, so grading always follows recall. Cards marked Again come back as their own short deck at the end. The quiz locks your pick, marks the right answer in green and a wrong pick in red with a glyph for each, then explains the answer and names its source. Every point in the study guide cites its sources by number, and the numbers are listed under the outline.

Examples

States

ProStudy guide, quiz, generating, no sources and error.

Props

Prop	Type	Notes
`sources`	`{ id, title }[]`	The selected sources; empty shows how to start
`flashcards`	`Flashcard[]`	`{ id, front, back, source? }`
`quiz`	`QuizQuestion[]`	`{ id, question, options, answer, explanation, source? }`
`guide`	`GuideSection[]`	`{ id, title, points: { text, sources? }[] }`
`tab`, `defaultTab`, `onTabChange`	`"cards" \| "quiz" \| "guide"`	Default cards
`status`, `error`, `onRetry`	`"ready" \| "generating" \| "error"`	Request state
`onReview`	`(id, "again" \| "good") => void`	Store spaced repetition results
`onCite`	`(sourceId) => void`	Open a cited source
`labels`	`Partial<StudyToolsLabels>`	Every string

Keyboard

Key	Action
Space, Enter	Flip the focused card
1, 2	Again or Good once the answer shows
Arrow keys	Move between tabs, or between quiz answers

Accessibility

Tabs are Base UI tabs. The card is a toggle button whose name includes the answer once flipped.
Quiz answers are a native radio group inside a fieldset named by the question; the verdict and explanation are announced politely.
Right and wrong answers carry a check or a cross, not only color. Citations are buttons named with the source title.

Motion

A card flips in 280 ms when clicked. Flips from the keyboard and with reduced motion swap faces instantly, and the next card never animates in. Deck progress segments change color in 150 ms.