# Latest

## 1. Design Mode vs. Preview Mode

### Design Mode (default)

When you land on the design page after selecting the template, you are in design mode by default. Click on the UI elements in the simulator for further configuration options like **editing the text**, **changing the font type**, **size**, **background colour**, etc. You can also remove the UI element from the design by hovering over it and clicking the delete icon.

<figure><img src="/files/UcDjsLitRHAkPnzYA3ar" alt=""><figcaption></figcaption></figure>

### Preview Mode

Once you toggle into preview mode, you can interact with the questions in the simulator as they are intended for the end user on their device. You can **select the choices**, **answer the short answer question**, **select the rating**, and **click the Next button** to move to the next question. To be able to edit the UI elements’ configuration, you need to toggle back to Design Mode.

## 2. Edit Design Section

<figure><img src="/files/4DNG4tN0p7WdfaQCdfk8" alt=""><figcaption></figcaption></figure>

### Orientation

You can change the orientation of the template to one of **Full Screen, Center** or **Footer.** The orientation will be applied to all the questions in the survey.

### Dim Background

Enable the dim background radio button to dim the background screen when the survey container is shown to the end user.

<figure><img src="/files/USk56WLuA3DCdkhpa2C8" alt=""><figcaption></figcaption></figure>

You can change the dim background colour by clicking on the colour icon. You can also change the opacity percentage of the dim background by sliding the slider.

### Mandatory Question

Enable the Mandatory Question radio button to make this question mandatory for the end user to answer. Once enabled, the **Next** button on the survey container will be disabled until the end user makes a selection, e.g. selects an option, selects a rating, and starts typing.

### Randomize Choices

Enable the randomize choices radio button in Single-Choice and Multi-Choice templates to present the choices in randomized order to end users.

### Progress Bar

Enable the progress bar so the end user can see a small colored strip on top of survey container.

### Icon Buttons

By default the cross mark is in top right corner and the back arrow is in top left corner. You can switch their positions by clicking on the switch position icon.

## 3. In-Place Editing

When you are in **Design Mode,** you can click on the items to use the edit options available. You can also remove an item by hovering on it and clicking on the delete icon that appears at the top left corner of that item.

<figure><img src="/files/DKr4MwJnqyaV5Fy1PzqM" alt=""><figcaption></figcaption></figure>

To add the removed item again, hover over the survey container and click on the pencil/edit icon.

<figure><img src="/files/cd5jG6rHswvYoCSXTzWB" alt=""><figcaption></figcaption></figure>

### Progress Bar

Click on the progress bar at the top. A palate with options to edit the colors of completed and yet to be completed colors and size/height of the progress bar will open. Just click on the color to select your preferred color.

<figure><img src="/files/h3QEhtdm0ug28LNclfdR" alt=""><figcaption></figcaption></figure>

### Stepper

You can change the text and format of the question stepper by clicking on it.

<figure><img src="/files/4uYNS4TbgV1LhTxXuN71" alt=""><figcaption></figcaption></figure>

### Cross and Back Icons

You can change the color, size and margin of the cross icon and back arrow.

<figure><img src="/files/cwOW95ZmkgaGLZ8IOCfc" alt=""><figcaption></figcaption></figure>

### Text

You can edit any of the text items by clicking on them.

<figure><img src="/files/YEGLV7HUuMFoc5QNOEUK" alt=""><figcaption></figcaption></figure>

You can change the font type, font size and font color. You can also configure the alignment, margin and padding.

### Button

You can configure the button by clicking on the non-textual part of the button.

<figure><img src="/files/DSwqQqW1XyXZVlr33Q9a" alt=""><figcaption></figcaption></figure>

You select the button action as **Next, Submit or Dismiss.** You can change the button color for Active and Inactive state. You can use these options to select the button position, wide or small button and provide margin and paddings.

### Background

You can change the background color of any section by clicking on the non-textual portion of that section.

### Choices and Ratings

For single-choice and multi-choice templates, you can configure the choices. Click on the non-textual portion to configure the options tile. Click on the textual portion to edit the option text and textual attributes like font-type, size and active and inactive font-color.

<figure><img src="/files/qUFVzWBgBFLmDVZ1rSjO" alt=""><figcaption></figcaption></figure>

You can select the options tiles as filled or outlined, configure the corner radius, active and inactive background color and padding.

### Ratings

Click on the non-textual part in the rating tile for configuration options.

<figure><img src="/files/ErrX5DWF40EYCpo8HgRf" alt=""><figcaption></figcaption></figure>

You can configure active and inactive color, resize the tile, add stroke and stroke color to it and configure the corner radius.

Click on the rating number for number related configurations.

<figure><img src="/files/inXldOTY2bMzgVtbk10e" alt=""><figcaption></figcaption></figure>

## 4. NPS Template Specific

### Number of Buttons

Select the start and end rating number of the rating scale you want.

### Labels

Enable or disable the text label for start and end number of the rating scale.

eg. most likely, least likely, etc.

### Questions and Suggestions

You can ask question on the same screen based on the rating selected by the user.

<figure><img src="/files/Y8JEzg8pyPrDfLPqaKz3" alt=""><figcaption></figcaption></figure>

1. Click on the icon, a pop-up will appear
2. Click on Add a Question based on rating
3. Select the condition and ratings as per your requirement
4. Enable Question
   1. Edit and enter the question text
5. Enable Suggestion
   1. Suggestions are response tiles to the question. End User can just click on the tiles to select his response for the question.
   2. Click on Add Suggestion to add a suggestion tile.
   3. Click on the Suggestion 1, Suggestion 2, etc. text to edit and write your own response
6. Enable Feedback box
   1. Adds a text box for user to enter a textual response.

### Reactions

You can display a emoji and text based on the rating selected by the user.

<figure><img src="/files/wysiOkTPojwnRT28KQlz" alt=""><figcaption></figcaption></figure>

1. Click on the icon, a pop-up will appear
2. Select the condition and ratings as per your requirement
3. Enable Message
   1. Edit the text and write a message to display
   2. eg. Excellent, Very Poor, etc.
4. Enable Image
   1. provide the url


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guides.apxor.com/product-guides/create-a-survey/latest.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.