@quizparts/react 0.0.1

package/dist/components/QuestionInput.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuestion } from '../hooks/useQuestion.js';
+import { Instruction } from './Instruction.js';
+import { Choices } from './Choices.js';
+import { Choice } from './Choice.js';
+import { TextInput } from './TextInput.js';
+import { MatchPairs } from './MatchPairs.js';
+import { OrderList } from './OrderList.js';
+import { SentenceBuilder } from './SentenceBuilder.js';
+/** Renders the appropriate input for the current question type (choices, text, match pairs, order, sentence builder) with optional Instruction. */
+export const QuestionInput = ({ showChoiceIndicator = true, instruction, }) => {
+    const { question } = useQuestion();
+    if (!question)
+        return null;
+    if (question.type === 'multiple_choice' || question.type === 'multi_select') {
+        if (!('choices' in question))
+            return null;
+        return (_jsxs(_Fragment, { children: [_jsx(Instruction, { instruction: instruction }), _jsx(Choices, { children: question.choices.map((c) => (_jsx(Choice, { choiceId: c.id, showIndicator: showChoiceIndicator }, c.id))) })] }));
+    }
+    if (question.type === 'text_input') {
+        return (_jsxs(_Fragment, { children: [_jsx(Instruction, { instruction: instruction }), _jsx(TextInput, {})] }));
+    }
+    if (question.type === 'match_pairs') {
+        return (_jsxs(_Fragment, { children: [_jsx(Instruction, { instruction: instruction }), _jsx(MatchPairs, {})] }));
+    }
+    if (question.type === 'order_items') {
+        return (_jsxs(_Fragment, { children: [_jsx(Instruction, { instruction: instruction }), _jsx(OrderList, {})] }));
+    }
+    if (question.type === 'sentence_builder') {
+        return (_jsxs(_Fragment, { children: [_jsx(Instruction, { instruction: instruction }), _jsx(SentenceBuilder, {})] }));
+    }
+    return null;
+};

package/dist/components/QuizComplete.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export interface QuizCompleteProps {
+    /** Heading (default "Quiz complete!"). */
+    title?: ReactNode;
+    /** Optional message below the title. */
+    message?: ReactNode;
+    /** Label for the reset button (default "Start again"). */
+    resetLabel?: string;
+    /** Called when reset is clicked; defaults to resetQuiz from context. */
+    onReset?: () => void;
+    /** Custom content instead of title/message/reset. */
+    children?: ReactNode;
+    as?: keyof JSX.IntrinsicElements;
+}
+/** Renders when the quiz is complete. Use inside QuizProvider; shows title, optional message, and reset button. */
+export declare const QuizComplete: ({ title, message, resetLabel, onReset, children, as: Component, }: QuizCompleteProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=QuizComplete.d.ts.map

package/dist/components/QuizComplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuizComplete.d.ts","sourceRoot":"","sources":["../../src/components/QuizComplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,iBAAiB;IAChC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,mHAAmH;AACnH,eAAO,MAAM,YAAY,GAAI,mEAO1B,iBAAiB,mDAmBnB,CAAC"}

package/dist/components/QuizComplete.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuiz } from '../hooks/useQuiz.js';
+/** Renders when the quiz is complete. Use inside QuizProvider; shows title, optional message, and reset button. */
+export const QuizComplete = ({ title = 'Quiz complete!', message, resetLabel = 'Start again', onReset, children, as: Component = 'div', }) => {
+    const { isComplete, resetQuiz } = useQuiz();
+    if (!isComplete)
+        return null;
+    const handleReset = onReset ?? resetQuiz;
+    if (children != null) {
+        return _jsx(Component, { "data-quiz-complete": true, children: children });
+    }
+    return (_jsxs(Component, { "data-quiz-complete": true, style: { padding: '1.5rem', textAlign: 'center' }, children: [title != null && (typeof title === 'string' ? _jsx("h2", { children: title }) : title), message != null && (typeof message === 'string' ? _jsx("p", { children: message }) : message), _jsx("button", { type: "button", onClick: () => handleReset(), style: { marginTop: '1rem' }, children: resetLabel })] }));
+};

