LMSCN

https://lmscn.vercel.app/docs
Admin
LMSCN is a collection of plug-and-play React learning components built on shadcn/ui and Tailwind CSS...
Tokens:10,143
Snippets:94
Trust Score:7.8
Update:3 months ago
Show doc for...
Tokens:
Raw
### Initialize and Install lmscn Components

Source: https://lmscn.vercel.app/docs

Commands to initialize shadcn/ui, install necessary primitives, and add specific learning components to your project.

```bash
# 1. Initialise shadcn/ui if you haven't already
npx shadcn@latest init

# 2. Install all required primitives
npx shadcn@latest add button card progress badge input scroll-area separator tooltip popover

# 3. Add the components you need
npx shadcn@latest add https://lmscn.vercel.app/r/quiz.json
npx shadcn@latest add https://lmscn.vercel.app/r/flashcards.json
```

--------------------------------

### Install Progress Tracker

Source: https://lmscn.vercel.app/docs/progress-tracker

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add https://lmscn.vercel.app/r/progress-tracker.json
```

--------------------------------

### Install shadcn/ui primitives

Source: https://lmscn.vercel.app/docs/installation

Install the necessary primitives required by lmscn components.

```bash
npx shadcn@latest add button card progress badge input scroll-area separator tooltip popover
```

--------------------------------

### Install Match Component

Source: https://lmscn.vercel.app/docs/match

Use the shadcn CLI to add the Match component to your project.

```bash
npx shadcn@latest add https://lmscn.vercel.app/r/match.json
```

--------------------------------

### Install lmscn components via namespace

Source: https://lmscn.vercel.app/docs/installation

Install components using the configured @lmscn namespace after updating components.json.

```bash
npx shadcn@latest add @lmscn/quiz
npx shadcn@latest add @lmscn/flashcards
npx shadcn@latest add @lmscn/match
npx shadcn@latest add @lmscn/fill-blank
npx shadcn@latest add @lmscn/scramble
npx shadcn@latest add @lmscn/order
npx shadcn@latest add @lmscn/reading-passage
npx shadcn@latest add @lmscn/progress-tracker
npx shadcn@latest add @lmscn/spaced-repetition
npx shadcn@latest add @lmscn/hotspot
```

--------------------------------

### Install Required Primitives

Source: https://lmscn.vercel.app/docs/progress-tracker

The component depends on badge, card, progress, and tooltip primitives.

```bash
npx shadcn@latest add badge card progress tooltip
```

--------------------------------

### Install Order Component

Source: https://lmscn.vercel.app/docs/order

Use the shadcn CLI to add the Order component and its required dependencies to your project.

```bash
npx shadcn@latest add https://lmscn.vercel.app/r/order.json
```

```bash
npx shadcn@latest add button progress badge
```

--------------------------------

### Install Spaced Repetition Component

Source: https://lmscn.vercel.app/docs/spaced-repetition

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add https://lmscn.vercel.app/r/spaced-repetition.json
```

--------------------------------

### Install lmscn components via direct URL

Source: https://lmscn.vercel.app/docs/installation

Add individual components directly using their JSON registry URLs.

```bash
npx shadcn@latest add https://lmscn.vercel.app/r/quiz.json
npx shadcn@latest add https://lmscn.vercel.app/r/flashcards.json
npx shadcn@latest add https://lmscn.vercel.app/r/match.json
npx shadcn@latest add https://lmscn.vercel.app/r/fill-blank.json
npx shadcn@latest add https://lmscn.vercel.app/r/scramble.json
npx shadcn@latest add https://lmscn.vercel.app/r/order.json
npx shadcn@latest add https://lmscn.vercel.app/r/reading-passage.json
npx shadcn@latest add https://lmscn.vercel.app/r/progress-tracker.json
npx shadcn@latest add https://lmscn.vercel.app/r/spaced-repetition.json
npx shadcn@latest add https://lmscn.vercel.app/r/hotspot.json
```

--------------------------------

### Install Required Primitives

Source: https://lmscn.vercel.app/docs/match

The Match component depends on button, progress, and badge primitives.

```bash
npx shadcn@latest add button progress badge
```

--------------------------------

### Install Required Primitives

