analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
51 lines • 1.73 kB
TypeScript
import { HtmlHTMLAttributes } from 'react';
export interface ConnectDotsOption {
id: string;
option: string;
correctValue: string;
}
export interface ConnectDotsProps extends HtmlHTMLAttributes<HTMLDivElement> {
/** Available options with their correct values */
options: ConnectDotsOption[];
/** Current answers as a map of optionId -> selectedValue */
answers?: Record<string, string>;
/** Callback when an answer changes (only for interactive mode) */
onAnswerChange?: (optionId: string, selectedValue: string) => void;
/** Display mode */
mode?: 'interactive' | 'readonly' | 'result';
/** Whether component is disabled (only for interactive mode) */
disabled?: boolean;
}
/**
* ConnectDots component for displaying matching/connect-the-dots questions
*
* @example
* // Readonly mode - shows correct matches with arrows
* <ConnectDots
* options={[
* { id: 'opt-1', option: 'I. Event A', correctValue: '2001' },
* { id: 'opt-2', option: 'II. Event B', correctValue: '1989' },
* ]}
* mode="readonly"
* />
*
* @example
* // Interactive mode - shows select dropdowns
* <ConnectDots
* options={[...]}
* mode="interactive"
* answers={answers}
* onAnswerChange={(optionId, value) => setAnswers({...answers, [optionId]: value})}
* />
*
* @example
* // Result mode - shows badges with correct/incorrect indicators
* <ConnectDots
* options={[...]}
* mode="result"
* answers={userAnswers}
* />
*/
declare const ConnectDots: ({ options, answers, onAnswerChange, mode, disabled, className, ...props }: ConnectDotsProps) => import("react/jsx-runtime").JSX.Element;
export { ConnectDots };
//# sourceMappingURL=ConnectDots.d.ts.map