Assessment Form

Block

Interactive assessment/quiz form with question rendering and progress tracking

Installation

pnpm add @corew500/feature-assessment

Usage

import { AssessmentForm } from "@corew500/feature-assessment"

<AssessmentForm>Content</AssessmentForm>

API Reference

Props

Prop	Type	Default	Description
`config*`	{ questions: { id: string; category: string; text: Record<string, string>; scale: { min: number; max: number; labels?: Record<string, string[]>; }; weight?: number; helpText?: Record<string, string>; }[]; ... 7 more ...; categoryLabels?: Record<...>; }	—	Assessment configuration
`locale`	string	`en`	Current locale for question text
`email`	string	—	User email (if known)
`questionsPerPage`	number	`1`	Questions per page (default: 1)
`onSubmit*`	(email: string, responses: { questionId: string; value: number; }[]) => Promise<{ success: true; result: { id: string; email: string; score: number; tier: "excellent" \| "good" \| "moderate" \| ...	—	Callback when assessment is submitted
`onComplete`	(result: { id: string; email: string; score: number; tier: "excellent" \| "good" \| "moderate" \| ...	—	Callback when assessment is completed successfully
`source`	string	—	Additional metadata to include with submission
`submitLabel`	string	`Submit`	Custom submit button text
`nextLabel`	string	`Next`	Custom next button text
`previousLabel`	string	`Previous`	Custom previous button text
`showProgress`	enum	`true`	Show progress bar
`className`	string	—	Additional class name for the form container
`persistProgress`	enum	`false`	Persist progress to localStorage so users can resume
`storageKey`	string	—	Custom localStorage key (default: `assessment-progress-{config.id}`)
`autoAdvance`	enum	`false`	Auto-advance to next page after selection (true = 300ms, or pass custom ms)
`showCategoryBadges`	enum	`false`	Show category badge above each question
`emailPosition`	enum	`first`	Where to collect email: 'first' (page 0) or 'last' (after questions)
`emailLabel`	string	—	Custom email field label
`emailPrivacyNote`	string	—	Custom privacy note below email field
`resumeLabels`	{ title?: string; message?: string; continueButton?: string; startFreshButton?: string; }	—	Labels for the resume progress modal
`nextDisabledHint`	string	`Please select a rating to continue`	Tooltip hint shown on the Next button when disabled (no selection made).
`submitDisabledHint`	string	`Please answer all questions to continue`	Tooltip hint shown on the Submit button when disabled.

Localization

Translatable Content

All text content should be pre-translated in the configuration. Pass the `locale` prop to select which language to display.