What it is

The same job as a classic quiz section — a few questions, one at a time, a result before any email — with a different layout. A full-width intro (heading, text, facts, Start, optional image) opens the section. After Start, the question shows as 2×2 cards and auto-advances; a panel beside it keeps the heading, a progress stepper and your answers as chips (tap one to change it). The result appears next to your answers, and the panel stretches to its height. The section is content-driven: Extrême runs a size finder, Tech “Find your sound”, Inova “Find your seat” — switch demos in the top bar.

How it works

• Answers carry tags; the result is the block with the best tag match, or a rule (Extrême: size = height ± fit).
• Result modes: inline — products and “Add all” in place; bundle — “Build this kit” opens the bundle builder prefilled.
• Email is optional and only after the result, with Skip.
• Keyboard: 1–4 to answer, Esc to go back.

Section settings

• Intro: eyebrow, heading, text, facts, image, button label · panel position left / right · panel / stage color schemes
• answer_visual: none / key / icon / image
• auto_advance · show_email · result_mode inline / bundle
• Blocks: question (title, hint, answers with tags), result (tags, title, text, products, CTA), email

Reference

• Be Yours — skin quiz (functionality parity)

Implementation notes

• Questions and results are section blocks; scoring runs client-side from the tags in block settings. One section, three stores — only the content differs.
• “Add all” = /cart/add.js with the selected variants; bundle mode links to the bundle page with #bundle=handle1,handle2,handle3.
• Mobile: the panel collapses to a strip of dots and chips; cards stack; the result button is sticky.