Your first step into pro­gram­ming online exper­i­ments.
Many exper­i­men­tal psy­chol­o­gists want to learn to code.  Favourite lan­guages are JavaScript, R, Python and MATLAB.  But why do so many researchers spend the time learn­ing to script when they could use experiment builders?

Do they actu­al­ly want to be Research Soft­ware Engi­neers?  Or are there other reasons?

There are many good reasons to learn to code:

• With a tiny bit of pro­gram­ming knowl­edge, you can auto­mate simple tedious tasks.  Rename all those image stimuli?  Done!
• Han­dling vast amounts of data is pos­si­ble in Excel, but can be much easier in R.  And by build­ing a code-based data pipeline, you can set up your analy­sis in advance and simply press go.  No copy-paste errors.  And auditable, repro­ducible data analy­sis. Yay!
• Some­times novel research needs com­plete­ly novel func­tion­al­i­ty, and code is perfect for getting you exactly what you want. Extend a survey by script­ing. Add JavaScript to a Ques­tion­naire. All is possible!
• And — for some — it’s just plain fun!

So there are good reasons to learn to code, but it’s impor­tant not to get sucked into an activ­i­ty that’s a time sink.  It’s impor­tant to deploy your time to best effect.
That’s the purpose of this webinar.  It gives an intro­duc­tion to JavaScript for Exper­i­men­tal Psy­chol­o­gists and other Behav­iour­al Scientists.

While there are many general learn­ing resources out there, most of them are unhelp­ful­ly abstract. It’s often easier to learn this kind of skill by apply­ing it to a spe­cif­ic purpose.For that reason, we created this webinar to teach JavaScript to Exper­i­men­tal Psy­chol­o­gists by using a spe­cif­ic task as an example. We use the Script tab in the Gorilla Task Builder, but it’s useful for a broader audi­ence too, whether you’re coding in JS from scratch or using a library like jsPsych.

What You’ll Learn:

• JavaScript basics that provide a useful intro to the lan­guage, and to coding con­cepts across languages
• How to write a Task Builder script that picks a ran­domised subset of trials from the spread­sheet to show to the participant
• Strate­gies for diag­nos­ing and fixing prob­lems in your code

The Task Builder tool has a very flex­i­ble GUI, but script­ing makes it more flex­i­ble still.  The webinar will give you the skills you need to effec­tive­ly use our Task Builder Script­ing Exam­ples Library, enabling you to do things like:

• con­trol­ling the appear­ance of your task
• apply­ing complex con­di­tions to how trials progress
• cus­tomis­ing how par­tic­i­pants’ respons­es are scored

Below is a handy glos­sary of the con­cepts covered in the webinar. You can also view the Open Mate­ri­als page to access all the mate­ri­als. Feel free to clone them and follow along, or use them in your own projects!

The Script­ing Webinar:

JavaScript for Behavioral Scientists

Ready to get your feet wet? Here are some con­cepts (and expla­na­tions!) behavioral sci­en­tists use when pro­gram­ming their experiments.

JavaScript Basics

• comment: A comment is a note to self, not inter­pret­ed as code. Com­ments in JavaScript start with //
• console.log(): The command for print­ing some­thing to the console. What­ev­er you put inside the paren­the­ses () will be printed as output, helping you see what’s going on inside your code.
• semi­colon: Each state­ment in JavaScript needs to end with a semi­colon ; This is the simple version of the rule — read more at this handy guide from Codecademy.
• vari­able: You can think of a vari­able like an x, y or z in algebra — it’s a name that stands for a par­tic­u­lar value.
• vari­able (declar­ing): To declare a vari­able, use the keyword var and then give it a name, e.g. var myNumber.
• vari­able (assign­ing): To assign a value to a vari­able, type the name of the vari­able, a single equals sign, and the value you want to assign, e.g.

  myNum­ber = 5;

  = means ‘Assign the value on the right to the vari­able on the left’.

• number: A type of vari­able in JavaScript, con­sist­ing of a whole or decimal number.
• string: A type of vari­able in JavaScript, con­sist­ing of text char­ac­ters. Strings are enclosed within either single ” or double “” quotes.
• Boolean: A type of vari­able in JavaScript which can take on one of two values: true or false.
• if state­ment: Used to check if the value of a vari­able meets certain con­di­tions, and execute code depend­ing on whether or not those con­di­tions are met. The syntax of an if state­ment is:

  if (con­di­tion) {code to be exe­cut­ed if con­di­tion is true} else {code to be exe­cut­ed if con­di­tion is false}

