Adjusting the appearance of stimuli

Text stimuli

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

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”, “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 HTML font size units such as “px” or “em”.

"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:



The property "alignment" works for images as well.

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 (note the lack of quotes on true):

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

which 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 Specify custom locations for multiple stimuli on the same trial to learn about how to position multiple visible stimuli on the same trial.

Presenting multiple stimuli on the same trial

Display more than one stimulus on a trial

To display multiple stimuli on a single trial, include your stimuli as a nested list in the "stimuli" property 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".

Specify custom locations for multiple stimuli on the same trial

When multiple stimuli are visible on a single trial, FindingFive arranges them in a sensible layout by default. It is possible to change this default layout using the following method.

Normally, the "stimuli" property within the definition of a trial template accepts a list of stimulus names. Displaying multiple stimuli on a single trial is achieved by using a nested list, such as in the example shown in the code block in the above section: ["textStim", "imageStim"]. If you preview your study, you’ll discover that those two stimuli are displayed side by side.

To specify custom locations for multiple stimuli, we use a dictionary instead of a simple list. That is, instead of ["textStim", "imageStim"], we write

     "which": ["textStim", "imageStim"],
     "location": [1, 9]

In the larger context of the trial template, here is what it should look like:

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

That is, the entire dictionary replaces the original nested list, but still serves as an element of the "stimuli" list.

To understand what the [1, 9] means as the value of "location", imagine that there is a 3x3 grid underlying the placement of stimuli:

1 2 3
4 5 6
7 8 9

which leads to the intuitive conclusion that [1,9] means placing the first stimulus "textStim" in the top-left corner, and the second stimulus "imageStim" in the bottom-right corner of the screen.


Custom location works for single-stimulus trials as well! For example, {"which": ["textStim"], "location": [3]} would place the stimulus in the top-right corner of a trial.

For more technical details, see Specifying stimuli in a trial template.