> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-sections/utilities-and-layout/quiz.md).

# Quiz

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F35uusPBpTnR1vLcNbrQx%2Fimage.png?alt=media&amp;token=244708d6-3172-4ca2-ba1a-f7e86883a88f" alt=""><figcaption></figcaption></figure>

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General settings <a href="#general-setting" id="general-setting"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F45oy3GInGrNNgzm9kRX7%2Fimage.png?alt=media&amp;token=c9d5c761-0ce2-46e0-8889-335c50aef220" alt=""><figcaption></figcaption></figure>

| Setting               | Description                                                                                                                                                                                                                                                                                                                                                                                                                             |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width**     | <p>3 options for container</p><ul><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fix width:</strong> depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Expand full width</strong>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul> |
| **Color scheme**      | Select colors from **Theme settings -> Colors**                                                                                                                                                                                                                                                                                                                                                                                         |
| **Content max width** | Define the maximum spacing that the main content would take                                                                                                                                                                                                                                                                                                                                                                             |
| **Show back button**  | Display button back to top                                                                                                                                                                                                                                                                                                                                                                                                              |

#### Intro <a href="#general-setting" id="general-setting"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FeXynrwiYc29TbNLYtfsj%2Fimage.png?alt=media&amp;token=150fd91e-fb1c-4a63-9367-60ec3282e630" alt=""><figcaption></figcaption></figure>

| Setting                | Description                                                                                                                  |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Enable intro step**  | Enable the introduction content before your clients take the quiz                                                            |
| **Subheading**         | Use the subheading to provide additional context, supporting information, or a short description                             |
| **Heading**            | The primary text element used to introduce or label the content within this section                                          |
| **Description**        | A text element used to provide additional details or supporting information related to the heading or content of the section |
| **Start button label** | Set the text displayed on the button                                                                                         |

#### Email step <a href="#blog-posts" id="blog-posts"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F6vYXgKLmvv8iMZqsfuHT%2Fimage.png?alt=media&amp;token=5f1f1d73-b0ec-413e-bc21-efce8ddf370d" alt=""><figcaption></figcaption></figure>

| Setting                   | Description                                   |
| ------------------------- | --------------------------------------------- |
| **Email heading**         | Heading content                               |
| **Email placeholder**     | Text brief hint inside email field            |
| **Continue button label** | Set the text displayed on the Continue button |
| **Skip button label**     | Set the text displayed on the Skip button     |

#### Results display <a href="#settings-for-carousel" id="settings-for-carousel"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FXqO36NTeY45Sz3BNNsEM%2Fimage.png?alt=media&amp;token=cae61dbd-fa37-4ab2-a0a0-06ffda204026" alt=""><figcaption></figcaption></figure>

| Setting                      | Description                                                                                                                  |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Results banner image**     | Select a banner to display on the result screen                                                                              |
| **Heading**                  | The primary text element used to introduce or label the content within this section                                          |
| **Description**              | A text element used to provide additional details or supporting information related to the heading or content of the section |
| **Show retake button**       | Enable the button that allows clients to do the quiz again                                                                   |
| **Retake button label**      | Set the text displayed on the retake button                                                                                  |
| **Fallback products**        | When there isn't any products match the quiz's result, these fallback products will be displayed as default                  |
| **Maximum products to show** | Define the maximum number of products to be shown                                                                            |
| **Items per row on desktop** | Define the number of product in each line on Desktop                                                                         |
| **Items per row on mobile**  | Define the number of product in each line on Mobile                                                                          |

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                |
| ---------- | ------------------------------------------ |
| **Top**    | Customize the top margin of the section    |
| **Bottom** | Customize the bottom margin of the section |

#### Section divider

<table><thead><tr><th width="213">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show divider</strong></td><td>Toggles the visibility of a horizontal divider line within the section.</td></tr></tbody></table>

### Block settings

#### Quiz question

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FapatdfNlQ13xCi4jQniV%2Fimage.png?alt=media&amp;token=859db80f-767d-4f25-852f-90a0b135dea6" alt=""><figcaption></figcaption></figure>

| Setting           | Description                                                                                                                  |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Stepper label** | Define the overall meaning of the question tab                                                                               |
| **Question ID**   | Unique ID for this question. Used by skip questions on options (e.g. q1, q2).                                                |
| **Subheading**    | Use the subheading to provide additional context, supporting information, or a short description                             |
| **Heading**       | The primary text element used to introduce or label the content within this section                                          |
| **Description**   | A text element used to provide additional details or supporting information related to the heading or content of the section |
| **Option layout** | <p>The style of the button</p><ul><li><strong>Pill button</strong></li><li><strong>Image circles</strong></li></ul>          |

#### Quiz option

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F6K8wu7Vmyt80gaPAWhwt%2Fimage.png?alt=media&amp;token=356f4afb-e98a-48dd-b8eb-7748ece69664" alt=""><figcaption></figcaption></figure>

| Setting                 | Description                                                                                                    |
| ----------------------- | -------------------------------------------------------------------------------------------------------------- |
| **Label**               | Define the overall meaning of the options                                                                      |
| **Image**               | Select an image to display as an option when you select the **Quiz question -> Option layout -> Image circle** |
| **Primary products**    | Shown first in quiz results when shoppers select this answer                                                   |
| **Additional products** | Shown after primary products in quiz results                                                                   |
| **Never recommend**     | Block these products from results when shoppers select this answer, even if they appear in other answers       |
| **Skip questions**      | Enter question IDs from quiz questions to skip when this answer is selected. Example: q3, q4                   |