How to build a shelf testing question in Decipher

A shelf test asks respondents to choose a product in the context of the products around it. This tutorial builds a two-tier grocery shelf in Decipher, with six fictional granolas, visible prices and a selection that lifts the chosen pack from the shelf. Respondents can change their choice before continuing.

The shelf-testing example on GitHub uses a design file to control placement, prices and availability. A native single-select question stores the answer. The visual shelf is a way to interact with that question.

You will assemble the same complete XML shown at the end. Start with the document scaffold, replace each named insertion point, and follow the explanation beside each section. The screenshot above shows the finished element.

1. Prepare the survey and files

Create a new Decipher survey in testing mode with XML editing and system/static upload access. Download the shelf example files.

Upload	Location	Purpose
`shelf-design-v1.dat`	Root/system files	Product, position, price and availability assignments.
`assets/granola-atlas.png` as `granola-atlas.png`	Static/public files	One three-column, two-row image containing all six packs.

The server opens the design from the project root; the browser loads the atlas from the public survey asset path. See Forsta's static-file guide. The atlas replaces six separate pack uploads. This synthetic example demonstrates controlled placement; it is not a statistically optimized conjoint design.

2. Start with the XML structure

Open the XML editor of your new test survey. Replace its contents with this scaffold; do not nest it inside another <survey> element.

The outer <style name="respview.client.css"> is a Decipher XML hook. The inner <style> is the HTML stylesheet it emits. Paste CSS rules between that inner pair. <![CDATA[ and ]]> protect characters such as < and & from XML parsing. Keep the backslash in \@media and \@keyframes; these examples escape those rules for Decipher's style processing.

respview.client.js is the JavaScript hook. Its exact wrapper is already in the scaffold below. Both hooks are children of <survey>, alongside the questions. Python belongs in <exec> or <validate> inside the XML, never in the JavaScript hook. Forsta describes the embedding rules in its XML style-system guide.

The BUILD: comments are temporary insertion points. Replace the entire named comment line with its matching code block, once. Keep the surrounding opening and closing tags. Each block below is part of the finished document, with no omitted rows or helper functions. Complete all replacements before saving and running the survey; an unfinished script can refer to functions or variables you have not inserted yet. The final example is an alternative one-paste installation, not another block to append.

Here, mode="after" appends to the normal hook. wrap="ready" makes Decipher supply the JavaScript script tag and document-ready wrapper. Paste the JavaScript inside its CDATA; do not add another HTML <script> there.

Part of the document	Job
CSS and JavaScript hooks	Render the shelf and connect it to native inputs.
Initialization and assignment	Load the design and retain version/session.
Offer matrix and metadata HTML	Save the six-slot assignment and pass it to the browser.
`ShelfPick`, page break, derived fields	Save the selected product, then derive its price and location.

1<survey
2  name="Shelf testing"
3  alt="Shelf testing"
4  compat="144"
5  fir="on"
6  html:showNumber="0"
7  builder:wizardCompleted="1"
8  state="testing"
9  ss:enableNavigation="0"
10  extraVariables="source"
11  autosave="1"
12  displayOnError="all"
13>
14  <style name="respview.client.css" mode="after"><![CDATA[
15    <style>
16      /* BUILD: SHELF_PAGE */
17      /* BUILD: SHELF_RACK */
18      /* BUILD: SHELF_TICKETS */
19      /* BUILD: SHELF_SUMMARY */
20      /* BUILD: SHELF_MEDIUM */
21      /* BUILD: SHELF_SMALL */
22    </style>
23  ]]></style>
24  <style name="respview.client.js" mode="after" wrap="ready"><![CDATA[
25    (function () {
26      'use strict';
27      /* BUILD: SHELF_DISCOVERY */
28      /* BUILD: SHELF_HELPERS */
29      /* BUILD: SHELF_BUILD */
30      /* BUILD: SHELF_CHOOSE */
31      /* BUILD: SHELF_ACTIVATE */
32    })();
33  ]]></style>
34  <!-- BUILD: SHELF_LOADER -->
35  <!-- BUILD: SHELF_ASSIGNMENT -->
36  <!-- BUILD: SHELF_OFFERS -->
37  <!-- BUILD: SHELF_META -->
38  <!-- BUILD: SHELF_QUESTION -->
39  <!-- BUILD: SHELF_DERIVED -->
40</survey>

Read the opening <survey> settings before adding the component:

Setting	Why it is here
`name`, `alt`	The survey's name and alternate title. They do not determine answer codes.
`compat="144"`	Retains the source example's compatibility level. Changing it can change the generated markup the script reads.
`fir="on"`	Enables Decipher's form input replacement presentation; the underlying native inputs still exist.
`html:showNumber="0"`	Suppresses displayed question numbers.
`builder:wizardCompleted="1"`	Retains the example's completed setup-wizard flag.
`state="testing"`	Keeps the example in its testing lifecycle.
`ss:enableNavigation="0"`	Does not add Decipher's Back navigation button.
`extraVariables="source"`	Includes the URL variable `source` in the survey's extra variables.

These are survey settings, separate from the component's own logic. See Forsta's survey-tag reference and compatibility-level reference.

This example also sets autosave="1" to retain partial progress. displayOnError="all" keeps all questions on a page when validation redisplays it.

Read the syntax used in the build

In XML, label gives an element its programmatic identity; value declares an exported answer code. <title> and <comment> provide question text and instructions. <suspend /> ends a page. A where="execute" field runs on the server without being shown to the respondent. optional="0" requires an answer; optional="1" allows a field to be empty. A numeric field's size is its input width, not an allowed-value list.

In JavaScript, querySelector finds one matching element and querySelectorAll finds all matches. A Map or object connects a stable identifier to its native input. data-* HTML attributes become element.dataset properties. forEach visits every entry; map produces a new list; find returns the first match; some and every test whether any or all entries qualify. A guard followed by return stops that function when its prerequisites are absent.

The immediately invoked function, (function () { ... })();, keeps local variables out of the global scope. Its opening and closing punctuation is already in the scaffold; the dots in this sentence are explanatory, not a code block to paste. 'use strict' enables stricter JavaScript checks. Event listeners connect named actions to clicks, keys or pointer movement. textContent inserts plain text; innerHTML builds the example's HTML elements. aria-*, role and tabIndex describe controls and keyboard focus to assistive technology. They supplement the native inputs rather than creating exported answers.

For CSS, read each selector as “which elements” and the declarations inside its braces as “how they look.” margin, padding and gap control space outside, inside and between elements. width, height, min-*, max-* and box-sizing control dimensions. Flex/grid rules arrange children. position, edge offsets and z-index place layers; transform moves or scales them; opacity changes transparency. Fonts, colors, borders, radii and shadows provide the visual treatment. transition animates a property change; animation runs named keyframes. Attribute selectors such as [aria-pressed='true'] style a state the script sets. Media queries apply only at the specified width or motion preference.

3. Build the native survey and data flow

These blocks belong in the XML part of the scaffold, outside the client CSS and JavaScript hooks. Keep Python indentation exactly as shown; Python uses indentation to define its blocks.

1. Load and check the shelf design

Replace the entire BUILD: SHELF_LOADER comment line in the XML scaffold with this block.

Inside the survey-level initialization <exec>, open the file in the survey's system directory, remove blank lines and split remaining lines on tabs. Check the exact eight-column header. For each data record, require eight values, convert them to integers and reject a duplicate version/task/concept key before storing the final five attributes.

shelfOffers() reads slots 1–6 for task 1 of the assigned version. Each dictionary gives the physical slot, stable product ID with a p prefix, shelf, position, price in cents and availability flag. The design has six versions of this single task. Product identity is separate from position: moving product 101 to another slot does not turn it into product 102. 449 is $4.49, and availability is 0 or 1.

1  <exec when="init"><![CDATA[
2def shelfLoadDesign(fname):
3    f = open("%s/%s" % (gv.survey.path, fname))
4    records = [line.strip("\r\n").split("\t") for line in f.readlines() if line.strip()]
5    f.close()
6    if records[0] != ["Version", "Task", "Concept", "Product", "Shelf", "Position", "Price", "Available"]:
7        raise ValueError("Unexpected shelf design header")
8    design = {}
9    for row in records[1:]:
10        if len(row) != 8:
11            raise ValueError("Invalid shelf design row")
12        values = [int(n) for n in row]
13        key = "v%s_t%s_c%s" % (values[0],values[1],values[2])
14        if key in design:
15            raise ValueError("Duplicate shelf design key")
16        design[key] = values[3:]
17    return design
18shelfDesign = shelfLoadDesign("shelf-design-v1.dat")
19def shelfOffers(version):
20    offers = []
21    for slot in range(1,7):
22        a = shelfDesign["v%s_t1_c%s" % (version,slot)]
23        offers.append({"slot":slot, "product":"p%s" % a[0], "shelf":a[1], "position":a[2], "price":a[3], "available":a[4]})
24    return offers
25]]></exec>

2. Assign the version and persist the initialization page

Replace the entire BUILD: SHELF_ASSIGNMENT comment line in the XML scaffold with this block.

The three server-only fields store the randomly assigned version 1–6, immutable design ID and random anonymous cache key. Each random assignment is guarded by is None, so revisiting the server flow does not intentionally draw another assignment. size controls field width; the Python ranges define the generated numbers.

The loading HTML carries the native question label in data-label. Its following <suspend /> creates a page boundary. The browser script advances that page with the native Continue button, allowing the assignment to be submitted before shelf selection. autosave="1" retains partial survey progress; displayOnError="all" retains the page's questions when validation redisplays it.

1  <number label="ShelfPickDesignVersion" where="execute" optional="1" size="1">
2    <title>Assigned shelf design version</title>
3    <exec>
4if ShelfPickDesignVersion.val is None:
5    ShelfPickDesignVersion.val = random.randint(1,6)
6</exec>
7  </number>
8  <text label="ShelfPickDesignID" where="execute" optional="1">
9    <title>Immutable shelf design ID</title>
10    <exec>ShelfPickDesignID.val = "shelf-20261019-v1"</exec>
11  </text>
12  <number label="ShelfPickSessionKey" where="execute" optional="1" size="12">
13    <title>Anonymous draft cache key</title>
14    <exec>
15if ShelfPickSessionKey.val is None:
16    ShelfPickSessionKey.val = random.randint(100000000,999999999)
17</exec>
18  </number>
19  <html label="ShelfPickStart" where="survey"><div id="shelf-start" data-label="ShelfPick">Loading…</div></html>
20  <suspend />

3. Save all six assigned slots in native fields

Replace the entire BUILD: SHELF_OFFERS comment line in the XML scaffold with this block.

The standalone <exec> obtains the selected version's offers and filters available product IDs into p.ShelfPickAvailable. The task field records the fixed task number, 1.

ShelfPickOffers is a six-row number matrix evaluated on the server. Its rows name the physical top/bottom, left/center/right positions, while columns record slot, stable product code, shelf, position, cents and availability. For each offer, subtract one from its slot to index the row list. Assign every column; remove the product's p prefix and convert it to an integer for the numeric product column. This exports the complete assignment, including products the respondent did not choose.

1  <exec>
2p.ShelfPickOffers = shelfOffers(ShelfPickDesignVersion.val)
3p.ShelfPickAvailable = [a['product'] for a in p.ShelfPickOffers if a['available'] == 1]
4</exec>
5  <number label="ShelfPickTask" where="execute" optional="1" size="1">
6    <title>Shelf design task</title>
7    <exec>ShelfPickTask.val = 1</exec>
8  </number>
9  <number label="ShelfPickOffers" where="execute" optional="1" size="5">
10    <title>Assigned shelf layout by physical slot; price in USD cents; availability 0 or 1</title>
11    <row label="r1">Top shelf, left</row>
12    <row label="r2">Top shelf, center</row>
13    <row label="r3">Top shelf, right</row>
14    <row label="r4">Bottom shelf, left</row>
15    <row label="r5">Bottom shelf, center</row>
16    <row label="r6">Bottom shelf, right</row>
17    <col label="slot">Physical slot</col>
18    <col label="product">Stable product code</col>
19    <col label="shelf">Shelf number</col>
20    <col label="position">Position within shelf</col>
21    <col label="price">Price in USD cents</col>
22    <col label="available">Available to choose</col>
23    <exec>
24for a in p.ShelfPickOffers:
25    r = ShelfPickOffers.rows[a['slot']-1]
26    r.slot.val = a['slot']
27    r.product.val = int(a['product'][1:])
28    r.shelf.val = a['shelf']
29    r.position.val = a['position']
30    r.price.val = a['price']
31    r.available.val = a['available']
32</exec>
33  </number>