Source: https://lmscn.vercel.app/docs/spaced-repetition

The component depends on button, badge, card, and progress primitives.

```bash
npx shadcn@latest add button badge card progress
```

--------------------------------

### Install Quiz Component

Source: https://lmscn.vercel.app/docs/quiz

Use the shadcn CLI to add the Quiz component and its required dependencies to your project.

```bash
npx shadcn@latest add https://lmscn.vercel.app/r/quiz.json
```

```bash
npx shadcn@latest add button card progress badge
```

--------------------------------

### Install Reading Passage Component

Source: https://lmscn.vercel.app/docs/reading-passage

Use the shadcn CLI to add the component and its required dependencies to your project.

```bash
npx shadcn@latest add https://lmscn.vercel.app/r/reading-passage.json
```

```bash
npx shadcn@latest add button card badge progress scroll-area separator
```

--------------------------------

### Install Hotspot Component

Source: https://lmscn.vercel.app/docs/hotspot

Use the shadcn CLI to add the Hotspot component and its required dependencies to your project.

```bash
npx shadcn@latest add https://lmscn.vercel.app/r/hotspot.json
```

```bash
npx shadcn@latest add button badge input progress popover
```

--------------------------------

### Configure registry namespace

Source: https://lmscn.vercel.app/docs/installation

Add the lmscn registry to your components.json file to enable short-name installation.

```json
{
  "registries": {
    "@lmscn": "https://lmscn.vercel.app/r/{name}.json"
  }
}
```

--------------------------------

### Install Flashcards Component

Source: https://lmscn.vercel.app/docs/flashcards

Use the shadcn CLI to add the Flashcards component and its required dependencies to your project.

```bash
npx shadcn@latest add https://lmscn.vercel.app/r/flashcards.json
```

```bash
npx shadcn@latest add button card progress badge
```

--------------------------------

### Install Scramble Component

Source: https://lmscn.vercel.app/docs/scramble

Use the shadcn CLI to add the Scramble component and its required dependencies to your project.

```bash
npx shadcn@latest add https://lmscn.vercel.app/r/scramble.json
```

```bash
npx shadcn@latest add button progress badge
```

--------------------------------

### Initialize shadcn/ui

Source: https://lmscn.vercel.app/docs/installation

Run this command to set up shadcn/ui in your project if it is not already initialized.

```bash
npx shadcn@latest init
```

--------------------------------

### Implement Progress Tracker

Source: https://lmscn.vercel.app/docs/progress-tracker

Import the component and provide the required data structure to render the learning path.

```tsx
import { ProgressTracker } from "@/components/lms/progress-tracker"
import type { ProgressTrackerData, LessonNode } from "@/components/lms/progress-tracker"

export function MyProgress() {
  return (
    <ProgressTracker
      progressTrackerData={{
        learnerName: "Alex",
        totalXp: 340,
        xpToNextLevel: 500,
        level: 4,
        streak: 7,
        units: [
          {
            id: "u1",
            title: "Biology Unit 1",
            lessons: [
              { id: "l1", title: "The Cell",       status: "completed", xp: 50,  type: "reading",   score: 92 },
              { id: "l2", title: "Cell Organelles", status: "current",   xp: 100, type: "quiz" },
              { id: "l3", title: "Match Functions", status: "available", xp: 75,  type: "match" },
              { id: "l4", title: "Cell Review",     status: "locked",    xp: 120, type: "spaced-repetition" },
            ],
          },
        ],
      }}
      onLessonSelect={(lesson: LessonNode) => {
        console.log("Opening:", lesson.id)
      }}
    />
  )
}
```

--------------------------------

### Implement Match Component

Source: https://lmscn.vercel.app/docs/match

Import the Match component and provide the required matchData and onComplete callback.

```tsx
import { Match } from "@/components/lms/match"
import type { MatchData, MatchResult } from "@/components/lms/match"

export function MyMatch() {
  return (
    <Match
      matchData={{
        title: "Capital Cities",
        description: "Match each country to its capital.",
        shuffle: true,
        pairs: [
          { id: "1", left: "France",  right: "Paris"  },
          { id: "2", left: "Japan",   right: "Tokyo"  },
          { id: "3", left: "Egypt",   right: "Cairo"  },
          { id: "4", left: "Brazil",  right: "Brasília" },
        ],
      }}
      onComplete={(result: MatchResult) => {
        console.log(`${result.mistakes} mistakes in ${result.durationMs}ms`)
      }}
    />
  )
}
```

--------------------------------

### Implement Hotspot Component

Source: https://lmscn.vercel.app/docs/hotspot

Import the Hotspot component and define the hotspotData structure to configure questions and markers.

```tsx
import { Hotspot } from "@/components/lms/hotspot"
import type { HotspotData, HotspotResult } from "@/components/lms/hotspot"

export function MyHotspot() {
  return (
    <Hotspot
      hotspotData={{
        title: "Heart Anatomy",
        questions: [
          {
            id: "q1",
            imageUrl: "/heart-diagram.png",
            imageAlt: "Diagram of the human heart",
            prompt: "Label the four chambers of the heart:",
            caseSensitive: false,
            points: [
              {
                id: "p1",
                x: 30,
                y: 40,
                label: "Left Ventricle",
                description: "Pumps oxygenated blood to the body.",
              },
              {
                id: "p2",
                x: 60,
                y: 40,
                label: "Right Ventricle",
                description: "Pumps deoxygenated blood to the lungs.",
              },
              { id: "p3", x: 30, y: 20, label: "Left Atrium" },
              { id: "p4", x: 60, y: 20, label: "Right Atrium" },
            ],
          },
        ],
      }}
      onComplete={(result: HotspotResult) => {
        console.log(result.percentage + "% correct")
      }}
    />
  )
}
```

--------------------------------

### Implement Flashcards Component

Source: https://lmscn.vercel.app/docs/flashcards

Import the Flashcards component and define the data structure to initialize the deck.

```typescript
import { Flashcards } from "@/components/lms/flashcards"
import type { FlashcardsData, FlashcardsResult } from "@/components/lms/flashcards"

const data: FlashcardsData = {
  title: "Spanish Vocabulary",
  description: "Core greetings",
  shuffle: true,
  showRatings: true,
  cards: [
    { id: "1", front: "Hola",      back: "Hello",     tag: "Greetings" },
    { id: "2", front: "Gracias",   back: "Thank you", tag: "Greetings" },
    { id: "3", front: "Por favor", back: "Please",    tag: "Greetings" },
  ],
}

export function MyFlashcards() {
  return (
    <Flashcards
      flashcardsData={data}
      onComplete={(result: FlashcardsResult) => {
        console.log(result.counts)
        // { again: 1, hard: 0, good: 1, easy: 1 }
      }}
    />
  )
}
```

--------------------------------

### Implement ReadingPassage Component

Source: https://lmscn.vercel.app/docs/reading-passage

Import the component and provide the necessary data structure to initialize the reading and quiz flow.

```tsx
import { ReadingPassage } from "@/components/lms/reading-passage"
import type { ReadingPassageData, ReadingResult } from "@/components/lms/reading-passage"

export function MyReading() {
  return (
    <ReadingPassage
      readingPassageData={{
        title: "The Water Cycle",
        introduction: "Learn how water moves through Earth's systems.",
        readingTimeMinutes: 3,
        hidePassageOnQuestions: false,
        content: `Solar energy drives evaporation, turning liquid water into vapour.
This rises, cools and condenses into clouds, falling as precipitation.`,
        questions: [
          {
            id: "q1",
            type: "single",
            question: "What drives the water cycle?",
            options: [
              { id: "a", label: "The Moon" },
              { id: "b", label: "Solar energy" },
            ],
            correctIds: ["b"],
            explanation: "The sun provides energy to evaporate water.",
          },
        ],
      }}
      onComplete={(result: ReadingResult) => {
        console.log(`${result.score} / ${result.maxScore}`)
      }}
    />
  )
}
```

--------------------------------

### Configure HTML Content Rendering

Source: https://lmscn.vercel.app/docs/reading-passage

Enable HTML rendering by setting contentIsHtml to true to allow rich text formatting within the passage.

```typescript
content: `<h2>The Carbon Cycle</h2>
<p>Carbon moves between the atmosphere, oceans, and living organisms...</p>
<ul>
  <li>Photosynthesis fixes atmospheric CO₂ into organic matter.</li>
  <li>Respiration and decomposition return carbon to the atmosphere.</li>
</ul>`,
contentIsHtml: true,
```

--------------------------------

### Implement Order Component

Source: https://lmscn.vercel.app/docs/order

Import the Order component and define the orderData structure to configure the sequencing activity.

```tsx
import { Order } from "@/components/lms/order"
import type { OrderData, OrderResult } from "@/components/lms/order"

export function MyOrder() {
  return (
    <Order
      orderData={{
        title: "Star Lifecycle",
        questions: [
          {
            id: "q1",
            prompt: "Order the stages of a star's life:",
            hint: "It starts with a cloud of gas and dust.",
            items: [
              { id: "1", label: "Nebula",        description: "A cloud of gas and dust" },
              { id: "2", label: "Protostar" },
              { id: "3", label: "Main Sequence",  description: "Stable hydrogen fusion" },
              { id: "4", label: "Red Giant" },
              { id: "5", label: "White Dwarf" },
            ],
          },
        ],
      }}
      onComplete={(result: OrderResult) => {
        console.log(result.percentage + "%")
      }}
    />
  )
}
```

--------------------------------

### Implement Spaced Repetition Component

Source: https://lmscn.vercel.app/docs/spaced-repetition

Import the component and provide the required data structure to initiate a review session.

```tsx
import { SpacedRepetition } from "@/components/lms/spaced-repetition"
import type { SpacedRepetitionData, SpacedRepetitionResult } from "@/components/lms/spaced-repetition"

export function MySR() {
  return (
    <SpacedRepetition
      spacedRepetitionData={{
        title: "French Review",
        description: "Cards due today",
        totalCards: 120,
        dueCards: [
          { id: "1", front: "bonjour",   back: "hello",     interval: 3,  easeFactor: 2.5 },
          { id: "2", front: "merci",     back: "thank you", interval: 7,  easeFactor: 2.8 },
          { id: "3", front: "au revoir", back: "goodbye",   interval: 1,  easeFactor: 2.1 },
        ],
      }}
      onComplete={(result: SpacedRepetitionResult) => {
        // Persist result.sessions to your backend to update each card's schedule
        console.log(result.sessions)
      }}
    />
  )
}
```

--------------------------------

### ProgressTracker Component

Source: https://lmscn.vercel.app/docs/progress-tracker

The ProgressTracker component is used to render a visual learning path based on provided learner data and curriculum structure.

```APIDOC
## ProgressTracker Component

### Description
A React component that renders a visual learning path with XP, levels, streaks, and lesson status nodes.

### Props
- **progressTrackerData** (ProgressTrackerData) - Required - Learner state and curriculum data.
- **onLessonSelect** ((lesson: LessonNode) => void) - Optional - Callback function triggered when an "available" or "current" lesson is clicked.
- **className** (string) - Optional - Additional CSS classes for styling.

### Data Structures
#### ProgressTrackerData
- **learnerName** (string) - Displayed in the header greeting.
- **totalXp** (number) - Current XP total.
- **xpToNextLevel** (number) - XP required to reach the next level.
- **level** (number) - Current level number.
- **streak** (number) - Daily streak in days.
- **units** (LearningUnit[]) - Curriculum units.

#### LessonNode
- **id** (string) - Unique identifier.
- **title** (string) - Displayed beside the node.
- **status** (LessonStatus) - Visual state: "completed", "current", "available", or "locked".
- **xp** (number) - XP earned or on offer.
- **type** (LessonType) - Abbreviation shown inside the node.
- **score** (number) - Optional score 0–100 shown if completed.
```

--------------------------------

### Implement Quiz Component

Source: https://lmscn.vercel.app/docs/quiz

Define the quiz data structure and render the Quiz component within your application.

```typescript
import { Quiz } from "@/components/lms/quiz"
import type { QuizData, QuizResult } from "@/components/lms/quiz"

const data: QuizData = {
  title: "JavaScript Basics",
  description: "Test your knowledge of JS fundamentals.",
  passingScore: 80,
  showExplanations: true,
  questions: [
    {
      id: "q1",
      type: "single",
      question: "What does `typeof null` return?",
      options: [
        { id: "a", label: "null" },
        { id: "b", label: "object", explanation: "A historical quirk in the JS spec." },
        { id: "c", label: "undefined" },
      ],
      correctIds: ["b"],
      hint: "It's a well-known JavaScript oddity.",
    },
    {
      id: "q2",
      type: "multiple",
      question: "Which are falsy values in JavaScript?",
      options: [
        { id: "a", label: "0" },
        { id: "b", label: '""' },
        { id: "c", label: '"false"' },
        { id: "d", label: "null" },
      ],
      correctIds: ["a", "b", "d"],
      points: 2,
    },
  ],
}

export function MyQuiz() {
  return (
    <Quiz
      quizData={data}
      onComplete={(result: QuizResult) => {
        console.log(`${result.percentage}% — ${result.passed ? "Passed" : "Failed"}`)
      }}
    />
  )
}
```

--------------------------------

### Implement Scramble Component

Source: https://lmscn.vercel.app/docs/scramble

Import the Scramble component and define the scrambleData object to configure questions, clues, and completion logic.

```tsx
import { Scramble } from "@/components/lms/scramble"
import type { ScrambleData, ScrambleResult } from "@/components/lms/scramble"

export function MyScramble() {
  return (
    <Scramble
      scrambleData={{
        title: "Science Terms",
        questions: [
          {
            id: "1",
            answer: "photosynthesis",
            clue: "How plants make food",
          },
          {
            id: "2",
            answer: "mitochondria",
            clue: "Powerhouse of the cell",
            clueImage: "/cell-diagram.png",
          },
        ],
      }}
      onComplete={(result: ScrambleResult) => {
        console.log(`${result.score} / ${result.maxScore}`)
      }}
    />
  )
}
```

--------------------------------

### Quiz Component

Source: https://lmscn.vercel.app/docs/quiz

The main Quiz component used to render the quiz interface. It accepts configuration data and a callback for completion.

```APIDOC
## <Quiz />

### Description
The Quiz component renders a multi-question quiz interface. It manages state for user answers, scoring, and progress.

### Props
- **quizData** (QuizData) - Required - The configuration object containing the quiz title, description, and list of questions.
- **onComplete** ((result: QuizResult) => void) - Optional - Callback function triggered when the user completes the quiz.
- **className** (string) - Optional - Additional CSS classes to apply to the component container.

### Usage Example
```tsx
<Quiz
  quizData={data}
  onComplete={(result: QuizResult) => {
    console.log(`${result.percentage}% — ${result.passed ? "Passed" : "Failed"}`);
  }}
/>
```
```

--------------------------------

### Configure globals.css for Tailwind v4

Source: https://lmscn.vercel.app/docs/installation

Define your theme and CSS variables in globals.css to support Tailwind v4 features.

```css
@import "tailwindcss";
@import "tw-animate-css";

@theme inline {
  --color-primary:     var(--primary);
  --color-secondary:   var(--secondary);
  --color-background:  var(--background);
  --color-foreground:  var(--foreground);
  --color-muted:       var(--muted);
  --color-destructive: var(--destructive);
}

:root {
  --primary:     oklch(0.21 0.006 285.885);
  --secondary:   oklch(0.97 0.001 286.375);
  --background:  oklch(1 0 0);
  --foreground:  oklch(0.141 0.005 285.823);
  --muted:       oklch(0.967 0.001 286.375);
  --destructive: oklch(0.577 0.245 27.325);
}
```

--------------------------------

### Match Component

Source: https://lmscn.vercel.app/docs/match

The Match component is a React component used to render a term-to-definition matching activity.

