DropdownResponse
Defined in: parser/types.ts:610
The DropdownResponse interface is used to define the properties of a dropdown response. DropdownResponses render as a select input with user specified options.
{
"id": "q-color",
"prompt": "What is your favorite color?",
"location": "aboveStimulus",
"type": "dropdown",
"default": "Blue",
"placeholder": "Please choose your favorite color",
"options": ["Red", "Blue"]
}
Here's an example of a multiselect dropdown with minimum and maximum selections:
{
"id": "q-multiselect-dropdown",
"prompt": "Select the fruits you like.",
"location": "aboveStimulus",
"type": "dropdown",
"default": ["Banana", "Orange"],
"placeholder": "Select your favorite fruits",
"options": ["Apple", "Banana", "Cherry", "Grape", "Orange", "Strawberry", "Watermelon", "Pineapple"],
"minSelections": 2,
"maxSelections": 4
}
Extends​
Properties​
| Property | Type | Description | Inherited from | Defined in |
|---|---|---|---|---|
default? | string | string[] | The default value of the response. Use a string for single-select dropdowns and a string array for multiselect dropdowns. | - | parser/types.ts:615 |
excludeFromRandomization? | boolean | Exclude response from randomization. If present, will override the responseOrder randomization setting in the components. Defaults to false. | BaseResponse.excludeFromRandomization | parser/types.ts:377 |
hidden? | boolean | Controls whether the response is hidden. | BaseResponse.hidden | parser/types.ts:367 |
id | string | The id of the response. This is used to identify the response in the data file. | BaseResponse.id | parser/types.ts:349 |
infoText? | string | The description that is displayed when the participant hovers over the response. This does not accept markdown. | BaseResponse.infoText | parser/types.ts:355 |
location? | ConfigResponseBlockLocation | Controls the response location. These might be the same for all responses, or differ across responses. Defaults to belowStimulus | BaseResponse.location | parser/types.ts:359 |
maxSelections? | number | The maximum number of selections that are required. This will make the dropdown a multiselect dropdown. | - | parser/types.ts:621 |
minSelections? | number | The minimum number of selections that are required. This will make the dropdown a multiselect dropdown. | - | parser/types.ts:619 |
options | (string | StringOption)[] | The options that are displayed in the dropdown. | - | parser/types.ts:617 |
paramCapture? | string | Use to capture querystring parameters in answers such as participant_name. See the examples for how this is used, but prefer uiConfig.urlParticipantIdParam if you are capturing a participant ID. | BaseResponse.paramCapture | parser/types.ts:365 |
placeholder? | string | The placeholder text that is displayed in the input. | - | parser/types.ts:613 |
prompt | string | The prompt that is displayed to the participant. You can use markdown here to render images, links, etc. | BaseResponse.prompt | parser/types.ts:351 |
required? | boolean | Controls whether the response is required to be answered. Defaults to true. | BaseResponse.required | parser/types.ts:357 |
requiredLabel? | string | You can provide a required label, which makes it so a participant has to answer with a response that matches label. | BaseResponse.requiredLabel | parser/types.ts:363 |
requiredValue? | unknown | You can provide a required value, which makes it so a participant has to answer with that value. | BaseResponse.requiredValue | parser/types.ts:361 |
secondaryText? | string | The secondary text that is displayed to the participant under the prompt. This does not accept markdown. | BaseResponse.secondaryText | parser/types.ts:353 |
style? | Styles | You can set styles here, using React CSSProperties, for example: {"width": 100} or {"width": "50%"} | BaseResponse.style | parser/types.ts:375 |
stylesheetPath? | string | The path to the external stylesheet file. | BaseResponse.stylesheetPath | parser/types.ts:373 |
type | "dropdown" | - | - | parser/types.ts:611 |
withDivider? | boolean | Renders the response with a trailing divider. If present, will override the divider setting in the components or uiConfig. | BaseResponse.withDivider | parser/types.ts:369 |
withDontKnow? | boolean | Renders the response with an option for "I don't know". This counts as a completed answer for the validation. | BaseResponse.withDontKnow | parser/types.ts:371 |