Build a Quiz Funnel — Step by Step with Headless Components
Building a quiz funnel from scratch means handling state, branching, progress tracking, and validation. quiz-ui provides all of that as headless React components. This page walks through the pieces: define a QuizDefinition, wrap it in QuizRoot, render steps with QuizStep, and add navigation with QuizNavigation.
Last updated: 2026-09-25
Frequently asked questions
What's the first step to build a quiz funnel?
Define a QuizDefinition object with an id, an entry step, and a list of steps — each step has an id, type, and optional branch rules.
How do I add branching?
Add a branch array to any step. Each rule checks an answer value — if it matches, the funnel goes to the specified step. Otherwise it falls through to next.
How do I handle the result?
Add a result-type step at the end of your funnel and use QuizResult to read back all collected answers.