```APIDOC
## <Match />

### Description
A two-column term-to-definition matching activity with mistake tracking and a timer.

### Props
- **matchData** (MatchData) - Required - Pairs configuration for the activity.
- **onComplete** ((result: MatchResult) => void) - Optional - Callback function triggered when all pairs are matched.
- **className** (string) - Optional - Additional CSS classes to apply to the component.

### MatchData Structure
- **title** (string) - Activity title.
- **description** (string) - Subtitle.
- **pairs** (MatchPair[]) - Array of term/definition pairs.
- **shuffle** (boolean) - Default: true - Randomize the right column order on mount.

### MatchPair Structure
- **id** (string) - Unique identifier.
- **left** (string) - Term (left column).
- **right** (string) - Definition (right column).
- **leftImage** (string) - Optional image URL for the term.
- **rightImage** (string) - Optional image URL for the definition.

### MatchResult Structure
- **matched** (MatchPair[]) - All pairs in original order.
- **mistakes** (number) - Count of incorrect pair attempts.
- **durationMs** (number) - Total time taken in milliseconds.
```

--------------------------------

### Order Component

Source: https://lmscn.vercel.app/docs/order

The Order component is a React component used to render a sequencing activity. It accepts configuration data for questions and a callback function to handle completion.

```APIDOC
## <Order />

### Description
A drag-and-drop sequencing activity component that allows users to order items and provides feedback on their performance.

### Props
- **orderData** (OrderData) - Required - Configuration object containing the title and list of sequencing questions.
- **onComplete** ((result: OrderResult) => void) - Optional - Callback function triggered after the user completes the activity.
- **className** (string) - Optional - Additional CSS classes to apply to the component container.

### Data Structures
#### OrderData
- **title** (string) - Activity title.
- **description** (string) - Subtitle.
- **questions** (OrderQuestion[]) - List of sequencing questions.

#### OrderQuestion
- **id** (string) - Unique identifier.
- **prompt** (string) - Instruction shown above the list.
- **items** (OrderItem[]) - Items listed in the correct order.
- **hint** (string) - Optional hint shown before submitting.

#### OrderItem
- **id** (string) - Unique identifier.
- **label** (string) - Primary label text.
- **description** (string) - Optional secondary line shown below the label.

### Result Object (OrderResult)
- **attempts** (OrderAttempt[]) - Per-question attempt records.
- **score** (number) - Number of questions where the entire order was correct.
- **maxScore** (number) - Total number of questions.
- **percentage** (number) - Rounded score percentage.
```

--------------------------------

### Define ReviewSession Interface

Source: https://lmscn.vercel.app/docs/spaced-repetition

The structure of the session object returned by the onComplete callback.

```typescript
interface ReviewSession {
  cardId: string
  grade: ReviewGrade       // the grade the learner chose
  nextInterval: number     // computed next interval in days
  nextEaseFactor: number   // updated ease factor
}
```

--------------------------------

### Configure postcss for Tailwind v4

Source: https://lmscn.vercel.app/docs/installation

Update your postcss.config.js to use the @tailwindcss/postcss plugin.

```javascript
module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}
```

--------------------------------

### Define OrderAttempt Interface

Source: https://lmscn.vercel.app/docs/order

The structure of the attempt record returned by the onComplete callback.

```typescript
interface OrderAttempt {
  questionId: string
  givenOrder: string[]   // item IDs in the order the learner submitted
  correctOrder: string[] // item IDs in the correct order
  correct: boolean
}
```

--------------------------------

### Define ReadingAnswer Interface

Source: https://lmscn.vercel.app/docs/reading-passage

The structure of the answer record returned by the onComplete callback.

```typescript
interface ReadingAnswer {
  questionId: string
  selected: string[]
  correct: boolean
}
```

--------------------------------

### Hotspot Component

Source: https://lmscn.vercel.app/docs/hotspot

The Hotspot component is a React component used to render an image-based labeling activity. It accepts configuration data for questions and points, and provides a callback to handle completion.

