The Gorilla Experiment Builder is a fully tooled platform that deals wih every aspect of experiment design and hosting through a GUI. You can sign up for Gorilla here: Gorilla.sc.
Using Gorilla is the quickest and easiest way to get your MouseView.js experiment up and running.
The Task builder is where the MouseView.js script is configured and installed. There are two ways to do this, using a drag and drop zone (the easiest), or using the script tab (less easy).
Currently a beta drag and drop zone is under development, so it's not quite ready yet. We'll update this doc with a link as soon as possible.
To activate the overlay, track across a single screen, and pip in data there are several elements that need to be included in your Script tab.
It's often easy to specify variables at the start of your script, so they are referred to later. It's easy to change them.
Let's specify our mouseview settings:
And also a list of displays we want to use the MouseView plugin on, and the index of the screen in these displays which we want everything to happen on.
Gorilla gives us hooks that run everytime given events happen. We use these to setup, start and stop MouseView.js. We use two here, OnScreenStart and OnScreenFinish
There are several things you need to do at the start of a screen. So we use this hook. It has the form:
All the code in this subsection is placed within this hook.
If you are using the Gaussuan Blur overlay, you will need to hide everything on screen whilst it loads. This avoids previewing the trial in full before the blur layer is draw. We only need to create this overlay once and then use .show() and .hide() to use it.
Below we use rowIndex == 0 conditional to create this overlay on the first trial.
If this display is one we want to use MouseView.js on, and the screen is at the correct index, then we can start loading the script and hiding things. Read the comment lines in the code below for more details.
At the end of the screen we want to do several things:
- Stop tracking
- Save data
- Save information about the screen dimensions
- Hide everything and shut down
The Gorilla hook looks like this, everything in this section is within that hook:
additionally we only want this to run on the MouseView.js displays and screens so we do this:
We stop tracking, find the cover we use to hide the trial, then have MouseView.js remove all it's overlay stuff.
Warning! These settings are specific to your design. So won't just work on any random Gorilla experiment
We want to calculate the dimensions on the participant's screen, for data analysis purposes. Because everyone's screens are going to be different sizes and ratios, this is vital.
Below we have two zones containing images called 'Zone1' and 'Zone2' so we get those in addition to the screen size.
We then log out these using the gorill.metric() function from the gorilla API.
Now the most important bit, we save the data for the mousecoordinates overtime. We do this by looping through our data object and logging Gorilla metrics. We also get rid of the cover, ready for the next trial
Here's a full example:
Warning! These settings are specific to your design. So won't just work on any random Gorilla experiment.