Creating Stimuli

The backbone of any behavioral experiment are the stimuli. In developing the QRTEngine, our main focus has been on precisely displaying these stimuli at the right time and for the right duration. In this tutorial we hope to give tips & tricks on how to create any stimulus you might need during your experiments.

The QRTEngine, in its most basic form, is simply a piece of code that presents a list of stimuli in sequence to the participant. Stimuli relate directly to ‘questions’ in Qualtrics, and the way the QRTEngine has been built is that (apart from the JavaScript) nothing needs to be changed about the way Questions are made in Qualtrics. In other words, you can keep using the What You See Is What You Get editor Qualtrics provides. Instead of providing a step by step tutorial on how to build specific stimuli, our aim is to provide you with a few references on how to get started learning to build them, and then give Tips & Tricks on how to tackle specific problems.

Getting Started

A good starting point for general learning about making Questions is Qualtrics’ own university page:

http://www.qualtrics.com/university/researchsuite/basic-building/

Especially the tutorials about Piped Text and the Rich Content Editor will be important:

http://www.qualtrics.com/university/researchsuite/basic-building/editing-questions/piped-text/

http://www.qualtrics.com/university/researchsuite/basic-building/editing-questions/rich-content-editor/

Piped Text is the method by which you can make parts of a Question dynamic, ie, based on the value of a certain variable, rather than a static, ‘hard-coded’ value. This allows you, for example, to ask a respondent what his favourite beverage is, and then have a question asking why it’s the respondent’s favourate drink, which has a dynamic component that changes based on which beverage was selected. (The full example is shown in the tutorial).

The Rich Content Editor is basically a Microsoft Word-like interface, which allows you to edit your text to whatever size/colour/font you want, add in pictures, links, etc. etc. The Content Editor generates HTML (The ‘programming’ language of the web), that you can then edit again if the need arises. ALL questions consist of HTML and perhaps some CSS, thus we highly recommend following a tutorial to learn in the ins and outs of building your questions/stimuli with HTML & CSS. It will make you a lot more flexible in which stimuli you’ll be able to create. We think this guide – HTMLDog – is a good starting point, however there’s plenty of other options available.

Tips & Tricks

Tip: Start with the Rich Content Editor

Basically, everytime you create a stimulus from scratch, it’s best to start off with using the Rich Content Editor. We can take some plain text saying ‘Our stimulus’, like below:richcontentbasic

And easily turn it into a large, red, centered, bolded and italicized text:

richcontentadv

 

Tip: Do not be afraid of the HTML View

If we look at the HTML View for the stimulus we just created, we’ll see the following (the HTML has been formatted to look prettier):

Sadly, a Rich Content Editor (RCE) is a fairly dumb piece of software. It does generate HTML that displays your text in the way you want, but does so in a very non-optimized way. Compare the previous with our hand-crafted HTML, that does the same thing:

Regardless, we can still do a lot with the RCE-created HTML through the HTML View. The most important application being able to change the inlineCSS (the part that you can find inside the span/div elements, … style = “… : …”) through piped text. It is especially useful for creating Stroop Task stimuli, an example of which can be seen in our Stroop Task tutorial, which used piped text to change the text and colour of a stimulus based on values contained in the Loop&Merge spreadsheet.

First off, we set up the Loop & Merge spreadsheet. By clicking Block Options -> Loop & Merge… -> Turn on Loop & Merge you can enable Loop & Merge for your block. This will show a spreadsheet, which we will fill like so (enabling randomize loop order in the process):

loopmerge

That is, we will use the first column, field 1, as the ‘text’, and the second column, field 2, as colour, like in the paper tutorial. One line in the Loop & Merge spreadsheet stands for one trial, and thus, as we can see, each combination of the two colours ‘green’ and ‘blue’ will be run through. Our intention is to present the following four Stroop stimuli: Green, Green, Blue and Blue, but how exactly can we achieve that?

The text is rather straight forward, through the Piped Text option, one can select the Loop & Merge field that has to be piped into the Question, resulting in either Green or Blue showing up in the actual Survey. See below:

pipedloopmerge

This will add the text:  ${lm://Field/1}  to the Question text, which is a reference to the first Field/column in the Loop & Merge spreadsheet, which Qualtrics will replace with the current value of that Field (from the current active row) when the browser loads the Survey from Qualtrics’ server. In the stimulus you can see on the background, we have replaced the text ‘Our Stimulus’, of the original HTML, with the ‘${lm://Field/1}’ reference, which is why it shows up red, bolded and italicized. We used the HTML view to change the text, resulting in the following:

Now, the cool thing is that Qualtrics is blind to the actual HTML you made for a Question, it doesn’t care where the Piped Text reference is put, as long as it references a valid variable it will replace the reference with whatever was contained in the referenced variable. In the above example, we have marked the 2nd line. This is where the colour is set and we can use the same trick we used to set the text, to set the colour. Simply replace the line:  <span style="color:#FF0000;"> with  <span style="color:${lm://Field/2}"> .

Note: The color in the original example is the RGB Hexadecimal code for the colour Red. CSS also allows natural language short-hand references to specific often-used colours, such as red and green and blue. For a full list please look here: http://www.w3schools.com/html/html_colornames.asp

If everything went right, you should now have a better understanding of why the original Stroop Task paper works. This way of adjusting Stimuli through piped text offers a lot of flexibility in how you set-up your stimuli. For example, we can build a variant of a Stroop stimulus, now with font-size, rather than colour.

Copy the following into the spreadsheet:

And then use the following HTML for the stimulus:

Instead of making the color variable, we have now made the font-size variable!

Trick: Adding images

Through the Rich Content Editor, one can also add images to Questions, thus use them as Stimuli. Simply open the RCE and click on the ‘Insert Graphic’ button, the one that looks like a small landscape, which will open the Graphic Library. You can upload pictures, or simply select an image that’s already in your library.InsertGraphicLib

We, for example, added the ‘Test’ image to our Question. If we then check out the HTML View, we find the following:

If the browser encounters an ‘img’ element, the ‘src’ of the element is read, loaded and then displayed on the webpage. The url to the image just being a line of text means that you can use the same Piped Text tricks like we did for the Stroop Task earlier, to display different images in different trials. Simply add the url to the Loop & Merge spreadsheet( for example the first column) and then pipe the url into the img element like so:

Note: In order to save bandwidth, browsers tend to aggressively ‘cache’ images. In other words, they store images on the participant’s hard drive, so that these images don’t need to be loaded again. We can make use of this feature in a trial, so that we defer the image loading from during a trial, to pre-trial (where there’s more time). Please read the following tutorial – Finishing up your experiment – to learn how to set up your Survey to make use of the browser’s caching feature.

Conclusion

Our aim was to show a few tips & tricks on how to get stimuli to behave the way you want them to. As always, if you have any questions or have your own tips and/or tricks to add to this guide, we’d love to hear about them at support@qrtengine.com. Thanks for reading!