package/dist/components/QuizFlow.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+export interface QuizFlowProps {
+    /** Shown when quiz is complete. */
+    completeTitle?: ReactNode;
+    /** Optional message when complete. */
+    completeMessage?: ReactNode;
+    /** Reset button label when complete (default "Start again"). */
+    resetLabel?: string;
+    /** Optional hint below the question input. */
+    hint?: ReactNode;
+    /** Submit button label before answer (default "Answer"). */
+    submitLabel?: ReactNode;
+    /** Skip button label before answer (default "Skip"). Hidden after submit. */
+    continueLabel?: ReactNode;
+    /** Next button label after submit (default "Next"). */
+    nextLabel?: ReactNode;
+    /** Whether choices show the indicator (default true). */
+    showChoiceIndicator?: boolean;
+    /** Fallback when there is no current question (e.g. empty quiz). */
+    emptyFallback?: ReactNode;
+}
+/** Renders the full quiz flow: complete screen or default question layout. Use inside QuizProvider + QuizRoot. */
+export declare const QuizFlow: ({ completeTitle, completeMessage, resetLabel, hint, submitLabel, continueLabel, nextLabel, showChoiceIndicator, emptyFallback, }: QuizFlowProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QuizFlow.d.ts.map

package/dist/components/QuizFlow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuizFlow.d.ts","sourceRoot":"","sources":["../../src/components/QuizFlow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,aAAa;IAC5B,mCAAmC;IACnC,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,sCAAsC;IACtC,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,gEAAgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,uDAAuD;IACvD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,oEAAoE;IACpE,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,kHAAkH;AAClH,eAAO,MAAM,QAAQ,GAAI,kIAUtB,aAAa,4CA0Bf,CAAC"}

package/dist/components/QuizFlow.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useQuiz } from '../hooks/useQuiz.js';
+import { Question } from './Question.js';
+import { DefaultQuestionLayout } from './DefaultQuestionLayout.js';
+import { QuizComplete } from './QuizComplete.js';
+/** Renders the full quiz flow: complete screen or default question layout. Use inside QuizProvider + QuizRoot. */
+export const QuizFlow = ({ completeTitle = 'Quiz complete!', completeMessage, resetLabel = 'Start again', hint, submitLabel = 'Answer', continueLabel = 'Skip', nextLabel = 'Next', showChoiceIndicator = true, emptyFallback = null, }) => {
+    const { currentQuestion, isComplete } = useQuiz();
+    if (isComplete) {
+        return (_jsx(QuizComplete, { title: completeTitle, message: completeMessage, resetLabel: resetLabel }));
+    }
+    if (!currentQuestion)
+        return _jsx(_Fragment, { children: emptyFallback });
+    return (_jsx(Question, { children: _jsx(DefaultQuestionLayout, { hint: hint, submitLabel: submitLabel, continueLabel: continueLabel, nextLabel: nextLabel, showChoiceIndicator: showChoiceIndicator }) }));
+};

package/dist/components/QuizRoot.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface QuizRootProps {
+    children: ReactNode;
+    /** Root element (default 'div'). Use for semantics or to attach data-quiz-root to a section. */
+    as?: keyof JSX.IntrinsicElements;
+}
+/** Wrapper that marks the quiz UI root (theme targets data-quiz-root). Must be inside QuizProvider. */
+export declare const QuizRoot: ({ children, as: Component }: QuizRootProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QuizRoot.d.ts.map

package/dist/components/QuizRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuizRoot.d.ts","sourceRoot":"","sources":["../../src/components/QuizRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,gGAAgG;IAChG,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAED,uGAAuG;AACvG,eAAO,MAAM,QAAQ,GAAI,6BAAqC,aAAa,4CAG1E,CAAC"}

package/dist/components/QuizRoot.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuizContext } from '../hooks/useQuizContext.js';
+/** Wrapper that marks the quiz UI root (theme targets data-quiz-root). Must be inside QuizProvider. */
+export const QuizRoot = ({ children, as: Component = 'div' }) => {
+    useQuizContext();
+    return _jsx(Component, { "data-quiz-root": true, children: children });
+};

package/dist/components/SentenceBuilder.d.ts

@@ -0,0 +1,2 @@
+export declare const SentenceBuilder: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SentenceBuilder.d.ts.map

package/dist/components/SentenceBuilder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SentenceBuilder.d.ts","sourceRoot":"","sources":["../../src/components/SentenceBuilder.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,sDA4E3B,CAAC"}

package/dist/components/SentenceBuilder.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuestion } from '../hooks/useQuestion.js';
+export const SentenceBuilder = () => {
+    const { question, sentenceOrder, setSentenceOrder, isSubmitted } = useQuestion();
+    if (!question || question.type !== 'sentence_builder')
+        return null;
+    const { tiles } = question;
+    const disabled = isSubmitted;
+    const available = tiles.slice();
+    for (const s of sentenceOrder) {
+        const i = available.indexOf(s);
+        if (i >= 0)
+            available.splice(i, 1);
+    }
+    const handleAddTile = (value) => {
+        if (disabled)
+            return;
+        setSentenceOrder([...sentenceOrder, value]);
+    };
+    const handleRemoveAt = (index) => {
+        if (disabled)
+            return;
+        setSentenceOrder(sentenceOrder.filter((_, i) => i !== index));
+    };
+    return (_jsxs("div", { "data-quiz-sentence-builder": true, style: { display: 'flex', flexDirection: 'column', gap: '0.75rem' }, role: "group", "aria-label": "Sentence builder", children: [_jsxs("div", { role: "group", "aria-labelledby": "sentence-slot-label", children: [_jsx("span", { id: "sentence-slot-label", style: { fontSize: '0.875rem', fontWeight: 600 }, children: "Sentence:" }), _jsxs("div", { style: {
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            gap: '0.25rem',
+                            minHeight: '2.5rem',
+                            padding: '0.5rem',
+                            border: '1px solid #eee',
+                            borderRadius: '4px',
+                            marginTop: '0.25rem',
+                        }, "data-sentence-slot": true, children: [sentenceOrder.length === 0 && (_jsx("span", { style: { color: '#999' }, children: "Tap tiles below to build the sentence" })), sentenceOrder.map((value, index) => (_jsxs("button", { type: "button", onClick: () => handleRemoveAt(index), disabled: disabled, style: { padding: '0.25rem 0.5rem', margin: '0.125rem' }, "data-sentence-tile": true, children: [value, " ", !disabled && '✕'] }, `${value}-${index}`)))] })] }), _jsxs("div", { role: "group", "aria-labelledby": "tile-bank-label", children: [_jsx("span", { id: "tile-bank-label", style: { fontSize: '0.875rem', fontWeight: 600 }, children: "Tiles:" }), _jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '0.25rem', marginTop: '0.25rem' }, "data-tile-bank": true, children: available.map((value, i) => (_jsx("button", { type: "button", onClick: () => handleAddTile(value), disabled: disabled, style: { padding: '0.35rem 0.6rem' }, "data-tile": true, children: value }, `${value}-${i}`))) })] })] }));
+};

package/dist/components/SubmitButton.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface SubmitButtonProps {
+    children?: ReactNode;
+}
+/** Submit button for the current question. Disabled until input is valid; use with useQuiz().canSubmit. */
+export declare const SubmitButton: ({ children }: SubmitButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SubmitButton.d.ts.map

package/dist/components/SubmitButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubmitButton.d.ts","sourceRoot":"","sources":["../../src/components/SubmitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,2GAA2G;AAC3G,eAAO,MAAM,YAAY,GAAI,cAAyB,iBAAiB,4CAatE,CAAC"}

package/dist/components/SubmitButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuiz } from '../hooks/useQuiz.js';
+/** Submit button for the current question. Disabled until input is valid; use with useQuiz().canSubmit. */
+export const SubmitButton = ({ children = 'Answer' }) => {
+    const { canSubmit, submitAnswer } = useQuiz();
+    return (_jsx("button", { type: "button", "data-quiz-submit": true, ...(!canSubmit && { 'data-disabled': true }), disabled: !canSubmit, onClick: () => canSubmit && submitAnswer(), children: children }));
+};

package/dist/components/TextInput.d.ts

@@ -0,0 +1,7 @@
+export interface TextInputProps {
+    as?: keyof JSX.IntrinsicElements;
+    placeholder?: string;
+    disabled?: boolean;
+}
+export declare const TextInput: ({ as: Component, placeholder, disabled: disabledProp, }: TextInputProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/components/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/components/TextInput.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,yDAIvB,cAAc,mDAqBhB,CAAC"}

package/dist/components/TextInput.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQuestion } from '../hooks/useQuestion.js';
+export const TextInput = ({ as: Component = 'input', placeholder, disabled: disabledProp, }) => {
+    const { question, textValue, setTextValue, isSubmitted } = useQuestion();
+    if (!question || question.type !== 'text_input')
+        return null;
+    const disabled = disabledProp ?? isSubmitted;
+    const common = {
+        'data-quiz-text-input': true,
+        'data-disabled': disabled ? true : undefined,
+        'data-submitted': isSubmitted ? true : undefined,
+        value: textValue,
+        onChange: (e) => setTextValue(e.target.value),
+        disabled,
+        placeholder,
+        'aria-label': question.prompt,
+    };
+    if (Component === 'input') {
+        return _jsx("input", { type: "text", ...common });
+    }
+    return _jsx(Component, { ...common });
+};

package/dist/components/ThemeVarsProvider.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { ThemeTokens } from '@quizparts/theme';
+export interface ThemeVarsProviderProps {
+    /** Theme to apply as CSS custom properties (e.g. defaultTheme from @quizparts/theme). */
+    theme: ThemeTokens;
+    children: ReactNode;
+    /** Wrapper element (default 'div'). */
+    as?: keyof JSX.IntrinsicElements;
+    /** Additional inline styles merged with theme vars. */
+    style?: React.CSSProperties;
+    className?: string;
+}
+/** Applies theme tokens as CSS custom properties on a wrapper. Use around QuizRoot so play.css can use --qp-* vars. */
+export declare const ThemeVarsProvider: ({ theme, children, as: Component, style, className, }: ThemeVarsProviderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeVarsProvider.d.ts.map

package/dist/components/ThemeVarsProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeVarsProvider.d.ts","sourceRoot":"","sources":["../../src/components/ThemeVarsProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,MAAM,WAAW,sBAAsB;IACrC,yFAAyF;IACzF,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IACjC,uDAAuD;IACvD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,uHAAuH;AACvH,eAAO,MAAM,iBAAiB,GAAI,uDAM/B,sBAAsB,4CAUxB,CAAC"}

package/dist/components/ThemeVarsProvider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tokensToCssVars } from '@quizparts/theme';
+/** Applies theme tokens as CSS custom properties on a wrapper. Use around QuizRoot so play.css can use --qp-* vars. */
+export const ThemeVarsProvider = ({ theme, children, as: Component = 'div', style, className, }) => {
+    const vars = tokensToCssVars(theme);
+    return (_jsx(Component, { className: className, style: { ...vars, ...style }, children: children }));
+};

package/dist/constants/defaultInstructions.d.ts

@@ -0,0 +1,3 @@
+import type { QuestionType } from '@quizparts/schema';
+export declare const DEFAULT_INSTRUCTIONS: Record<QuestionType, string>;
+//# sourceMappingURL=defaultInstructions.d.ts.map