• logical oper­a­tors: Used to eval­u­ate whether the value of a vari­able meets certain con­di­tions. Common logical oper­a­tors are:

  == (is equal to)
  != (is not equal to)
  < (is less than)
  <= (is less than or equal to)
  > (is more than)
  >= (is more than or equal to)

   

  Note that unlike the single equals sign, these oper­a­tors do not change the value of the vari­ables they are used with — they are just for check­ing if the value meets a condition.

• array: A type of vari­able in JavaScript, con­sist­ing of a list of ele­ments. Ele­ments can be numbers, strings, Boolean values, vari­ables, other arrays, or pretty much any­thing. An array is enclosed within square brack­ets []. The spread­sheet in the Gorilla Task Builder is rep­re­sent­ed as an array of rows.
• array.push: The method used to add new ele­ments to the end of an array. For example, myArray.push(2) would add the number 2 to the end of myArray.
• array.length: The length of an array (i.e. the number of ele­ments it contains).
• index­ing: Each element in an array can be accessed via its posi­tion or index, indi­cat­ed by a number enclosed in square brack­ets imme­di­ate­ly after the name of the array. Count­ing in JavaScript starts from 0, so to access the first element in the array myArray, you would use myArray[0].
• for loop: A block of code that runs repeat­ed­ly. To set up a for loop, declare a count­ing vari­able (con­ven­tion­al­ly called i) and tell JavaScript three things: 1) what value you want the count­ing vari­able to start at, e.g. 0, 2) the con­di­tion under which you want the code to con­tin­ue repeat­ing, e.g. for as long as the count­ing vari­able is less than 5, and 3) what you want to happen to the count­ing vari­able each time the code repeats, e.g. increase by 1. The syntax of a for loop is:

  for (declare count­ing vari­able and assign start­ing value; con­di­tion under which loop should con­tin­ue; change to count­ing vari­able on each iter­a­tion) {code to repeat}

  For example, the fol­low­ing for loop would go through the array myArray and print each element to the console:

  for (var i=0; i < myArray.length; i++) {
  console.log(myArray[i]);
  }

Script­ing in the Task Builder

• Hooks: Hooks are places in the Task Builder’s func­tion­al­i­ty where you can insert your own JavaScript code. Each Hook is exe­cut­ed at a dif­fer­ent time in the pro­gres­sion of the task. For example, the post­ProcessSpread­sheet Hook runs after Gorilla has exe­cut­ed its ran­domi­sa­tion of the spread­sheet, but before the task starts. The first step in writing a Task Builder script is to work out which Hook(s) you will need to use depend­ing on what your script is going to do: What Hook Should I Use (and How)?

  Impor­tant­ly, each script can only have one instance of each Hook, con­tain­ing every­thing that you want to happen at this point in the Task Builder’s func­tion­al­i­ty. If you try to define mul­ti­ple ver­sions of the same Hook within a script, they will over­write each other!

• spread­sheet: The spread­sheet in the Task Builder is rep­re­sent­ed as an array of rows. Each row is a JavaScript object where each column is rep­re­sent­ed as a prop­er­ty.

  You can access the spread­sheet from within any of the Task Builder Hooks using the vari­able name spread­sheet. For example, to access the ‘display’ column in the first row of the spread­sheet, you would use: spreadsheet[0].display

Debug­ging strate­gies and resources

• console: You can open the console in the browser using the menu or key­board short­cuts — see our Debug­ging Guide for more infor­ma­tion. Here, you can view any error mes­sages gen­er­at­ed by your script. You can also use console.log in your script to print any vari­ables to the console to check their contents. |
• brack­ets: Mis­matched open and close brack­ets can really mess up your code. To check all your opening brack­ets have match­ing close brack­ets, copy and paste the entire Hook from your script into a code editor that has brack­ets high­light­ing (such as Replit or Visual Studio Code).

  Start by check­ing the final close brack­ets match the initial opening brack­ets; if they don’t, find where the code thinks they match, and use that as a guide to where close brack­ets might be missing. |

• JSHint: JSHint is a tool that helps you detect errors in your JavaScript code. Copy and paste your code into the page to gen­er­ate a report high­light­ing any poten­tial problems.