Sheffield EduTech Collections Page

Tasks created for use by students at the University of Sheffield, School of Education mainly but anyone is welcome and free to utilise the tasks/adaptations on here as they are open for all. Any questions, please refer to f.igali@sheffield.ac.uk

The Open Materials page here is available to all and will generally provide, where possible, useful standards and questionnaires.

Please note, for ease of use and to get classes used to the Open Materials repo - we will ocassionally be using samples on here from within Gorilla that we will then edit, work on and use to collect data with (rather than using the collaborate or sending functions as we will be discussing changes together during practical sessions and we will make overarching edits together in the session) so ocassionally, edited versions of samples targeted specifically for research and students in the MSc for their practical work will appear here.

References are provided within the version history of each task.

Ferenc regularly puts requests by the Gorilla Community Facebook Group up as scripted examples in here - these are all meant to be utilised by making sure you read the commented code and that you check the parts that you need to change for it to work for your code. Ferenc can provide limited support for the integration of these tasks into your experiment and the preferred method is the Facebook group if you have any questions so that answers can be seen by the rest of the community and made searchable - however, if you are not comfortable with or do not use social media, email is second best. Any questions or bugs will be updated and if you are not on Facebook, Ferenc will update the group with a note to say the example has been updated so people are aware in case they also make use of it.

If you're looking for a specific task, we suggest using the search function in your browser by pressing 'CTRL + F', and entering the name of the task/questionnaire you're searching for.

Tasks/questionnaires can be added to the library within your own account using the 'clone' button.

We have endeavoured to gain permission, where possible, to host these tasks and questionnaires. If you believe we are hosting something improperly, please let us know.

All examples and code you are using at your own risk

