### 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 ( { 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 ( { 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 ( { 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 ( { 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 ( { 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: `

The Carbon Cycle

Carbon moves between the atmosphere, oceans, and living organisms...

  • Photosynthesis fixes atmospheric CO₂ into organic matter.
  • Respiration and decomposition return carbon to the atmosphere.
`, 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 ( { 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 ( { // 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 ( { 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 ( { 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 ## ### 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 { 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 ## ### 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 ## ### 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 ## ### 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 ## ### 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) - 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 // 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 ## ### 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 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 } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.