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 textlike 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:
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
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.