```APIDOC
## <Hotspot />

### Description
A React component that renders an interactive image where users click markers to label specific points.

### Props
- **hotspotData** (HotspotData) - Required - The configuration object containing the title, questions, and marker definitions.
- **onComplete** ((result: HotspotResult) => void) - Optional - Callback function triggered after the user completes the activity.
- **className** (string) - Optional - Additional CSS classes to apply to the component container.

### Data Structures
#### HotspotData
- **title** (string) - Activity title.
- **description** (string) - Subtitle.
- **questions** (HotspotQuestion[]) - List of hotspot questions.

#### HotspotQuestion
- **id** (string) - Unique identifier.
- **imageUrl** (string) - URL of the background image.
- **imageAlt** (string) - Accessible alt text for the image.
- **prompt** (string) - Instruction shown above the image.
- **points** (HotspotPoint[]) - Marker definitions.
- **caseSensitive** (boolean) - Case-sensitive label matching (defaults to false).

#### HotspotPoint
- **id** (string) - Unique identifier.
- **x** (number) - Horizontal position as a percentage (0–100).
- **y** (number) - Vertical position as a percentage (0–100).
- **label** (string) - The correct label the learner must type.
- **description** (string) - Optional detail revealed after a correct answer.

### Result Object (HotspotResult)
- **attempts** (HotspotAttempt[]) - Per-question records.
- **totalScore** (number) - Total correct labels across all questions.
- **maxScore** (number) - Total labels across all questions.
- **percentage** (number) - Rounded score percentage.
```

--------------------------------

### SpacedRepetition Component

Source: https://lmscn.vercel.app/docs/spaced-repetition

The SpacedRepetition component is a React component used to manage a review session. It requires a data object containing the cards to be reviewed and an onComplete callback to handle the results.

```APIDOC
## SpacedRepetition Component

### Description
A React component that renders a spaced-repetition review session. It displays cards, allows the user to grade their recall, and computes the next review interval using the SM-2 algorithm.

### Props
- **spacedRepetitionData** (SpacedRepetitionData) - Required - Session and card configuration.
- **onComplete** ((result: SpacedRepetitionResult) => void) - Optional - Callback function triggered after all due cards are graded.
- **className** (string) - Optional - Additional CSS classes for styling.

### Data Structures
#### SpacedRepetitionData
- **title** (string) - Session title.
- **description** (string) - Subtitle.
- **dueCards** (ReviewCard[]) - Cards to review in this session.
- **totalCards** (number) - Total deck size.

#### ReviewCard
- **id** (string) - Unique identifier.
- **front** (string) - Question side.
- **back** (string) - Answer side.
- **tags** (string[]) - Category badges.
- **nextReviewDate** (string) - ISO date string.
- **interval** (number) - Current interval in days.
- **easeFactor** (number) - SM-2 ease factor.

### Result
The onComplete callback receives a SpacedRepetitionResult object:
- **sessions** (ReviewSession[]) - Per-card review records.
- **hardCardIds** (string[]) - IDs of cards graded below 3.
```

--------------------------------

### Flashcards Component

Source: https://lmscn.vercel.app/docs/flashcards

The Flashcards component is a React component used to render a deck of cards. It accepts configuration data and a callback function to handle session completion.

```APIDOC
## <Flashcards />

### Description
A React component that renders a flippable flashcard deck. It supports optional self-rating, shuffling, and progress tracking.

### Props
- **flashcardsData** (FlashcardsData) - Required - The configuration object for the deck.
- **onComplete** ((result: FlashcardsResult) => void) - Optional - Callback function triggered after the last card is rated.
- **className** (string) - Optional - Additional CSS classes to apply to the component.

### Data Structures
#### FlashcardsData
- **title** (string) - Deck title.
- **description** (string) - Subtitle.
- **cards** (Flashcard[]) - The cards in the deck.
- **showRatings** (boolean) - Default: true - Whether to show rating buttons.
- **shuffle** (boolean) - Default: false - Whether to randomize card order.

#### Flashcard
- **id** (string) - Unique identifier.
- **front** (string) - Front face text.
- **back** (string) - Back face text.
- **frontImage** (string) - URL for an image on the front face.
- **backImage** (string) - URL for an image on the back face.
- **tag** (string) - Category badge shown on the front face.

### Result Object
- **ratings** (FlashcardRating[]) - Per-card difficulty ratings in session order.
- **counts** (Record<FlashcardDifficulty, number>) - Tally of each rating across the session.
```

--------------------------------

### Define Flashcard Result Types

Source: https://lmscn.vercel.app/docs/flashcards

Types for tracking card difficulty ratings during a session.

```typescript
type FlashcardDifficulty = "again" | "hard" | "good" | "easy"

interface FlashcardRating {
  cardId: string
  difficulty: FlashcardDifficulty
}
```

--------------------------------

