Skip to main content

Component Overview

Components are the building blocks of interactive experiments in the HyperStudy platform. They provide the interface elements that participants see and interact with. This guide provides an overview of all available components and their uses.

Understanding Components​

Components serve different functions in your experiment:

  1. Experiment States: The main interactive element in each state
  2. Global States: Elements that can persist across multiple states

Component Types​

Experiment States​

Experiment States are the main interactive elements in each state. Only one focus component can be active per state.

ComponentDescriptionCommon Uses
Text DisplayShows formatted text contentInstructions, stories, scenarios
ImageDisplays static imagesVisual stimuli, diagrams, photos
Synchronized VideoPlays video with precise synchronizationStimuli, demonstrations, scenarios
Multiple ChoicePresents a question with selectable optionsQuizzes, surveys, decision tasks
VAS RatingVisual analog scale for continuous ratingsSubjective ratings, evaluations
Text InputField for free text entryOpen questions, form fields
Audio RecordingRecords participant audio responsesVoice responses, think-aloud tasks
Continuous RatingReal-time continuous rating during stimuliMoment-by-moment evaluations
TriggerHardware trigger send/receivefMRI sync, equipment time-locking
Code ComponentCustom component with JavaScriptComplex interactive tasks
WaitingEmpty state with optional messageTransitions, synchronization points

Global States​

Global states can persist across multiple experiment states, providing consistent functionality throughout the experiment.

ComponentDescriptionCommon Uses
Video ChatReal-time audio/video communicationParticipant interactions, interviews
Text ChatText messaging between participantsText-based communication
Continuous Rating BarPersistent rating componentOngoing evaluations during activities
Sparse RatingTime-based rating promptsMoment-specific evaluations
Scanner Pulse RecorderRecords fMRI scanner TR pulsesfMRI hyperscanning synchronization

Component Configuration​

Each component has its own set of configurable properties, but they share some common elements:

Common Properties​

  • Title: Optional heading text for the component
  • Instructions: Optional guidance text for participants
  • Width/Height: Size settings (percentage or pixels)
  • Position: Placement within the state (if supported)
  • Styling: Visual appearance options
  • Data Collection: Variables to store participant responses
  • Visibility: Which roles can see this component

Component-Specific Properties​

Each component type has unique properties related to its function:

  • Text Component: Text content, formatting, font options
  • Video Component: Video source, playback controls, synchronization settings
  • Rating Scales: Min/max values, labels, step size, orientation
  • Multiple Choice: Questions, answer options, selection type (single/multiple)

Text Formatting​

All text fields in components support:

  • Variables: Insert dynamic values using {variableName} syntax
  • HTML Tags: Format text with <b>, <i>, <u>, <s>, <h1>-<h6>, <br>, <p>

See Text Component - HTML Formatting for details.

Using Components​

Adding Components to States​

To add a focus component to a state:

  1. Select a state in the States panel
  2. In the Properties panel, find "Focus Component"
  3. Select a component type from the dropdown
  4. Configure the component properties

Configuring Global Components​

To set up global components:

  1. Go to the "Global Components" tab
  2. Enable the components you want to use
  3. Configure their properties
  4. Use the matrix view to set which states show which components

Component Interactions​

Components can interact with each other and with experiment variables:

  • Use variables to pass data between components
  • Configure component visibility based on interactions with other components
  • Use component output to control experiment flow

Component Layout and Styling​

Basic Layout Options​

Control how components appear:

  • Size: Set width and height
  • Position: Top, bottom, left, right, or center
  • Margins: Space around the component
  • Padding: Space inside the component
  • Alignment: Text and content alignment

Advanced Styling​

For more control over appearance:

  • Colors: Background, text, borders
  • Fonts: Family, size, weight, style
  • Borders: Width, style, radius
  • Shadows: Box and text shadows
  • Transitions: Animation effects

Use the style panel to configure these options.

Data Collection with Components​

Most interactive components can capture participant responses:

  1. In the component properties, find "Data Collection"
  2. Specify a variable to store the response
  3. Configure what data to capture and when

For example:

  • Rating scales store the selected rating value
  • Multiple choice stores the selected option(s)
  • Text input stores the entered text
  • Video components can track viewing time and interactions

Component Best Practices​

General Guidelines​

  1. Consistency: Use similar components consistently throughout your experiment
  2. Simplicity: Keep components focused on a single task or purpose
  3. Clear Instructions: Provide clear guidance on how to use each component
  4. Responsiveness: Test components on different screen sizes
  5. Accessibility: Ensure components are usable by all participants

Component-Specific Tips​

  • Text: Keep text concise and scannable
  • Video: Ensure videos are high quality and properly compressed
  • Rating Scales: Provide clear labels and appropriate scale ranges
  • Multiple Choice: Write clear, unambiguous questions and answers
  • Input Fields: Validate user input when necessary

Available Components​

Explore detailed documentation for each component: