By Max Lovell<\/p>\n\n\n\n
Note: This is an abridged version of <\/em>an article that can be found on my personal webspace<\/em><\/a> \u2013 see that version for more details, and updates.<\/em><\/p>\n\n\n\n Over the pandemic, running cognitive tasks online has become increasingly necessary. This post is a guide and collection of resources on programming languages, experiment hosting sites, and their integration with Qualtrics. If you have any feedback or additions to make you can email me at m.lovell@sussex.ac.uk<\/a>.<\/p>\n\n\n\n I\u2019m aware of two main options: Python and Javascript (I won\u2019t go into MATLAB here). JavaScript is the language most browsers use to do many of the more interesting things in websites, and sits between the more standard HTML. Python is an easy entry point for coding but isn\u2019t supported by browsers, so if you want to upload an experiment online you must use the visual\/graphical Builder view of the PsychoPy<\/a> program so that it can be more easily translated into JavaScript with the help of their PsychoJS library and uploaded to their hosting service Pavlovia. Note that the builder view of PsychoPy is somewhat limited, and didn\u2019t have the capability to create the task I needed.<\/p>\n\n\n\n So, if you want the ability to create any experiment you like, and run it for free online, you\u2019ll need to go with JavaScript. The added benefit of learning this is that this functions as a more complete introduction to not just coding but web development as well. Similar to PsychoPy\/JS, there is a free library of JavaScript tools for creating psychological experiments and surveys called jsPsych. The jsPsych website<\/a> has great introductory tutorials for both JavaScript and jsPsych.<\/p>\n\n\n\n The only thing some of the tutorials above are missing is that you need an \u2018Integrated Development Environment\u2019 to type your code into, such as Sublime<\/a>.<\/p>\n\n\n\n Once your study is up and running on your own computer, the easiest option to get it up online is using an experiment hosting site \u2013 all of which can be integrated with a Qualtrics survey if you need to use that to manage participants in a longitudinal study. Cognition.run<\/a> is free and easy to use – just create a new task and upload your javascript to the source code section! It doesn\u2019t accept HTML, so your CSS will need to be in a separate file. Pavlovia is run by the University of Nottingham staff who created PsychoPy and can be integrated with jsPsych<\/a> \u2013 and only costs 20p\/participant. Gorilla can also accept jsPsych code<\/a> but is more costly – if you qualify for the researcher package you could get your first 700 participants for \u00a3500. Note that Gorilla use the previous version of JavaScript (ES5) and any code in ES6 won\u2019t work (they have told me this should be fixed by the end of the year). Other hosting options are listed here<\/a>.<\/p>\n\n\n\n Qualtrics is incredibly useful to keep track of participants longitudinally by linking surveys. Experiments hosted on the above sites can be integrated into Qualtrics in a few ways<\/strong><\/a>. \u00a0The easiest of these is with an HTML iFrame: create a \u2018text\/graphic\u2019 question and add the following code into the \u2018HTML view<\/a>\u2019 Finally, you could split your Qualtrics survey in two, redirect participants from the first one to your hosted survey<\/a>, and then back to the second survey. Redirecting can also be done by adding JavaScript to your survey<\/a> as follows: To keep track of participants between surveys: 1) set a random participant ID<\/a> 2)\u00a0embed this into the URL we send from the first Qualtrics survey<\/a> 3) use jsPsych to grab that data from the URL<\/a> 4) set up a redirect link by using It\u2019s also possible to integrate your task into a Qualtrics survey question using their JavaScript question editor<\/a> without using a separate hosting site at all. A few things to note: saving your data with JSON and not CSV is recommended,\u00a0template literals will not work properly in Qualtrics<\/a>, and Qualtrics relies on the JavaScript version in a users\u2019 browser<\/a>, so try to avoid using the latest version (ES6) to ensure maximum usability. However, with this approach your data won\u2019t save to Qualtrics \u2013 you\u2019ll have to use JavaScript to send data to your personal server space at the University. Unfortunately, the sections on saving your data won\u2019t work if you\u2019re at Sussex \u2013 I detail below how to use the PHP and web server method. There may also be a way to get MySQL set up on the university servers<\/a>, or at Edinburgh University<\/a>, or to use a Box app<\/a> instead of the DropBox method listed here<\/a>.<\/p>\n\n\n\n Before you can follow along with the kywch.github PHP tutorial<\/a>, you will need to\u00a0set up a personal webspace with the university<\/a>, and authorise your computer to access your N drive<\/a>. I would recommend using the FileZilla STFP (software for transferring files). The university host is sftp:\/\/unix.sussex.ac.uk and the port is 22. You will also need to log in through your command line terminal with the command Now follow the steps in the PHP tutorial which make the exp_data directory within public_html. However, the commands \u00a0 Now create the data upload folder (e.g. \u2018hello-world\u2019) outside of public_html<\/a>, using the same technique in the tutorial above<\/a>. The command Next, create a file in your IDE called .htaccess with the following content<\/a>:<\/p>\n\n\n\n and move it to your uploads folder (e.g. hello-world) using FileZilla (you will need to reveal hidden files<\/a> to do so, e.g. .+\u21e7SHIFT+\u2318CMD on Mac).<\/p>\n\n\n\n Now, follow the rest of the tutorial<\/a> regarding saving data with JavaScript. However, delete the lines declaring the task_name, data_dir, and file_name variables \u2013 we just need sbj_id and save_url, and your jQuery.ajax() function should look like this:<\/p>\n\n\n\n If you\u2019ve followed everything else correctly, running your Qualtrics survey should save the task data to your target upload directory (e.g. \u2018hello-world\u2019) – you will need to refresh FileZilla before you can see the file appear. To download the data, as it can\u2019t be accessed through a public URL, go to the left-hand panel of FileZilla called \u2018local site\u2019, which lists the contents of your own computer, and create a data folder somewhere that suits you. When you then download on the remote site on the right-hand side of the screen, the files will be downloaded to this folder onto your computer.<\/p>\n\n\n\n If you have any issues or feedback, email me at m.lovell@sussex.ac.uk<\/a><\/p>\n\n\n\nProgramming Languages<\/h2>\n\n\n\n
Experiment Hosting Sites<\/h2>\n\n\n\n
Hosting sites in Qualtrics<\/h2>\n\n\n\n
<iframe height=500 width=600 src=\u201cTASK URL\u201d><\/code>\u00a0with the right width and height (this can look a little janky). Similarly, this code will open the experiment in a new tab <a href=\u201cTASK URL\u201d target=\"_blank\">Click Here<\/a><\/code>, although I\u2019ve only been able to get this to work with Gorilla<\/a>.<\/p>\n\n\n\nQualtrics.SurveyEngine.addOnReady(function(){setTimeout(function () {window.location.href = \u201cTASK URL\u201c;},5000)});.<\/code><\/p>\n\n\n\non_finish(window.location.href = \"Survey pt2 URL\u201d<\/code>) at the end of your jsPSych script in cognition.run, or Gorilla\u2019s redirect node<\/a> (see\u00a0also<\/a>), or the information\u00a0here<\/a>\u00a0for Pavlovia (personally untested) and 4) appended it to the redirect link from the hosting site in a way Qualtrics will understand<\/a> and record that data.<\/p>\n\n\n\nDirect Qualtrics Integration<\/h2>\n\n\n\n
Webservers & PHP<\/h3>\n\n\n\n
ssh[username]@unix.sussex.ac.uk<\/code>\u00a0and your password.<\/p>\n\n\n\n$ touch index.html<\/code>\u00a0, $ echo \"DirectoryIndex index.html\" >> .htaccess, <\/code>and later $ chmod 772 hello-world<\/code>\u00a0won\u2019t work on the university servers. Instead, use my changes to the PHP file here<\/a>, paste it into your IDE, save it, and move it to exp_data using FileZilla – making sure to change the `\/hello-world\/hello_` to something more relevant to your own study.<\/p>\n\n\n\ncd ..<\/code>\u00a0moves up a directory level, ls<\/code> lists the contents of the current directory, and use pwd <\/code>to check you are in \/its\/home\/[username]. Create the directory where you want to save your data (i.e. \u2018hello-world\u2019) here. Check the Kwych tutorial<\/a> above on permissions<\/a>, but assign the following permissions instead: Hello-World = 1703<\/code>, exp_data\u00a0= 1701<\/a>, save_data.php = 1704<\/a>, public_html = 1701<\/a>.<\/p>\n\n\n\n Options -Indexes<\/pre>\n\n\n\n
Options -ExecCGI<\/pre>\n\n\n\n
AddHandler cgi-script .php .php3 .php4 .phtml .pl .py .jsp .asp .htm .shtml .sh .cgi<\/pre>\n\n\n\n
<\/pre>\n\n\n\n
<Files ^(*.json)><\/pre>\n\n\n\n
order deny,allow<\/pre>\n\n\n\n
deny from all<\/pre>\n\n\n\n
<\/Files><\/pre>\n\n\n\n
function save_data_json() {<\/pre>\n\n\n\n jQuery.ajax({<\/pre>\n\n\n\n method: 'POST'<\/a>,<\/pre>\n\n\n\n
dataType: 'json'<\/a>,<\/pre>\n\n\n\n
cache: false,<\/pre>\n\n\n\n
url: save_url,<\/pre>\n\n\n\n
data: {<\/pre>\n\n\n\n file_name: sbj_id + '.json',<\/pre>\n\n\n\n
exp_data: jsPsych.data.get().json()<\/pre>\n\n\n\n
}<\/pre>\n\n\n\n
});<\/pre>\n\n\n\n
}<\/pre>\n\n\n\n