package/dist/constants/defaultInstructions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultInstructions.d.ts","sourceRoot":"","sources":["../../src/constants/defaultInstructions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAO7D,CAAC"}

package/dist/constants/defaultInstructions.js

@@ -0,0 +1,8 @@
+export const DEFAULT_INSTRUCTIONS = {
+    multiple_choice: 'Choose one.',
+    multi_select: 'Select all that apply.',
+    text_input: 'Type your answer below.',
+    match_pairs: 'Match the pairs.',
+    order_items: 'Put these in order.',
+    sentence_builder: 'Build the sentence from the tiles.',
+};

package/dist/context/QuizContext.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import type { Quiz } from '@quizparts/schema';
+import type { QuizSession } from '@quizparts/core';
+import { getProgress } from '@quizparts/core';
+export interface QuizContextValue {
+    session: QuizSession;
+    progress: ReturnType<typeof getProgress>;
+    submitAnswer: () => {
+        correct: boolean;
+    };
+    goToNextQuestion: () => void;
+    goToPreviousQuestion: () => void;
+    resetQuiz: () => void;
+    selectChoice: (choiceId: string) => void;
+    toggleChoice: (choiceId: string) => void;
+    setTextValue: (value: string) => void;
+    setMatchPairs: (pairs: Array<[string, string]>) => void;
+    setOrderedIds: (orderedIds: string[]) => void;
+    setSentenceOrder: (order: string[]) => void;
+}
+declare const QuizContext: import("react").Context<QuizContextValue | null>;
+export interface QuizProviderProps {
+    /** Parsed quiz (from parseQuiz). */
+    quiz: Quiz;
+    /** Zero-based index to start at (default 0). */
+    initialQuestionIndex?: number;
+    /** Pre-built session (e.g. for Storybook); must match quiz. */
+    initialSession?: QuizSession;
+    children: ReactNode;
+    /** Called after each submit with whether the answer was correct. */
+    onQuestionSubmit?: (correct: boolean) => void;
+    /** Called when the current question index changes. */
+    onQuestionChange?: (index: number) => void;
+    /** Called when all questions have been attempted. */
+    onComplete?: () => void;
+}
+export declare const QuizProvider: ({ quiz, initialQuestionIndex, initialSession, children, onQuestionSubmit, onQuestionChange, onComplete, }: QuizProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getQuizContext: () => import("react").Context<QuizContextValue | null>;
+export default QuizContext;
+//# sourceMappingURL=QuizContext.d.ts.map

package/dist/context/QuizContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuizContext.d.ts","sourceRoot":"","sources":["../../src/context/QuizContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAYL,WAAW,EACZ,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;IACzC,YAAY,EAAE,MAAM;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IACzC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC;IACxD,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC7C;AAED,QAAA,MAAM,WAAW,kDAA+C,CAAC;AAEjE,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,IAAI,EAAE,IAAI,CAAC;IACX,gDAAgD;IAChD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,+DAA+D;IAC/D,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,GAAI,2GAQ1B,iBAAiB,4CAsHnB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAAoB,CAAC;AAChD,eAAe,WAAW,CAAC"}

package/dist/context/QuizContext.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useMemo, useState } from 'react';
+import { createQuizSession, selectChoice, toggleChoice, setTextInput, setMatchPairs, setOrderedIds, setSentenceOrder as setSentenceOrderCore, submitAnswer, goToNextQuestion, goToPreviousQuestion, resetQuiz, getProgress, } from '@quizparts/core';
+const QuizContext = createContext(null);
+export const QuizProvider = ({ quiz, initialQuestionIndex = 0, initialSession, children, onQuestionSubmit, onQuestionChange, onComplete, }) => {
+    const [session, setSession] = useState(() => {
+        if (initialSession)
+            return initialSession;
+        const s = createQuizSession(quiz);
+        if (initialQuestionIndex > 0 && initialQuestionIndex < quiz.questions.length) {
+            const next = [...s.questionStates];
+            for (let i = 0; i < next.length; i++) {
+                next[i] = { ...next[i], status: i < initialQuestionIndex ? 'complete' : i === initialQuestionIndex ? 'active' : 'idle' };
+            }
+            return { ...s, currentQuestionIndex: initialQuestionIndex, questionStates: next };
+        }
+        return s;
+    });
+    const progress = useMemo(() => getProgress(session), [session]);
+    const handleSubmitAnswer = useCallback(() => {
+        const result = submitAnswer(session);
+        setSession(result.session);
+        onQuestionSubmit?.(result.correct);
+        return result;
+    }, [session, onQuestionSubmit]);
+    const handleGoToNext = useCallback(() => {
+        const next = goToNextQuestion(session);
+        setSession(next);
+        onQuestionChange?.(next.currentQuestionIndex);
+        if (next.currentQuestionIndex >= session.quiz.questions.length && progress.attemptedCount >= session.quiz.questions.length) {
+            onComplete?.();
+        }
+    }, [session, onQuestionChange, onComplete, progress.attemptedCount]);
+    const handleGoToPrevious = useCallback(() => {
+        setSession(goToPreviousQuestion(session));
+    }, [session]);
+    const handleReset = useCallback(() => {
+        setSession(resetQuiz(session));
+    }, [session]);
+    const handleSelectChoice = useCallback((choiceId) => {
+        setSession(selectChoice(session, session.currentQuestionIndex, choiceId));
+    }, [session]);
+    const handleToggleChoice = useCallback((choiceId) => {
+        setSession(toggleChoice(session, session.currentQuestionIndex, choiceId));
+    }, [session]);
+    const handleSetTextValue = useCallback((value) => {
+        setSession(setTextInput(session, session.currentQuestionIndex, value));
+    }, [session]);
+    const handleSetMatchPairs = useCallback((pairs) => {
+        setSession(setMatchPairs(session, session.currentQuestionIndex, pairs));
+    }, [session]);
+    const handleSetOrderedIds = useCallback((orderedIds) => {
+        setSession(setOrderedIds(session, session.currentQuestionIndex, orderedIds));
+    }, [session]);
+    const handleSetSentenceOrder = useCallback((order) => {
+        setSession(setSentenceOrderCore(session, session.currentQuestionIndex, order));
+    }, [session]);
+    const value = useMemo(() => ({
+        session,
+        progress,
+        submitAnswer: handleSubmitAnswer,
+        goToNextQuestion: handleGoToNext,
+        goToPreviousQuestion: handleGoToPrevious,
+        resetQuiz: handleReset,
+        selectChoice: handleSelectChoice,
+        toggleChoice: handleToggleChoice,
+        setTextValue: handleSetTextValue,
+        setMatchPairs: handleSetMatchPairs,
+        setOrderedIds: handleSetOrderedIds,
+        setSentenceOrder: handleSetSentenceOrder,
+    }), [
+        session,
+        progress,
+        handleSubmitAnswer,
+        handleGoToNext,
+        handleGoToPrevious,
+        handleReset,
+        handleSelectChoice,
+        handleToggleChoice,
+        handleSetTextValue,
+        handleSetMatchPairs,
+        handleSetOrderedIds,
+        handleSetSentenceOrder,
+    ]);
+    return (_jsx(QuizContext.Provider, { value: value, children: children }));
+};
+export const getQuizContext = () => QuizContext;
+export default QuizContext;

package/dist/hooks/useProgress.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Progress for the current quiz. Use inside QuizProvider.
+ * @returns current, total, percent, answeredCount, score, canGoNext, canGoPrevious, isComplete.
+ */
+export declare const useProgress: () => {
+    current: number;
+    total: number;
+    percent: number;
+    answeredCount: number;
+    remainingCount: number;
+    score: number;
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+    isComplete: boolean;
+};
+//# sourceMappingURL=useProgress.d.ts.map

package/dist/hooks/useProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProgress.d.ts","sourceRoot":"","sources":["../../src/hooks/useProgress.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;CAgBvB,CAAC"}

package/dist/hooks/useProgress.js

@@ -0,0 +1,22 @@
+import { useQuizContext } from './useQuizContext.js';
+/**
+ * Progress for the current quiz. Use inside QuizProvider.
+ * @returns current, total, percent, answeredCount, score, canGoNext, canGoPrevious, isComplete.
+ */
+export const useProgress = () => {
+    const { progress } = useQuizContext();
+    const total = progress.total;
+    const current = progress.currentIndex + 1;
+    const percent = total > 0 ? Math.round((progress.attemptedCount / total) * 100) : 0;
+    return {
+        current,
+        total,
+        percent,
+        answeredCount: progress.attemptedCount,
+        remainingCount: Math.max(0, total - progress.attemptedCount),
+        score: progress.score,
+        canGoNext: progress.canGoNext,
+        canGoPrevious: progress.canGoPrevious,
+        isComplete: progress.attemptedCount >= total && total > 0,
+    };
+};

