Basic Tutorial

This tutorial is designed for people who prefer learning by doing. If you prefer to learn concept-by-concept, check out the Core Concepts section. You may find it useful to read both this tutorial and the Core Concepts section.

Goal

In the Basic Tutorial, you’ll learn how to create a simple picture matching experiment with the following structure:

1. Instructions screen with button to start the experiment
2. 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.

// 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")
)

Table of contents

1. Setting up : How to use PennController and the PCIbex Farm.
2. Creating elements : How to use elements, the basic unit of a PennController experiment.
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 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
6. Logging data : How to collect and examine experimental data.
7. Wrapping up : Summary of tutorial, and next steps.

How to follow the tutorial

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Prerequisites

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

In particular, you should be familiar with the following terms and concepts:

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Instruction blocks

Follow the tutorial by completing the tasks in the instructions blocks:

// Lorem ipsum dolor sit amet, consectetur adipiscing elit.