UIConfig

Defined in: parser/types.ts:297

The UIConfig is used to configure the UI of the app. This includes the logo, contact email, and whether to show a progress bar. The UIConfig is also used to configure the sidebar, which can be used to display the task instructions and capture responses. Below is an example of how the uiConfig would look in your study configuration (note, there are optional fields that are not shown here):

uiConfig:{
  "logoPath": "<study-name>/assets/logo.jpg",
  "contactEmail": "contact@revisit.dev",
  "withProgressBar": true,
  "withSidebar": true,
  "nextButtonAlignment": "center",
  "helpTextPath": "<study-name>/assets/help.md",
  "autoDownloadStudy": true,
  "autoDownloadTime": 5000,
  "studyEndMsg": "Thank you for completing this study. You're the best!",
  "studyEndAutoRedirectURL": "https://app.prolific.com/submissions/complete?cc=abc123",
  "studyEndAutoRedirectDelay": 10000,
  "windowEventDebounceTime": 500,
  "urlParticipantIdParam": "PROLIFIC_ID",
  "numSequences": 500
}

In the above, the <study-name>/assets/ path is referring to the path to your individual study assets. It is common practice to have your study directory contain an assets directory where all components and images relevant to your study reside. Note that this path is relative to the public folder of the repository - as is all other paths you define in reVISit (aside from React components whose paths are relative to src/public.)

Properties