package/dist/hooks/useQuestion.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Current question state and input setters. Use inside QuizProvider for question-type-specific UI.
+ * @returns question, selectedChoiceId/selectedChoiceIds, textValue, matchPairs, orderedIds, sentenceOrder, feedback, selectChoice, toggleChoice, setTextValue, setMatchPairs, setOrderedIds, setSentenceOrder.
+ */
+export declare const useQuestion: () => {
+    question: null;
+    questionState: null;
+    status: "idle";
+    selectedChoiceId: null;
+    selectedChoiceIds: never[];
+    textValue: string;
+    isSubmitted: boolean;
+    isCorrect: boolean;
+    isIncorrect: boolean;
+    feedback: null;
+    selectChoice: () => void;
+    toggleChoice: () => void;
+    setTextValue: () => void;
+    setMatchPairs: () => void;
+    setOrderedIds: () => void;
+    setSentenceOrder: () => void;
+    matchPairs: never[];
+    orderedIds: never[];
+    sentenceOrder: never[];
+    submit: () => {
+        correct: boolean;
+    };
+} | {
+    question: import("@quizparts/schema").QuizQuestion;
+    questionState: import("@quizparts/core").QuestionState;
+    status: import("@quizparts/core").QuestionStatus;
+    selectedChoiceId: string | null;
+    selectedChoiceIds: string[];
+    textValue: string;
+    matchPairs: [string, string][];
+    orderedIds: string[];
+    sentenceOrder: string[];
+    isSubmitted: boolean;
+    isCorrect: boolean;
+    isIncorrect: boolean;
+    feedback: {
+        isCorrect: boolean;
+        explanation: string | undefined;
+    } | null;
+    selectChoice: (choiceId: string) => void;
+    toggleChoice: (choiceId: string) => void;
+    setTextValue: (value: string) => void;
+    setMatchPairs: (pairs: Array<[string, string]>) => void;
+    setOrderedIds: (orderedIds: string[]) => void;
+    setSentenceOrder: (order: string[]) => void;
+    submit: () => {
+        correct: boolean;
+    };
+};
+//# sourceMappingURL=useQuestion.d.ts.map

package/dist/hooks/useQuestion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuestion.d.ts","sourceRoot":"","sources":["../../src/hooks/useQuestion.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;kBA2BmB;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoD9D,CAAC"}

package/dist/hooks/useQuestion.js

