Tutorial: Adjusting the appearance of stimuli

FindingFive makes it easy to adjust the appearance of multiple types of stimuli, like static text stimuli, images, audio stimuli, and videos. In addition, while FindingFive automatically displays your stimuli in sensible locations on the screen, you can also customize the locations of multiple stimuli within a trial.

Text stimuli

If the default size and color of a text stimulus is too dull for you, it’s straightforward to change its appearance.

Change the color of a text stimulus

Change the color of a text stimulus using the property color which accepts HTML color names such as “red” or “darkgreen” (see the complete list of names), or hex codes like #FF6600.

Here is an example of a text stimulus that could be used in a Stroop test:

"incongruent_text": {
      "type": "text",
      "content": "YELLOW",
      "color" : "blue"
}

Change the size of a text stimulus

Change the size of a text stimulus with the property size using any HTML font size unit. These may include absolute units, such as “px” (for pixels), or relative units, such as “em” or “%”.

"large_text": {
     "type": "text",
     "content": "This is a text displayed in a very large font.",
     "size": "30px"
}

Center-justify short text

When a trial features only a single text stimulus and it is relatively short, the default left alignment can appear awkward and not very aesthetically pleasing:

Change the alignment (aka, justification) of a text stimulus with the property alignment. The accepted values are left (default), right, and center. For example, the following definition of a text stimulus:

"center_text": {
     "type": "text",
     "content": "Feedback can be provided in AFC trials. Default is no feedback.",
     "alignment": "center"
}

will lead to a center-aligning effect:

Note that the property alignment works for images and videos as well!

Other text customizations

Text stimuli can also be modified using HTML tags. The list of tags that are currently accepted are:

• Style formatting:
  • <abbr> and <acronym>: Defines an abbreviation or an acronym. Usually appears with a dotted underline, and a tooltip that expands the abbreviation when hovered over.
  • <b>: Defines bold text.
  • <code>: Defines a piece of computer code, and browsers render this text like this.
  • <em>: Emphasizes text, which is usually rendered as italicized text.
  • <i>: Usually rendered as italicized text.
  • <strong>: Usually rendered as bold text.
• Layout formatting:
  • <blockquote>: Specifies text from another source, and usually is interpreted by browsers as indented text.
  • <p>: Defines a paragraph, which may be rendered with a margin before and after the paragraph.
  • <ol>: Sets up an ordered list using numerical or alphabetical list item headers.
  • <ul>: Sets up an unordered list using bullet points (this list of HTML tags is an example of an unordered list, with each bullet point acting as a list item).
  • <li>: Defines a list item in an ordered (<ol>) or unordered (<ul>) list.

Image stimuli

Change the size of an image

By default, images will be rendered at 100% of their original size. This can be suboptimal since it may extend beyond the trial screen.

Change the size of an image stimulus with the property width using either a percentage (such as 50%) or a pixel value (such as 200px). This retains the original height to width ratio of the image while resizing it.

"pig_stim": {
     "type": "image",
     "content": "pig.jpg",
     "width": "150px"
}

However, if you intentionally want to distort the original height to width ratio of an image, it is possible to simultaneously specify both width and height.

Audio stimuli

Display control buttons so that participants can replay an audio stimulus

By default, audio stimuli are played exactly once in the background, with no visible controls. In some cases, you might want participants to be able to replay an audio stimulus.

This can be achieved simply by setting the property visible of an audio stimulus to true:

"AS1": {
  "type": "audio",
  "visible": true,
  "content": "./bleggin-lapal-fluggit.ogg",
}

This will display a set of browser-dependent audio controls. On Firefox, it looks like this:

Functionally, this works well. But aesthetically, putting the text prompt and the audio controls side by side is less than ideal. Fortunately, FindingFive has a solution to that. Check out the section below on customizing locations for multiple stimuli on the same trial and learn about how to set your own location definitions.

Video stimuli

Changing the size of a video stimulus

The width property allows you to set the size of your video stimulus. (FindingFive will maintain the original aspect ratio of your video, so there’s no need to manually code the height of your video.) If you don’t set the width, FindingFive will display your video at its original size.

Changing a video’s appearance

Should you choose to have a video playing in the background of a trial without being visible, set the visible property to false. (As you might have guessed, the default for whether a video stimulus is visible is true!)

If you want a participant to be able to replay a video after its completion, set the replayable property to true. This will grey-out the completed video and present a button that allows the participant to replay it.

Customizing stimulus location on a trial

Display more than one stimulus on a trial

Normally, if you want to display multiple stimuli on a single trial, you include your stimuli as a nested list in the stimuli definition of the relevant trial template. For example, the following code includes a nested list to display both a text and an image stimulus on the same trial:

"TestTrials": { // "TestTrials" is the name of a trial template
     "type": "basic",
     "stimuli": [["textStim", "imageStim"], "singleStim"],
     "responses": ["R1"],
     "stimulus_pattern": "fixed"
}

When compiled, this trial template will generate two trials, one with two stimuli, and the other with one stimulus singleStim. When multiple stimuli are visible on a single trial, FindingFive automatically arranges them on the screen in a sensible layout. For example, if there are two videos on a single trial, they are displayed side-by-side by default, with the first video displayed to the left and the second video displayed to the right.

Specify custom locations for stimuli

In the example code block from the previous section, "stimuli": ["textStim", "imageStim"]results in textStim and imageStim being automatically displayed side by side.

To specify custom locations for stimuli, we use a dictionary definition instead of a simple list of stimuli. That is, instead of [“textStim”, “imageStim”] in the previous example, we define the property which, which takes the list of stimulus names, and location, where you set the location that corresponds to each stimulus listed in the which property. Here’s an example:

"TestTrials": { // "TestTrials" is the name of a trial template
     "type": "basic",
     "stimuli": [
             {
                "which": ["textStim", "imageStim"],
                "location": [1, 9]
             },
             "singleStim"],
     "responses": ["R1"],
     "stimulus_pattern": "fixed"
}

The stimuli dictionary definition replaces the original nested list, but still serves as an element of the stimuli list.

To understand what “[1,9]” means as the value of location, imagine that there is an evenly-spaced 3×3 grid on the screen underlying the placement of stimuli:

Based on this, setting location to [1,9] means that the first stimulus textStim will be displayed in the top-left corner, and the second stimulus imageStim will be displayed in the bottom-right corner of the screen.

Using the which/location syntax comes in handy when you have many visible stimuli being realized on the screen simultaneously. For example, a trial template that displays two videos along with corresponding text that appears right below each video could use the following syntax:

"tt_vid_plus_text":{
    "type": "basic",
    "stimuli": [{"which": ["vid1", "vid2","vid_text1", "vid_text2"], "location": [4, 6, 7, 9]}]
}

This would result in a display something like this:

For more information on customizing the locations of your stimuli, refer to the Study Specification Grammar documentation.

For more technical details about modifying the appearance of stimuli, see Specifying stimuli in a trial template.

As always, if you have questions, don’t hesitate to contact us at researcher.help@findingfive.com.