Wisconsin Card Sorting
How to add novel functionality to your Gorilla experiment with just a touch of code

So you want to add a bit of coding magic to your experiment, but don’t know how to begin? We are here to help you get started!

We all know that Gorilla doesn’t require you to know how to code, but sometimes you want to add a little something extra to your experiment. After all, novel research requires novel functionality!

Here at Gorilla we like to describe our platform as extensible. Over 90% of studies run using Gorilla are done with our standard tools, without any coding, but for the remaining 10% that need a little extra something, that’s possible too. Depending on the complexity, you might simply need to add new lines of JavaScript to the Task Builder, or build a participant flow from scratch in our Code Editor.  But isn’t it a relief to know that whatever you need, Gorilla will accommodate your needs?

So how do you get started? We’ve put together a basic introduction to some of the languages you may come across, along with links to some handy resources.

In this article we’ll cover:

  • How HTML and CSS are useful for changing the visual appearance of tasks.
  • How JavaScript and jQuery can be used to store and manipulate variables calculated on the fly.
  • Then how these skills are brought together to extend our questionnaire builder and task builder or to code from scratch in the Gorilla Code Editor.
  • Finally, we know a lot of you love R + RStudio, so we’ll talk you through the amazing resources in Gorilla Academy where Dr Joshua Balsters goes through classic experiments in Gorilla, including their analysis.  It’s a great resource for learning.

HTML & CSS

What it is:

Hypertext Markup Language (HTML) forms the backbone of web site. It’s the language that allows you to structure and navigate pages displayed in a web browser. HTML is complemented by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

CSS – the Cascading Style Sheets – is the language which describes how HTML elements on a page are presented. It is involved with how things look on a page. For an overview of CSS – its usage and advantages, see this Code Republics page.

 

How you can learn

HTML is widely used and is therefore a great starting point for people learning how to code! For a very beginner overview of HTML you can see this free course from Code Republics.

Alternatively, we are big fans of FreeCodeCamp – a free resource for learning programming languages and gaining programming certificates along the way! We believe it’s one of the best resources out there, and it allows you to learn the basics of HTML with fun, interactive examples, and progress to learning HTML’s styling component – CSS.

A useful reference for customising colours of your text written in HTML is the HTML Color Codes website. We love this site as it helps you find the perfect colour, as well as great complementary colours too.

 

How you can use it in Gorilla:

You can use HTML in Gorilla for styling the content of your questionnaires and tasks. When you apply HTML to your Gorilla Tasks and Questionnaires, you can look up the HTML formatting guide on our Support pages. We have also created worked examples on how to use HTML to style your text in Questionnaire widgets and Task Builder zones.

 

JS & jQuery

What JavaScript is:

JavaScript (JS) is a programming language for the Web. JS can dynamically update and change both HTML and CSS. It is a powerful, easy to learn scripting language, widely used for controlling web page behavior.

The most common application of JS on the web is to run on the user’s computer within the browser. You might also come across articles online discussing its use on web servers, however here we will only talk about the type of JS executed on the web browser.

 

How you can learn more:

As always, we would recommend FreeCodeCamp as your go-to course for learning JS from the very beginning up to advanced functions.
Another invaluable resource and a reference that’s worth keeping close to you whenever you are working on web development is the Mozilla Web Developer page. They have excellent courses, documentation and forums that will guide you through building your programming skills and support you with any questions you might have along the way. For an overview of JS and learning resources check out this page.

 

What jQuery is:

Lastly, we would recommend that you familiarise yourself with a bit of jQuery that will make using JavaScript much easier for you. jQuery is a JavaScript Library that focuses on simplifying DOM (Document Object Model) manipulation, AJAX calls, and Event handling (Source). The brief jQuery course on the FreeCodeCamp is very straightforward and should give you a good overview of the jQuery functionality. For more information on jQuery, see its official website: https://jquery.com/.

 

Scripting within Gorilla

Gorilla tools are created with the intention to reduce the need for researchers to learn scripting and program their tasks and questionnaires – this can be a long and complicated process if done from scratch, even for advanced coders! Our team of developers are regularly creating new features that Gorilla users can request through our public Roadmap.

Nevertheless, for those who would like to code and wish to implement some more advanced functionality to their experiments, we have several options:

  • Scripting Widget in the Questionnaire Builder for augmenting questionnaires
  • Scripting Tab in the Task Builder for augmenting tasks
  • Gorilla Code Editor Tool for building your own client side task while still using the Gorilla server, database and participant management tools

These tools allow you to adjust your experiment’s functionality to fulfil your research requirements! Our dev and support teams have put together some excellent walkthroughs to help you get started, whether it’s for a questionnaire or in the task builder. They are also working on regularly adding new scripting samples to our extensive Scripting Library where you can find multiple examples on how you can alter your tasks using bits of code: from changing the colour of your screen and text, to adding background music for your trials, or randomly selecting a number of stimuli from a greater stimuli set!

Gorilla Task Builder Scripts List

Wisconsin Card Sorting

 

All scripting samples in Gorilla are described in details so it’s easy to understand their functionality and adapt them to your own tasks!

 

Scripting Sample

We also have excellent resources for using the Gorilla Code Editor. See these example projects and Code Editor Tutorials.

Code Editor Tutorials and Examples

 

For tracking down the changes and troubleshooting while using the Task Builder Scripting Tools or Code Editor, see our basic Debugging guide.

 

Debugging

 

The resources in this blog will give you a great foundation to start implementing scripts into your experiment, but if you do need more customised help then we do offer a paid Scripting Consultancy service. This gives you direct access to our development team to create your script or task to your requirements. Another great option is to connect with other Gorilla users on our Facebook Community – they’re a great group of people who are always happy to share hints and tips!

 

Bonus! R + RStudio

You may have heard about R, a programming language which many researchers are now using for data analysis. RStudio is an integrated environment that will help you write and edit R script.

R is different to the other languages mentioned in this blog, as it won’t be used for creating your Gorilla experiment. However once you have data from your experiment you may wish to use R to analyse your data. It’s a very commonly used language in both academia and industry, so it’s a great skill to learn!

We’ve got some wonderful resources on our support pages to help you get started with R, as well as some amazing walkthroughs with Dr Joshua Balsters on Gorilla Academy.  If you’ve wondered how to process large amount of data into the shape you need for easy analysis (i.e. long form to short form) then these resources are for you!

Data Processing

 

Meet Ferenc

The talented and generous Ferenc Igali – Lead Technician at Sheffield School of Education – has been busy this year creating a whole host of tremendously useful examples of how to extend the Task Builder for student at the University of Sheffield as well as user requests in the Gorilla Facebook Group.  You can find and use his brilliant examples from Gorilla Open Materials, under Sheffield EduTech Collections Page.

Ferenc is also the chair of ATSIP (The Association of Technical Staff in Psychology). If you are a technician at your university – then check it out! It’s an astonishingly generous organisation with a tremendous annual conference. #TechniciansMatter

Klaudia Stanoch

Klaudia completed a BSc in Cognitive and Clinical Neuroscience at the University of Westminster and a MSc in Neuroscience at the Institute of Psychiatry, Psychology and Neuroscience, King’s College London. She’ll often be found helping users via the Gorilla Support desk, creating new samples and support documentation pages, or delivering our Gorilla Studio consultancy projects.