Surveys & quizzes / 14 primitives + composition

Survey + quiz builder primitives

Typeform-style designer for post-job CX surveys and technician ADR quizzes — palette of response types, question cards with branching logic, respondent-side progress and inputs, drop-off and per-question analytics, distribution surface, and a quiz scoring + result reveal pair. Visual reference only — no real survey persistence wired.

Production answer

Survey + quiz builder primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Survey + quiz builder primitives states
Generative search brief

Survey + quiz builder primitives: Typeform-style designer for post-job CX surveys and technician ADR quizzes — palette of response types, question cards with branching logic, respondent-side progress and inputs, drop-off and per-question analytics, distribution surface, and a quiz scoring + result reveal pair. Visual reference only — no real survey persistence wired.

Visual reference only — distinct from forms, notifications, and support NPS
Primitive 01

Survey question card

Builder canvas card with number, prompt input, type chip, required toggle, and delete / duplicate kebab.

StatelessOpen
Primitive 02

Question type picker

Palette of 11 response types — single, multi, short, long, rating, scale, ranking, matrix, date, file, NPS.

Stateful · selectOpen
Primitive 03

Branching logic editor

Per-question rules — If answer [op] [value], skip to question — with show / skip / end-survey actions.

StatelessOpen
Primitive 04

Survey progress dots

Dot progress for the respondent view — completed filled, current highlighted, remaining empty, % readout.

StatelessOpen
Primitive 05

Response analytics tile

Per-question tile — prompt, response count, tone-coded distribution bar chart with percentages.

StatelessOpen
Primitive 06

Drop-off chart

SVG line + area chart tracking % completing each question with annotations on the biggest drops.

StatelessOpen
Primitive 07

NPS input

0–10 NPS button row with detractor / passive / promoter tone bands and anchor labels.

Stateful · selectOpen
Primitive 08

Likert scale row

Statement on the left, 5 / 7 / 9 point radio scale across — Strongly disagree → Strongly agree.

Stateful · selectOpen
Primitive 09

Multi-page navigator

Footer navigator — Back / Next + Page X of Y + Save & continue later. Submit appears on the last page.

StatelessOpen
Primitive 10

Anonymous toggle

Anonymous responses switch with an info popover explaining how respondent identity is handled.

Stateful · pressOpen
Primitive 11

Response sample list

Recent responses with respondent (or Anonymous), timestamp, completion % bar, and open CTA.

StatelessOpen
Primitive 12

Share survey modal

Modal — public URL chip, embed snippet via CodeBlock, email distribution row, and QR primitive.

Stateful · copyOpen
Primitive 13

Quiz scoring rules

Per-question weights, total max points, pass threshold gauge, and Fail / Pass / Distinction tone bands.

StatelessOpen
Primitive 14

Quiz result reveal

Respondent-side score reveal — earned / total, band chip, per-question feedback rows, retry CTA.

StatelessOpen
Composition

Full survey builder

Palette left + question canvas centre + analytics rail right with anonymous toggle and share trigger.

CompositionOpen