4. Pass the saved layout to the browser

Replace the entire BUILD: SHELF_META comment line in the XML scaffold with this block.

This <html> element is a sibling of the choice question. The outer metadata element carries the native label, version, design, session and survey asset base. Its six empty spans carry one slot's product, position, cents and availability each.

Every ${...} expression reads a saved native field on the server. Prefixing a numeric product with p reconstructs the browser's inventory key. The attributes are configuration, not visible question text. JavaScript reads them through dataset; it does not generate a different layout. Copy all six spans even when one product is unavailable.

1  <html label="ShelfPickMeta" where="survey"><div id="shelf-meta" data-label="ShelfPick" data-version="${ShelfPickDesignVersion.val}" data-design="${ShelfPickDesignID.val}" data-session="${ShelfPickSessionKey.val}" data-assets="/survey/${gv.survey.path}/"><span data-slot="1" data-product="p${ShelfPickOffers.r1.product.val}" data-shelf="${ShelfPickOffers.r1.shelf.val}" data-position="${ShelfPickOffers.r1.position.val}" data-price="${ShelfPickOffers.r1.price.val}" data-available="${ShelfPickOffers.r1.available.val}"></span><span data-slot="2" data-product="p${ShelfPickOffers.r2.product.val}" data-shelf="${ShelfPickOffers.r2.shelf.val}" data-position="${ShelfPickOffers.r2.position.val}" data-price="${ShelfPickOffers.r2.price.val}" data-available="${ShelfPickOffers.r2.available.val}"></span><span data-slot="3" data-product="p${ShelfPickOffers.r3.product.val}" data-shelf="${ShelfPickOffers.r3.shelf.val}" data-position="${ShelfPickOffers.r3.position.val}" data-price="${ShelfPickOffers.r3.price.val}" data-available="${ShelfPickOffers.r3.available.val}"></span><span data-slot="4" data-product="p${ShelfPickOffers.r4.product.val}" data-shelf="${ShelfPickOffers.r4.shelf.val}" data-position="${ShelfPickOffers.r4.position.val}" data-price="${ShelfPickOffers.r4.price.val}" data-available="${ShelfPickOffers.r4.available.val}"></span><span data-slot="5" data-product="p${ShelfPickOffers.r5.product.val}" data-shelf="${ShelfPickOffers.r5.shelf.val}" data-position="${ShelfPickOffers.r5.position.val}" data-price="${ShelfPickOffers.r5.price.val}" data-available="${ShelfPickOffers.r5.available.val}"></span><span data-slot="6" data-product="p${ShelfPickOffers.r6.product.val}" data-shelf="${ShelfPickOffers.r6.shelf.val}" data-position="${ShelfPickOffers.r6.position.val}" data-price="${ShelfPickOffers.r6.price.val}" data-available="${ShelfPickOffers.r6.available.val}"></span></div></html>

5. Create the native product choice and validation

Replace the entire BUILD: SHELF_QUESTION comment line in the XML scaffold with this block.

ShelfPick is a required single-select question. Its six rows have stable labels p101–p106 and exported values 101–106. Each cond includes the row only if that product is in the available list. alt supplies plain row text, and the span's data-product gives the browser a direct product identifier. & is XML's escaped ampersand.

The <validate> block checks that the selected row's label is still available. optional="0" handles a missing answer; this custom check handles an invalid offered choice. The page break is deliberately after the question: the derived fields in the next section need its submitted answer.

1  <radio label="ShelfPick" optional="0" ss:questionClassNames="shelf-native">
2    <title>Which granola would you choose?</title>
3    <comment>Choose one product from the shelf.</comment>
4    <row
5      label="p101"
6      value="101"
7      cond="'p101' in p.ShelfPickAvailable"
8      alt="Oatfield Honey &amp; Almond"
9    ><span data-product="p101">Oatfield Honey &amp; Almond</span></row>
10    <row
11      label="p102"
12      value="102"
13      cond="'p102' in p.ShelfPickAvailable"
14      alt="Oatfield Maple &amp; Pecan"
15    ><span data-product="p102">Oatfield Maple &amp; Pecan</span></row>
16    <row
17      label="p103"
18      value="103"
19      cond="'p103' in p.ShelfPickAvailable"
20      alt="Oatfield Berry &amp; Seed"
21    ><span data-product="p103">Oatfield Berry &amp; Seed</span></row>
22    <row
23      label="p104"
24      value="104"
25      cond="'p104' in p.ShelfPickAvailable"
26      alt="Morning Folk Cocoa &amp; Hazelnut"
27    ><span data-product="p104">Morning Folk Cocoa &amp; Hazelnut</span></row>
28    <row
29      label="p105"
30      value="105"
31      cond="'p105' in p.ShelfPickAvailable"
32      alt="Morning Folk Coconut &amp; Chia"
33    ><span data-product="p105">Morning Folk Coconut &amp; Chia</span></row>
34    <row
35      label="p106"
36      value="106"
37      cond="'p106' in p.ShelfPickAvailable"
38      alt="Morning Folk Apple &amp; Cinnamon"
39    ><span data-product="p106">Morning Folk Apple &amp; Cinnamon</span></row>
40    <validate>
41if ShelfPick.val is not None:
42    if ShelfPick.selected.label not in p.ShelfPickAvailable:
43        error("Please choose an available product from the shelf.")
44</validate>
45  </radio>
46  <suspend />

6. Derive the selected price and position after the page break

Replace the entire BUILD: SHELF_DERIVED comment line in the XML scaffold with this block.

ShelfPickProductID saves the selected native row label, such as p105. Each list comprehension scans the same offers used to display the shelf, filters by that label, and takes the matching value with [0]. The price field divides cents by 100.0 to store dollars as a float. The remaining number fields save slot, shelf and position.

This relies on a valid selected product and a design with one matching offer. The final samplesources block retains the repository's open-survey source: list zero is the default, completed supplies the already-completed message, and the qualified exit supplies the recorded-response message. These messages do not derive data or select a product.

1  <text label="ShelfPickProductID" where="execute" optional="1">
2    <title>Chosen stable product ID</title>
3    <exec>ShelfPickProductID.val = ShelfPick.selected.label</exec>
4  </text>
5  <float label="ShelfPickPrice" where="execute" optional="1" size="6">
6    <title>Chosen product price in USD</title>
7    <exec>ShelfPickPrice.val = [a['price'] for a in p.ShelfPickOffers if a['product'] == ShelfPick.selected.label][0] / 100.0</exec>
8  </float>
9  <number label="ShelfPickSlot" where="execute" optional="1" size="1">
10    <title>Chosen product physical slot</title>
11    <exec>ShelfPickSlot.val = [a['slot'] for a in p.ShelfPickOffers if a['product'] == ShelfPick.selected.label][0]</exec>
12  </number>
13  <number label="ShelfPickShelf" where="execute" optional="1" size="1">
14    <title>Chosen product shelf</title>
15    <exec>ShelfPickShelf.val = [a['shelf'] for a in p.ShelfPickOffers if a['product'] == ShelfPick.selected.label][0]</exec>
16  </number>
17  <number label="ShelfPickPosition" where="execute" optional="1" size="1">
18    <title>Chosen product position within shelf</title>
19    <exec>ShelfPickPosition.val = [a['position'] for a in p.ShelfPickOffers if a['product'] == ShelfPick.selected.label][0]</exec>
20  </number>
21  <samplesources default="0">
22    <samplesource list="0">
23      <title>Open survey</title>
24      <completed>You have already completed this study.</completed>
25      <exit cond="qualified">Your responses have been recorded.</exit>
26    </samplesource>
27  </samplesources>

4. Fill the styling hook

Fill the named markers inside respview.client.css in the scaffold. CSS blocks replace comments between the inner HTML <style> tags. Where this example includes a head script, its marker is explicitly inside <script>.

1. Prepare the custom page and its heading

Replace the entire BUILD: SHELF_PAGE comment line in the CSS hook’s inner <style> with this block.

Rules scoped to shelf-ready remove the native page framing and hide its original presentation only after JavaScript adds that class. The custom .sh-ui has its own sizing, typography and button focus treatment. Heading and instruction rules set the text above the shelf.

The metadata wrapper is hidden along with the native shelf question, original buttons and survey-level error banner. The script later copies native question errors into its custom alert. The underlying inputs remain in the form for native validation and submission.

1      body.shelf-ready {
2        margin: 0;
3        background: #f5f3ed;
4        color: #243c31;
5        font-family: Arial, Helvetica, sans-serif;
6        -webkit-font-smoothing: antialiased;
7      }
8      .shelf-ready #survey,
9      .shelf-ready .survey-section,
10      .shelf-ready .survey-body {
11        max-width: none;
12        width: auto;
13        margin: 0;
14        padding: 0;
15        border: 0;
16        border-radius: 0;
17        background: transparent;
18        box-shadow: none;
19      }
20      .shelf-ready .footer,
21      .shelf-ready .survey-error,
22      .shelf-ready .survey-header,
23      .shelf-ready .page-header,
24      .shelf-ready .survey-footer,
25      .shelf-ready .survey-buttons,
26      .shelf-ready .survey-info,
27      .shelf-ready .shelf-native,
28      .shelf-ready .shelf-meta-wrap {
29        display: none !important;
30      }
31      .sh-ui {
32        max-width: 1110px;
33        margin: auto;
34        padding: 30px 40px 26px;
35        box-sizing: border-box;
36      }
37      .sh-ui * {
38        box-sizing: border-box;
39      }
40      .sh-ui button {
41        font: inherit;
42        -webkit-tap-highlight-color: transparent;
43      }
44      .sh-ui button:focus-visible {
45        outline: 3px solid #265d48;
46        outline-offset: 4px;
47      }
48      .sh-heading {
49        margin-bottom: 25px;
50      }
51      .sh-heading h1 {
52        font-size: clamp(25px, 3vw, 34px);
53        line-height: 1.18;
54        letter-spacing: -1.1px;
55        font-weight: 500;
56        margin: 0 0 10px;
57      }
58      .sh-heading p {
59        font-size: 13px;
60        line-height: 1.5;
61        color: #6d766e;
62        margin: 0;
63      }

2. Draw the rack and crop the product atlas

Replace the entire BUILD: SHELF_RACK comment line in the CSS hook’s inner <style> with this block.

The rack uses gradients, borders and shadows to suggest the shelf cabinet. Its pseudo-element supplies a background detail. Each tier is a three-column grid with a pseudo-element for the shelf edge. Slots contain a button, floor shadow and two decorative pack layers.

.sh-pack uses the shared atlas URL and background-size: 300% 200%: the image contains three columns and two rows. JavaScript sets background-position for the product's fixed sprite cell. The back/front transforms create depth; hover and [aria-checked='true'] bring the selected front pack forward. A separate check marker appears only for that checked state. Atlas coordinates describe artwork, independently of the assigned physical shelf slot.