Some code examples are more complete than others (ie some put .on('click'...) event on but don't remove it as they are to demonstrate singular bits of code. I will be moving to a standardised format for my code examples from September but as I've been filling out requests from the community, I've had to do them in a bit of a rush but will be working from templates for future code examples, including screenshots more frequently to assist in search. I will also be adopting a template that once Gorilla releases updated GOM tools, I will revise previous versions of task to use for the description.

Back to Open Materials


Template Information Sheet and Consent Form

Template and example information sheet and consent form for students in the School of Education, at the University of Sheffield.

Text is only placeholder - please clone this into your own experiments and update the text as necessary.

Creative Commons Attribution (CC BY)


Level 1 - Spelling Game - Phaser Example

An example of utilising a HTML5 game engine for playing games on Gorilla - in this case, we utilise the Phaser3 platformer tutorial to build a spelling game (this is the first level of many). It has sound, there is a tutorial in another version.

This is all built in the code editor - the code is fairly rough and needs commenting, but as an example, it shows what you can do utilising HTML5 game engines. I picked Phaser3 as it seemed to be one of the most lightweight ones to build from.

This is just one level of a number for a study around gamification, learning performance in children, assessment and emotion.

Creative Commons Attribution (CC BY)


Primacy and Recency Task

Taken from the samples produced for Gorilla - one that we are going to modify and use in the MSc practicals.

Gorilla Open Materials Attribution-NonCommerical Research-Only


Cloned from the Primacy and Recency sample available on the Samples on Gorilla.


Stroop Task

Taken from the samples produced for Gorilla - one that we are going to modify and use in the MSc practicals.

Gorilla Open Materials Attribution-NonCommerical Research-Only


Cloned from the Stroop sample available on the Samples on Gorilla.


Thatcher Task

Taken from the samples produced for Gorilla - one that we are going to modify and use in the MSc practicals.

Gorilla Open Materials Attribution-NonCommerical Research-Only


Cloned from the Thatcher sample available on the Samples on Gorilla.


Dichotic Listening Task

Classic dichotic listening paradigm from Koch et al (2011) - shortened for demonstration purposes.

Selective attention task - male and female voices say the digits 1-9 with the exclusion of five. Participants are told to attend to one of the voices in a cueing screen before the sound is played.

Creative Commons Attribution (CC BY)


Koch, I., Lawo, F., Fels, J. & Vorlaender, M. (2011). Switching in the Cocktail Party: Exploring Intentional Control of Auditory Selective Attention. Journal of Experimental Psychology: HPP, 37, 1140 - 1147


Dichotic Listening Task Experiment

Gorilla Open Materials Attribution-NonCommerical Research-Only


Primacy And Recency Experiment

Gorilla Open Materials Attribution-NonCommerical Research-Only


Stroop Task Experiment

Gorilla Open Materials Attribution-NonCommerical Research-Only


Cross Colour

Basic example of how to use inline CSS to change the fixation cross colour.

Creative Commons Attribution (CC BY)


Image Ranking Questionnaire Example

Shows how to manipulate the data-attribute selector to select items with unique data IDs (ie what you put in as answers, split by commas into a ranking questionnaire) to make the text transparent and to then utilise a background image. You lose element of responsiveness (ie resizing for all screen sizes) but basically we are just looking for data-id attribute on the page and then selecting it, and then setting a background image.

Creative Commons Attribution (CC BY)


Custom Ranking Order Items Using Embedded Data

Custom ranking order items based on embedded data.

I utilise the inline scripting because the script widget fires too late in the page for it to be useful.

Current delimiter is a comma - please change the inline script if you get your participants to use anything else. This fully requires your participants to adaquately separate your items with a set delimiter and not make a typing error.

Creative Commons Attribution (CC BY)


HTML Data Save

This is an example of saving data from a HTML zone utilising the Gorilla API and Gorilla's 'Hooks'

Creative Commons Attribution (CC BY)


Progress Task Image Changer

This shows how to change the background image of the progress bar as well as to have an icon below it that moves along with the last known position of the bar based on it's width value using the Bootstrap Progress bar that is utilised by Gorilla.

Creative Commons Attribution (CC BY)


Progress Task Image Changer - Icon Overlay On Bar

Same as the progress image changer - this overlays an icon over the bar, sets the height of the current progress bar to 0 so that it's just the icon over the bar.

Creative Commons Attribution (CC BY)


Time Entry Widget Example

An example of how to store the current local time in hours and minutes using the standard time entry widget - this will overwrite any participant input and just take the local time (similar to the timestamp you get in the Gorilla data - if needed for whatever reason). It also stores it in embedded data in case you need to call it later in the experiment.

Creative Commons Attribution (CC BY)


Questionnaire Timer - setTimeoutExample

This is an example of how to use a timer for questionnaire.

Please note - a few things:

This uses gorilla.finish() to end the node early. This won't save any data unless we tell it to explicitly store it. In my example, I store every answer I need to embedded data, I retrieve it when the timer is up and then I store it using gorilla.metric.

You need to store every question to embedded data and then save it to the metric - so you need one variable per embedded data and then you need one metric call per data you want to save.

You will lose any data on the current page with this as I haven't written any code to retrieve values from that page - ie if a participant is on page 3 of 10, and they're 10 items into a 15 item questionnaire on page 3, you will not have those items saved as they will not be in the current embedded data state till the participant hits the 'next' button on that page.

The timer is in milliseconds and uses the setTimeout() function - you can also utilise setInterval() if you'd like to not end early but do something on every interval.

And finally, if your participant doesn't close the last page or move to the next node in the experiment before the timer is up - for example, if your participant is 5 seconds away from the timer being up when they complete the questionnaire, then the timer will still expire and you might get two sets of data (one saved by Gorilla on final page with thank you and you will get an ENDQUESTIONNAIRE bit after that, and then one saved by the timer). In your analysis, you will just need to stop at the endquestions mark if this happens - the data will just be a duplicate. This will only happen if this is the final node and the participant leaves the thank you page up during the exhaustion of the timer.

Creative Commons Attribution (CC BY)


Response Button Trigger Sound

This is a fairly complicated one - it allows for response buttons to trigger a sound to play. It does not, however, allow them to be used to either record responses (as they will be recorded as always having fired in the trial). Please read the instructions and the code carefully.

This is the definition of an over-engineered solution - but this should only be if you can't use audio zones for whatever reason. Audio zones are the easiest and in Gorilla way of doing this - you could put text or images next to them if needs be.

If you need to use response zones, for whatever reason, this is a solution - it is not the easiest one.

This relies on finding buttons by finding the class .fullsize.buttonName per each of your buttons.

Creative Commons Attribution (CC BY)


Video - Unhide Buttons Example

This script based task hides elements that are not a video using Jquery's toggle function - each element has to be found and selected based on the type of zones you are using. An element is created in code by using jquery to find the element - you then hide it.

This allows you to hide items on a screen till a video ends for example - it uses the 'ended' parameter of the video tag / the MediaElement.

There is another version which uses a single firing timer, using setTimeout() available as well.

Will not work on before IE9 as a browser

Creative Commons Attribution (CC BY)


Video - Unhide Buttons Example - With Timer

This script based task hides elements that are not a video using Jquery's toggle function - each element has to be found and selected based on the type of zones you are using. An element is created in code by using jquery to find the element - you then hide it.

This allows you to hide items on a screen till a the timer fires.

This is the version which uses a single firing timer, using setTimeout().

Will not work on before IE9 as a browser

Creative Commons Attribution (CC BY)


Response Button Trigger Sound - Spreadsheet Stimuli Version

This is a fairly complicated one - it allows for response buttons to trigger a sound to play. It does not, however, allow them to be used to either record responses (as they will be recorded as always having fired in the trial). Please read the instructions and the code carefully.

This is the definition of an over-engineered solution - but this should only be if you can't use audio zones for whatever reason. Audio zones are the easiest and in Gorilla way of doing this - you could put text or images next to them if needs be.

If you need to use response zones, for whatever reason, this is a solution - it is not the easiest one.

This relies on finding buttons by finding the class .fullsize.buttonName per each of your buttons.

This version draws stimuli from a spreadsheet rather than being defined in code per trial - it looks for a trial named 'Task', screenIndex of 0 (ie the first screen) and then draws the stimuli names from there by going to that row and going to two columns. Please see code and spreadsheet example

Creative Commons Attribution (CC BY)


Collapsible GDPR Notice Example

This an example of a collapsible box that can expand where you can store more information in a sort of 'read more' type example. I've used a fake GDPR notice (note, there is literally nothing about GDPR contained in the example, it's just got some mindless text).

This one will work on modern browsers and even on touchscreen/mobile devices when people press the box to expand.

Creative Commons Attribution (CC BY)


Previous Row Randomised Example

How to access pre and post randomised spreadsheets using different hooks.

Creative Commons Attribution (CC BY)


BART - Updated Version

Balloon analogue risk task - updated version. Original credit goes to: https://gorilla.sc/openmaterials/65968

This was taken from an older Qualtrics script and adapted by the original author and I have updated it on request.

This version has a current number of pumps and current potential earnings, it also has some updated text/buttons and is now 5 points per round, not 1. It has sounds.

This also has Fisher Yates shuffle algorithmn to shuffle the explosion_array, ie the number of pumps it will take to explode per trial.

License is based on underlying license from previous example.

Gorilla Open Materials Attribution-NonCommerical Research-Only


Using CSS to Make Task Screen Scrollable

Be careful with this example.