Property	Type	Description	Defined in
`allowFailedTraining?`	`boolean`	Allow continuing with incorrect answers after attempts are exhausted. Defaults to true.	parser/types.ts:342
`autoDownloadStudy?`	`boolean`	Controls whether the study data is automatically downloaded at the end of the study.	parser/types.ts:368
`autoDownloadTime?`	`number`	The time in milliseconds to wait before automatically downloading the study data.	parser/types.ts:370
`captureGamepad?`	`boolean`	Whether or not to capture game controller input into windowEvents. If true, gamepad button and axis events are recorded on all components unless deactivated on individual components. Defaults to false. Browsers do not expose a gamepad to the page until the participant presses a button on it, so nothing is captured before that first press.	parser/types.ts:354
`clickToRecord?`	`boolean`	Enables a click-and-hold microphone button instead of continuous recording. When true, audio is muted by default and is recorded only while the button is held. When false, recording starts immediately and can be paused/resumed via the microphone button. Defaults to false.	parser/types.ts:346
`colorMode?`	`"light"` \| `"dark"` \| `"userPreference"`	The study's color mode. Defaults to light. userPreference uses the participant's system preference.	parser/types.ts:310
`contactEmail`	`string`	The email address that used during the study if a participant clicks contact.	parser/types.ts:302
`enumerateQuestions?`	`boolean`	Whether to prepend questions with their index (+ 1). This should only be used when all questions are in the same location, e.g. all are in the side bar.	parser/types.ts:356
`helpTextPath?`	`string`	The path to the help text file. This is displayed when a participant clicks help. Markdown is supported.	parser/types.ts:320
`instructionLocation?`	`ConfigResponseBlockLocation`	The location of the instructions.	parser/types.ts:318
`logoPath`	`string`	The path to the logo image. This is displayed on the landing page and the header.	parser/types.ts:300
`nextButtonAlignment?`	`NextButtonAlignment`	The horizontal alignment of the navigation action group. Defaults to right.	parser/types.ts:328
`nextButtonDisableTime?`	`number`	The time in milliseconds to wait before the next button is disabled.	parser/types.ts:332
`nextButtonEnableTime?`	`number`	The time in milliseconds to wait before the next button is enabled.	parser/types.ts:330
`nextButtonLocation?`	`ConfigResponseBlockLocation`	The location of the next button.	parser/types.ts:326
`nextButtonText?`	`string`	The text to display on the next button.	parser/types.ts:324
`nextOnEnter?`	`boolean`	Whether enter key should move to the next question. Defaults to false.	parser/types.ts:322
`numSequences?`	`number`	The number of sequences to generate for the study. This is used to generate the random sequences for the study. Defaults to 1000.	parser/types.ts:372
`participantNameField?`	`string`	The default name field for a participant. Directs reVISit to use the task and response id as a name in UI elements. For example, if you wanted the response 'prolificId' from the task 'introduction' to be the name, this field would be 'introduction.prolificId'	parser/types.ts:376
`previousButtonText?`	`string`	The text that is displayed on the previous button.	parser/types.ts:334
`provideFeedback?`	`boolean`	Enable answer checking and feedback when a component omits provideFeedback and has no answer-level feedback. Defaults to false.	parser/types.ts:338
`recordAudio?`	`boolean`	Whether or not we want to utilize think-aloud features. If true, will record audio on all components unless deactivated on individual components. Defaults to false.	parser/types.ts:344
`recordScreen?`	`boolean`	Whether or not we want to utilize screen recording feature. If true, will record audio on all components unless deactivated on individual components. This must be set to true if you want to record audio on any component in your study. Defaults to false. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before any component that you want to record the screen on to ensure permissions are granted and screen capture has started.	parser/types.ts:348
`recordScreenFPS?`	`number`	Desired fps for recording screen. If possible, this value will be used, but if it's not possible, the user agent will use the closest possible match.	parser/types.ts:352
`recordWebcam?`	`boolean`	Whether or not we want to utilize webcam recording. If true, will record webcam video on all components unless deactivated on individual components. Defaults to false. Studies using webcam without screen capture should include the webcam permission component before any recorded component. Studies combining webcam with screen capture should use the screen recording permission component.	parser/types.ts:350
`responseDividers?`	`boolean`	Whether to show the response dividers. Defaults to false.	parser/types.ts:358
`showTitle?`	`boolean`	Controls whether the title should be hidden in the study.	parser/types.ts:314
`showTitleBar?`	`boolean`	Controls whether the title bar should be hidden in the study.	parser/types.ts:316
`sidebarWidth?`	`number`	The width of the left sidebar. Defaults to 300.	parser/types.ts:312
`studyEndAutoRedirectDelay?`	`number`	The duration after which participants will be auto-redirected to the URL specified in studyEndAutoRedirectURL. Defaults to 10000 milliseconds (10 seconds).	parser/types.ts:366
`studyEndAutoRedirectURL?`	`string`	The URL which participants will be auto-redirected to when the study ends. The default time before redirecting is 10 seconds, but this can be configured with the studyEndAutoRedirectDelay field.	parser/types.ts:364
`studyEndMsg?`	`string`	The message to display when the study ends.	parser/types.ts:362
`stylesheetPath?`	`string`	The path to the external stylesheet file.	parser/types.ts:378
`timeoutReject?`	`boolean`	Whether to redirect a timed out participant to a rejection page. This only works for components where the `nextButtonDisableTime` field is set.	parser/types.ts:336
`trainingAttempts?`	`number`	The number of answer-checking attempts allowed for the component. Defaults to 2. Check Answer grades responses before Next can continue. With hideCheckAnswerButton, Next performs the check first. Incorrect answers block continuing unless allowFailedTraining is true and attempts are exhausted. The final failed attempt reveals accepted answers. Set -1 for unlimited attempts, requiring a correct answer and hiding the reveal.	parser/types.ts:340
`urlParticipantIdParam?`	`string`	If the participant ID is passed in the URL, this is the name of the querystring parameter that is used to capture the participant ID (e.g. PROLIFIC_ID). This will allow a user to continue a study on different devices and browsers.	parser/types.ts:374
`windowEventDebounceTime?`	`number`	Debounce time in milliseconds for automatically tracked window events. Defaults to 100. E.g 100 here means 1000ms / 100ms = 10 times a second, 200 here means 1000ms / 200ms = 5 times per second	parser/types.ts:360
`withProgressBar`	`boolean`	Controls whether the progress bar is rendered in the study.	parser/types.ts:304
`withSidebar`	`boolean`	Controls whether the left sidebar is rendered at all. Required to be true if your response's location is set to sidebar for any question.	parser/types.ts:306

Properties​

Properties