Sample experiment: Priming Design

NOTE: this page assumes you are familiar with notions covered in this page and this page.

Next: How to use a spreadsheet

Setup

Create a new experiment on Ibex. Click on Update from git repo and enter the following URL: https://github.com/PennController/Tutorial.git, then enter priming-design (all lower case, simple dash) in the branch/revision box and click on the Sync button. You should see a confirmation message appear below the button, reading Success: N file modified. If you don’t see the message, try clicking again. If it still does not work, reload your Ibex page and try again.

Warning: whenever you click on Sync, the file example_data gets erased and reverts back to the code in the Basics section below.

Basics

OK, so now we know how to build simple trials. But the design of a full experiment usually consists of more than one screen where to click a button or type a word. Let us consider a priming design: we want our participants to report how warm they perceive a color after picking between two color patches.

To start with, what we want is simply create one trial of each type. The code below combines and adapts some code from the Picture selection page and from the page Rating scale page.

Note: In order to have the PennController functions available, keep working on one of the experiments you created, but copy and paste the code below to replace the full content of example_data.js. (Creating a new experiment without importing the PennController files from Github will not work!)

PennController.ResetPrefix(null);
PennController.AddHost("http://files.lab.florianschwarz.net/ibexfiles/PennController/SampleTrials/");

// Picture selection trial
PennController(
    defaultImage
        .settings.size(200, 200)
    ,
    newText("test sentence", "Which patch is greener?")
        .print()
    ,
    newCanvas("patches", 500, 200)
        .settings.add(   0, 0, newImage("color1", "green1.png") )   // Embedded image creation
        .settings.add( 300, 0, newImage("color2", "green2.png") )   // Embedded image creation
        .print()
    ,
    newSelector("patch")
        .settings.add( getImage("color1") , getImage("color2") )
        .wait()
);

PennController(
    newText("green", "To me the color green is...")
    ,
    newScale("judgment",    "cold", "cool", "lukewarm", "warm", "hot")
        .settings.labelsPosition("top")
        .settings.before( getText("green") )
        .settings.size("auto")  // Use max width for each cell (here, lukewarm's cell's width)
        .print()
        .wait()
);

More trials

This is nice, but our priming design won’t be much informative if we have but one trial of each type. Let’s add a second pair of trials: we simply duplicate what we already have, append it to the end and bring minimal changes.

PennController.ResetPrefix(null);
PennController.AddHost("http://files.lab.florianschwarz.net/ibexfiles/PennController/SampleTrials/");

// Picture selection trial (GREEN)
PennController(
    defaultImage
        .settings.size(200, 200)
    ,
    newText("test sentence", "Which patch is greener?")
        .print()
    ,
    newCanvas("patches", 500, 200)
        .settings.add(   0, 0, newImage("color1", "green1.png") )
        .settings.add( 300, 0, newImage("color2", "green2.png") )
        .print()
    ,
    newSelector("patch")
        .settings.add( getImage("color1") , getImage("color2") )
        .wait()
);

// Rating trial (GREEN)
PennController(
    newText("green", "To me the color green is...")
    ,
    newScale("judgment",    "cold", "cool", "lukewarm", "warm", "hot")
        .settings.labelsPosition("top")
        .settings.before( getText("green") )
        .settings.size("auto")
        .print()
        .wait()
);

// Picture selection trial (PURPLE)
PennController(
    defaultImage
        .settings.size(200, 200)
    ,
    newText("test sentence", "Which patch is purpler?")
        .print()
    ,
    newCanvas("patches", 500, 200)
        .settings.add(   0, 0, newImage("color1", "purple1.png") )
        .settings.add( 300, 0, newImage("color2", "purple2.png") )
        .print()
    ,
    newSelector("patch")
        .settings.add( getImage("color1") , getImage("color2") )
        .wait()
);

// Rating trial (PURPLE)
PennController(
    newText("purple", "To me the color purple is...")
    ,
    newScale("judgment",    "cold", "cool", "lukewarm", "warm", "hot")
        .settings.labelsPosition("top")
        .settings.before( getText("purple") )
        .settings.size("auto")
        .print()
        .wait()
);

Trial order

Good, but what if we want to ask our participants to do both picture selection trials first and both rating trials at the end? We could re-order our trials in our items variable, but there is a much simpler way of doing it. We just need to use different labels for each trial type, and refer to them inside the PennController.Sequence command, like this:

 // First run all the trials labeled 'picture,' then run all the trials labeled 'rating'
PennController.Sequence( "picture" , "rating" );
PennController.ResetPrefix(null);
PennController.AddHost("http://files.lab.florianschwarz.net/ibexfiles/PennController/SampleTrials/");

// Picture selection trial (GREEN)
PennController( "picture" ,
    defaultImage
        .settings.size(200, 200)
    ,
    newText("test sentence", "Which patch is greener?")
        .print()
    ,
    newCanvas("patches", 500, 200)
        .settings.add(   0, 0, newImage("color1", "green1.png") )
        .settings.add( 300, 0, newImage("color2", "green2.png") )
        .print()
    ,
    newSelector("patch")
        .settings.add( getImage("color1") , getImage("color2") )
        .wait()
);

// Rating trial (GREEN)
PennController( "rating" ,
    newText("green", "To me the color green is...")
    ,
    newScale("judgment",    "cold", "cool", "lukewarm", "warm", "hot")
        .settings.labelsPosition("top")
        .settings.before( getText("green") )
        .settings.size("auto")
        .print()
        .wait()
);

// Picture selection trial (PURPLE)
PennController( "picture" ,
    defaultImage
        .settings.size(200, 200)
    ,
    newText("test sentence", "Which patch is purpler?")
        .print()
    ,
    newCanvas("patches", 500, 200)
        .settings.add(   0, 0, newImage("color1", "purple1.png") )
        .settings.add( 300, 0, newImage("color2", "purple2.png") )
        .print()
    ,
    newSelector("patch")
        .settings.add( getImage("color1") , getImage("color2") )
        .wait()
);

// Rating trial (PURPLE)
PennController( "rating" ,
    newText("purple", "To me the color purple is...")
    ,
    newScale("judgment",    "cold", "cool", "lukewarm", "warm", "hot")
        .settings.labelsPosition("top")
        .settings.before( getText("purple") )
        .settings.size("auto")
        .print()
        .wait()
);

Now that we have conveniently labeled our trial types, we can even use the randomize function to present the trials within each type-sequence in a random order:

 // randomize runs all the labeled trials in a random order
PennController.Sequence( randomize("picture") , randomize("rating") );

(The rest of the code is not reported here for brevity, as nothing else needs to be modified)

Next

Our script is getting a little long, and we only have 4 trials so far. Yet, in order to get anything of interest with our priming design, we probably want more trials than that, maybe 10 of each.

At this point, it is smart to start using a spreadsheet to design our experiments, which will provide the values for the variable elements in each trial: the dialogue lines for the rating trials, and the sentence for the input trials.