> ## Documentation Index
> Fetch the complete documentation index at: https://support.humanizing.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Question Designer: Collect User Responses in Plural

> Present button-based questions with voice input, conditional button display, and variable storage to collect user responses in your Plural flow.

The Question Designer element lets you ask your users a structured question and capture their response. Unlike the Menu Designer, which focuses on navigation, the Question Designer is optimized for data collection — each button represents an answer choice, and the element makes it easy to store the user's selection in a flow variable for use downstream. Users can respond by tapping a button or by speaking a button's label or any of its voice trigger variations.

## Create a Question Designer element

Right-click on an empty area of your canvas and select **Question Designer**, or drag the blue output circle from an existing element and release it on a blank area, then select **Question Designer** from the context menu.

## Open the Design Editor

<Steps>
  <Step title="Click the element once">
    Click the Question Designer element on the canvas to open the sidebar.
  </Step>

  <Step title="Click the element preview in the sidebar">
    Click the preview in the sidebar a second time to launch the full-screen Design Editor.
  </Step>
</Steps>

In the Design Editor you can:

* Add a **title** and **subtitle** above the buttons.
* Add a **background image or video** and an optional overlay for contrast.
* Change the **button colors** (default color and selected color).
* **Add, delete, and hide** individual buttons.
* Toggle **Hide all buttons on screen** to show a voice-only question.
* Toggle **Hide avatar** to display the question screen without the Avatar.

## Change button colors

Each button has two color states:

* **Default color** — the background color when the button is not selected.
* **Selected color** — the background color after the user picks this button (the font color at the default state becomes the background color of the selected state).

Click any button in the Design Editor and choose **Change default color** or **Change selected color**. Select from the color palette or switch to the HEX tab to enter an exact hex code.

## Add, hide, and delete buttons

Click **Add button** at the bottom of the Design Editor to create a new answer option. Hover over any button to reveal:

* **Eye icon** — hides the button from the screen. Hidden buttons can still be triggered by voice.
* **X icon** — deletes the button permanently.

You can also add, reorder, duplicate, and delete buttons in the sidebar without opening the Design Editor. Use the drag handle to reorder, the duplicate icon to copy, and the delete icon to remove.

## Add robot speech

While the Question Designer screen is visible, your robot or Avatar can speak the question aloud.

<Steps>
  <Step title="Open the speech input">
    Click **Enter text for robot to say** in the sidebar (or directly on the element in the canvas).
  </Step>

  <Step title="Enter the question and variations">
    Type your question, then press **Enter** to add variations. Plural picks one at random each time.
  </Step>

  <Step title="Optionally add a condition to say">
    In the speech input panel, switch to the **Condition to say** tab to make the robot speak only when a certain variable condition is met.
  </Step>
</Steps>

## Add voice trigger variations to buttons

Expand voice recognition by clicking a button and adding synonyms under the **Button text and variation** section. For a button labeled **Start**, you might add *"Let's start"*, *"Please start"*, and *"Let's go"* as variations so the robot recognises all of them as valid selections.

## Show buttons conditionally

Click any button and switch to the **Condition to show** tab to attach a display condition. For example, show a **Breakfast** button only when:

* **Variable:** `Time`
* **Operator:** greater than
* **Value:** `08:00`

And add a second condition:

* **Variable:** `Time`
* **Operator:** less than
* **Value:** `11:30`

<Note>
  The `Time` system attribute is based on the browser time where the Avatar is running, so it automatically adjusts for the user's local time zone.
</Note>

## Save the user's answer to a variable

Click any button and open the **Save answer** tab to record the user's selection:

<ParamField path="Variable name" type="string" required>
  The name of the attribute to create or update when the user selects this button. For example: `favoriteFlower`.
</ParamField>

<ParamField path="Value" type="string" required>
  The value to store in the variable. For example: `Rose`.
</ParamField>

After saving, reference the variable anywhere downstream using `#ATTRI/favoriteFlower`.

<Tip>
  Use a descriptive variable name that clearly identifies what was asked. If you ask multiple questions in a flow, consistent naming (for example, `q1Answer`, `q2Answer`) makes your conditions easier to read.
</Tip>

## Connect button outputs

Each button has its own output connector. Wire each button to the appropriate next element. Any button without a connection leads to a dead end — always connect all outputs.