Uses CSS to take all elements that you add in the task builder, in sequential order that you add them, strips them of their positioning, makes a scrollable container and then you have a scrollable element to utilise.

Warning - this adds, dynamically, to the head tag for Gorilla - this can effect other pages in your task/other parts of your node. If you use this, please look over the example carefully and make sure you test thoroughly - and make sure that you remove from any subsequent screens. What style I add, I add with an ID, I then remove that ID in the next screen. This is critical

This was created as an example - you can do much more with the CSS inside, but this is a base example. If you need space between the elements, either utilise CSS or just add in some text/HTML zones with br/coded line breaks in them.

Creative Commons Attribution (CC BY)


CSS - Task Builder Scrolling Window - Slider Example

Be careful with this example.

Uses CSS to take all elements that you add in the task builder, in sequential order that you add them, strips them of their positioning, makes a scrollable container and then you have a scrollable element to utilise.

Warning - this adds, dynamically, to the head tag for Gorilla - this can effect other pages in your task/other parts of your node. If you use this, please look over the example carefully and make sure you test thoroughly - and make sure that you remove from any subsequent screens. What style I add, I add with an ID, I then remove that ID in the next screen. This is critical

This was created as an example - you can do much more with the CSS inside, but this is a base example. If you need space between the elements, either utilise CSS or just add in some text/HTML zones with br/coded line breaks in them.

This particular example shows you how to float left and right values for a slider but this can be for anything inside this scrollable window.

Creative Commons Attribution (CC BY)


Slider Value Event Listener - Play Audio File On Trigger

This example shows how to add in something that listens for slider changes and then reacts to that - in this case, it plays audio based on the slider change. This example makes up audio URLs and grabs them from your stimuli - so it works on the principle that we will take sliderValue and put it together with a base name and a file type - such as 'audio_sliderValue.fileType' <> 'audio_1.wav'.

This will fire whenever two conditions are met: the slider is changing value and the audio is not currently playing.

You could do all sorts - set audio markers between 0 and 10 to only play 1 audio, set 100 different audios into an array and then use array[index] to call that particular one by passing in sliderValue as index and so on. This just shows how to constantly grab/listen for any slider value change.

If you have more than one slider on screen, you will need to find a different way to grab the slider that you want - this example only works with one slider on screen without any change to the code.

Creative Commons Attribution (CC BY)


Fullwidth Video Example

This example overrides the regular CSS styling and makes the one video element you have present on screen fulwidth (depending on height of your original video and aspect ratio, it will try to cover as much height as well). It takes both the overlay that Gorilla puts over the video and the video itself and makes it fullscreen.

It makes the blackground black - you can change this all in the script editor.

It is attached to the resize function which is called everytime the window is resized, so regardless of size, it will apply this styling.

Please ensure you don't put in any buttons or anything - the video will cover the whole screen. If you wanted to use things like buttons overlaid, you'd have to bring them up using a timer and CSS, and move them forward in the z-stack (ie what appears in front of/behind what).

The second screen code which resets the CSS is very important - if you do not do this, styling for all of your zones will be affected.

Creative Commons Attribution (CC BY)


Fullwidth Gorilla Task Builder Example - 2 Video Example

What this version does is make the task layout editor basically be fullscreen instead of just contained in central columns on the page - in this example, using the task layout editor, videos are put at either side of the screen (but in reality, you can do this with any zones. This makes the Gorilla frame take up 100% of the browser width).

This will break if your participant resizes their screen during the experiment so it's highly recommend to force them to go fullscreen to do your experiment if you wish to use this approach. This only applies the sizing when the initial screen size is set.

Another option would be to apply the CSS to the on resize function using JQuery so that it does it for resizes, however the problem for that is then removing it (that would work in a single node setup - ie if you had this node on it's own and the participant then had to go a new page for a new node so you could add in constant resizing - but I would argue that participants shouldn't be changing browser size during an experiment!).

If you'd like more information about using JQuery to attach this CSS code to every change of screen size, please contact me on my email.

Creative Commons Attribution (CC BY)


Categorical Perception Task

This task was made from a practical run by University of York - this is just the Gorilla-fied version of this task. This is a categorical perception task based on two continua - it shows participants their performance at the end.

This task contains a JS library external library loaded from a CDN to show performance at the end - the code for this is available in the script tab for the task builder.

Creative Commons Attribution (CC BY)


Saving From Multiple Text Entry Fields

This example shows you how to grab multiple text entry field values and display them in the task builder to a participant on the next screen. The logic will work for other types of inputs on the task builder screen - it is all about calling the correct element to grab the value from.

Creative Commons Attribution (CC BY)


Slider Icons - Flexbox Version

This adds 3 icons (but can be used for unlimited icons as long as sizing is changed/handled/added) into a slider icon bar that sits above a named zone that we name in the zone editor.

This example uses Flexbox - it should work on most modern displays/browsers and at most device display sizes but please test it thoroughly.

Creative Commons Attribution (CC BY)


Slider Tooltip Colour Change

This shows how you to change the CSS of a dynamically created item that may not be able to be affected in the onScreenStart hook.

This compliments the changing colour of zones - this is for dynamically created items. In this case, we add to the master CSS by adding our own style text.

It is hugely important that for it not to affect the rest of your study, you remove the css once you don't need it by using .remove() as demo'd in the script. As we are adding to the master CSS for that session, any changes could affect more of your tasks/questionnaires as Gorilla loads/reloads a page and based on caching so it is important to put in an explicit call to remove.

Creative Commons Attribution (CC BY)


Canvas Painter Alternate With Keys

This is like the functionality canvas painter but you use arrow keys to draw on instead. Code in this instance, is taken from a Stackoverflow answer about drawing to a Canvas element.

