Question types & skins

Same data shape. Sixty ways to render it.

Pick the affordance that fits your audience and device. The answer storage is identical across skins — every single writes one code, every rank writes a code list. The respondent experience is what you tune.

16 answer-bearing question types

59 ready-made skins, no extra config

1 line of YAML to switch skin

Single-select

5 skins · type: single

Pick exactly one option. Skin choice is mostly about list length, screen size, and whether the options are images.

singleradio

Apple

Samsung

Dell

Default. Vertical stack of radios — works for any list under ~10 items.

singledropdown

Samsung

Compact. Right for long lists where vertical space matters.

singlebuttons

Apple Samsung Dell

Pill buttons. Good for short, decisive choices on touch devices.

singlecards

Apple Samsung Dell HP

Larger card tiles when each option needs more visual weight or a description.

singleimageCards

Apple

Samsung

Image-led cards for packaging, ad-creative, or product-shot tests.

Multi-select

5 skins · type: multi

Pick any subset. Same five framings as single, with a checkbox affordance instead of a radio.

multicheckbox

Battery

Camera

Storage

Default. Standard checkbox column.

multibuttons

Battery Camera Storage

Toggleable pills — short, two-handed picking.

multicards

Battery Camera Storage Build

Tiles you can toggle — when each option deserves real estate.

multiimageCards

Pack A

Pack B

Visual subset selection. Pick all designs you'd consider.

multidropdown

Battery, Storage

Multi-pick dropdown for very long option lists.

Ranking

5 skins · type: rank

Order options from most to least preferred. Five distinct interaction models — pick the one that fits the audience.

rankarrows

1Battery▲▼

2Camera▲▼

3Storage▲▼

List with up/down arrows. Accessible default.

ranktapToRank

1Camera

2Battery

—Storage

Tap each option in your preferred order. Touch-first.

rankdropdownRank

1Battery

2Camera

3Storage

Each item has a position dropdown. Discoverable, no drag needed.

rankpodium

Podium-style top-3 visual. Engaging for "rank your favourites" framing.

rankdrag

⠿1Battery

⠿2Camera

⠿3Storage

Free drag-and-drop. Most direct, least accessible — pair carefully.

Open text

2 skins · type: open

Free text. Single line for short answers, multi-line for verbatims.

opentext

Single-line input. ZIP, name, email, short answers.

opentextarea

Tell us why you picked this brand…

Multi-line. Verbatim feedback, descriptions, "why" follow-ups.

Numeric

11 skins · type: number + type: numberList

Single numbers and lists of numbers. Same six rendering surfaces, plus the dial for a single value.

numberinput

Plain numeric input. Best when the value range is open.

numberslider

Continuous slider. Right when bounds are known and direction matters.

numbersliderTicks

0255075100

Slider with labelled tick marks. Communicates the scale at a glance.

numberstepper

− 3 +

Plus/minus stepper. Best for small integer counts (1–10ish).

numberdial

Circular dial. Great for percent-share or commitment-strength.

numberdropdown

3 of 10

Dropdown over a fixed numeric domain.

numberListinput

Groceries

Dining

One numeric input per row. Allocations, budgets, counts per category.

numberListslider

Groceries

Dining

A slider per row. Visual budget allocation.

numberListsliderTicks

$0$50$100$150

Per-row slider with explicit ticks.

numberListstepper

Adults

−2+

Children

−1+

Stepper per row. Household composition, item counts.

numberListdropdown

Groceries

Dining

Per-row dropdown over a fixed numeric domain.

Grids

14 skins · gridSingle · gridMulti · gridNumber

Likert-style and numeric grids. gridSingle alone has eight rendering modes — Likert tables, paired comparisons, emoji scales, sliders, bipolar scales, scale bars.

gridSingleradioGrid

	1	2	3	4	5
Quality				●
Price		●

Default Likert table. One radio per row.

gridSinglepaired

Quality AQuality B

Price APrice B

