Wisconsin Card Sorting
How to add novel func­tion­al­i­ty to your Gorilla exper­i­ment with just a touch of code

So you want to add a bit of cod­ing magic to your exper­i­ment, 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 some­times you want to add a lit­tle some­thing extra to your exper­i­ment. After all, novel research requires novel functionality!

Here at Gorilla we like to describe our plat­form as exten­si­ble. Over 90% of stud­ies run using Gorilla are done with our stan­dard tools, with­out any cod­ing, but for the remain­ing 10% that need a lit­tle extra some­thing, that’s pos­si­ble too. Depend­ing on the com­plex­i­ty, you might sim­ply need to add new lines of JavaScript to the Task Builder, or build a par­tic­i­pant flow from scratch in our Code Edi­tor.  But isn’t it a relief to know that what­ev­er you need, Gorilla will accom­mo­date your needs?

So how do you get start­ed? We’ve put togeth­er a basic intro­duc­tion to some of the lan­guages you may come across, along with links to some handy resources.

In this arti­cle we’ll cover:

  • How HTML and CSS are use­ful for chang­ing the visu­al appear­ance of tasks.
  • How JavaScript and jQuery can be used to store and manip­u­late vari­ables cal­cu­lat­ed on the fly.
  • Then how these skills are brought togeth­er to extend our ques­tion­naire builder and task builder or to code from scratch in the Gorilla Code Editor.
  • Final­ly, we know a lot of you love R + RStu­dio, so we’ll talk you through the amaz­ing resources in Gorilla Acad­e­my where Dr Joshua Bal­sters goes through clas­sic exper­i­ments in Gorilla, includ­ing their analy­sis.  It’s a great resource for learning.

HTML & CSS

What it is:

Hyper­text Markup Lan­guage (HTML) forms the back­bone of web site. It’s the lan­guage that allows you to struc­ture and nav­i­gate pages dis­played in a web brows­er. HTML is com­ple­ment­ed by tech­nolo­gies such as Cas­cad­ing Style Sheets (CSS) and script­ing lan­guages such as JavaScript.

CSS — the Cas­cad­ing Style Sheets — is the lan­guage which describes how HTML ele­ments on a page are pre­sent­ed. It is involved with how things look on a page. For an overview of CSS — its usage and advan­tages, see this Code Republics page.

 

How you can learn

HTML is wide­ly used and is there­fore a great start­ing point for peo­ple learn­ing how to code! For a very begin­ner overview of HTML you can see this free course from Code Republics.

Alter­na­tive­ly, we are big fans of FreeCode­Camp — a free resource for learn­ing pro­gram­ming lan­guages and gain­ing pro­gram­ming cer­tifi­cates 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, inter­ac­tive exam­ples, and progress to learn­ing HTML’s styling com­po­nent — CSS.

A use­ful ref­er­ence for cus­tomis­ing colours of your text writ­ten in HTML is the HTML Color Codes web­site. We love this site as it helps you find the per­fect colour, as well as great com­ple­men­tary colours too.

 

How you can use it in Gorilla:

You can use HTML in Gorilla for styling the con­tent of your ques­tion­naires and tasks. When you apply HTML to your Gorilla Tasks and Ques­tion­naires, you can look up the HTML for­mat­ting guide on our Sup­port pages. We have also cre­at­ed worked exam­ples on how to use HTML to style your text in Ques­tion­naire wid­gets and Task Builder zones.

 

JS & jQuery

What JavaScript is:

JavaScript (JS) is a pro­gram­ming lan­guage for the Web. JS can dynam­i­cal­ly update and change both HTML and CSS. It is a pow­er­ful, easy to learn script­ing lan­guage, wide­ly used for con­trol­ling web page behavior.

The most com­mon appli­ca­tion of JS on the web is to run on the user’s com­put­er with­in the brows­er. You might also come across arti­cles online dis­cussing its use on web servers, how­ev­er here we will only talk about the type of JS exe­cut­ed on the web browser.

 

How you can learn more:

As always, we would rec­om­mend FreeCode­Camp as your go-to course for learn­ing JS from the very begin­ning up to advanced func­tions.
Anoth­er invalu­able resource and a ref­er­ence that’s worth keep­ing close to you when­ev­er you are work­ing on web devel­op­ment is the Mozil­la Web Devel­op­er page. They have excel­lent cours­es, doc­u­men­ta­tion and forums that will guide you through build­ing your pro­gram­ming skills and sup­port you with any ques­tions you might have along the way. For an overview of JS and learn­ing resources check out this page.

 

What jQuery is:

Last­ly, we would rec­om­mend that you famil­iarise your­self with a bit of jQuery that will make using JavaScript much eas­i­er for you. jQuery is a JavaScript Library that focus­es on sim­pli­fy­ing DOM (Doc­u­ment Object Model) manip­u­la­tion, AJAX calls, and Event han­dling (Source). The brief jQuery course on the FreeCode­Camp is very straight­for­ward and should give you a good overview of the jQuery func­tion­al­i­ty. For more infor­ma­tion on jQuery, see its offi­cial web­site: https://jquery.com/.

 

Script­ing with­in Gorilla

Gorilla tools are cre­at­ed with the inten­tion to reduce the need for researchers to learn script­ing and pro­gram their tasks and ques­tion­naires — this can be a long and com­pli­cat­ed process if done from scratch, even for advanced coders! Our team of devel­op­ers are reg­u­lar­ly cre­at­ing new fea­tures that Gorilla users can request through our pub­lic Roadmap.

Nev­er­the­less, for those who would like to code and wish to imple­ment some more advanced func­tion­al­i­ty to their exper­i­ments, we have sev­er­al options:

  • Script­ing Wid­get in the Ques­tion­naire Builder for aug­ment­ing questionnaires
  • Script­ing Tab in the Task Builder for aug­ment­ing tasks
  • Gorilla Code Edi­tor Tool for build­ing your own client side task while still using the Gorilla serv­er, data­base and par­tic­i­pant man­age­ment tools

These tools allow you to adjust your experiment’s func­tion­al­i­ty to ful­fil your research require­ments! Our dev and sup­port teams have put togeth­er some excel­lent walk­throughs to help you get start­ed, whether it’s for a ques­tion­naire or in the task builder. They are also work­ing on reg­u­lar­ly adding new script­ing sam­ples to our exten­sive Script­ing Library where you can find mul­ti­ple exam­ples on how you can alter your tasks using bits of code: from chang­ing the colour of your screen and text, to adding back­ground music for your tri­als, or ran­dom­ly select­ing a num­ber of stim­uli from a greater stim­uli set!

Gorilla Task Builder Scripts List

Wisconsin Card Sorting

 

All script­ing sam­ples in Gorilla are described in details so it’s easy to under­stand their func­tion­al­i­ty and adapt them to your own tasks!

 

Scripting Sample

We also have excel­lent resources for using the Gorilla Code Edi­tor. See these exam­ple projects and Code Edi­tor Tuto­ri­als.

Code Editor Tutorials and Examples

 

For track­ing down the changes and trou­bleshoot­ing while using the Task Builder Script­ing Tools or Code Edi­tor, see our basic Debug­ging guide.

 

Debugging

 

The resources in this blog will give you a great foun­da­tion to start imple­ment­ing scripts into your exper­i­ment, but if you do need more cus­tomised help then we do offer a paid Script­ing Con­sul­tan­cy ser­vice. This gives you direct access to our devel­op­ment team to cre­ate your script or task to your require­ments. Anoth­er great option is to con­nect with other Gorilla users on our Face­book Com­mu­ni­ty — they’re a great group of peo­ple who are always happy to share hints and tips!

 

Bonus! R + RStudio

You may have heard about R, a pro­gram­ming lan­guage which many researchers are now using for data analy­sis. RStu­dio is an inte­grat­ed envi­ron­ment that will help you write and edit R script.

R is dif­fer­ent to the other lan­guages men­tioned in this blog, as it won’t be used for cre­at­ing your Gorilla exper­i­ment. How­ev­er once you have data from your exper­i­ment you may wish to use R to analyse your data. It’s a very com­mon­ly used lan­guage in both acad­e­mia and indus­try, so it’s a great skill to learn!

We’ve got some won­der­ful resources on our sup­port pages to help you get start­ed with R, as well as some amaz­ing walk­throughs with Dr Joshua Bal­sters on Gorilla Acad­e­my.  If you’ve won­dered how to process large amount of data into the shape you need for easy analy­sis (i.e. long form to short form) then these resources are for you!

Data Processing

 

Meet Fer­enc

The tal­ent­ed and gen­er­ous Fer­enc Igali — Lead Tech­ni­cian at Sheffield School of Edu­ca­tion — has been busy this year cre­at­ing a whole host of tremen­dous­ly use­ful exam­ples of how to extend the Task Builder for stu­dent at the Uni­ver­si­ty of Sheffield as well as user requests in the Gorilla Face­book Group.  You can find and use his bril­liant exam­ples from Gorilla Open Mate­ri­als, under Sheffield EduTech Col­lec­tions Page.

Fer­enc is also the chair of ATSIP (The Asso­ci­a­tion of Tech­ni­cal Staff in Psy­chol­o­gy). If you are a tech­ni­cian at your uni­ver­si­ty — then check it out! It’s an aston­ish­ing­ly gen­er­ous organ­i­sa­tion with a tremen­dous annu­al con­fer­ence. #Tech­ni­cians­Mat­ter

Klau­dia Stanoch

Klau­dia com­plet­ed a BSc in Cog­ni­tive and Clin­i­cal Neu­ro­science at the Uni­ver­si­ty of West­min­ster and a MSc in Neu­ro­science at the Insti­tute of Psy­chi­a­try, Psy­chol­o­gy and Neu­ro­science, King’s Col­lege Lon­don. She’ll often be found help­ing users via the Gorilla Sup­port desk, cre­at­ing new sam­ples and sup­port doc­u­men­ta­tion pages, or deliv­er­ing our Gorilla Stu­dio con­sul­tan­cy projects.