DropdownResponse

Defined in: parser/types.ts:947

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
}

A dropdown can alternatively use a predefined option set:

{
  "id": "q-country",
  "prompt": "Select your country.",
  "type": "dropdown",
  "options": "countries"
}

Extends

BaseResponse

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:952
`delay?`	`number`	Delay in milliseconds before an element activates. Must be non-negative; defaults to 0 meaning the element is always active. Minimum 0	`BaseResponse`.`delay`	parser/types.ts:520
`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:516
`hidden?`	`boolean`	Controls whether the response is hidden.	`BaseResponse`.`hidden`	parser/types.ts:506
`id`	`string`	The id of the response. This is used to identify the response in the data file.	`BaseResponse`.`id`	parser/types.ts:486
`infoText?`	`string`	The description that is displayed when the participant hovers over the response. This does not accept markdown.	`BaseResponse`.`infoText`	parser/types.ts:494
`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:498
`maxSelections?`	`number`	The maximum number of selections that are required. This will make the dropdown a multiselect dropdown.	-	parser/types.ts:958
`minSelections?`	`number`	The minimum number of selections that are required. This will make the dropdown a multiselect dropdown.	-	parser/types.ts:956
`onSubmit?`	`GlobalStoreAction`[]	Apply these actions to the final submitted answer, in declared order.	`BaseResponse`.`onSubmit`	parser/types.ts:484
`options`	(`string` \| `StringOption`)[] \| `"countries"`	The options that are displayed in the dropdown, or a predefined option set.	-	parser/types.ts:954
`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:504
`path?`	`string`	Path under `src/public/` to response code. Custom responses require a default React component. Any response code module may export `validate(value, values, response)` to return an error message, a boolean validity result, or null for valid input. It may separately export `score(value, values, response, expected?)` to return a boolean or a score from 0 to 1; null uses ordinary correct-answer matching. `expected` is the configured correct answer when correctness is checked.	`BaseResponse`.`path`	parser/types.ts:488
`placeholder?`	`string`	The placeholder text displayed in the input. Defaults to `Select a country` when `options` is `countries`.	-	parser/types.ts:950
`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:490
`required?`	`boolean`	Controls whether the response is required to be answered. Defaults to true.	`BaseResponse`.`required`	parser/types.ts:496
`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:502
`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:500
`secondaryText?`	`string`	The secondary text that is displayed to the participant under the prompt. This does not accept markdown.	`BaseResponse`.`secondaryText`	parser/types.ts:492
`style?`	`Styles`	You can set styles here, using React CSSProperties, for example: `{"width": 100}` or `{"width": "50%"}`	`BaseResponse`.`style`	parser/types.ts:514
`stylesheetPath?`	`string`	The path to the external stylesheet file.	`BaseResponse`.`stylesheetPath`	parser/types.ts:512
`type`	`"dropdown"`	-	-	parser/types.ts:948
`visibleIf?`	`ResponseVisibilityCondition`	Show this response only when another response in this component satisfies the condition.	`BaseResponse`.`visibleIf`	parser/types.ts:518
`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:508
`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:510

Extends​

Properties​

Extends

Properties