Skip to main content

How to Design Quiz Questions and Options

This guide covers how to build question steps in AtomicQuiz — option text, media, single vs multiple selection, and visual layout — using Builder for content and Design for appearance.

Use it after you have steps created and before you finalize Flow branching.

Before You Start​

Make sure you have:

  • A quiz open in AtomicQuiz with at least one question step added.
  • Decided whether each question allows one answer or multiple answers.
  • Images or icons ready if options use media.
  • A plan for how answers affect results or next steps (configured later in Flow).

See Quiz Builder and Quiz Design.

Step 1: Select the Question Step​

  1. Open the quiz in the Quiz Builder.
  2. In the steps rail, click the step that should contain the question.
  3. Confirm the canvas shows that step’s layout.

Keep one main question per step when possible — completion rates drop on crowded screens.

Step 2: Add Question Blocks​

From the blocks library, add the block type that matches your question:

Block typeUse when
Quiz option (single-choice style)Visitor picks one answer from a list.
Multiple choice (checkbox style)Visitor selects one or more options.
Text / mediaHeadline, explanation, or image above the options.
ButtonContinue when options alone do not auto-advance.

Drag blocks into the step canvas inside a container that keeps options aligned on mobile.

See Quiz Option and Multiple Choice.

Step 3: Configure Single-Choice Options​

  1. Click the quiz option block on the canvas.
  2. In the edit panel, set the question or prompt text.
  3. Add options — each row typically includes:
    • Option text (short label visitors tap)
    • Reference / ID (for logic, results, or dynamic copy)
    • Optional media (image or icon per option)
  4. Set required behavior if the visitor must answer before continuing.
  5. Choose navigation behavior (continue on select vs separate button) per product controls.

Tips:

  • Keep labels short — long options wrap badly on mobile.
  • Use media only when it helps recognition (products, symptoms, styles).

Step 4: Configure Multiple-Choice (Checkbox) Options​

  1. Add a Multiple Choice block or set option type to Checkbox where available.
  2. Enable Multi select when more than one answer is allowed.
  3. Edit each option row (text, reference, media).
  4. Set required if at least one selection is mandatory.

Use checkbox mode for “select all that apply” questions. Use single-choice when exactly one path should win for branching.

Step 5: Use Required Field References (When Available)​

Some quiz fields expose copy references such as [abc1234] after you mark fields required.

Use references to:

  • Personalize result copy with an earlier answer
  • Feed logic or messages on later steps

Copy references after required fields are configured and test in Preview.

Step 6: Polish Layout in Design Mode​

When structure works, open Design in the quiz header:

Design taskWhy
Spacing and paddingPrevent cramped options on mobile.
TypographyMatch brand fonts and readable sizes.
Colors and bordersHighlight selected vs default option states.
Responsive togglesCompare desktop vs mobile layouts.

Design changes presentation only — answers and logic stay in Builder and Flow.

See Quiz Design.

Step 7: Preview and Save​

  1. Click Save.
  2. Open Preview and test:
    • Submit with no selection (required validation)
    • Each single-choice path
    • Multiple selections when enabled
    • Mobile tap targets
  3. Confirm answer values appear as expected for leads or results copy.

Then open Flow to connect each option or button to the correct next step.

Best Practices​

  • Limit options to 4–6 per screen when possible.
  • Put the hardest question after easy warm-up steps.
  • Use consistent option card styling across steps.
  • Avoid deleting fields used in logic without reviewing Flow afterward.

Troubleshooting​

ProblemWhat to try
Cannot add second quiz option in same spotUse separate containers or steps; follow on-screen placement rules.
Checkbox allows only one selectionEnable Multi select in option settings.
Required validation never clearsConfirm option references and continue action on the block.
Design tab missingUse Builder layout controls; some accounts show limited tabs.
Logic broke after reorderRe-open Flow; reconnect paths from affected options.

Outcome​

Your quiz steps contain clear questions and options with readable layout on desktop and mobile — ready for Flow branching, webhooks, and publishing.

FAQ​

Builder vs Design for questions?

Builder edits question content and options. Design edits visual layout. Use both: structure first, polish second.

Single-choice vs multiple-choice?

Use single-choice when one answer determines the next step. Use multiple-choice when visitors can pick several items in one step.

Do design changes affect scoring?

No. Design changes presentation only. Logic and answers are configured in Builder and Flow.

Can I reuse one question on another step?

Duplicate the step or option block in Builder, then adjust text and Flow links.

Where is advanced quiz logic?

Per-element navigation plus the Flow map. See How to set quiz flow and branching logic.