ImageComponent
The ImageComponent interface is used to define the properties of an image component. This component is used to render an image with optional styling.
For example, to render an image with a path of path/to/study/assets/image.jpg
and a max width of 50%, you would use the following snippet:
{
"type": "image",
"path": "<study-name>/assets/image.jpg",
"style": {
"maxWidth": "50%"
}
}
Extends
Properties
Property | Type | Description | Inherited from |
---|---|---|---|
correctAnswer? | Answer [] | The correct answer to the component. This is used for training trials where the user is shown the correct answer after a guess. | BaseIndividualComponent .correctAnswer |
description? | string | The description of the component. This is used to identify and provide additional information for the component in the admin panel. | BaseIndividualComponent .description |
instruction? | string | The instruction of the component. This is used to identify and provide additional information for the component in the admin panel. | BaseIndividualComponent .instruction |
instructionLocation? | "sidebar" | "aboveStimulus" | "belowStimulus" | The location of the instructions. | BaseIndividualComponent .instructionLocation |
meta? | Record <string , unknown > | The meta data for the component. This is used to identify and provide additional information for the component in the admin panel. | BaseIndividualComponent .meta |
nextButtonLocation? | "sidebar" | "aboveStimulus" | "belowStimulus" | The location of the next button. | BaseIndividualComponent .nextButtonLocation |
nextButtonText? | string | The text that is displayed on the next button. | BaseIndividualComponent .nextButtonText |
path | string | The path to the image. This should be a relative path from the public folder. | - |
provideFeedback? | boolean | Controls whether the component should provide feedback to the participant, such as in a training trial. If not provided, the default is false. | BaseIndividualComponent .provideFeedback |
response | Response [] | The responses to the component | BaseIndividualComponent .response |
style? | Record <string , string > | The style of the image. This is an object with css properties as keys and css values as values. | - |
type | "image" | - | - |