### Define HotspotAttempt Interface

Source: https://lmscn.vercel.app/docs/hotspot

The structure of the attempt record returned within the HotspotResult object.

```typescript
interface HotspotAttempt {
  questionId: string
  answers: Record<string, string>  // pointId → typed answer
  score: number                    // correct labels in this question
  maxScore: number                 // total labels in this question
}
```

--------------------------------

### Scramble Component

Source: https://lmscn.vercel.app/docs/scramble

The Scramble component is a React component used to render a letter-tile unscrambling activity. It accepts configuration data for questions and a callback function to handle the completion of the activity.

```APIDOC
## <Scramble />

### Description
A React component that renders a letter-tile unscrambling activity. It manages the state of tiles, user attempts, and provides a result upon completion.

### Props
- **scrambleData** (ScrambleData) - Required - Configuration object containing the activity title and list of questions.
- **onComplete** ((result: ScrambleResult) => void) - Optional - Callback function triggered after the last question is completed.
- **className** (string) - Optional - Additional CSS classes to apply to the component.

### Data Structures
#### ScrambleData
- **title** (string) - Activity title.
- **description** (string) - Subtitle.
- **questions** (ScrambleQuestion[]) - List of scramble questions.

#### ScrambleQuestion
- **id** (string) - Unique identifier.
- **answer** (string) - The correct word or phrase.
- **clue** (string) - Context text shown above the tiles.
- **clueImage** (string) - URL of an optional image clue.

#### ScrambleResult
- **attempts** (ScrambleAttempt[]) - Per-question attempt records.
- **score** (number) - Number of correct answers.
- **maxScore** (number) - Total number of questions.
- **percentage** (number) - Rounded score percentage.

#### ScrambleAttempt
- **questionId** (string) - The ID of the question.
- **given** (string) - The word the learner assembled.
- **correct** (boolean) - Whether the answer was correct.
```

--------------------------------

### ReadingPassage Component

Source: https://lmscn.vercel.app/docs/reading-passage

The ReadingPassage component is a React component used to display reading material and associated comprehension questions. It manages the state across reading, answering, and review phases.

```APIDOC
## ReadingPassage Component

### Description
A three-phase reading comprehension component that guides users through reading content, answering questions, and reviewing their results.

### Props
- **readingPassageData** (ReadingPassageData) - Required - Passage and questions configuration.
- **onComplete** ((result: ReadingResult) => void) - Optional - Callback function triggered after the last question is answered.
- **className** (string) - Optional - Additional CSS classes for styling.

### Data Structures
#### ReadingPassageData
- **title** (string) - Passage title.
- **introduction** (string) - Subtitle or introductory note.
- **content** (string) - The reading text.
- **contentIsHtml** (boolean) - Whether to render content as HTML.
- **questions** (ReadingQuestion[]) - List of comprehension questions.
- **readingTimeMinutes** (number) - Estimated read time.
- **hidePassageOnQuestions** (boolean) - Whether to hide the passage during the question phase.

#### ReadingQuestion
- **id** (string) - Unique identifier.
- **type** ("single" | "multiple" | "true-false") - Selection mode.
- **question** (string) - The question text.
- **options** ({ id: string; label: string }[]) - Answer options.
- **correctIds** (string[]) - IDs of the correct option(s).
- **explanation** (string) - Explanation shown after submission.

### Usage Example
```tsx
<ReadingPassage
  readingPassageData={{
    title: "The Water Cycle",
    content: "Solar energy drives evaporation...",
    questions: [
      {
        id: "q1",
        type: "single",
        question: "What drives the water cycle?",
        options: [{ id: "a", label: "The Moon" }, { id: "b", label: "Solar energy" }],
        correctIds: ["b"],
        explanation: "The sun provides energy to evaporate water."
      }
    ]
  }}
  onComplete={(result) => console.log(result)}
/>
```
```

--------------------------------

### Define ScrambleAttempt Interface

Source: https://lmscn.vercel.app/docs/scramble

The structure of the attempt record returned within the ScrambleResult object.

```typescript
interface ScrambleAttempt {
  questionId: string
  given: string    // the word the learner assembled
  correct: boolean
}
```
Tokens:
Raw