Basic Tutorial

Learn how to create a picture matching experiment.

note

The Basic and Advanced Tutorials are a learning-by-doing introduction to PCIbex: you’ll learn how to use PCIbex by creating an actual experiment.

If you prefer learning things concept-by-concept, check out the understanding-oriented Core Concepts section!

1. First steps: Background and setting up.
2. Creating elements: How to use elements, the basic unit of a PennController trial.
3. Calling commands: How to manipulate elements with commands.
4. Pausing experiment execution: How to let participants interact with an experiment.
5. Adding experiment details: How to add more details to an experiment.
6. Logging data: How to collect and examine results.
7. Wrapping up: Summary of tutorial, and next steps.

Prerequisites

PennController does not require any background in JavaScript. However, you should have some general knowledge of experimental design.

Objective

In the Basic Tutorial, we’ll create a picture matching experiment with the following structure:

Instructions trial with button to start the experiment
Experimental trial:
1. A sentence plays as audio and unfolds as text on the screen.
2. Two images are printed to the screen next to each other.
3. Participant presses a key to select an image.
4. Trial ends.

Preview the BasicTutorial experiment:

Click to take the experiment

Click to see the final experiment script

// Type code below this line.

// Remove command prefix
PennController.ResetPrefix(null)

// Turn off debugger
DebugOff()

// Instructions
newTrial("instructions",
    defaultText
        .center()
        .print()
    ,
    newText("instructions-1", "Welcome!")
    ,
    newText("instructions-2", "<p>In this experiment, you will hear and read a sentence, and see two images.</p>")
    ,
    newText("instructions-3", "<b>Select the image that better matches the sentence:</b>")
    ,
    newText("instructions-4", "<p>Press the <b>F</b> key to select the image on the left.<br>Press the <b>J</b> key to select the image on the right.</p>")
    ,
    newButton("wait", "Click to start the experiment")
        .center()
        .print()
        .wait()
)

// Experimental trial
newTrial("experimental-trial",
    newAudio("fish-audio", "2fishRoundTank.mp3")
        .play()
    ,
    newText("fish-sentence", "The fish swim in a tank which is perfectly round.")
        .center()
        .unfold(2676)
    ,
    newImage("fish-plural", "2fishRoundTank.png")
        .size(200, 200)
    ,
    newImage("fish-singular", "1fishSquareTank.png")
        .size(200, 200)
    ,
    newCanvas("side-by-side", 450,200)
        .add(  0, 0, getImage("fish-plural"))
        .add(250, 0, getImage("fish-singular"))
        .center()
        .print()
        .log()
    ,
    newKey("keypress", "FJ")
        .log()
        .wait()
    ,
    getAudio("fish-audio")
        .wait("first")
)

Basic Tutorial

Table of contents

Prerequisites

Objective