@@ -0,0 +1,77 @@
+import { useQuizContext } from './useQuizContext.js';
+/**
+ * Current question state and input setters. Use inside QuizProvider for question-type-specific UI.
+ * @returns question, selectedChoiceId/selectedChoiceIds, textValue, matchPairs, orderedIds, sentenceOrder, feedback, selectChoice, toggleChoice, setTextValue, setMatchPairs, setOrderedIds, setSentenceOrder.
+ */
+export const useQuestion = () => {
+    const { session, submitAnswer, selectChoice, toggleChoice, setTextValue, setMatchPairs: setMatchPairsContext, setOrderedIds: setOrderedIdsContext, setSentenceOrder: setSentenceOrderContext } = useQuizContext();
+    const idx = session.currentQuestionIndex;
+    const question = session.quiz.questions[idx] ?? null;
+    const questionState = session.questionStates[idx] ?? null;
+    if (!question || !questionState) {
+        return {
+            question: null,
+            questionState: null,
+            status: 'idle',
+            selectedChoiceId: null,
+            selectedChoiceIds: [],
+            textValue: '',
+            isSubmitted: false,
+            isCorrect: false,
+            isIncorrect: false,
+            feedback: null,
+            selectChoice: () => { },
+            toggleChoice: () => { },
+            setTextValue: () => { },
+            setMatchPairs: () => { },
+            setOrderedIds: () => { },
+            setSentenceOrder: () => { },
+            matchPairs: [],
+            orderedIds: [],
+            sentenceOrder: [],
+            submit: () => ({ correct: false }),
+        };
+    }
+    const status = questionState.status;
+    const isSubmitted = status === 'correct' || status === 'incorrect';
+    const isCorrect = questionState.isCorrect === true;
+    const isIncorrect = questionState.isCorrect === false;
+    const selectedChoiceId = question.type === 'multiple_choice'
+        ? questionState.input.selectedChoiceId ?? null
+        : null;
+    const selectedChoiceIds = question.type === 'multi_select'
+        ? questionState.input.selectedChoiceIds ?? []
+        : [];
+    const textValue = question.type === 'text_input' ? (questionState.input.text ?? '') : '';
+    const matchPairs = question.type === 'match_pairs' ? (questionState.input.matchPairs ?? []) : [];
+    const orderedIds = question.type === 'order_items' ? (questionState.input.orderedIds ?? []) : [];
+    const sentenceOrder = question.type === 'sentence_builder' ? (questionState.input.sentenceOrder ?? []) : [];
+    const feedback = isSubmitted
+        ? {
+            isCorrect,
+            explanation: 'explanation' in question ? question.explanation : undefined,
+        }
+        : null;
+    return {
+        question,
+        questionState,
+        status,
+        selectedChoiceId,
+        selectedChoiceIds,
+        textValue,
+        matchPairs,
+        orderedIds,
+        sentenceOrder,
+        isSubmitted,
+        isCorrect,
+        isIncorrect,
+        feedback,
+        selectChoice,
+        toggleChoice,
+        setTextValue,
+        setMatchPairs: setMatchPairsContext,
+        setOrderedIds: setOrderedIdsContext,
+        setSentenceOrder: setSentenceOrderContext,
+        submit: submitAnswer,
+    };
+};

package/dist/hooks/useQuiz.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Quiz-level state and actions. Use inside QuizProvider.
+ * @returns Current question, canSubmit, submitAnswer, goToNextQuestion, score, etc.
+ */
+export declare const useQuiz: () => {
+    quiz: import("@quizparts/schema").Quiz;
+    currentQuestion: import("@quizparts/schema").QuizQuestion;
+    currentQuestionIndex: number;
+    questionCount: number;
+    canSubmit: boolean;
+    isComplete: boolean;
+    score: number;
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+    goToNextQuestion: () => void;
+    goToPreviousQuestion: () => void;
+    submitAnswer: () => {
+        correct: boolean;
+    };
+    resetQuiz: () => void;
+};
+//# sourceMappingURL=useQuiz.d.ts.map

package/dist/hooks/useQuiz.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuiz.d.ts","sourceRoot":"","sources":["../../src/hooks/useQuiz.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAwDnB,CAAC"}