analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
52 lines • 2.01 kB
TypeScript
import { HtmlHTMLAttributes } from 'react';
export interface FillInBlanksOption {
id: string;
option: string;
}
export interface FillInBlanksProps extends HtmlHTMLAttributes<HTMLDivElement> {
/** The text content with {uuid} placeholders */
content: string;
/** Available options to fill in the blanks */
options: FillInBlanksOption[];
/** Current answers as a map of placeholderId -> selectedOptionId */
answers?: Record<string, string>;
/** Callback when an answer changes (only for interactive mode) */
onAnswerChange?: (placeholderId: string, optionId: string) => void;
/** Display mode */
mode?: 'interactive' | 'readonly' | 'result';
/** Whether component is disabled (only for interactive mode) */
disabled?: boolean;
}
/**
* FillInBlanks component for displaying fill-in-the-blanks questions
*
* @example
* // Readonly mode - shows correct answers with green underlined text
* <FillInBlanks
* content="A {uuid-1} é uma {uuid-2}."
* options={[{ id: 'uuid-1', option: 'Terra' }, { id: 'uuid-2', option: 'planeta' }]}
* mode="readonly"
* />
*
* @example
* // Interactive mode - shows select dropdowns
* <FillInBlanks
* content="A {uuid-1} é uma {uuid-2}."
* options={[{ id: 'uuid-1', option: 'Terra' }, { id: 'uuid-2', option: 'planeta' }]}
* mode="interactive"
* answers={answers}
* onAnswerChange={(placeholderId, optionId) => setAnswers({...answers, [placeholderId]: optionId})}
* />
*
* @example
* // Result mode - shows badges with correct/incorrect indicators
* <FillInBlanks
* content="A {uuid-1} é uma {uuid-2}."
* options={[{ id: 'uuid-1', option: 'Terra' }, { id: 'uuid-2', option: 'planeta' }]}
* mode="result"
* answers={userAnswers}
* />
*/
declare const FillInBlanks: ({ content, options, answers, onAnswerChange, mode, disabled, className, ...props }: FillInBlanksProps) => import("react/jsx-runtime").JSX.Element;
export { FillInBlanks };
//# sourceMappingURL=FillInBlanks.d.ts.map