---

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)

---

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)

---

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.

---

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.

---

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.

---

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

---

Gorilla Open Materials Attribution-NonCommerical Research-Only

---

Gorilla Open Materials Attribution-NonCommerical Research-Only

---

Gorilla Open Materials Attribution-NonCommerical Research-Only

---

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

Creative Commons Attribution (CC BY)

---

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 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)

---

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

Creative Commons Attribution (CC BY)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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

Creative Commons Attribution (CC BY)

---

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

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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

Creative Commons Attribution (CC BY)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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.

2. 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.

3. 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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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

Creative Commons Attribution (CC BY)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

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)

---

Shows how to alight right to left using the 'direction' css property - this is the same for any zone in task builder. Grab container and zone by name, and then utilise css to change RTL.

Creative Commons Attribution (CC BY)

---

Example showing multi touch events for mobile to allow progression to next trial. Mouse clicks will demo but advancement only works on mobile.

Creative Commons Attribution (CC BY)

---

Example showing how to manipulate and save participant scores, using on screenStart, onScreenRedirect and 'Go To' zones in task builder.

Creative Commons Attribution (CC BY)

---

This shows you how to have a running score per block, that is reset at the start of the next block. This is simplified scripting logic for Task Builder v1 - you may need to adjust based on response. This example does not show you how to save (to data output or embedded data) but you could utilise something that combines something like 'block' + blockNumber(in string) to save per block.

If you have a preset number of blocks, you could save them directly into preset variables (the following pseudocode lays out the logic):

if(blockWeWant){ blockWeWantResponseVariable = scoreSave; }

If you're not using a numerical score, you may want to utilise an array to store choices - and then push those choices to preset arrays to save them like:

'Choice1', 'Choice2', 'Choice1'

Creative Commons Attribution (CC BY)