Version: v2.0.0-rc6

WebsiteComponent

The WebsiteComponent interface is used to define the properties of a website component. A WebsiteComponent is used to render an iframe with a website inside of it. This can be used to display an external website or an html file that is located in the public folder.

{
 "type": "website",
 "path": "<study-name>/assets/website.html",
}

To pass a data from the config to the website, you can use the parameters field as below:

{
 "type": "website",
 "path": "<study-name>/website.html",
 "parameters": {
   "barData": [0.32, 0.01, 1.2, 1.3, 0.82, 0.4, 0.3]
 }
 "response": [
   {
     "id": "barChart",
     "prompt": "Your selected answer:",
     "location": "belowStimulus",
     "type": "reactive"
   }
 ],
}

In the website.html file, by including revisit-communicate.js, you can use the Revisit.onDataReceive method to retrieve the data, and Revisit.postAnswers to send the user's responses back to the reVISit as shown in the example below:

<script src="../../revisitUtilities/revisit-communicate.js"></script>
<script>
 Revisit.onDataReceive((data) => {
   const barData = data['barData'];
   ...
 });

 // Call out that 'barChart' needs to match ID in 'response' object
 Revisit.postAnswers({ barChart: userAnswer });
</script>

If the html website implements Trrack library for provenance tracking, you can send the provenance graph back to reVISit by calling Revisit.postProvenanceGraph as shown in the example below. You need to call this each time the Trrack state is updated so that reVISit is kept aware of the changes in the provenance graph.

const trrack = initializeTrrack({
 initialState,
 registry
});

...
Revisit.postProvenance(trrack.graph.backend);

Extends

BaseIndividualComponent

Properties

Property	Type	Description	Inherited from	Defined in
`allowFailedTraining?`	`boolean`	Controls whether the component should allow failed training. If not provided, the default is true.	`BaseIndividualComponent`.`allowFailedTraining`	parser/types.ts:546
`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`	parser/types.ts:540
`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`	parser/types.ts:550
`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`	parser/types.ts:552
`instructionLocation?`	`"sidebar"` \| `"aboveStimulus"` \| `"belowStimulus"`	The location of the instructions.	`BaseIndividualComponent`.`instructionLocation`	parser/types.ts:538
`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`	parser/types.ts:548
`nextButtonDisableTime?`	`number`	A timeout (in ms) after which the next button will be disabled.	`BaseIndividualComponent`.`nextButtonDisableTime`	parser/types.ts:556
`nextButtonEnableTime?`	`number`	A timer (in ms) after which the next button will be enabled.	`BaseIndividualComponent`.`nextButtonEnableTime`	parser/types.ts:558
`nextButtonLocation?`	`"sidebar"` \| `"aboveStimulus"` \| `"belowStimulus"`	The location of the next button.	`BaseIndividualComponent`.`nextButtonLocation`	parser/types.ts:536
`nextButtonText?`	`string`	The text that is displayed on the next button.	`BaseIndividualComponent`.`nextButtonText`	parser/types.ts:534
`parameters?`	`Record`<`string`, `unknown`>	The parameters that are passed to the website (iframe). These can be used within your website to render different things.	-	parser/types.ts:715
`path`	`string`	The path to the website. This should be a relative path from the public folder or could be an external website.	-	parser/types.ts:713
`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`	parser/types.ts:542
`recordAudio?`	`boolean`	Whether or not to record audio for a component. Only relevant if StudyConfig.recordStudyAudio is true. Defaults to true.	`BaseIndividualComponent`.`recordAudio`	parser/types.ts:554
`response`	`Response`[]	The responses to the component	`BaseIndividualComponent`.`response`	parser/types.ts:530
`responseDividers?`	`boolean`	Whether to show the response dividers. Defaults to false.	`BaseIndividualComponent`.`responseDividers`	parser/types.ts:560
`trainingAttempts?`	`number`	The number of training attempts allowed for the component. The next button will be disabled until either the correct answer is given or the number of attempts is reached. When the number of attempts is reached, if the answer is incorrect still, the correct value will be shown to the participant. The default value is 2. Providing a value of -1 will allow infinite attempts and the participant must enter the correct answer to continue, and reVISit will not show the correct answer to the user.	`BaseIndividualComponent`.`trainingAttempts`	parser/types.ts:544
`type`	`"website"`	-	-	parser/types.ts:711

Extends​

Properties​

Extends

Properties