Your first step into programming online experiments.
Many experimental psychologists want to learn to code. Favourite languages are JavaScript, R, Python and MATLAB. But why do so many researchers spend the time learning to script when they could use experiment builders?
Do they actually want to be Research Software Engineers? Or are there other reasons?
There are many good reasons to learn to code:
- With a tiny bit of programming knowledge, you can automate simple tedious tasks. Rename all those image stimuli? Done!
- Handling vast amounts of data is possible in Excel, but can be much easier in R. And by building a code-based data pipeline, you can set up your analysis in advance and simply press go. No copy-paste errors. And auditable, reproducible data analysis. Yay!
- Sometimes novel research needs completely novel functionality, and code is perfect for getting you exactly what you want. Extend a survey by scripting. Add JavaScript to a Questionnaire. All is possible!
- And — for some — it’s just plain fun!
So there are good reasons to learn to code, but it’s important not to get sucked into an activity that’s a time sink. It’s important to deploy your time to best effect.
That’s the purpose of this webinar. It gives an introduction to JavaScript for Experimental Psychologists and other Behavioural Scientists.
While there are many general learning resources out there, most of them are unhelpfully abstract. It’s often easier to learn this kind of skill by applying it to a specific purpose.For that reason, we created this webinar to teach JavaScript to Experimental Psychologists by using a specific task as an example. We use the Script tab in the Gorilla Task Builder, but it’s useful for a broader audience 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 language, and to coding concepts across languages
- How to write a Task Builder script that picks a randomised subset of trials from the spreadsheet to show to the participant
- Strategies for diagnosing and fixing problems in your code
The Task Builder tool has a very flexible GUI, but scripting makes it more flexible still. The webinar will give you the skills you need to effectively use our Task Builder Scripting Examples Library, enabling you to do things like:
- controlling the appearance of your task
- applying complex conditions to how trials progress
- customising how participants’ responses are scored
Below is a handy glossary of the concepts covered in the webinar. You can also view the Open Materials page to access all the materials. Feel free to clone them and follow along, or use them in your own projects!
The Scripting Webinar:
JavaScript for Behavioral Scientists
Ready to get your feet wet? Here are some concepts (and explanations!) behavioral scientists use when programming their experiments.
JavaScript Basics
- comment: A comment is a note to self, not interpreted as code. Comments in JavaScript start with //
- console.log(): The command for printing something to the console. Whatever you put inside the parentheses () will be printed as output, helping you see what’s going on inside your code.
- semicolon: Each statement in JavaScript needs to end with a semicolon ; This is the simple version of the rule — read more at this handy guide from Codecademy.
- variable: You can think of a variable like an x, y or z in algebra — it’s a name that stands for a particular value.
- variable (declaring): To declare a variable, use the keyword var and then give it a name, e.g. var myNumber.
- variable (assigning): To assign a value to a variable, type the name of the variable, a single equals sign, and the value you want to assign, e.g.
myNumber = 5;
= means ‘Assign the value on the right to the variable on the left’.
- number: A type of variable in JavaScript, consisting of a whole or decimal number.
- string: A type of variable in JavaScript, consisting of text characters. Strings are enclosed within either single ” or double “” quotes.
- Boolean: A type of variable in JavaScript which can take on one of two values: true or false.
- if statement: Used to check if the value of a variable meets certain conditions, and execute code depending on whether or not those conditions are met. The syntax of an if statement is:
if (condition) {code to be executed if condition is true} else {code to be executed if condition is false}
- logical operators: Used to evaluate whether the value of a variable meets certain conditions. Common logical operators 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 operators do not change the value of the variables they are used with — they are just for checking if the value meets a condition.
- array: A type of variable in JavaScript, consisting of a list of elements. Elements can be numbers, strings, Boolean values, variables, other arrays, or pretty much anything. An array is enclosed within square brackets []. The spreadsheet in the Gorilla Task Builder is represented as an array of rows.
- array.push: The method used to add new elements 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 elements it contains).
- indexing: Each element in an array can be accessed via its position or index, indicated by a number enclosed in square brackets immediately after the name of the array. Counting 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 repeatedly. To set up a for loop, declare a counting variable (conventionally called i) and tell JavaScript three things: 1) what value you want the counting variable to start at, e.g. 0, 2) the condition under which you want the code to continue repeating, e.g. for as long as the counting variable is less than 5, and 3) what you want to happen to the counting variable each time the code repeats, e.g. increase by 1. The syntax of a for loop is:
for (declare counting variable and assign starting value; condition under which loop should continue; change to counting variable on each iteration) {code to repeat}
For example, the following 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]);
}
Scripting in the Task Builder
- Hooks: Hooks are places in the Task Builder’s functionality where you can insert your own JavaScript code. Each Hook is executed at a different time in the progression of the task. For example, the postProcessSpreadsheet Hook runs after Gorilla has executed its randomisation of the spreadsheet, 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 depending on what your script is going to do: What Hook Should I Use (and How)?
Importantly, each script can only have one instance of each Hook, containing everything that you want to happen at this point in the Task Builder’s functionality. If you try to define multiple versions of the same Hook within a script, they will overwrite each other!
- spreadsheet: The spreadsheet in the Task Builder is represented as an array of rows. Each row is a JavaScript object where each column is represented as a property.
You can access the spreadsheet from within any of the Task Builder Hooks using the variable name spreadsheet. For example, to access the ‘display’ column in the first row of the spreadsheet, you would use: spreadsheet[0].display
Debugging strategies and resources
- console: You can open the console in the browser using the menu or keyboard shortcuts — see our Debugging Guide for more information. Here, you can view any error messages generated by your script. You can also use console.log in your script to print any variables to the console to check their contents. |
- brackets: Mismatched open and close brackets can really mess up your code. To check all your opening brackets have matching close brackets, copy and paste the entire Hook from your script into a code editor that has brackets highlighting (such as Replit or Visual Studio Code).
Start by checking the final close brackets match the initial opening brackets; if they don’t, find where the code thinks they match, and use that as a guide to where close brackets 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 generate a report highlighting any potential problems.