Forced-choice between two anchors per row.

gridSinglescaleButtons

Quality

12345

Price

12345

Buttons per row. Tappable on mobile.

gridSinglecardStack

Quality

Price

Service

One card per row, stacked. Mobile-friendly.

gridSingleemojiScale

😣😐🙂😄🤩

Emoji-scaled rating. Engaging for consumer audiences.

gridSinglesliderGrid

Quality

Price

A slider per row. Continuous-feeling grids.

gridSinglebipolarSlider

CheapPremium

Slider between two anchored opposites. Brand-perception scales.

gridSinglescaleBar

1 2 3 4 5

Coloured horizontal bar. Visual scale, instant comprehension.

gridMulticheckboxGrid

	App	Web	Store
Browse	✓	✓
Buy		✓	✓

Checkbox per cell. Multi-channel use grids.

gridMulticardStack

Browse

Buy

Stacked rows for narrow viewports.

gridMultichipGrid

Browse

AppWebStore

Toggleable chip per cell. Compact, clear selection.

gridNumbergrid

$45

$60

$80

$30

$25

$50

2D numeric grid. Spend per category × month.

gridNumbernumber

Q1 · App

Q1 · Web

Linearised number inputs. Better for very large grids.

gridNumberdropdown

Q1 · App

Q1 · Web

Dropdown per cell over a fixed numeric domain.

Choice modelling

5 skins · cbc + maxdiff

Multi-task conjoint exercises. CBC has three layouts; MaxDiff has two.

cbcprofiles

	A	B	C
Brand	Apple	Samsung	Dell
Price	$999	$1.2k	$1.4k

Default tabular profile comparison. Attributes down, concepts across.

cbccard_swipe

Concept A

Single-card swipe UI. Mobile-first conjoint.

cbcimage_profiles

Image-led concepts for packaging or creative tests.

maxdifftable

Best	Item	Worst
	Battery
	Camera
	Storage

Default best-worst table. Best column · item · worst column.

maxdiffstacked

BatteryBestWorst

CameraBestWorst

StorageBestWorst

Vertical stacked rows with inline buttons. Mobile-friendly.

Annotation

6 skins · textAnnotation · imageAnnotation · videoAnnotation

Stimulus-on-screen tasks. Highlight passages, click-and-pin images, sentiment-track videos.

textAnnotationemoji

We tested the new battery life 😄 across a week and the camera 😣 in low light.

Highlight passages and tag with emoji sentiment.

textAnnotationrect

Drag a rectangle on a stimulus image, attach a comment.

imageAnnotationhighlight

Click-and-pin areas of a stimulus image with sentiment.

videoAnnotationdial

▶

Continuous sentiment dial as the video plays.

videoAnnotationtap_react

😄😐😣

Tap reaction emoji during playback. Time-stamped.

videoAnnotationpost_section

	3	4	5
Intro	●
Pitch		●
Close			●

Per-section ratings shown after the clip.

Card sort

3 skins · type: cardSort

Drag items into buckets. Three modes covering every research-design preference.

cardSortclosedSort

Daily

MailNews

Weekly

Bank

Predefined slots, every item placed.

cardSortopenSort

Habits

Mail

Money

Bank

No predefined slots — respondent creates and names them.

cardSorthybrid

Daily

Mail

+ My slot

News

Predefined starter slots, plus respondent-added customs.

Lookup

3 skins · type: lookup

Match an answer against an external list — ZIP codes, hospitals, vehicle make/model. Three retrieval styles.

lookupsearchInput

Search hospitals…

Default. Type-ahead search box with ranked results.

lookupdropdown

Select hospital

Single dropdown over the lookup's pre-filtered records.

lookupcascading

Toyota

Camry

Year…

Step-by-step narrowing. Make → model → year.

Skins are first-class. Switching between them is one line of YAML — no copy-paste, no duplicate questions, no schema changes. Storage shape stays identical, so your analysis pipeline doesn't care which skin you picked.