Brickslab.Toolsv2.1.5

@brickslab./ui-webQuiz

Visual quiz editor with builder, preview, and split modes. Manages sections, questions, and optional autosave.

Builder (full editor)

2 sections · 4 questions

Split mode

About you
What is your role?single
Company nametext
Your experience
Overall satisfactionscale
Would you recommend us?nps
2 sections · 4 questions

Props

PropTypeDéfautRequisDescription
valueQuizSchema—✓Full quiz schema (controlled).
onChange(v: QuizSchema) => void—✓Called with updated schema on every edit.
mode"builder" | "preview" | "split""builder"—Initial view mode.
readOnlybooleanfalse—Disables all editing controls.
autosavebooleanfalse—Triggers onAutosave 1.5 s after each change.
onAutosave(v: QuizSchema) => Promise<void>——Async callback for autosave or manual save.
validate(v: QuizSchema) => ValidationResult——Validation function; result shown in status bar.
localestring——Locale hint for labels (reserved for i18n).
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  value={...}
  onChange={...}
  mode="builder"
  readOnly={false}
  autosave={false}
  onAutosave={...}
  validate={...}
  locale="..."
/>
valueonChangemodereadOnlyautosaveonAutosavevalidatelocale

Usage

tsx
import { QuizBuilder, type QuizSchema } from "@brickslab./ui-web";

const [quiz, setQuiz] = useState<QuizSchema>({
  id: "my-quiz",
  title: "My survey",
  sections: [],
});

<QuizBuilder
  value={quiz}
  onChange={setQuiz}
  mode="split"
  autosave
  onAutosave={async (v) => {
    await api.saveQuiz(v);
  }}
/>