ButtonsResponse

Defined in: parser/types.ts:1220

The ButtonsResponse interface is used to define the properties of a buttons response. ButtonsResponses render as a list of buttons that the participant can click. When a button is clicked, the value of the button is stored in the data file. Participants can cycle through the options using the arrow keys.

{
  "id": "buttonsResponse",
  "type": "buttons",
  "prompt": "Click a button",
  "location": "belowStimulus",
  "default": "Option 2",
  "options": [
    "Option 1",
    "Option 2",
    "Option 3"
  ]
}

In this example, the participant can click one of the buttons labeled "Option 1", "Option 2", or "Option 3".

Extends

BaseResponse

Properties

Property	Type	Description	Inherited from	Defined in
`default?`	`string`	The default value of the response. Specify one option value as a string.	-	parser/types.ts:1224
`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
`hideKeyVisual?`	`boolean`	Set to true to hide keybinding indicators on buttons. Defaults to false when keymapping is active, else false.	-	parser/types.ts:1228
`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
`onSubmit?`	`GlobalStoreAction`[]	Apply these actions to the final submitted answer, in declared order.	`BaseResponse`.`onSubmit`	parser/types.ts:484
`optionOrder?`	`"fixed"` \| `"random"`	The order in which the buttons are displayed. Defaults to fixed.	-	parser/types.ts:1226
`options`	(`string` \| `ButtonOption`)[]	-	-	parser/types.ts:1222
`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
`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`	`"buttons"`	-	-	parser/types.ts:1221
`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