CustomResponse

Defined in: parser/types.ts:874

The CustomResponse interface is used to define the properties of a response rendered by React code in src/public. This is useful when built-in response types do not fit the interaction you need, but you still want the response to participate in the standard form, validation, provenance, and answer-saving flow.

Unlike other response assets, the path for a custom response is relative to the src/public/ folder. Similar to React stimulus components, we suggest creating a folder named src/public/{studyName}/assets to house custom response files for a particular study. The React component must be the default export from the file. You may also optionally export a named validate function from the same module.

Example:

{
  "id": "custom-chart-response",
  "type": "custom",
  "prompt": "Use the custom response to select a chart and confidence.",
  "path": "my_study/assets/CustomChartResponse.tsx",
  "parameters": {
    "chartOptions": ["Bar", "Line", "Scatter"]
  },
  "default": {
    "chartType": "Bar",
    "confidence": 70
  }
}

Extends

• BaseResponse

Properties

Property	Type	Description	Inherited from	Defined in
default?	JsonValue	The default value of the response. Must be JSON-serializable.	-	parser/types.ts:881
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:412
hidden?	boolean	Controls whether the response is hidden.	BaseResponse.hidden	parser/types.ts:402
id	string	The id of the response. This is used to identify the response in the data file.	BaseResponse.id	parser/types.ts:384
infoText?	string	The description that is displayed when the participant hovers over the response. This does not accept markdown.	BaseResponse.infoText	parser/types.ts:390
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:394
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:400
parameters?	Record<string, unknown>	Parameters passed to the custom response component.	-	parser/types.ts:879
path	string	The path to the react component. This should be a relative path from the src/public folder.	-	parser/types.ts:877
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:386
required?	boolean	Controls whether the response is required to be answered. Defaults to true.	BaseResponse.required	parser/types.ts:392
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:398
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:396
secondaryText?	string	The secondary text that is displayed to the participant under the prompt. This does not accept markdown.	BaseResponse.secondaryText	parser/types.ts:388
style?	Styles	You can set styles here, using React CSSProperties, for example: {"width": 100} or {"width": "50%"}	BaseResponse.style	parser/types.ts:410
stylesheetPath?	string	The path to the external stylesheet file.	BaseResponse.stylesheetPath	parser/types.ts:408
type	"custom"	-	-	parser/types.ts:875
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:404
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:406