1      .sh-rack {
2        position: relative;
3        padding: 11px 18px 0;
4        background: linear-gradient(
5          90deg,
6          #c3b8a4 0%,
7          #ebe6da 1.1%,
8          #e8e1d4 2%,
9          #eee8db 98%,
10          #c9beab 99%,
11          #b9ad99 100%
12        );
13        border: 1px solid #c7bead;
14        border-radius: 9px 9px 4px 4px;
15        box-shadow:
16          0 16px 26px -20px #41352555,
17          0 2px 3px #4b3c2810;
18        isolation: isolate;
19      }
20      .sh-rack:before {
21        content: '';
22        position: absolute;
23        inset: 9px 16px 0;
24        background:
25          radial-gradient(circle, #b8ae9b80 0.7px, transparent 1.1px) 2px 2px/13px 13px,
26          linear-gradient(90deg, #d3c8b6, #e8decd 18%, #e8decd 82%, #d1c5b1);
27        z-index: -1;
28        box-shadow: inset 0 15px 25px #9e8f7226;
29      }
30      .sh-tier {
31        position: relative;
32        display: grid;
33        grid-template-columns: repeat(3, minmax(0, 1fr));
34        gap: 0;
35        padding-top: 10px;
36      }
37      .sh-tier:after {
38        content: '';
39        position: absolute;
40        bottom: 0;
41        left: -10px;
42        right: -10px;
43        height: 47px;
44        background: linear-gradient(
45          #ddd5c5 0,
46          #fffdf5 3px,
47          #efeadf 6px,
48          #d9cfbc 8px,
49          #f7f4ed 9px,
50          #e9e3d6 96%,
51          #b8ab94
52        );
53        border-top: 1px solid #c6b99f;
54        border-bottom: 2px solid #b8aa93;
55        box-shadow: 0 9px 12px #5c4a2e26;
56        z-index: 1;
57        pointer-events: none;
58      }
59      .sh-slot {
60        position: relative;
61        min-width: 0;
62        height: 246px;
63      }
64      .sh-product {
65        position: relative;
66        width: 100%;
67        height: 199px;
68        display: block;
69        border: 0;
70        background: none;
71        cursor: pointer;
72        padding: 0;
73        z-index: 2;
74        color: #233c31;
75        touch-action: manipulation;
76      }
77      .sh-product:focus-visible {
78        outline-offset: -6px;
79        border-radius: 8px;
80      }
81      .sh-floor-shadow {
82        position: absolute;
83        left: 13%;
84        right: 13%;
85        bottom: 1px;
86        height: 17px;
87        background: radial-gradient(ellipse, #4d3c2770, transparent 70%);
88        filter: blur(3px);
89        transition: opacity 0.4s;
90      }
91      .sh-pack {
92        position: absolute;
93        width: 208px;
94        height: 208px;
95        bottom: 0;
96        left: calc(50% - 132px);
97        background-image: var(--sh-atlas);
98        background-size: 300% 200%;
99        background-repeat: no-repeat;
100        pointer-events: none;
101        transform-origin: 50% 92%;
102        filter: drop-shadow(2px 4px 2px #41362133);
103        transition:
104          transform 0.55s cubic-bezier(0.2, 0.85, 0.25, 1.25),
105          filter 0.4s,
106          opacity 0.4s;
107        will-change: transform;
108      }
109      .sh-pack.back {
110        left: calc(50% - 67px);
111        transform: translateY(-3px) scale(0.96);
112        filter: brightness(0.89) drop-shadow(5px 3px 2px #41362135);
113        z-index: 0;
114      }
115      .sh-pack.front {
116        z-index: 1;
117      }
118      .sh-product:hover .sh-pack.front {
119        transform: translateY(-8px) rotate(-1deg);
120        filter: drop-shadow(4px 12px 6px #41362133);
121      }
122      .sh-product[aria-checked='true'] {
123        z-index: 4;
124      }
125      .sh-product[aria-checked='true'] .sh-pack.front {
126        transform: translate(-5px, -19px) scale(1.11) rotate(-3deg);
127        filter: drop-shadow(7px 17px 8px #4136214a);
128      }
129      .sh-product[aria-checked='true'] .sh-pack.back {
130        transform: translate(5px, -2px) scale(0.96);
131      }
132      .sh-check {
133        position: absolute;
134        right: calc(50% - 92px);
135        top: 1px;
136        width: 27px;
137        height: 27px;
138        border-radius: 50%;
139        display: grid;
140        place-items: center;
141        background: #274e3d;
142        color: white;
143        box-shadow: 0 2px 0 #fff9;
144        font-size: 15px;
145        opacity: 0;
146        transform: scale(0.5);
147        transition:
148          opacity 0.25s,
149          transform 0.35s cubic-bezier(0.2, 0.85, 0.25, 1.4);
150        z-index: 5;
151      }
152      .sh-product[aria-checked='true'] .sh-check {
153        opacity: 1;
154        transform: scale(1);
155      }

3. Add price tickets and unavailable products

Replace the entire BUILD: SHELF_TICKETS comment line in the CSS hook’s inner <style> with this block.

Ticket rules position a compact label beneath each pack, divide name/size from price, and draw a decorative barcode with a repeating gradient. Separate price and currency rules establish hierarchy. The ticket is hidden from assistive technology because the button's accessible name already includes product, size and price.

Unavailable slots use .sh-empty, dim their decorative packs and display an Unavailable badge. They are not radio buttons, so neither keyboard navigation nor click selection can choose them. Their metadata still appears in the saved offer matrix.

1      .sh-ticket {
2        position: absolute;
3        bottom: 6px;
4        left: 12%;
5        right: 12%;
6        height: 33px;
7        border: 1px solid #d2cdc1;
8        box-shadow: 0 1px 2px #55493115;
9        background: #fffef9;
10        border-radius: 2px;
11        display: flex;
12        align-items: center;
13        justify-content: space-between;
14        padding: 3px 9px;
15        z-index: 2;
16        color: #303931;
17      }
18      .sh-ticket-copy {
19        min-width: 0;
20        padding-right: 4px;
21      }
22      .sh-ticket-name {
23        font-size: 9px;
24        font-weight: 600;
25        line-height: 1.1;
26        white-space: nowrap;
27        text-transform: uppercase;
28        letter-spacing: 0.35px;
29      }
30      .sh-ticket-size {
31        font-size: 7px;
32        color: #7a7c73;
33        line-height: 1.4;
34        margin-top: 2px;
35      }
36      .sh-barcode {
37        display: inline-block;
38        width: 28px;
39        height: 7px;
40        margin-left: 6px;
41        background: repeating-linear-gradient(
42          90deg,
43          #353b32 0,
44          #353b32 1px,
45          transparent 1px,
46          transparent 2px,
47          #353b32 2px,
48          #353b32 4px,
49          transparent 4px,
50          transparent 6px
51        );
52        vertical-align: middle;
53        opacity: 0.7;
54      }
55      .sh-price {
56        font-size: 20px;
57        font-weight: 600;
58        letter-spacing: -0.8px;
59        white-space: nowrap;
60        line-height: 1;
61      }
62      .sh-price small {
63        font-size: 11px;
64        vertical-align: top;
65        line-height: 1.4;
66        letter-spacing: 0;
67        margin-right: 1px;
68      }
69      .sh-empty {
70        height: 199px;
71        position: relative;
72      }
73      .sh-empty .sh-pack {
74        opacity: 0.14;
75        filter: grayscale(1);
76        transform: scale(0.92);
77        left: calc(50% - 104px);
78      }
79      .sh-unavailable {
80        position: absolute;
81        left: 50%;
82        top: 51%;
83        transform: translate(-50%, -50%);
84        font-size: 10px;
85        line-height: 1.3;
86        white-space: nowrap;
87        color: #786e5a;
88        padding: 7px 9px;
89        border: 1px solid #b9ae99;
90        background: #e5deceee;
91        border-radius: 3px;
92        z-index: 2;
93      }

4. Style selection feedback, Continue and loading

Replace the entire BUILD: SHELF_SUMMARY comment line in the CSS hook’s inner <style> with this block.

The bottom flex layout joins a selected-product summary to Continue. The summary's thumbnail uses the same atlas crop; has-choice reveals the chosen treatment. Its title/detail typography communicates product and price. Continue has hover, pressed and disabled states.

The error paragraph disappears only when empty, while .sh-sr retains live announcements in a clipped box. shelf-boot and #shelf-start style the short initialization page; that state is separate from shelf-ready on the choice page.

1      .sh-bottom {
2        display: flex;
3        align-items: center;
4        justify-content: space-between;
5        gap: 20px;
6        margin-top: 22px;
7        min-height: 56px;
8      }
9      .sh-selection {
10        display: flex;
11        align-items: center;
12        gap: 11px;
13        min-height: 51px;
14        min-width: 0;
15      }
16      .sh-selection-thumb {
17        width: 47px;
18        height: 47px;
19        flex: none;
20        background-image: var(--sh-atlas);
21        background-size: 300% 200%;
22        background-repeat: no-repeat;
23        opacity: 0;
24        transform: translateY(4px);
25        transition:
26          opacity 0.2s,
27          transform 0.3s;
28      }
29      .sh-selection.has-choice .sh-selection-thumb {
30        opacity: 1;
31        transform: translateY(0);
32      }
33      .sh-selection-title {
34        font-size: 13px;
35        line-height: 1.4;
36        font-weight: 500;
37        margin: 0;
38        color: #2c4437;
39      }
40      .sh-selection-detail {
41        font-size: 11px;
42        line-height: 1.5;
43        color: #7b8075;
44        margin: 2px 0 0;
45      }
46      .sh-selection:not(.has-choice) .sh-selection-thumb {
47        display: none;
48      }
49      .sh-next {
50        display: flex;
51        align-items: center;
52        justify-content: space-between;
53        gap: 34px;
54        border: 1px solid #294735;
55        border-radius: 7px;
56        padding: 16px 20px;
57        background: #294735;
58        color: #fff;
59        cursor: pointer;
60        min-width: 181px;
61        min-height: 52px;
62        font-size: 13px !important;
63        transition:
64          background 0.2s,
65          transform 0.2s;
66        flex: none;
67      }
68      .sh-next:hover {
69        background: #3b5a46;
70      }
71      .sh-next:active {
72        transform: scale(0.985);
73      }
74      .sh-next:disabled {
75        opacity: 0.6;
76        cursor: wait;
77      }
78      .sh-next-arrow {
79        font-size: 20px;
80        line-height: 1;
81      }
82      .sh-error {
83        color: #a13d2d;
84        font-size: 12px;
85        line-height: 1.5;
86        margin: 12px 0 0;
87      }
88      .sh-error:empty {
89        display: none;
90      }
91      .sh-sr {
92        position: absolute;
93        width: 1px;
94        height: 1px;
95        margin: -1px;
96        padding: 0;
97        overflow: hidden;
98        clip: rect(0, 0, 0, 0);
99        white-space: nowrap;
100        border: 0;
101      }
102      body.shelf-boot {
103        background: #f5f3ed;
104      }
105      .shelf-boot #survey {
106        visibility: hidden;
107      }
108      #shelf-start {
109        visibility: visible;
110        padding: 30px;
111        color: #52634e;
112        font:
113          14px Arial,
114          sans-serif;
115      }

5. Resize the rack for wide and medium displays

Replace the entire BUILD: SHELF_MEDIUM comment line in the CSS hook’s inner <style> with this block.

At 1400 pixels and above, the rack and pack dimensions expand. At 760 pixels and below, the rack, tiers, slots, pack sizes, tickets, prices, summary and Continue contract together. The three-column physical shelf layout remains intact.

These are coordinated overrides of the same selectors, so retain their order after the base rules. Do not change only the pack height without checking the ticket and shelf-edge positions that accompany it.

1      \@media (min-width: 1400px) {
2        .sh-ui {
3          padding-top: 36px;
4        }
5        .sh-slot {
6          height: 273px;
7        }
8        .sh-product,
9        .sh-empty {
10          height: 226px;
11        }
12        .sh-pack {
13          width: 235px;
14          height: 235px;
15          left: calc(50% - 147px);
16        }
17        .sh-pack.back {
18          left: calc(50% - 80px);
19        }
20        .sh-check {
21          top: 0;
22          right: calc(50% - 104px);
23        }
24      }
25      \@media (max-width: 760px) {
26        .sh-ui {
27          padding: 23px 20px 25px;
28        }
29        .sh-heading {
30          margin-bottom: 23px;
31        }
32        .sh-heading h1 {
33          font-size: 28px;
34          letter-spacing: -0.8px;
35        }
36        .sh-heading p {
37          font-size: 12px;
38        }
39        .sh-rack {
40          padding: 10px 10px 0;
41        }
42        .sh-rack:before {
43          inset: 8px 9px 0;
44        }
45        .sh-tier {
46          padding-top: 16px;
47        }
48        .sh-slot {
49          height: 202px;
50        }
51        .sh-product,
52        .sh-empty {
53          height: 159px;
54        }
55        .sh-pack {
56          width: 174px;
57          height: 174px;
58          left: calc(50% - 108px);
59        }
60        .sh-pack.back {
61          left: calc(50% - 60px);
62        }
63        .sh-tier:after {
64          height: 43px;
65          left: -5px;
66          right: -5px;
67        }
68        .sh-ticket {
69          left: 5%;
70          right: 5%;
71          height: 30px;
72          bottom: 5px;
73          padding: 3px 6px;
74        }
75        .sh-ticket-name {
76          font-size: 7px;
77          letter-spacing: 0;
78        }
79        .sh-ticket-size {
80          font-size: 6px;
81        }
82        .sh-price {
83          font-size: 18px;
84        }
85        .sh-price small {
86          font-size: 9px;
87        }
88        .sh-check {
89          right: calc(50% - 68px);
90          width: 23px;
91          height: 23px;
92          font-size: 13px;
93          top: 0;
94        }
95        .sh-bottom {
96          margin-top: 18px;
97          gap: 12px;
98        }
99        .sh-next {
100          min-width: 155px;
101          padding: 15px 17px;
102        }
103        .sh-selection-title {
104          font-size: 12px;
105        }
106        .sh-selection-detail {
107          font-size: 10px;
108        }
109      }

6. Keep all six slots usable on small screens

Replace the entire BUILD: SHELF_SMALL comment line in the CSS hook’s inner <style> with this block.

The 500-pixel query further adjusts heading size, cabinet padding, product layers, tickets and the bottom controls. The 360-pixel query tightens the smallest layout again. Each block changes dimensions and spacing without changing which products are offered.

The final reduced-motion query removes animations, transitions and smooth scrolling. It removes the hover transform and keeps a smaller static selected transform of translateY(-5px) scale(1.04). The check and native state still identify the answer without animated movement.

1      \@media (max-width: 500px) {
2        .sh-ui {
3          padding: 23px 14px 24px;
4        }
5        .sh-heading {
6          margin-bottom: 24px;
7        }
8        .sh-heading h1 {
9          font-size: 27px;
10          max-width: 320px;
11          line-height: 1.15;
12        }
13        .sh-heading p {
14          font-size: 11px;
15          line-height: 1.6;
16          max-width: 340px;
17        }
18        .sh-rack {
19          padding: 9px 6px 0;
20        }
21        .sh-rack:before {
22          inset: 8px 5px 0;
23          background-size:
24            11px 11px,
25            auto;
26        }
27        .sh-tier {
28          padding-top: 21px;
29        }
30        .sh-slot {
31          height: 181px;
32        }
33        .sh-product,
34        .sh-empty {
35          height: 140px;
36        }
37        .sh-pack {
38          width: 151px;
39          height: 151px;
40          left: calc(50% - 75.5px);
41        }
42        .sh-pack.back {
43          display: none;
44        }
45        .sh-product[aria-checked='true'] .sh-pack.front {
46          transform: translateY(-12px) scale(1.1) rotate(-3deg);
47        }
48        .sh-product:hover .sh-pack.front {
49          transform: translateY(-4px);
50        }
51        .sh-product[aria-checked='true']:hover .sh-pack.front {
52          transform: translateY(-12px) scale(1.1) rotate(-3deg);
53        }
54        .sh-ticket {
55          left: 3px;
56          right: 3px;
57          padding: 3px 5px;
58          height: 30px;
59        }
60        .sh-ticket-name {
61          font-size: 6px;
62          white-space: normal;
63          line-height: 1.2;
64          max-width: 58px;
65        }
66        .sh-price {
67          font-size: 17px;
68        }
69        .sh-price small {
70          font-size: 8px;
71        }
72        .sh-ticket-size {
73          font-size: 6px;
74        }
75        .sh-barcode {
76          display: none;
77        }
78        .sh-tier:after {
79          height: 41px;
80          left: -3px;
81          right: -3px;
82        }
83        .sh-floor-shadow {
84          left: 5%;
85          right: 5%;
86          bottom: 0;
87        }
88        .sh-check {
89          width: 21px;
90          height: 21px;
91          font-size: 12px;
92          right: 5px;
93          top: -5px;
94        }
95        .sh-unavailable {
96          font-size: 8px;
97          padding: 5px;
98        }
99        .sh-bottom {
100          margin-top: 15px;
101          align-items: stretch;
102          flex-direction: column;
103          gap: 13px;
104        }
105        .sh-selection {
106          min-height: 44px;
107          gap: 8px;
108        }
109        .sh-selection-thumb {
110          width: 43px;
111          height: 43px;
112        }
113        .sh-selection-title {
114          font-size: 12px;
115        }
116        .sh-selection-detail {
117          font-size: 10px;
118        }
119        .sh-next {
120          width: 100%;
121          min-height: 51px;
122          padding: 15px 17px;
123          font-size: 12px !important;
124        }
125        .sh-error {
126          font-size: 11px;
127          margin-top: 10px;
128        }
129        .sh-empty .sh-pack {
130          left: calc(50% - 75.5px);
131        }
132      }
133      \@media (max-width: 360px) {
134        .sh-ui {
135          padding-left: 9px;
136          padding-right: 9px;
137        }
138        .sh-slot {
139          height: 164px;
140        }
141        .sh-product,
142        .sh-empty {
143          height: 123px;
144        }
145        .sh-pack {
146          width: 124px;
147          height: 124px;
148          left: calc(50% - 62px);
149        }
150        .sh-empty .sh-pack {
151          left: calc(50% - 62px);
152        }
153        .sh-ticket-name {
154          font-size: 5.5px;
155        }
156        .sh-price {
157          font-size: 15px;
158        }
159        .sh-heading h1 {
160          font-size: 25px;
161        }
162      }
163      \@media (prefers-reduced-motion: reduce) {
164        .sh-ui * {
165          animation: none !important;
166          transition: none !important;
167          scroll-behavior: auto !important;
168        }
169        .sh-product:hover .sh-pack.front {
170          transform: none;
171        }
172        .sh-product[aria-checked='true'] .sh-pack.front {
173          transform: translateY(-5px) scale(1.04);
174        }
175      }

5. Fill the JavaScript hook

Fill the named markers inside respview.client.js. Keep the scaffold’s function openings, closing braces and ready wrapper. The sections share variables in those existing scopes; do not wrap each pasted section in a new function.

1. Read the catalogue, offers and native inputs

Replace the entire BUILD: SHELF_DISCOVERY comment line in the JavaScript hook with this block.

If this is the loading page, add shelf-boot, schedule a native Continue click after 30 milliseconds and return. Otherwise find the metadata, Continue form and native question using its label, with .shelf-native as a fallback.

The six inventory objects associate stable IDs with names, brands, flavors and fixed sprite indices 0–5. Build an ID lookup, then convert the six metadata spans' numeric strings into numbers. Map each native input by its label's data-product; matching its exact text is a fallback. Before constructing the shelf, require six offers, known products, integer slots/prices, and a native input for every available offer. An unavailable product need not have a selectable native row.

1      var boot = document.getElementById('shelf-start');
2      if (boot) {
3        document.body.classList.add('shelf-boot');
4        var initial = document.getElementById('btn_continue');
5        if (initial)
6          setTimeout(function () {
7            initial.click();
8          }, 30);
9        return;
10      }
11      var meta = document.getElementById('shelf-meta');
12      if (!meta) return;
13      var next = document.getElementById('btn_continue'),
14        form = next && next.form;
15      var question =
16        document.getElementById('question_' + meta.dataset.label) ||
17        document.querySelector('.shelf-native');
18      if (!next || !form || !question) return;
19      var inventory = [
20          {
21            id: 'p101',
22            name: 'Oatfield Honey & Almond',
23            brand: 'Oatfield',
24            flavor: 'Honey & Almond',
25            sprite: 0
26          },
27          {
28            id: 'p102',
29            name: 'Oatfield Maple & Pecan',
30            brand: 'Oatfield',
31            flavor: 'Maple & Pecan',
32            sprite: 1
33          },
34          {
35            id: 'p103',
36            name: 'Oatfield Berry & Seed',
37            brand: 'Oatfield',
38            flavor: 'Berry & Seed',
39            sprite: 2
40          },
41          {
42            id: 'p104',
43            name: 'Morning Folk Cocoa & Hazelnut',
44            brand: 'Morning Folk',
45            flavor: 'Cocoa & Hazelnut',
46            sprite: 3
47          },
48          {
49            id: 'p105',
50            name: 'Morning Folk Coconut & Chia',
51            brand: 'Morning Folk',
52            flavor: 'Coconut & Chia',
53            sprite: 4
54          },
55          {
56            id: 'p106',
57            name: 'Morning Folk Apple & Cinnamon',
58            brand: 'Morning Folk',
59            flavor: 'Apple & Cinnamon',
60            sprite: 5
61          }
62        ],
63        items = {},
64        inputs = {},
65        offers;
66      inventory.forEach(function (p) {
67        items[p.id] = p;
68      });
69      offers = Array.from(meta.querySelectorAll('[data-slot]')).map(function (e) {
70        return {
71          slot: Number(e.dataset.slot),
72          product: e.dataset.product,
73          shelf: Number(e.dataset.shelf),
74          position: Number(e.dataset.position),
75          price: Number(e.dataset.price),
76          available: Number(e.dataset.available)
77        };
78      });
79      Array.from(question.querySelectorAll('input[type="radio"]')).forEach(function (input) {
80        var label = question.querySelector('label[for="' + input.id + '"]'),
81          tag = label && label.querySelector('[data-product]');
82        var product = tag ? tag.dataset.product : null;
83        if (!product && label) {
84          var known = inventory.find(function (p) {
85            return p.name === label.textContent.trim();
86          });
87          if (known) product = known.id;
88        }
89        if (product) inputs[product] = input;
90      });
91      if (
92        !Array.isArray(offers) ||
93        offers.length !== 6 ||
94        offers.some(function (o) {
95          return (
96            !items[o.product] ||
97            !Number.isInteger(o.slot) ||
98            !Number.isInteger(o.price) ||
99            (o.available === 1 && !inputs[o.product])
100          );
101        })
102      )
103        return;

2. Create the UI shell and formatting helpers

Replace the entire BUILD: SHELF_HELPERS comment line in the JavaScript hook with this block.

The draft key combines survey path, component label, response session, design and version, preventing a choice from another assignment from being reused. selected starts empty and submitted guards subsequent interaction. money() converts cents to a two-decimal dollar string.

position() converts a product's fixed sprite number to atlas percentages: indices 0, 1, 2 use horizontal 0%, 50%, 100% on the top row; 3, 4, 5 use the same horizontal positions on the bottom row. esc() replaces five HTML-sensitive characters before inserting names into generated markup.

Set the --sh-atlas CSS variable to the survey asset URL. The generated main element contains a labeled radio group, choice summary, Continue, an alert and a polite status. Store references to those elements for later updates.

1      var key =
2        'shelf:' +
3        location.pathname +
4        ':' +
5        meta.dataset.label +
6        ':' +
7        meta.dataset.session +
8        ':' +
9        meta.dataset.design +
10        ':' +
11        meta.dataset.version;
12      var selected = null,
13        submitted = false,
14        ui = document.createElement('main');
15      var money = function (cents) {
16        return '$' + (cents / 100).toFixed(2);
17      };
18      var position = function (product) {
19        var s = items[product].sprite;
20        return (s % 3) * 50 + '% ' + (s < 3 ? 0 : 100) + '%';
21      };
22      var esc = function (s) {
23        return String(s).replace(/[&<>"']/g, function (c) {
24          return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
25        });
26      };
27      ui.className = 'sh-ui';
28      ui.setAttribute('aria-label', 'Shelf selection');
29      ui.style.setProperty(
30        '--sh-atlas',
31        'url("' + meta.dataset.assets + 'granola-atlas.png")'
32      );
33      ui.innerHTML =
34        '<header class="sh-heading"><h1>Which granola would you choose?</h1><p>Select one product from the shelf. You can change your choice before continuing.</p></header><div class="sh-rack" role="radiogroup" aria-label="Granola products" aria-required="true" aria-describedby="sh-error"></div><div class="sh-bottom"><div class="sh-selection"><div class="sh-selection-thumb" aria-hidden="true"></div><div><p class="sh-selection-title">Choose a product from the shelf</p><p class="sh-selection-detail">All packs 350 g · Prices in USD</p></div></div><button type="button" class="sh-next"><span>Continue</span><span class="sh-next-arrow" aria-hidden="true">→</span></button></div><p class="sh-error" id="sh-error" role="alert"></p><span class="sh-sr" role="status" aria-live="polite"></span>';
35      var rack = ui.querySelector('.sh-rack'),
36        error = ui.querySelector('.sh-error'),
37        status = ui.querySelector('[role="status"]'),
38        submit = ui.querySelector('.sh-next');

3. Render two tiers in design order

Replace the entire BUILD: SHELF_BUILD comment line in the JavaScript hook with this block.

Create tiers for shelf numbers 1 and 2. Filter offers to the current shelf and sort by position before creating each slot. Store both slot and product IDs on it. Build the back/front pack layers with the product's atlas crop.

Available offers get a type="button" control with radio role, unchecked state, product ID and an escaped accessible name containing product, grams and price. It initially has tabindex="-1"; update() chooses the tabbable item later. Unavailable offers get a noninteractive element instead. Finally add the visible price ticket and append the slot to its tier. All six assigned slots are rendered, including unavailable ones.

1      [1, 2].forEach(function (level) {
2        var tier = document.createElement('div');
3        tier.className = 'sh-tier';
4        tier.setAttribute('role', 'presentation');
5        rack.appendChild(tier);
6        offers
7          .filter(function (o) {
8            return o.shelf === level;
9          })
10          .sort(function (a, b) {
11            return a.position - b.position;
12          })
13          .forEach(function (o) {
14            var p = items[o.product],
15              slot = document.createElement('div');
16            slot.className = 'sh-slot';
17            slot.dataset.slot = o.slot;
18            slot.dataset.product = o.product;
19            var packs =
20              '<i class="sh-floor-shadow" aria-hidden="true"></i><i class="sh-pack back" aria-hidden="true" style="background-position:' +
21              position(p.id) +
22              '"></i><i class="sh-pack front" aria-hidden="true" style="background-position:' +
23              position(p.id) +
24              '"></i>';
25            if (o.available === 1) {
26              slot.innerHTML =
27                '<button class="sh-product" type="button" role="radio" aria-checked="false" data-product="' +
28                p.id +
29                '" aria-label="' +
30                esc(p.name + ', 350 grams, ' + money(o.price)) +
31                '" tabindex="-1">' +
32                packs +
33                '<span class="sh-check" aria-hidden="true">✓</span></button>';
34            } else {
35              slot.innerHTML =
36                '<div class="sh-empty" aria-label="' +
37                esc(p.name + ' unavailable') +
38                '">' +
39                packs +
40                '<span class="sh-unavailable">Unavailable</span></div>';
41            }
42            slot.innerHTML +=
43              '<div class="sh-ticket" aria-hidden="true"><div class="sh-ticket-copy"><div class="sh-ticket-name">' +
44              esc(p.flavor) +
45              '</div><div class="sh-ticket-size">350 g<span class="sh-barcode"></span></div></div><div class="sh-price"><small>$</small>' +
46              (o.price / 100).toFixed(2) +
47              '</div></div>';
48            tier.appendChild(slot);
49          });
50      });

4. Synchronize native selection, display and keyboard controls

Replace the entire BUILD: SHELF_CHOOSE comment line in the JavaScript hook with this block.

update() sets every button's aria-checked and gives only the selected button—or initially the first—tab index zero. It updates the summary text, price and thumbnail; optional live announcements describe the selection.

choose() rejects interaction after submission, a missing native input or an unavailable product. It clicks the native input, records the selected ID, clears the validation display, saves a same-tab draft if storage works, and redraws. A keyboard choice also focuses the chosen product.

Click handlers choose their product. Left/Right move one position in the available-button list; Up/Down move three, wrapping with modulo arithmetic. Home and End choose the first/last available button. Because unavailable slots are absent from that button list, this is list-based navigation, not a geometric search for the nearest pack.

1      var buttons = Array.from(ui.querySelectorAll('.sh-product'));
2      function update(announce) {
3        buttons.forEach(function (b, i) {
4          var checked = b.dataset.product === selected;
5          b.setAttribute('aria-checked', checked ? 'true' : 'false');
6          b.tabIndex = selected ? (checked ? 0 : -1) : i === 0 ? 0 : -1;
7        });
8        var p = selected && items[selected],
9          o = offers.find(function (x) {
10            return x.product === selected;
11          });
12        var summary = ui.querySelector('.sh-selection');
13        summary.classList.toggle('has-choice', !!p);
14        ui.querySelector('.sh-selection-title').textContent = p
15          ? p.name
16          : 'Choose a product from the shelf';
17        ui.querySelector('.sh-selection-detail').textContent = p
18          ? money(o.price) + ' · 350 g'
19          : 'All packs 350 g · Prices in USD';
20        if (p)
21          ui.querySelector('.sh-selection-thumb').style.backgroundPosition = position(p.id);
22        if (announce && p)
23          status.textContent = p.name + ', ' + money(o.price) + ', selected.';
24      }
25      function choose(id, focus) {
26        if (
27          submitted ||
28          !inputs[id] ||
29          !offers.some(function (o) {
30            return o.product === id && o.available === 1;
31          })
32        )
33          return;
34        inputs[id].click();
35        selected = id;
36        error.textContent = '';
37        rack.removeAttribute('aria-invalid');
38        try {
39          sessionStorage.setItem(key, id);
40        } catch (e) {}
41        update(true);
42        if (focus)
43          buttons
44            .find(function (b) {
45              return b.dataset.product === id;
46            })
47            .focus();
48      }
49      buttons.forEach(function (b) {
50        b.addEventListener('click', function () {
51          choose(b.dataset.product, false);
52        });
53        b.addEventListener('keydown', function (e) {
54          var direction = { ArrowLeft: -1, ArrowUp: -3, ArrowRight: 1, ArrowDown: 3 }[e.key],
55            index = buttons.indexOf(b),
56            target;
57          if (direction) {
58            e.preventDefault();
59            target = (index + direction + buttons.length * 2) % buttons.length;
60            choose(buttons[target].dataset.product, true);
61          } else if (e.key === 'Home' || e.key === 'End') {
62            e.preventDefault();
63            choose(buttons[e.key === 'Home' ? 0 : buttons.length - 1].dataset.product, true);
64          }
65        });
66      });

5. Restore a choice and submit through Decipher

Replace the entire BUILD: SHELF_ACTIVATE comment line in the JavaScript hook with this block.

Prefer a checked native input; otherwise read the cache. Accept a restored ID only if a native input exists for it, click it and redraw. Insert the finished UI before metadata, mark its wrapper, then add shelf-ready to hide the original presentation. Read native question errors from a redisplayed page and show them when no choice is restored.

The custom Continue handler guards a second click, disables itself and product controls, and clicks the original native Continue. The form's submit event records submission too. Native required-answer and availability validation remain responsible for accepting the response. In your test survey, explicitly check that a validation redisplay restores usable controls; the script does not implement its own server submission endpoint or a separate answer store.

1      var restored = Object.keys(inputs).find(function (id) {
2        return inputs[id].checked;
3      });
4      if (!restored) {
5        try {
6          restored = sessionStorage.getItem(key);
7        } catch (e) {}
8      }
9      if (restored && inputs[restored]) {
10        inputs[restored].click();
11        selected = restored;
12      }
13      update(false);
14      // Only hide the native form after every offered item has a native input and the UI is ready.
15      meta.closest('.html').insertAdjacentElement('beforebegin', ui);
16      meta.closest('.html').classList.add('shelf-meta-wrap');
17      document.body.classList.add('shelf-ready');
18      var nativeErrors = Array.from(document.querySelectorAll('.question-error'))
19        .map(function (e) {
20          return e.textContent.trim();
21        })
22        .filter(Boolean);
23      if (nativeErrors.length && !selected) {
24        error.textContent = nativeErrors.join(' ');
25        rack.setAttribute('aria-invalid', 'true');
26      }
27      submit.addEventListener('click', function () {
28        if (submitted) return;
29        submitted = true;
30        submit.disabled = true;
31        buttons.forEach(function (b) {
32          b.disabled = true;
33        });
34        next.click();
35      });
36      form.addEventListener('submit', function () {
37        submitted = true;
38      });

6. Verify the assembled survey

Search your XML for BUILD:. There should be no insertion markers left. Check that there is one outer <survey>, one CSS hook and one JavaScript hook, then save in Decipher and resolve any XML errors before opening the test link. The complete example below is the reference for comparing your assembled document.

Save the XML and open your survey's test link. Select a product, change it, then Continue. In a separate test, try Continue without a choice and confirm that the validation message leaves the shelf usable.

Export field	What to verify
`ShelfPick`	The chosen product's code, `101`–`106`
`ShelfPickProductID`	The same product with its `p` prefix, such as `p105`
`ShelfPickDesignVersion`	The version whose rows you compare in the `.dat`
`ShelfPickOffers...`	All six slots match that version's products, positions, prices and availability
`ShelfPickPrice`	The selected offer's cents divided by 100
`ShelfPickSlot`, `ShelfPickShelf`, `ShelfPickPosition`	The selected product's assigned location

Check all six versions as part of your survey's QA, including the unavailable products in versions 5 and 6. Do not assume there is a URL override for version selection. Use your team's controlled testing process to cover the assignments without changing the fielded allocation logic.

Also check phone-width layout, keyboard selection, same-tab refresh and repeated Continue clicks. The repository reports native completion checks for versions 3 and 5; the remaining versions, physical phones and additional browsers still deserve checks in your own account.

If you replace the granolas, update the design codes, native row labels, embedded inventory, image atlas and price copy together. Keep one shelf instance per page because the interface uses fixed DOM IDs.

Reuse the component with Questra Fine Tuning

Add the component to a Questra Fine Tuning template so Questra can create shelf testing elements for you and your team. The bundled template export already includes the shared CSS/JavaScript, ShelfTesting component, design file and atlas image.

Import it from Fine Tuning and select the template when programming. Request ShelfTesting in main with {"label":"ShelfPick"}. Use a unique valid native label for each instance and retain the one-shelf-per-page rule. The label prefixes the native metadata and selected-product fields, keeping the generated survey's data understandable for the whole team.

Complete example XML

After uploading the files from step 1, you can paste this entire document into a new test survey instead of assembling the sections individually. Replacing every scaffold marker with its matching block produces this exact XML. Do not append it to the document you have already assembled.

This is the formatted complete source at revision 109fa76. The component-examples repository contains the matching assets, design files where applicable, and Fine Tuning templates.

1<survey
2  name="Shelf testing"
3  alt="Shelf testing"
4  compat="144"
5  fir="on"
6  html:showNumber="0"
7  builder:wizardCompleted="1"
8  state="testing"
9  ss:enableNavigation="0"
10  extraVariables="source"
11  autosave="1"
12  displayOnError="all"
13>
14  <style name="respview.client.css" mode="after"><![CDATA[
15    <style>
16      body.shelf-ready {
17        margin: 0;
18        background: #f5f3ed;
19        color: #243c31;
20        font-family: Arial, Helvetica, sans-serif;
21        -webkit-font-smoothing: antialiased;
22      }
23      .shelf-ready #survey,
24      .shelf-ready .survey-section,
25      .shelf-ready .survey-body {
26        max-width: none;
27        width: auto;
28        margin: 0;
29        padding: 0;
30        border: 0;
31        border-radius: 0;
32        background: transparent;
33        box-shadow: none;
34      }
35      .shelf-ready .footer,
36      .shelf-ready .survey-error,
37      .shelf-ready .survey-header,
38      .shelf-ready .page-header,
39      .shelf-ready .survey-footer,
40      .shelf-ready .survey-buttons,
41      .shelf-ready .survey-info,
42      .shelf-ready .shelf-native,
43      .shelf-ready .shelf-meta-wrap {
44        display: none !important;
45      }
46      .sh-ui {
47        max-width: 1110px;
48        margin: auto;
49        padding: 30px 40px 26px;
50        box-sizing: border-box;
51      }
52      .sh-ui * {
53        box-sizing: border-box;
54      }
55      .sh-ui button {
56        font: inherit;
57        -webkit-tap-highlight-color: transparent;
58      }
59      .sh-ui button:focus-visible {
60        outline: 3px solid #265d48;
61        outline-offset: 4px;
62      }
63      .sh-heading {
64        margin-bottom: 25px;
65      }
66      .sh-heading h1 {
67        font-size: clamp(25px, 3vw, 34px);
68        line-height: 1.18;
69        letter-spacing: -1.1px;
70        font-weight: 500;
71        margin: 0 0 10px;
72      }
73      .sh-heading p {
74        font-size: 13px;
75        line-height: 1.5;
76        color: #6d766e;
77        margin: 0;
78      }
79      .sh-rack {
80        position: relative;
81        padding: 11px 18px 0;
82        background: linear-gradient(
83          90deg,
84          #c3b8a4 0%,
85          #ebe6da 1.1%,
86          #e8e1d4 2%,
87          #eee8db 98%,
88          #c9beab 99%,
89          #b9ad99 100%
90        );
91        border: 1px solid #c7bead;
92        border-radius: 9px 9px 4px 4px;
93        box-shadow:
94          0 16px 26px -20px #41352555,
95          0 2px 3px #4b3c2810;
96        isolation: isolate;
97      }
98      .sh-rack:before {
99        content: '';
100        position: absolute;
101        inset: 9px 16px 0;
102        background:
103          radial-gradient(circle, #b8ae9b80 0.7px, transparent 1.1px) 2px 2px/13px 13px,
104          linear-gradient(90deg, #d3c8b6, #e8decd 18%, #e8decd 82%, #d1c5b1);
105        z-index: -1;
106        box-shadow: inset 0 15px 25px #9e8f7226;
107      }
108      .sh-tier {
109        position: relative;
110        display: grid;
111        grid-template-columns: repeat(3, minmax(0, 1fr));
112        gap: 0;
113        padding-top: 10px;
114      }
115      .sh-tier:after {
116        content: '';
117        position: absolute;
118        bottom: 0;
119        left: -10px;
120        right: -10px;
121        height: 47px;
122        background: linear-gradient(
123          #ddd5c5 0,
124          #fffdf5 3px,
125          #efeadf 6px,
126          #d9cfbc 8px,
127          #f7f4ed 9px,
128          #e9e3d6 96%,
129          #b8ab94
130        );
131        border-top: 1px solid #c6b99f;
132        border-bottom: 2px solid #b8aa93;
133        box-shadow: 0 9px 12px #5c4a2e26;
134        z-index: 1;
135        pointer-events: none;
136      }
137      .sh-slot {
138        position: relative;
139        min-width: 0;
140        height: 246px;
141      }
142      .sh-product {
143        position: relative;
144        width: 100%;
145        height: 199px;
146        display: block;
147        border: 0;
148        background: none;
149        cursor: pointer;
150        padding: 0;
151        z-index: 2;
152        color: #233c31;
153        touch-action: manipulation;
154      }
155      .sh-product:focus-visible {
156        outline-offset: -6px;
157        border-radius: 8px;
158      }
159      .sh-floor-shadow {
160        position: absolute;
161        left: 13%;
162        right: 13%;
163        bottom: 1px;
164        height: 17px;
165        background: radial-gradient(ellipse, #4d3c2770, transparent 70%);
166        filter: blur(3px);
167        transition: opacity 0.4s;
168      }
169      .sh-pack {
170        position: absolute;
171        width: 208px;
172        height: 208px;
173        bottom: 0;
174        left: calc(50% - 132px);
175        background-image: var(--sh-atlas);
176        background-size: 300% 200%;
177        background-repeat: no-repeat;
178        pointer-events: none;
179        transform-origin: 50% 92%;
180        filter: drop-shadow(2px 4px 2px #41362133);
181        transition:
182          transform 0.55s cubic-bezier(0.2, 0.85, 0.25, 1.25),
183          filter 0.4s,
184          opacity 0.4s;
185        will-change: transform;
186      }
187      .sh-pack.back {
188        left: calc(50% - 67px);
189        transform: translateY(-3px) scale(0.96);
190        filter: brightness(0.89) drop-shadow(5px 3px 2px #41362135);
191        z-index: 0;
192      }
193      .sh-pack.front {
194        z-index: 1;
195      }
196      .sh-product:hover .sh-pack.front {
197        transform: translateY(-8px) rotate(-1deg);
198        filter: drop-shadow(4px 12px 6px #41362133);
199      }
200      .sh-product[aria-checked='true'] {
201        z-index: 4;
202      }
203      .sh-product[aria-checked='true'] .sh-pack.front {
204        transform: translate(-5px, -19px) scale(1.11) rotate(-3deg);
205        filter: drop-shadow(7px 17px 8px #4136214a);
206      }
207      .sh-product[aria-checked='true'] .sh-pack.back {
208        transform: translate(5px, -2px) scale(0.96);
209      }
210      .sh-check {
211        position: absolute;
212        right: calc(50% - 92px);
213        top: 1px;
214        width: 27px;
215        height: 27px;
216        border-radius: 50%;
217        display: grid;
218        place-items: center;
219        background: #274e3d;
220        color: white;
221        box-shadow: 0 2px 0 #fff9;
222        font-size: 15px;
223        opacity: 0;
224        transform: scale(0.5);
225        transition:
226          opacity 0.25s,
227          transform 0.35s cubic-bezier(0.2, 0.85, 0.25, 1.4);
228        z-index: 5;
229      }
230      .sh-product[aria-checked='true'] .sh-check {
231        opacity: 1;
232        transform: scale(1);
233      }
234      .sh-ticket {
235        position: absolute;
236        bottom: 6px;
237        left: 12%;
238        right: 12%;
239        height: 33px;
240        border: 1px solid #d2cdc1;
241        box-shadow: 0 1px 2px #55493115;
242        background: #fffef9;
243        border-radius: 2px;
244        display: flex;
245        align-items: center;
246        justify-content: space-between;
247        padding: 3px 9px;
248        z-index: 2;
249        color: #303931;
250      }
251      .sh-ticket-copy {
252        min-width: 0;
253        padding-right: 4px;
254      }
255      .sh-ticket-name {
256        font-size: 9px;
257        font-weight: 600;
258        line-height: 1.1;
259        white-space: nowrap;
260        text-transform: uppercase;
261        letter-spacing: 0.35px;
262      }
263      .sh-ticket-size {
264        font-size: 7px;
265        color: #7a7c73;
266        line-height: 1.4;
267        margin-top: 2px;
268      }
269      .sh-barcode {
270        display: inline-block;
271        width: 28px;
272        height: 7px;
273        margin-left: 6px;
274        background: repeating-linear-gradient(
275          90deg,
276          #353b32 0,
277          #353b32 1px,
278          transparent 1px,
279          transparent 2px,
280          #353b32 2px,
281          #353b32 4px,
282          transparent 4px,
283          transparent 6px
284        );
285        vertical-align: middle;
286        opacity: 0.7;
287      }
288      .sh-price {
289        font-size: 20px;
290        font-weight: 600;
291        letter-spacing: -0.8px;
292        white-space: nowrap;
293        line-height: 1;
294      }
295      .sh-price small {
296        font-size: 11px;
297        vertical-align: top;
298        line-height: 1.4;
299        letter-spacing: 0;
300        margin-right: 1px;
301      }
302      .sh-empty {
303        height: 199px;
304        position: relative;
305      }
306      .sh-empty .sh-pack {
307        opacity: 0.14;
308        filter: grayscale(1);
309        transform: scale(0.92);
310        left: calc(50% - 104px);
311      }
312      .sh-unavailable {
313        position: absolute;
314        left: 50%;
315        top: 51%;
316        transform: translate(-50%, -50%);
317        font-size: 10px;
318        line-height: 1.3;
319        white-space: nowrap;
320        color: #786e5a;
321        padding: 7px 9px;
322        border: 1px solid #b9ae99;
323        background: #e5deceee;
324        border-radius: 3px;
325        z-index: 2;
326      }
327      .sh-bottom {
328        display: flex;
329        align-items: center;
330        justify-content: space-between;
331        gap: 20px;
332        margin-top: 22px;
333        min-height: 56px;
334      }
335      .sh-selection {
336        display: flex;
337        align-items: center;
338        gap: 11px;
339        min-height: 51px;
340        min-width: 0;
341      }
342      .sh-selection-thumb {
343        width: 47px;
344        height: 47px;
345        flex: none;
346        background-image: var(--sh-atlas);
347        background-size: 300% 200%;
348        background-repeat: no-repeat;
349        opacity: 0;
350        transform: translateY(4px);
351        transition:
352          opacity 0.2s,
353          transform 0.3s;
354      }
355      .sh-selection.has-choice .sh-selection-thumb {
356        opacity: 1;
357        transform: translateY(0);
358      }
359      .sh-selection-title {
360        font-size: 13px;
361        line-height: 1.4;
362        font-weight: 500;
363        margin: 0;
364        color: #2c4437;
365      }
366      .sh-selection-detail {
367        font-size: 11px;
368        line-height: 1.5;
369        color: #7b8075;
370        margin: 2px 0 0;
371      }
372      .sh-selection:not(.has-choice) .sh-selection-thumb {
373        display: none;
374      }
375      .sh-next {
376        display: flex;
377        align-items: center;
378        justify-content: space-between;
379        gap: 34px;
380        border: 1px solid #294735;
381        border-radius: 7px;
382        padding: 16px 20px;
383        background: #294735;
384        color: #fff;
385        cursor: pointer;
386        min-width: 181px;
387        min-height: 52px;
388        font-size: 13px !important;
389        transition:
390          background 0.2s,
391          transform 0.2s;
392        flex: none;
393      }
394      .sh-next:hover {
395        background: #3b5a46;
396      }
397      .sh-next:active {
398        transform: scale(0.985);
399      }
400      .sh-next:disabled {
401        opacity: 0.6;
402        cursor: wait;
403      }
404      .sh-next-arrow {
405        font-size: 20px;
406        line-height: 1;
407      }
408      .sh-error {
409        color: #a13d2d;
410        font-size: 12px;
411        line-height: 1.5;
412        margin: 12px 0 0;
413      }
414      .sh-error:empty {
415        display: none;
416      }
417      .sh-sr {
418        position: absolute;
419        width: 1px;
420        height: 1px;
421        margin: -1px;
422        padding: 0;
423        overflow: hidden;
424        clip: rect(0, 0, 0, 0);
425        white-space: nowrap;
426        border: 0;
427      }
428      body.shelf-boot {
429        background: #f5f3ed;
430      }
431      .shelf-boot #survey {
432        visibility: hidden;
433      }
434      #shelf-start {
435        visibility: visible;
436        padding: 30px;
437        color: #52634e;
438        font:
439          14px Arial,
440          sans-serif;
441      }
442      \@media (min-width: 1400px) {
443        .sh-ui {
444          padding-top: 36px;
445        }
446        .sh-slot {
447          height: 273px;
448        }
449        .sh-product,
450        .sh-empty {
451          height: 226px;
452        }
453        .sh-pack {
454          width: 235px;
455          height: 235px;
456          left: calc(50% - 147px);
457        }
458        .sh-pack.back {
459          left: calc(50% - 80px);
460        }
461        .sh-check {
462          top: 0;
463          right: calc(50% - 104px);
464        }
465      }
466      \@media (max-width: 760px) {
467        .sh-ui {
468          padding: 23px 20px 25px;
469        }
470        .sh-heading {
471          margin-bottom: 23px;
472        }
473        .sh-heading h1 {
474          font-size: 28px;
475          letter-spacing: -0.8px;
476        }
477        .sh-heading p {
478          font-size: 12px;
479        }
480        .sh-rack {
481          padding: 10px 10px 0;
482        }
483        .sh-rack:before {
484          inset: 8px 9px 0;
485        }
486        .sh-tier {
487          padding-top: 16px;
488        }
489        .sh-slot {
490          height: 202px;
491        }
492        .sh-product,
493        .sh-empty {
494          height: 159px;
495        }
496        .sh-pack {
497          width: 174px;
498          height: 174px;
499          left: calc(50% - 108px);
500        }
501        .sh-pack.back {
502          left: calc(50% - 60px);
503        }
504        .sh-tier:after {
505          height: 43px;
506          left: -5px;
507          right: -5px;
508        }
509        .sh-ticket {
510          left: 5%;
511          right: 5%;
512          height: 30px;
513          bottom: 5px;
514          padding: 3px 6px;
515        }
516        .sh-ticket-name {
517          font-size: 7px;
518          letter-spacing: 0;
519        }
520        .sh-ticket-size {
521          font-size: 6px;
522        }
523        .sh-price {
524          font-size: 18px;
525        }
526        .sh-price small {
527          font-size: 9px;
528        }
529        .sh-check {
530          right: calc(50% - 68px);
531          width: 23px;
532          height: 23px;
533          font-size: 13px;
534          top: 0;
535        }
536        .sh-bottom {
537          margin-top: 18px;
538          gap: 12px;
539        }
540        .sh-next {
541          min-width: 155px;
542          padding: 15px 17px;
543        }
544        .sh-selection-title {
545          font-size: 12px;
546        }
547        .sh-selection-detail {
548          font-size: 10px;
549        }
550      }
551      \@media (max-width: 500px) {
552        .sh-ui {
553          padding: 23px 14px 24px;
554        }
555        .sh-heading {
556          margin-bottom: 24px;
557        }
558        .sh-heading h1 {
559          font-size: 27px;
560          max-width: 320px;
561          line-height: 1.15;
562        }
563        .sh-heading p {
564          font-size: 11px;
565          line-height: 1.6;
566          max-width: 340px;
567        }
568        .sh-rack {
569          padding: 9px 6px 0;
570        }
571        .sh-rack:before {
572          inset: 8px 5px 0;
573          background-size:
574            11px 11px,
575            auto;
576        }
577        .sh-tier {
578          padding-top: 21px;
579        }
580        .sh-slot {
581          height: 181px;
582        }
583        .sh-product,
584        .sh-empty {
585          height: 140px;
586        }
587        .sh-pack {
588          width: 151px;
589          height: 151px;
590          left: calc(50% - 75.5px);
591        }
592        .sh-pack.back {
593          display: none;
594        }
595        .sh-product[aria-checked='true'] .sh-pack.front {
596          transform: translateY(-12px) scale(1.1) rotate(-3deg);
597        }
598        .sh-product:hover .sh-pack.front {
599          transform: translateY(-4px);
600        }
601        .sh-product[aria-checked='true']:hover .sh-pack.front {
602          transform: translateY(-12px) scale(1.1) rotate(-3deg);
603        }
604        .sh-ticket {
605          left: 3px;
606          right: 3px;
607          padding: 3px 5px;
608          height: 30px;
609        }
610        .sh-ticket-name {
611          font-size: 6px;
612          white-space: normal;
613          line-height: 1.2;
614          max-width: 58px;
615        }
616        .sh-price {
617          font-size: 17px;
618        }
619        .sh-price small {
620          font-size: 8px;
621        }
622        .sh-ticket-size {
623          font-size: 6px;
624        }
625        .sh-barcode {
626          display: none;
627        }
628        .sh-tier:after {
629          height: 41px;
630          left: -3px;
631          right: -3px;
632        }
633        .sh-floor-shadow {
634          left: 5%;
635          right: 5%;
636          bottom: 0;
637        }
638        .sh-check {
639          width: 21px;
640          height: 21px;
641          font-size: 12px;
642          right: 5px;
643          top: -5px;
644        }
645        .sh-unavailable {
646          font-size: 8px;
647          padding: 5px;
648        }
649        .sh-bottom {
650          margin-top: 15px;
651          align-items: stretch;
652          flex-direction: column;
653          gap: 13px;
654        }
655        .sh-selection {
656          min-height: 44px;
657          gap: 8px;
658        }
659        .sh-selection-thumb {
660          width: 43px;
661          height: 43px;
662        }
663        .sh-selection-title {
664          font-size: 12px;
665        }
666        .sh-selection-detail {
667          font-size: 10px;
668        }
669        .sh-next {
670          width: 100%;
671          min-height: 51px;
672          padding: 15px 17px;
673          font-size: 12px !important;
674        }
675        .sh-error {
676          font-size: 11px;
677          margin-top: 10px;
678        }
679        .sh-empty .sh-pack {
680          left: calc(50% - 75.5px);
681        }
682      }
683      \@media (max-width: 360px) {
684        .sh-ui {
685          padding-left: 9px;
686          padding-right: 9px;
687        }
688        .sh-slot {
689          height: 164px;
690        }
691        .sh-product,
692        .sh-empty {
693          height: 123px;
694        }
695        .sh-pack {
696          width: 124px;
697          height: 124px;
698          left: calc(50% - 62px);
699        }
700        .sh-empty .sh-pack {
701          left: calc(50% - 62px);
702        }
703        .sh-ticket-name {
704          font-size: 5.5px;
705        }
706        .sh-price {
707          font-size: 15px;
708        }
709        .sh-heading h1 {
710          font-size: 25px;
711        }
712      }
713      \@media (prefers-reduced-motion: reduce) {
714        .sh-ui * {
715          animation: none !important;
716          transition: none !important;
717          scroll-behavior: auto !important;
718        }
719        .sh-product:hover .sh-pack.front {
720          transform: none;
721        }
722        .sh-product[aria-checked='true'] .sh-pack.front {
723          transform: translateY(-5px) scale(1.04);
724        }
725      }
726    </style>
727  ]]></style>
728  <style name="respview.client.js" mode="after" wrap="ready"><![CDATA[
729    (function () {
730      'use strict';
731      var boot = document.getElementById('shelf-start');
732      if (boot) {
733        document.body.classList.add('shelf-boot');
734        var initial = document.getElementById('btn_continue');
735        if (initial)
736          setTimeout(function () {
737            initial.click();
738          }, 30);
739        return;
740      }
741      var meta = document.getElementById('shelf-meta');
742      if (!meta) return;
743      var next = document.getElementById('btn_continue'),
744        form = next && next.form;
745      var question =
746        document.getElementById('question_' + meta.dataset.label) ||
747        document.querySelector('.shelf-native');
748      if (!next || !form || !question) return;
749      var inventory = [
750          {
751            id: 'p101',
752            name: 'Oatfield Honey & Almond',
753            brand: 'Oatfield',
754            flavor: 'Honey & Almond',
755            sprite: 0
756          },
757          {
758            id: 'p102',
759            name: 'Oatfield Maple & Pecan',
760            brand: 'Oatfield',
761            flavor: 'Maple & Pecan',
762            sprite: 1
763          },
764          {
765            id: 'p103',
766            name: 'Oatfield Berry & Seed',
767            brand: 'Oatfield',
768            flavor: 'Berry & Seed',
769            sprite: 2
770          },
771          {
772            id: 'p104',
773            name: 'Morning Folk Cocoa & Hazelnut',
774            brand: 'Morning Folk',
775            flavor: 'Cocoa & Hazelnut',
776            sprite: 3
777          },
778          {
779            id: 'p105',
780            name: 'Morning Folk Coconut & Chia',
781            brand: 'Morning Folk',
782            flavor: 'Coconut & Chia',
783            sprite: 4
784          },
785          {
786            id: 'p106',
787            name: 'Morning Folk Apple & Cinnamon',
788            brand: 'Morning Folk',
789            flavor: 'Apple & Cinnamon',
790            sprite: 5
791          }
792        ],
793        items = {},
794        inputs = {},
795        offers;
796      inventory.forEach(function (p) {
797        items[p.id] = p;
798      });
799      offers = Array.from(meta.querySelectorAll('[data-slot]')).map(function (e) {
800        return {
801          slot: Number(e.dataset.slot),
802          product: e.dataset.product,
803          shelf: Number(e.dataset.shelf),
804          position: Number(e.dataset.position),
805          price: Number(e.dataset.price),
806          available: Number(e.dataset.available)
807        };
808      });
809      Array.from(question.querySelectorAll('input[type="radio"]')).forEach(function (input) {
810        var label = question.querySelector('label[for="' + input.id + '"]'),
811          tag = label && label.querySelector('[data-product]');
812        var product = tag ? tag.dataset.product : null;
813        if (!product && label) {
814          var known = inventory.find(function (p) {
815            return p.name === label.textContent.trim();
816          });
817          if (known) product = known.id;
818        }
819        if (product) inputs[product] = input;
820      });
821      if (
822        !Array.isArray(offers) ||
823        offers.length !== 6 ||
824        offers.some(function (o) {
825          return (
826            !items[o.product] ||
827            !Number.isInteger(o.slot) ||
828            !Number.isInteger(o.price) ||
829            (o.available === 1 && !inputs[o.product])
830          );
831        })
832      )
833        return;
834      var key =
835        'shelf:' +
836        location.pathname +
837        ':' +
838        meta.dataset.label +
839        ':' +
840        meta.dataset.session +
841        ':' +
842        meta.dataset.design +
843        ':' +
844        meta.dataset.version;
845      var selected = null,
846        submitted = false,
847        ui = document.createElement('main');
848      var money = function (cents) {
849        return '$' + (cents / 100).toFixed(2);
850      };
851      var position = function (product) {
852        var s = items[product].sprite;
853        return (s % 3) * 50 + '% ' + (s < 3 ? 0 : 100) + '%';
854      };
855      var esc = function (s) {
856        return String(s).replace(/[&<>"']/g, function (c) {
857          return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
858        });
859      };
860      ui.className = 'sh-ui';
861      ui.setAttribute('aria-label', 'Shelf selection');
862      ui.style.setProperty(
863        '--sh-atlas',
864        'url("' + meta.dataset.assets + 'granola-atlas.png")'
865      );
866      ui.innerHTML =
867        '<header class="sh-heading"><h1>Which granola would you choose?</h1><p>Select one product from the shelf. You can change your choice before continuing.</p></header><div class="sh-rack" role="radiogroup" aria-label="Granola products" aria-required="true" aria-describedby="sh-error"></div><div class="sh-bottom"><div class="sh-selection"><div class="sh-selection-thumb" aria-hidden="true"></div><div><p class="sh-selection-title">Choose a product from the shelf</p><p class="sh-selection-detail">All packs 350 g · Prices in USD</p></div></div><button type="button" class="sh-next"><span>Continue</span><span class="sh-next-arrow" aria-hidden="true">→</span></button></div><p class="sh-error" id="sh-error" role="alert"></p><span class="sh-sr" role="status" aria-live="polite"></span>';
868      var rack = ui.querySelector('.sh-rack'),
869        error = ui.querySelector('.sh-error'),
870        status = ui.querySelector('[role="status"]'),
871        submit = ui.querySelector('.sh-next');
872      [1, 2].forEach(function (level) {
873        var tier = document.createElement('div');
874        tier.className = 'sh-tier';
875        tier.setAttribute('role', 'presentation');
876        rack.appendChild(tier);
877        offers
878          .filter(function (o) {
879            return o.shelf === level;
880          })
881          .sort(function (a, b) {
882            return a.position - b.position;
883          })
884          .forEach(function (o) {
885            var p = items[o.product],
886              slot = document.createElement('div');
887            slot.className = 'sh-slot';
888            slot.dataset.slot = o.slot;
889            slot.dataset.product = o.product;
890            var packs =
891              '<i class="sh-floor-shadow" aria-hidden="true"></i><i class="sh-pack back" aria-hidden="true" style="background-position:' +
892              position(p.id) +
893              '"></i><i class="sh-pack front" aria-hidden="true" style="background-position:' +
894              position(p.id) +
895              '"></i>';
896            if (o.available === 1) {
897              slot.innerHTML =
898                '<button class="sh-product" type="button" role="radio" aria-checked="false" data-product="' +
899                p.id +
900                '" aria-label="' +
901                esc(p.name + ', 350 grams, ' + money(o.price)) +
902                '" tabindex="-1">' +
903                packs +
904                '<span class="sh-check" aria-hidden="true">✓</span></button>';
905            } else {
906              slot.innerHTML =
907                '<div class="sh-empty" aria-label="' +
908                esc(p.name + ' unavailable') +
909                '">' +
910                packs +
911                '<span class="sh-unavailable">Unavailable</span></div>';
912            }
913            slot.innerHTML +=
914              '<div class="sh-ticket" aria-hidden="true"><div class="sh-ticket-copy"><div class="sh-ticket-name">' +
915              esc(p.flavor) +
916              '</div><div class="sh-ticket-size">350 g<span class="sh-barcode"></span></div></div><div class="sh-price"><small>$</small>' +
917              (o.price / 100).toFixed(2) +
918              '</div></div>';
919            tier.appendChild(slot);
920          });
921      });
922      var buttons = Array.from(ui.querySelectorAll('.sh-product'));
923      function update(announce) {
924        buttons.forEach(function (b, i) {
925          var checked = b.dataset.product === selected;
926          b.setAttribute('aria-checked', checked ? 'true' : 'false');
927          b.tabIndex = selected ? (checked ? 0 : -1) : i === 0 ? 0 : -1;
928        });
929        var p = selected && items[selected],
930          o = offers.find(function (x) {
931            return x.product === selected;
932          });
933        var summary = ui.querySelector('.sh-selection');
934        summary.classList.toggle('has-choice', !!p);
935        ui.querySelector('.sh-selection-title').textContent = p
936          ? p.name
937          : 'Choose a product from the shelf';
938        ui.querySelector('.sh-selection-detail').textContent = p
939          ? money(o.price) + ' · 350 g'
940          : 'All packs 350 g · Prices in USD';
941        if (p)
942          ui.querySelector('.sh-selection-thumb').style.backgroundPosition = position(p.id);
943        if (announce && p)
944          status.textContent = p.name + ', ' + money(o.price) + ', selected.';
945      }
946      function choose(id, focus) {
947        if (
948          submitted ||
949          !inputs[id] ||
950          !offers.some(function (o) {
951            return o.product === id && o.available === 1;
952          })
953        )
954          return;
955        inputs[id].click();
956        selected = id;
957        error.textContent = '';
958        rack.removeAttribute('aria-invalid');
959        try {
960          sessionStorage.setItem(key, id);
961        } catch (e) {}
962        update(true);
963        if (focus)
964          buttons
965            .find(function (b) {
966              return b.dataset.product === id;
967            })
968            .focus();
969      }
970      buttons.forEach(function (b) {
971        b.addEventListener('click', function () {
972          choose(b.dataset.product, false);
973        });
974        b.addEventListener('keydown', function (e) {
975          var direction = { ArrowLeft: -1, ArrowUp: -3, ArrowRight: 1, ArrowDown: 3 }[e.key],
976            index = buttons.indexOf(b),
977            target;
978          if (direction) {
979            e.preventDefault();
980            target = (index + direction + buttons.length * 2) % buttons.length;
981            choose(buttons[target].dataset.product, true);
982          } else if (e.key === 'Home' || e.key === 'End') {
983            e.preventDefault();
984            choose(buttons[e.key === 'Home' ? 0 : buttons.length - 1].dataset.product, true);
985          }
986        });
987      });
988      var restored = Object.keys(inputs).find(function (id) {
989        return inputs[id].checked;
990      });
991      if (!restored) {
992        try {
993          restored = sessionStorage.getItem(key);
994        } catch (e) {}
995      }
996      if (restored && inputs[restored]) {
997        inputs[restored].click();
998        selected = restored;
999      }
1000      update(false);
1001      // Only hide the native form after every offered item has a native input and the UI is ready.
1002      meta.closest('.html').insertAdjacentElement('beforebegin', ui);
1003      meta.closest('.html').classList.add('shelf-meta-wrap');
1004      document.body.classList.add('shelf-ready');
1005      var nativeErrors = Array.from(document.querySelectorAll('.question-error'))
1006        .map(function (e) {
1007          return e.textContent.trim();
1008        })
1009        .filter(Boolean);
1010      if (nativeErrors.length && !selected) {
1011        error.textContent = nativeErrors.join(' ');
1012        rack.setAttribute('aria-invalid', 'true');
1013      }
1014      submit.addEventListener('click', function () {
1015        if (submitted) return;
1016        submitted = true;
1017        submit.disabled = true;
1018        buttons.forEach(function (b) {
1019          b.disabled = true;
1020        });
1021        next.click();
1022      });
1023      form.addEventListener('submit', function () {
1024        submitted = true;
1025      });
1026    })();
1027  ]]></style>
1028  <exec when="init"><![CDATA[
1029def shelfLoadDesign(fname):
1030    f = open("%s/%s" % (gv.survey.path, fname))
1031    records = [line.strip("\r\n").split("\t") for line in f.readlines() if line.strip()]
1032    f.close()
1033    if records[0] != ["Version", "Task", "Concept", "Product", "Shelf", "Position", "Price", "Available"]:
1034        raise ValueError("Unexpected shelf design header")
1035    design = {}
1036    for row in records[1:]:
1037        if len(row) != 8:
1038            raise ValueError("Invalid shelf design row")
1039        values = [int(n) for n in row]
1040        key = "v%s_t%s_c%s" % (values[0],values[1],values[2])
1041        if key in design:
1042            raise ValueError("Duplicate shelf design key")
1043        design[key] = values[3:]
1044    return design
1045shelfDesign = shelfLoadDesign("shelf-design-v1.dat")
1046def shelfOffers(version):
1047    offers = []
1048    for slot in range(1,7):
1049        a = shelfDesign["v%s_t1_c%s" % (version,slot)]
1050        offers.append({"slot":slot, "product":"p%s" % a[0], "shelf":a[1], "position":a[2], "price":a[3], "available":a[4]})
1051    return offers
1052]]></exec>
1053  <number label="ShelfPickDesignVersion" where="execute" optional="1" size="1">
1054    <title>Assigned shelf design version</title>
1055    <exec>
1056if ShelfPickDesignVersion.val is None:
1057    ShelfPickDesignVersion.val = random.randint(1,6)
1058</exec>
1059  </number>
1060  <text label="ShelfPickDesignID" where="execute" optional="1">
1061    <title>Immutable shelf design ID</title>
1062    <exec>ShelfPickDesignID.val = "shelf-20261019-v1"</exec>
1063  </text>
1064  <number label="ShelfPickSessionKey" where="execute" optional="1" size="12">
1065    <title>Anonymous draft cache key</title>
1066    <exec>
1067if ShelfPickSessionKey.val is None:
1068    ShelfPickSessionKey.val = random.randint(100000000,999999999)
1069</exec>
1070  </number>
1071  <html label="ShelfPickStart" where="survey"><div id="shelf-start" data-label="ShelfPick">Loading…</div></html>
1072  <suspend />
1073  <exec>
1074p.ShelfPickOffers = shelfOffers(ShelfPickDesignVersion.val)
1075p.ShelfPickAvailable = [a['product'] for a in p.ShelfPickOffers if a['available'] == 1]
1076</exec>
1077  <number label="ShelfPickTask" where="execute" optional="1" size="1">
1078    <title>Shelf design task</title>
1079    <exec>ShelfPickTask.val = 1</exec>
1080  </number>
1081  <number label="ShelfPickOffers" where="execute" optional="1" size="5">
1082    <title>Assigned shelf layout by physical slot; price in USD cents; availability 0 or 1</title>
1083    <row label="r1">Top shelf, left</row>
1084    <row label="r2">Top shelf, center</row>
1085    <row label="r3">Top shelf, right</row>
1086    <row label="r4">Bottom shelf, left</row>
1087    <row label="r5">Bottom shelf, center</row>
1088    <row label="r6">Bottom shelf, right</row>
1089    <col label="slot">Physical slot</col>
1090    <col label="product">Stable product code</col>
1091    <col label="shelf">Shelf number</col>
1092    <col label="position">Position within shelf</col>
1093    <col label="price">Price in USD cents</col>
1094    <col label="available">Available to choose</col>
1095    <exec>
1096for a in p.ShelfPickOffers:
1097    r = ShelfPickOffers.rows[a['slot']-1]
1098    r.slot.val = a['slot']
1099    r.product.val = int(a['product'][1:])
1100    r.shelf.val = a['shelf']
1101    r.position.val = a['position']
1102    r.price.val = a['price']
1103    r.available.val = a['available']
1104</exec>
1105  </number>
1106  <html label="ShelfPickMeta" where="survey"><div id="shelf-meta" data-label="ShelfPick" data-version="${ShelfPickDesignVersion.val}" data-design="${ShelfPickDesignID.val}" data-session="${ShelfPickSessionKey.val}" data-assets="/survey/${gv.survey.path}/"><span data-slot="1" data-product="p${ShelfPickOffers.r1.product.val}" data-shelf="${ShelfPickOffers.r1.shelf.val}" data-position="${ShelfPickOffers.r1.position.val}" data-price="${ShelfPickOffers.r1.price.val}" data-available="${ShelfPickOffers.r1.available.val}"></span><span data-slot="2" data-product="p${ShelfPickOffers.r2.product.val}" data-shelf="${ShelfPickOffers.r2.shelf.val}" data-position="${ShelfPickOffers.r2.position.val}" data-price="${ShelfPickOffers.r2.price.val}" data-available="${ShelfPickOffers.r2.available.val}"></span><span data-slot="3" data-product="p${ShelfPickOffers.r3.product.val}" data-shelf="${ShelfPickOffers.r3.shelf.val}" data-position="${ShelfPickOffers.r3.position.val}" data-price="${ShelfPickOffers.r3.price.val}" data-available="${ShelfPickOffers.r3.available.val}"></span><span data-slot="4" data-product="p${ShelfPickOffers.r4.product.val}" data-shelf="${ShelfPickOffers.r4.shelf.val}" data-position="${ShelfPickOffers.r4.position.val}" data-price="${ShelfPickOffers.r4.price.val}" data-available="${ShelfPickOffers.r4.available.val}"></span><span data-slot="5" data-product="p${ShelfPickOffers.r5.product.val}" data-shelf="${ShelfPickOffers.r5.shelf.val}" data-position="${ShelfPickOffers.r5.position.val}" data-price="${ShelfPickOffers.r5.price.val}" data-available="${ShelfPickOffers.r5.available.val}"></span><span data-slot="6" data-product="p${ShelfPickOffers.r6.product.val}" data-shelf="${ShelfPickOffers.r6.shelf.val}" data-position="${ShelfPickOffers.r6.position.val}" data-price="${ShelfPickOffers.r6.price.val}" data-available="${ShelfPickOffers.r6.available.val}"></span></div></html>
1107  <radio label="ShelfPick" optional="0" ss:questionClassNames="shelf-native">
1108    <title>Which granola would you choose?</title>
1109    <comment>Choose one product from the shelf.</comment>
1110    <row
1111      label="p101"
1112      value="101"
1113      cond="'p101' in p.ShelfPickAvailable"
1114      alt="Oatfield Honey &amp; Almond"
1115    ><span data-product="p101">Oatfield Honey &amp; Almond</span></row>
1116    <row
1117      label="p102"
1118      value="102"
1119      cond="'p102' in p.ShelfPickAvailable"
1120      alt="Oatfield Maple &amp; Pecan"
1121    ><span data-product="p102">Oatfield Maple &amp; Pecan</span></row>
1122    <row
1123      label="p103"
1124      value="103"
1125      cond="'p103' in p.ShelfPickAvailable"
1126      alt="Oatfield Berry &amp; Seed"
1127    ><span data-product="p103">Oatfield Berry &amp; Seed</span></row>
1128    <row
1129      label="p104"
1130      value="104"
1131      cond="'p104' in p.ShelfPickAvailable"
1132      alt="Morning Folk Cocoa &amp; Hazelnut"
1133    ><span data-product="p104">Morning Folk Cocoa &amp; Hazelnut</span></row>
1134    <row
1135      label="p105"
1136      value="105"
1137      cond="'p105' in p.ShelfPickAvailable"
1138      alt="Morning Folk Coconut &amp; Chia"
1139    ><span data-product="p105">Morning Folk Coconut &amp; Chia</span></row>
1140    <row
1141      label="p106"
1142      value="106"
1143      cond="'p106' in p.ShelfPickAvailable"
1144      alt="Morning Folk Apple &amp; Cinnamon"
1145    ><span data-product="p106">Morning Folk Apple &amp; Cinnamon</span></row>
1146    <validate>
1147if ShelfPick.val is not None:
1148    if ShelfPick.selected.label not in p.ShelfPickAvailable:
1149        error("Please choose an available product from the shelf.")
1150</validate>
1151  </radio>
1152  <suspend />
1153  <text label="ShelfPickProductID" where="execute" optional="1">
1154    <title>Chosen stable product ID</title>
1155    <exec>ShelfPickProductID.val = ShelfPick.selected.label</exec>
1156  </text>
1157  <float label="ShelfPickPrice" where="execute" optional="1" size="6">
1158    <title>Chosen product price in USD</title>
1159    <exec>ShelfPickPrice.val = [a['price'] for a in p.ShelfPickOffers if a['product'] == ShelfPick.selected.label][0] / 100.0</exec>
1160  </float>
1161  <number label="ShelfPickSlot" where="execute" optional="1" size="1">
1162    <title>Chosen product physical slot</title>
1163    <exec>ShelfPickSlot.val = [a['slot'] for a in p.ShelfPickOffers if a['product'] == ShelfPick.selected.label][0]</exec>
1164  </number>
1165  <number label="ShelfPickShelf" where="execute" optional="1" size="1">
1166    <title>Chosen product shelf</title>
1167    <exec>ShelfPickShelf.val = [a['shelf'] for a in p.ShelfPickOffers if a['product'] == ShelfPick.selected.label][0]</exec>
1168  </number>
1169  <number label="ShelfPickPosition" where="execute" optional="1" size="1">
1170    <title>Chosen product position within shelf</title>
1171    <exec>ShelfPickPosition.val = [a['position'] for a in p.ShelfPickOffers if a['product'] == ShelfPick.selected.label][0]</exec>
1172  </number>
1173  <samplesources default="0">
1174    <samplesource list="0">
1175      <title>Open survey</title>
1176      <completed>You have already completed this study.</completed>
1177      <exit cond="qualified">Your responses have been recorded.</exit>
1178    </samplesource>
1179  </samplesources>
1180</survey>

See how Questra fits your survey workflow.

Book a demo