Image is loaded in from stimuli and drawn to a Canvas element, on which line is drawn using context.

Currently this does not save anything - you could use an onScreenFinish hook to save lastX/lastY (you'd have to make a global variable to pass between hooks)

Creative Commons Attribution (CC BY)


HTML Data Save - Radio Buttons

Same as the other HTML data save - this one is with radio buttons instead of a checkbox in the Task Builder and all the radio buttons are the same class so you can only select one option as opposed to multiple.

In this example, I put the HTML inside a rich text zone so that Gorilla takes care of the styling and positioning - if you use a HTML zone, you will have to apply some of your own css (you could just make a blank rich text zone that you append your HTML zone to for easy styling/responsive moving).

Creative Commons Attribution (CC BY)


HTML Data Save - Radio Buttons - Randomised Spreadsheet Edition

This is an expanded version of the HTML data save one - redesigned for pulling from randomised spreadsheets and slightly updated HTML and new JS code to update labels and values from spreadsheet.

Creative Commons Attribution (CC BY)


Changing The Colours of Zones

This shows you how to change the background colour /font-colour (but this method can be used to change any CSS property) for a zone.

This relies on you naming your zones with a unique name if you want to do individual colours, or referring to the class in CSS if you want to select all of one type of zone for that page to recolour.

Update - this now has examples for a range of Gorilla zones - including the slider which is created after onScreenStart fires so needs to be handled elsewhere (in this example, it's using a HTML zone and using style tags, but can also be done by adding to stylesheet.

Creative Commons Attribution (CC BY)


Redirect Based On Likert Scale Response

This example will redirect based on the response given in a Likert scale zone to a new screen.

Creative Commons Attribution (CC BY)


Placeholder Text Entry Change

This is an example where if someone rates a sentence above 4, they go onto a new trial. However, if they rate the sentence below 4, it takes them to a screen where they have to enter a paraphrase of a sentence and the placeholder text attribute of the text entry area is first enabled, and then taken from a spreadsheet prompt.

Creative Commons Attribution (CC BY)


Feedbacked Based On Reaction Time By Trial

This allows you to show (using the Feedback zone) different feedbacks on the same screen - correct or incorrect, based on reaction time. This uses the isCorrect hook in Gorilla to check against an active response.

Creative Commons Attribution (CC BY)


Drag and Drop Horizontal Images In Task Builder

This is an example of a drag and drop task in Task Builder using images called from the spreadsheet. It utilises Flexbox so will not work on before IE9 or older browsers. This version does not work on mobile. There is a separate version using TouchPunch.

The images in this case should resize/be responsive.

For this example, it is important to read the code and to update the number of images - it automatically calculates width based on the number of images you have so it is important for the script.

The images get pulled in from the spreadsheet but you have to define how many images you want with the .append() command in the script - in this case, I have 3 images loaded into stimuli but I use 5 to display for the example.

Edit - this has now been updated for multiple trials to allow saving over more than one trial.

Creative Commons Attribution (CC BY)


Drag and Drop Horizontal Images - Mobile Version

This is an example of a drag and drop task in Task Builder using images called from the spreadsheet. It utilises Flexbox so will not work on before IE9 or older browsers. This version does works only on mobile - on a desktop, it will double up mouse events.

This uses a js file that you will need in your own project - it's the touchpunch js file that is attached as a stimuli to this project. This is what makes the events on mobile work.

The images in this case should resize/be responsive.

For this example, it is important to read the code and to update the number of images - it automatically calculates width based on the number of images you have so it is important for the script.

The images get pulled in from the spreadsheet but you have to define how many images you want with the .append() command in the script - in this case, I have 3 images loaded into stimuli but I use 5 to display for the example.

TouchPunch will not always work on future versions of JQuery and this example will not work endlessly into the future as JQuery is updated/deprecated. This is currently working in 2020, but please make sure you test it with a touch device if you intend for your participants to take part by using mobile devices.

This has been updated for saving multiple trials now.

Creative Commons Attribution (CC BY)


Drag and Drop Horizontal Images In Task Builder - Save on Every Move

This is an example of a drag and drop task in Task Builder using images called from the spreadsheet. It utilises Flexbox so will not work on before IE9 or older browsers. This version does not work on mobile. There is a separate version using TouchPunch.

The images in this case should resize/be responsive.

For this example, it is important to read the code and to update the number of images - it automatically calculates width based on the number of images you have so it is important for the script.

The images get pulled in from the spreadsheet but you have to define how many images you want with the .append() command in the script - in this case, I have 3 images loaded into stimuli but I use 5 to display for the example.

Edit - this has now been updated for multiple trials to allow saving over more than one trial.

This also saves on every trial now for every change of position instead of just at the end.

Creative Commons Attribution (CC BY)


Date Entry Widget - Disable Option Values

This shows you how to disable a part of a particular element by using the disable attribute - in this case, it's to disable the year selector in the date entry widget. It means that it cannot be changed and won't save any values for that part of your entry (ie this won't save the year in the date, just the day and month).

There are two ways of referring doing this in questionnaire builder:

If you want to disable part of a specific date entry widget (or any type of entry), use the name attribute to find that item

If you want to disable parts of all specific data entry widgets (or any type of entry), use the class name to select all versions of that.

This script contains both examples so you can pick whichever one is most approriate for you.

Creative Commons Attribution (CC BY)


Spacebar Correct Percentage Example With Timeout (Unlimited Responses)

Scripted way of showing percentage of correct responses, using spreadsheet to determine expected response and including timeouts as correct responses.

You can save the percentage correct or the correct counter as embedded data or as a metric for analysis purposes (not included on this script but it would use the gorilla.store() - if you wanted to save it as a metric, you would use gorilla.metric() - please refer to the support documentation for how to utilise these if you are unfamiliar).

This version has been updated to allow unlimited responses.

This version has been specifically made for unlimited responses so that the presentation time of each task is the same, regardless of participant response - so when using this, make sure you copy the zone settings from the page

Creative Commons Attribution (CC BY)


HTML Data Save - Radio Buttons - Randomised Spreadsheet Edition - Next Disabled Till Choice

This is an expanded version of the HTML data save one - redesigned for pulling from randomised spreadsheets and slightly updated HTML and new JS code to update labels and values from spreadsheet. This has the next button disabled till a choice is made.

Creative Commons Attribution (CC BY)


Date Entry Widget - Remove Future Values

This gets the current year and removes all future years from the year option widget in the questionnaire builder. Please see the rich text element for instructions on setup.

Creative Commons Attribution (CC BY)


Conditional Redirect Based On Image Response Buttons

This takes the input of image response buttons and uses them to pick a screen to redirect to, using the onScreenRedirect hook in Gorilla.

Creative Commons Attribution (CC BY)


2AFC With ITI Every X Trials

This is an example of a 2AFC task (two buttons to choose from) with an ITI added in every 3 trials based on a request from the Gorilla community group. This is done using the onScreenRedirect hook.

The numbers are easily modifiable and the script is commented - please pay attention to the names of the displays, the names of the screen and their position, as well as the time limit for the ITI screen which is set in the Zone Layout Editor.

Creative Commons Attribution (CC BY)


Color Wheel Picker - Based on Iro.JS

This is a colour wheel JS library that is based on Iro.js - it allows for your respondents to choose on a colour wheel (including with saturation and other available parameters from Iro.js), a specific colour.

It supports RGB, Hex and HSL values.

It will only work on modern browsers - the JS file that is needed is included, so in current versions/deployments, it will work.

Please see Iro.js documentation for more information.

Iro.JS has a MPL2 license.

This example was specifically picked to avoid a longer process for making a Canvas element for a colour wheel.

Creative Commons Attribution-NonCommercial (CC BY-NC)


Complex Randomisation

This is an example for a fairly complex randomisation using manipulations.

This is by request from Karen Golden from the Gorilla Community Facebook group - essentially, 3 written passages that can either be in the first, second or third person.

In this example, we use manipulations to select the column that we want (and we do counterbalancing of the views in the columns rather than using a node - the number of columns could potentially be shortened by using a counterbalance node - but then there are problems around working the logical view orders out).

In the columns, A B C are the three passages, and _1, _2, 3 are the 1st/2nd/3rd person versions of them.

So A_1 would be - first passage, first person. A_2 would be first passage, 2nd person and so on.

The three rounds themselves are irrelevant - they are just here to physically hold 3 spreadsheets in (the three spreadsheet manipulations will already change up the order). This example will require careful post processing of the data to extract what stimuli they saw.

The example is easy to use as all 3 included tasks use different spreadsheets - just go into each spreadsheet, download, and replace A_1 to C_3 with your 3x3 stimuli.

This example will need at least 36 participants to see all possible view orders. As this uses a counterbalance node, which goes through this list without replacement, it means that until 36 participants are hit, you will not get a repeating view order at all.

Normally, if we had 9 stimuli, we'd have 9! ways of presenting it, which would lead to thousands of presentations. There is obviously additional restraints here (as in, they can't see both A_1 and B_1, or A_1 and B_1 and C_3) so that significantly reduces the number of views, down to 36 that are needed.

Creative Commons Attribution (CC BY)


Vertical Dynamic Slider with Custom Labels

This version of the slider is vertical, with custom icons at either end. Please note, you may need to adjust CSS properties in the script based on your requirements.

This is an example of a dynamically created slider after destroying the one that Gorilla puts in (the height of the original div is set to the size for the original slider so depending on how you want to display this, you may need to adjust the size of the parent container). This example is taken from: https://gorilla.sc/support/script-samples#overview

The original code was made/written by Gorilla - I have made some edits.

These are to make the slider vertical in the slider parameters (adding it in after the fact using .attr, .prop or any other way doesn't work gracefully and can cause problems so better to just add it during creation).

This particular version takes icons from the spreadsheet - but it can also just be hardcoded if you have a particular set of icons you want at either end.

The slider sits 'between' the two icons (it slightly goes under the icons) but it does allow easy reach and control to reach min/max. If you'd like more distance between slider and icons (for UX reasons for your participants), increase the offset and decrease the height of the slider track.

There is a set of two lines which ask about the preferred icon height/width in pixels - if you wish to change this from pixels to another unit, please add that into the two divs that are created. For img tags, HTML 5 just automatically interprets 'height' and 'width' in pixels unless stated otherwise. The offset is also calculated in pixels - so if you change this, please remember to change this as well.

This particular example does not have responsive resizing of the icons - ie if a participant increases their viewport height, the icons do not get bigger - if that is something that is requested, I could add a listener for changing size (but in reality, your participants should not be changing their browser size - beyond maybe starting in almost full screen and then pressing the fullscreen button as the most likely use case).

Gorilla Open Materials Attribution-NonCommerical Research-Only


Hide Cursor

This example uses scripting to hide the cursor on a specific screen during the Gorilla experiment - useful for visual experiments. Please make sure that you warn participants before use and that you re-enable it (as well as letting your pts know about keyboard shortcuts if they wish to exit your experiment early - either by tabbing out or providing keyboard combinations for browsers to exit tabs).

It is your responsibility to ensure that you treat this with respect - it is incredibly frustrating to have your cursor hidden on a page and participants can think it has happened across multiple browsers or across their entire system (especially if you make the experiment go full screen). Please ensure you let your participants know that it is only for the tab containing your experiment and make sure that you allow them a way to exit (either check for a keyboard event or tell them how to exit using keyboard combinations). I bear no responsibility for you mis-using this script

This specific example launches directly into the one page task that hides your cursor - if you are previewing, please note the instructions on the screen for how to tab out.

Also please note, your cursor is not DISABLED, it is just hidden. If you tab off the webpage, it will appear again.

Creative Commons Attribution (CC BY)


Randomise Screens

This is a request from the Gorilla FB group - it randomises all screens past the initial one in a trial and does so based on a given distribution. This example also shows how to randomly sample screens.

This particular example has 4 screens that are 'trial' screens, one that is an ITI, and a starting screen.

What it does is that, from the first screen, it then picks from a randomised array of screens named after the 4 trial screens - it puts in an ITI screen in between every trial screen.

This particular example does this for 60 trials - it is all automatic, so once it has run it's course, it will then end the example.

Creative Commons Attribution (CC BY)


Hide and Unhide Buttons Based on Mouse Event

This examples unhides two buttons on screen that are present below an image zone based on a mousedown event in JQuery (a left click). To hide them, you can reverse the code.

If the intention is to hide or unhide based on last state, you could do a check to see if last state is hidden, if yes then make unhidden, and vice versa. You can utilise this example to either hide, unhide or hide/unhide based on previous state.

You can utilise any of the other mouse/events from JQuery (or regular JS) - examples are here:

https://www.w3schools.com/jquery/jquery_ref_events.asp https://www.w3schools.com/jsref/obj_mouseevent.asp

You can use any type of event - keyboard input, mouse event or anything from the JQuery events, to follow this logic.

This example was requested through Twitter.

This version has 500ms wait before unhiding (there is a setTimeout inside the mousedown event).

Creative Commons Attribution (CC BY)


Indent Questionnaire Example

This example shows you how to indent questions in the questionnaire builder - this is done using a script in a rich text widget. Please read the instructions carefully in it for usage.

Creative Commons Attribution (CC BY)


On Hover Effect Logging

This example shows you how to record from a mouse event in JQuery - in this case, it logs the order of two on hover effects (which is mouse enter/leave bound together).

This example just logs the name of the two stimuli from the spreadsheet that are utilised for the hover effect - the logic will work for any on hover effect or any other mouse event.

Please note, as this relies on a mouse entering a zone - this will not work on touch devices (as you can't really 'hover' on a touch device with your finger).

Creative Commons Attribution (CC BY)


Prefill Response Text Entry Zone

This shows you how to prefill a text entry zone with a response using a few lines in script - it takes the text from the spreadsheet for that row.

Creative Commons Attribution (CC BY)


Save Stimuli For Reuse Based on Slider Rating

This example saves stimuli based on a slider rating and then reuses it (in this example, it is image stimuli) to then redisplay them in the experiment to the participant. For this example, image needs to be rated as 2 or 8 for it to save otherwise will leave blank trials. Can put in placeholders, averaged stimuli or anything for fallback in case participant doesn't pick 2 or 8 - just add required conditional statement.

Creative Commons Attribution (CC BY)


Hide Questionnaire Example

This example allows you to hide/unhide any question on questionnaire using the response key attribute - you can do this on a group basis or on a question by question basis. So this makes future questions dependent on answers to previous ones.

Please note, the function accepts any of the following events: propertychange, change, click, keyup, input, paste. If you don't want one of these to trigger (for example, clicking on the question should not trigger showing the other related questions, please just remove click from the list).

Creative Commons Attribution (CC BY)


Check Input On Questionnaire

This checks to see if your input in a response text field is a number - it will not allow any characters to be added in. It will only accept numbers as input. Please read script for notes on usage.

Creative Commons Attribution (CC BY)


Scale - Likert Script Example For Making Text Auto Default To Lowest Value

This takes over from the auto function and if text is overflowing in a box, it will resize that particular box. It is set to resize to 11px - it can be set to be dynamic (to resize from last position) or to a lower value. This is just for the questionnaire builder.

Creative Commons Attribution (CC BY)


Set Likert Scale To Fixed Width In Task Builder

This shows you how to set the buttons in the Likert scale (passive) in task builder based on the zone name to a set width.

Please note, this is not a recommended script or behaviour - you can run into any number of issues considering device, screen and even browser differences (for example, someone may have a screen that's 1000px wide but only open the browser to 200px - so if you set your scale to be a certain width, that'll go offscreen for them) - not to mention issues of overlapping on smaller screens (the width resizing automatically helps other elements on screen not be overlapped by having this at a fixed width). If you are setting this at a fixed width, try to have no other elements on screen where possible - this is by request and is for a specific use case.

Creative Commons Attribution (CC BY)


Prompt Correct Answer - Image Buttons

Using scripting, this displays an arrow over the correct image from a set of image response buttons. The logic is searching for our stimuli name from a spreadsheet and finding the button that has that and then adding in the arrow below it (which is added from stimuli).

Creative Commons Attribution (CC BY)


Reusing Stimuli Based on Rating In Future Nodes

This experiment shows you how to save to embedded data the choice of a participant's stimuli based on their rating and to reuse that in a future node.

The data is saved globally, so rather than using embedded data, you could retrieve it from the global storage for that participant but the example shows how to retrieve from embedded data specifically - in case you wish to make any manipulations or changes to it.

This is done by the future nodes having all stimuli uploaded to it and then utilising the embedded data variable to 'find it' from that node's stimuli list rather than saving the stimuli itself.

Creative Commons Attribution (CC BY)


Highlight Missing Answers - Questionnaire Script - Background Colour Change V2

This will highlight missing answers for the widgets that make sense - there is a rich text widget with the script for this contained within the Questionnaire.

This particular version makes a colour change of the items you miss and their background. Please see screenshot or preview for example.

This will not work on mobile devices - this is because it is looking for the mouse to enter the next button with a mouseover event. As the next button already has an ajaxCall bound to it that fires, it's difficult to place a listener alongside that would fire first (ie there's no way to do this functionality currently without putting this type of check directly into the continue button source code).

This also relies on modern browsers - it will not work in say IE 9 <.

There is another version that takes the Gorilla 'Please complete this field message' and changes it to 'This field has been left blank' - and allows you to progress without any issues (it will just display and highlight to the participant that the field is blank).

The script from the first rich text widget needs to be on every page of your questionnaire - it won't persist by itself.

Creative Commons Attribution (CC BY)


Highlight Missing Answers - Questionnaire Script - Gorilla Message Adapted V2

This will highlight missing answers for the widgets that make sense - there is a rich text widget with the script for this contained within the Questionnaire.

There is version that takes the Gorilla 'Please complete this field message' and changes it to 'This field has been left blank' - and allows you to progress without any issues (it will just display and highlight to the participant that the field is blank). Please see screenshot or try a preview.

This will not work on mobile devices - this is because it is looking for the mouse to enter the next button with a mouseover event. As the next button already has an ajaxCall bound to it that fires, it's difficult to place a listener alongside that would fire first (ie there's no way to do this functionality currently without putting this type of check directly into the continue button source code).

This also relies on modern browsers - it will not work in say IE 9 <.

There is another particular version that makes a colour change of the items you miss and their background.

The script from the first rich text widget needs to be on every page of your questionnaire - it won't persist by itself.

Creative Commons Attribution (CC BY)


Move Stimuli Directionally Using Arrow Keys

This will allow you to move a zone around the screen using the arrow keys based on the zone name you give in the layout editor.

A few caveats:

  1. It does not allow holding down the arrow key. There is a very good reason for this - if you hold down the arrow key, you can shoot an image off screen very easily before you check to see if it's reached the edge of the screen (it will execute the key presses quicker then you can check).

This will mean that your participant can 'lose' stimuli, meaning they may not be able to complete your task.

If you don't want this behaviour, you can remove the if statement that looks at if the key event is repeating, but I strongly encourage you NOT to do this.

  1. It has boundaries - remember, Gorilla, as part of it's responsive sizing maintains a few central columns for presentation using Bootstrap in the center of the screen. It goes from top to bottom of the screen, but the sides are limited. I've done some crude calculations to have offsets on either side to stop the participant being able to 'fully' push the stimuli of screen. If you would like the ability for these to go off screen more or less, just adjust the boundaries within the key checks statement.

  2. This will obviously not work on mobile - this is not a drag and drop touch event, this is for keypresses ONLY.

Creative Commons Attribution (CC BY)


Mean Response Time And Standard Deviation

This example calculates mean response time from participants answers for a section and calculates the standard deviation from it, to utilise in a Timelimit Screen later in the task.

If you want to use the timing in a different task, just use gorilla.store() and gorilla.retrieve() to save the value to embedded data and to recall in the new task (and write to your new spreadsheet column for the new timer for the new task).

Creative Commons Attribution (CC BY)


Self-Paced Listening Task

This is a straightforward example of a self paced listening task - no scripting or coding. Just requires space to advance to next sound, sound drawn from spreadsheet.

Creative Commons Attribution (CC BY)


Increase Likert Scale Size

This shows you how to increase the Likert Scale size in Task builder (both passive and active). This uses scripting, so please read the comments in the script tab carefully.

Creative Commons Attribution (CC BY)


Big 5 Personality TIPI - Show Personality Type On Next Page

This is an extension to the Big 5 Personality TIPI sample that the Gorilla team built - this version shows the highest scoring personality type on the next page using the raw scores stored by the questionnaire's scripting.

Creative Commons Attribution (CC BY)


X Answers Per Trial

This shows you how to wait for 2 (or more) keypresses per trial. This uses the Gorilla single keyboard response - all the keys you want to be available need to be available as zones.

Creative Commons Attribution (CC BY)


Align Radio Buttons - Right to Left

This example shows you how to use the CSS direction property to align groupings right to left. This example is designed for radio buttons in the questionnaire builder.

Creative Commons Attribution (CC BY)


Big 5 Personality TIPI - Show Personality Scores On Next Page

This shows the rating from the Big 5 personality questionnaire on the 2nd page using embedded data - you can swap the ratings out for the scores by replacing the gorilla.retrieve().

Creative Commons Attribution (CC BY)


Questionnaire Slider To Embedded Data

This shows you how to save data from a questionnaire slider based on the key response to embedded data.

Creative Commons Attribution (CC BY)


Reset Progress Bar Per Block

This shows you how to reset the progress bar in a task builder task per block - it breaks progress bar use in the rest of the task not in blocks, so you need to set individual progress for each display.

Creative Commons Attribution (CC BY)


Scenario Changer From Spreadsheet Example

This is a straightforward example that draws a text from a cell in the spreadsheet to present with two questions on each page - based on the Liebowitz social anxiety scale.

Creative Commons Attribution (CC BY)


Align Checklist Questionnaire Widget

This example shows you how to use the CSS direction property to align groupings right to left. This example is designed for checklist in the questionnaire builder.

Creative Commons Attribution (CC BY)


Require Answer With Vertical Slider and Continue Button

This is an extension of the vertical slider examples from the Sheffield Open Materials page - this shows you how to require an answer to the newly created vertical slider based on a continue button.

This is not the same as the require answer - it only works based on the presence of a continue button on the page.

In the code you can edit the message shown to participants in the alert.

This version does not allow participants to proceed with the initial value.

Creative Commons Attribution (CC BY)


Align Entire Questionnaire Right To Left

This example shows you how align all widgets in a questionnaire right to left - the consent box has a special css change so that the consent box does not overlap.

Creative Commons Attribution (CC BY)


Require Answer With Vertical Slider and Continue Button (But Allow Initial Value)

This is an extension of the vertical slider examples from the Sheffield Open Materials page - this shows you how to require an answer to the newly created vertical slider based on a continue button.

This is not the same as the require answer - it only works based on the presence of a continue button on the page.

In the code you can edit the message shown to participants in the alert.

This allows them to have the original value if they move off and come back onto it.

Creative Commons Attribution (CC BY)


5 Levels of Word Difficulty Confidence Ratings

This will present 10 stimuli from a spreadsheet and if participant, using a slider, rate more than 50% at 2 or below, it will end early. It will record the level they reached as metrics / embedded data.

Creative Commons Attribution (CC BY)


Feedback Shown on Next Page For Radio Widget

This example shows how to show feedback using radio buttons in the questionnaire building and show correct/incorrect feedback using the questionnaire builder on the next page.

Creative Commons Attribution (CC BY)


Change Transparency Of A Zone

Example shows you how to change the transparency of the click painting zone (but would work for any zone) - this example allows you to utilise a slider to change transparency.

Creative Commons Attribution (CC BY)


Visual Degrees Request - Adaptive Stimuli Size

This example shows you how to utilise the screen calibration zone to set adaptive stimuli zone relative to the visual degrees, and how to position and place stimuli based on visual degrees.

This was a request from the Gorilla Facebook group.

The main size for the stimuli can be set in the top globally scoped variables.

Creative Commons Attribution (CC BY)


Hide Continue Button For A Few Seconds

This shows you how to hide the continue ('Next') button on a subsequent screen and delay it showing up for a set amount of time.

Creative Commons Attribution (CC BY)


Visual Degrees Request - Centered Ring

This example shows you how to utilise the screen calibration zone to set adaptive stimuli zone relative to the visual degrees, and how to position and place stimuli based on visual degrees.

This version centers the stimuli before cloning it.

This was a request from the Gorilla Facebook group.

The main size for the stimuli can be set in the top globally scoped variables.

Creative Commons Attribution (CC BY)


ITI Transfer Remaining Time From Reaction

This takes reaction time from the participant, takes it away from the time limit they have on the first screen, and adds it to a second screen in same display, to an ITI, using spreadsheet values.

Creative Commons Attribution (CC BY)


Randomised Adaptive N-Back Task Updated

This randomises letter stimuli in a 3 level adaptive n-back task - where n trials are used before a pseudo-random presentation of 6 targets and 14 non-targets.

It marks as correct if a participant is meant to respond (with space) for each letter on a target and if they are not meant to respond it marks as correct. It does this by saving a new line into your metrics.

This is a very complex script and structure - so please ensure you read it carefully and check the spreadsheet carefully, especially if you want to extend to other difficulty levels. The code is commented to allow you to extend.

This script only accepts responses in the first 500ms when the stimuli is presented.

The original request also included questions around making the task adaptive - this version does move up and down levels based on adaptative scoring.

It has a rest after 8 blocks but you can adjust this and the number of blocks you need with globally scoped variables in the top.

The adaptive aspect does not kick in till the end of block 3

Creative Commons Attribution (CC BY)


Sizing For Labels On Questionnaire Grid

This is for playing around with sizing the font-size for the questionnaire widget Radio (Grid) - but will work on any table/grid displayed in questionnaire. Instructions are on page and in script for how to utilise - but it finds tables to affect by utilising user assigned key.

Creative Commons Attribution (CC BY)


Sizing/Spacing For Grid Statements

This is for playing around with sizing the font-size for the questionnaire widget Radio (Grid) - specifically for statements in the grid and their padding - but will work on any table/grid displayed in questionnaire. Instructions are on page and in script for how to utilise - but it finds tables to affect by utilising user assigned key.

Creative Commons Attribution (CC BY)


Response Button Text Sizing

This example demonstrates how to change the response button text sizing, by adding it to Gorilla's main stylesheet/CSS and how to remove it.

Creative Commons Attribution (CC BY)


Slider Image Resizer

This shows you how to resize an image with a slider - useful for something such as an approach-avoidance task.

Creative Commons Attribution (CC BY)


Progress Task Image Changer From Stimuli

This shows how to change the background image of the progress bar as well as to have an icon below it that moves along with the last known position of the bar based on it's width value using the Bootstrap Progress bar that is utilised by Gorilla. The image is taken and controlled from stimuli in this example rather than being a web link.

Creative Commons Attribution (CC BY)


Hiding Questions Based On Embedded Data Choices

This example shows how to hide questions based on selected choices on a previous page in questionnaire builder - this allows you to ask specific questions relating to choices that the participant made and only show them relative questions.

Creative Commons Attribution (CC BY)


Allow Numerical Range For Correct Answer

This example shows you how to allow a numerical range of answers for a correct answer, based on a value given in your spreadsheet for the expected answer.

Creative Commons Attribution (CC BY)


Concatenate Text (Combine Text To Make Sentences)

This is a common request from the Gorilla Facebook group to combine text with existing stimuli or to concatenate text from two columns (if you need to randomise questions and stimuli).

Creative Commons Attribution (CC BY)

Conducted at University of Sheffield
Published on 06 December 2019
Corresponding author Ferenc Igali EDU University of Sheffield