Question Builder

The Builder’s Edit tab is where the shape of a quiz lives. This page covers everything you’ll touch there: the Navigator, the seven question types, the routing pills, the validator, and the variant manager.

[SCREENSHOT: The Builder Edit tab with the Navigator on the left and an editor open on the right.]

The Edit tab at a glance

Three panels:

Variant switcher at the top. Lets you flip between A/B variants and open the variant management dialog.
Navigator on the left. A list (or visual map) of every question in the current variant, draggable to reorder.
Editor on the right. The question currently open — its prompt, its answers, its upvote panel, and its routing pills.

Below them, the Validation footer runs continuously and surfaces any invariant the draft doesn’t satisfy yet (e.g. “answer 3 has no routing target”). You can publish only when the validator is green.

The seven question types

Type	What it looks like	When to use it
Single-select	Radio buttons or pill chips, one chosen.	”Pick one” — the most common type. Skin type, gift recipient, sport.
Multi-select	Checkboxes or pill chips, several chosen.	”Anything that applies” — allergies, preferences, dietary needs.
Rating	A 1-to-N row of stars or pips.	Subjective scales — sweetness preference, intensity preference.
Slider	A continuous range with optional labels.	Budget, age, length, anything you’d otherwise ask as “between X and Y”.
Number	A free-form numeric input with min/max.	When you need a specific value — hair length in cm, garden size in m².
Image choice	A grid of images, one chosen.	When the choice is visual — colour, pattern, style.
Free text	A short text input.	The “Anything else?” question at the end.

Each type has its own editor on the right. The editors share a common shape — prompt, hint text, required-flag, answer list, per-answer upvotes, per-answer routing.

Answers and routing

Every answer has two panels on the right edge of the editor: an Upvotes panel and a Routing pill.

The Upvotes panel lets you weight that answer towards specific products. Add a product or a variant, set the upvote weight (usually 1), and you’re done. The recommendation engine sums these weights across every answer a shopper picks; see Recommendation Rules for the deeper view.

The Routing pill controls what question comes next:

→ Default — the next question in the Navigator order.
→ <question name> — jump to a specific question (in the same variant).
→ End — short-circuit to the recommendation.

Routing is variant-scoped: variant A and variant B can each have their own routing graphs, even with the same question set.

[SCREENSHOT: The answer editor showing the Upvotes panel on the left and the Routing pill on the right.]

The Navigator — list view vs map view

Two views, same data:

List is a vertical, draggable list of questions in their default order. Drag a question up or down; click one to open it in the editor.
Map is a graph view — every question is a node, every routing pill is an edge. Useful for spotting unreachable questions and orphan routes at a glance.

The Map view colour-codes nodes by reachability: unreachable nodes get a warning ring. The Validation footer also calls them out.

Variants — A/B testing the flow

A variant is a complete version of the quiz: its own question order, its own routing graph, its own upvote weights. Variants share the same set of question definitions (so renaming “Question 2” in variant A renames it in B as well), but every other shape is variant-local.

The variant switcher at the top of the Edit tab shows the active variant. Click Manage variants to open the dialog.

In the dialog you can:

Add a new variant. Start blank, or clone from a “donor” variant you’ve already shaped.
Reorder variants.
Set traffic weight per variant — the variant assignor uses these weights to bucket shoppers consistently (the assignment is weighted-hashed on the session, so a shopper sticks with one variant across a session).
Archive a variant — exclude it from traffic without deleting its edits.

The validator

The Validation footer scans the draft on every change. It surfaces problems like:

An answer with no routing target.
A question with zero answers.
An upvote pointing at a product that no longer exists.
A variant with traffic weight 0 marked as active.
An image-choice answer missing its image.

Publish is gated on a clean validator. You can save drafts freely while the validator is red — the storefront sees none of it until you publish.

[SCREENSHOT: The Validation footer showing two warnings on the in-progress draft.]

How questions are typed in code

If you’re extending the plugin, every question type is registered in the Question Type Registry, which is filterable via dino_discover_register_question_types. Each registered type carries an admin editor (React), a storefront renderer (Preact), a server-side validator, and a JSON schema. See Engine Interfaces for the contracts.

What’s next

Recommendation Rules — the per-answer upvotes panel in detail.
Catalogue Coverage — how to check that the flow you’ve built reaches every product.
Preview & Test — the preview tab and the nonce that gates it.
Drafts, Publishing & Snapshots — the editing lifecycle around the Builder.