Last week, we learned how to build more complex web experiments using JSPsych. In those experiments, you displayed images to participants and recorded their responses as mouse clicks on buttons. The assumption is that, when these experiments can be accessed via an iPad, you will be able to record participants’ responses using the touch screen.

In this lab, I will show you how to host your experiment online, and how to store experimental data.

1 Set up your lab workspace.

Create a new directory for this week’s lab, and then create a Folder for your own replication experiment (at least, what code you have so far). If your replication experiment is not quite ready yet, you can use the experiment we created last week. Download the JsPsych zip file from Learn like last week, unzip it, and place the jspsych-5.0.3 subfolder in your lab directory. Remember that you need to ensure that jsPsych isn’t “Double Foldered”.

2 Let’s learn about web hosting

Websites are collections of web pages that are hosted on servers, which are simply computers connected to the internet such that they are publically accessible to the world. A webpage is a simple document that is typically written in the HTML language, and it is typically linked to a variety of other webpages.

When a user wants to display a webpage on their computer, they navigate to the address of that webpage. For example, Google’s web address is https://www.google.com. The user’s web browser knows how to link these human-readable addresses with a numerical code, an I.P. address, that points to where exactly on the internet the webpage is being stored, i.e., where the server is.

When we talk about interactions between a User and a Server, we typically talk about Client Side and Server Side operations, i.e., stuff that is happening on the User’s computer, vs stuff that is happening on the sever where the webpage is hosted. Most modern webpages have (at least) three components. First, there is the HTML code that is displayed in the web browser. Second, there is code that the user downloads and then executes. This is known as client side code. Third, there is code that operates on the server, and governs how data from the client flows into the server, and how data from the server is provided to the client; this is known as server side code.

In the web pages you made so far, everything has been client side. In particular, you created an HTML file which is downloaded onto the client’s computer, and then some javascript code that is also downloaded onto the client’s computer. When the user interacts with your web page, that code is used to determine what pictures, sounds, buttons etc are shown.

So far, you have not done any server side programming, but that is also an important component of web programming. In particular, client side programming is very useful for fetching and saving data. For example, once your experiment is finished, you will want to ensure that your participant’s data is not saved on their computer, but on your server. So, you will want to write some server side code that takes the data which is currently on your participant’s computer, and saves it on your server. Server side programming can also be used when your experiments are quite complicated. For example, imagine that you are asking participants to perform a vocabulary test, and you want them to pronounce 10 words drawn from a database of 10 million words. It would not be sensible to download the entire database to the participants’ computer before the experiment begins, and so, instead, you would use server side programming to select those 10 words, and then send them to the participant’s computer.

You will have to do a little server side programming later in the lab, but first it is important that you learn how to interact with a server yourself.

2.1 Putting your web pages on a server

Web servers, like desktop computers, typically contain a number of different directories, split into a number of subfolders. These folders are typically split so that they are either Public or Private folders. The files stored in Public folders can be read by anybody (e.g., anybody on the internet), while the files stored in Private folders can only be read by people with Access to the server. Access is usually defined as possessing the correct password for the server. Importantly, only people with access should be allowed to save data to a server (else it is very insecure).

PPLS has created a web server for this class, which you can reach at http://hrexp.ppls.ed.ac.uk/class/. If you go there now, you’ll see that there isn’t much to look at; that’s because we haven’t uploaded anything yet. In this section of the lab, you will create your own subfolder on the server, and transfer the materials for your experiment up there.

2.2 Accessing your server using Putty

Different operating systems use different programmes to interact with web servers. People using PCs will use a programme called Putty. People using Macs can ignore the parts about Putty and find their own instructiosn for interacting with servers below.

Putty is a piece of software that allows us to interact with other computers using a Command Line Interface. A command line interface is a tool that allows us to interact with a computer by typing in various text commands, in a similar manner to the Console in RStudio. However, the command line does not use R as a language, instead it uses commands that are based on the Unix operating system (Unix is the operating system used by most servers).

We will use Putty to interact with the server in two ways. First, we will use it to navigate the file systems in the server, using a capability called SSH. Then, we will use it to upload our files to the server, using a capability called SCP.

2.2.1 Download Putty to your computer

Putty is in a folder in the X:\ drive on your computer. Copy that folder to your own M:\ drive.

2.2.2 Connect to the server using Putty

Open up the copy of Putty in your M:\ drive. It will open a little dialogue box. Most things here you do not need to edit, but a few you do.

  1. Host. This is the address of the server that you are trying to log in to. In your case, this will be hrexp.ppls.ed.ac.uk.
  2. Login protocol. This is the mechanism by which you want your computers to talk. Select SSH.
  3. Port. This setting should change when you change the login protocol; you shouldn’t need to edit it yourself.

Now, press Open and Putty will try to connect to the server. You will probably see a warning message about the server’s host key; this is an extra security step that you can ignore for now (briefly, when you are trying to connect to an otherwise unknown server, it is helpful to know the key that will be used, e.g., by checking the identity of that key with the system administrator). Then, Putty will open up a Command Line window, from which you can connect to your server via SSH.

2.3 SSH

SSH is what’s known as a network protocol, i.e., a system of commands that allows two computers to talk to each other over a network. Importantly, SSH is very secure. That’s a big deal when you are coping with sensitive participant data. We will use the SSH capabilities in Putty to log on to the server, and then explore the folder structure on the server. Then, you will create your own set of folders for your experiment.

2.4  Log in to the server

2.4.0.1  Using Putty

Once you are connected to Putty, you will be asked to log in to the server. Hugh will provide you with the username and password. Remember that they are case sensitive. Type the username first, then the password when prompted.

Note that if you type the password incorrectly, then you will be given a second opportunity to type it in. But be sure to type your username correctly, because you will not be given a second chance to edit that; i.e., if you get it wrong, you will have to restart the Putty session.

2.4.0.2 Using your Mac

  • Open up a Terminal window (e.g., Finder>Applications>Utilities>Terminal).
  • Type ssh USERNAME@hrexp.ppls.ed.ac.uk where USERNAME is the one provided by Hugh.
  • Type yes if you need to authenticate the server’s host key.
  • Enter the password provided by Hugh

You should now be connected, and all the instructions below apply to you as well.

2.4.1 Explore your server

Congratulations, you’ve gotten online! Now, let’s explore your server via the command line.

2.4.1.1  List contents

You’ve logged into your server, now let’s see what’s in there. Type ls to list the contents of your current folder. You can see that there are three sub-folders: public_html, server_data, and cgi-bin. For now, the important ones are public_html and server_data.

The folder public_html is a public folder, i.e., if you put anything in that folder, it will be accessible to the public on the internet. So that is where you want to put your website eventually.

The folder server_data is a private folder, ie.g., if you put anything in that folder, only people with password access to the server will be able to see it. So, that is where you want to save your data eventually. Note that folders inherit their security settings from their parents, so any subfolders inside server_data will also be private.

How did I know that these were public or private folders? The server administrator told me when he created them. But if you want to find out more about how to determine permissions for yourself, look here

2.4.1.3 Create your own folder

Eventually you will want to save your own data using this website, so it will be helpful to create your own folders. Each person should make their own folders in public_html and their own folders in server_data. You can do that by, first, navigating into the directory in which you want to make your folder (e.g., public_html) and thenusing the command mkdir folder_name, where folder_name is replaced by your own name.

2.4.2 Check that everything worked

If everything worked correctly, then you should be able to go to http://hrexp.ppls.ed.ac.uk/class/ using your web browser, and you should see your own folder in there.

2.5 SCP

While SSH is a network protocol that allows you to navigate another computer, SCP is a protocol that allows you to transfer data between your computer and the server. So, you can use it to upload your website to the server, and to download your data from the server.

2.5.1 The SCP command in Windows

To use SCP, you need to open a new Command Prompt Window. Go to the Start menu, then search for Command Prompt, then open it up. It should open up in M:\, and you can then navigate to cd putty (if you want to see the list of directories in Command Prompt, type dir).

The Putty version of SCP is called pscp. Type pscp in the putty directory to find out a little bit about pscp. A pscp command in the Command Prompt uses the following syntax:

pscp -options data_to_copy location_to_copy_to

Here:

  • pscp says that you will use the command pscp
  • -options are a set of tags that allow you to specify how rsync should be used. For instance, you might type pscp -v, which prints a helpful information message when the copying is done.
  • data_to_copy is a path to the data you want to send
  • location_to_copy_to is a path to where the data should end up

I usually use pscp in the following way:

pscp -v  M:\Documents\Lab\Path\To\Website\ USERNAME@hrexp.ppls.ed.ac.uk:public_html/hugh/

Which would copy the contents of a folder on my computer called Website into the hugh folder located on our web server.

NOTE: The slashes are in different directions for your computer and for the host computer. For some reason, Windows uses forward slashes and other systems, like Unix and Macs, use back slashes.

Try editing this code to upload your own website up to the folder you created for yourself on public_html. Once you have done so, you ought to be able to visit the website at hrexp.ppls.ed.ac.uk/YOURNAME/Website/websitename.html. You can even try and navigate to the website using your phone (you will need to be logged onto the university internet to do that).

Importantly, you can also use pscp to copy data from the server to your computer. Just reverse the arguments. I.e., pscp -v USERNAME@hrexp.ppls.ed.ac.uk:public_html/hugh/ M:\Where\my\Website\Is

If you aren’t sure of the location of the path to your website on your computer, you can simply go to the correct folder in Window’s Explorer, and then drag that folder into the Command Prompt – it will then print its location on the screen.

2.5.2 The SCP command on a Mac

Folks using Macs will use a command called rsync rather than scp, because it is a little bit faster.

Open a new Terminal window. Do not log in to the server via SSH.

To use rsync, you type a command into the Terminal using the following syntax:

rsync -options data_to_copy location_to_copy_to

Here:

  • rsync says that you will use the command rsync.
  • -options are a set of tags that allow you to specify how rsync should be used. For instance, you might type rsync -a, which copies all info about a file, as well as the contents of the file (e.g., when the file was created, etc).
  • data_to_copy is a path to the data you want to send
  • location_to_copy_to is a path to where the data should end up

I usually use rsync in the following way:

rsync -av /Users/Hugh/Website/ USERNAME@hrexp.ppls.ed.ac.uk:public_html/hugh/

Which would copy the contents of a folder on my computer called Website into the hugh folder located on our web server.

Try editing this code to upload your own website to the folder you created for yourself on public_html. Once you have done so, you ought to be able to visit the website at hrexp.ppls.ed.ac.uk/YOURNAME/Website/websitename.html. You can even try and navigate to the website using your phone (you will need to be logged onto the university internet to do that).

Importantly, you can also use rsync to copy data from the server to your computer. Just reverse the arguments. I.e., rsync -av USERNAME@hrexp.ppls.ed.ac.uk:public_html/hugh/ /Users/Hugh/Website/

If you aren’t sure about the path to your website on your computer, you can simply go to the folder in Finder, and then drag it into the Terminal, as so:

2.6 Storing command prompt/terminal commands

You’ve probably noticed that it is a pain in the neck to type out the pscp and rsync commands in the terminal again and again. You can make your life easier by creating a text file in RStudio where you store the different commands, alongside some comments that explain what they do.

3 Saving data

Let’s return to the copy of the experiment on your computer.

The last few weeks, we have not saved the data that our experiment collects. Usually, we display the data at the end of the experiment, but then we fail to actually save it to disk. Let’s change that.

3.1 Getting a subject number

You may have already figured out that, in your experiment, each participant’s data needs to be matched with their subject ID. Thus, before we begin saving people’s data, it is important that each dataset has a unique ID that matches the participant ID.

We will make our experiment create a dialogue box at the start of the study that prompts the user to enter a participant ID. Place the following code near the top of your JsPsych script, before any important data.

var id = prompt('Please enter the participant number');

You can also create a little form that allows you to collect relevant subject information prior to your study, such as the below

    var survey_trial = {
      type: 'survey-text',
      preamble: 'Subject number is ' + id,
      questions: ["How old is your participant in months?", "What languages do they speak at home?"],
      rows: [5,3],
      columns: [40,50]
    };

Make sure that you add the relevant plugin at the top of your website (i.e., for type survey-text) and also update the timeline of your experiment to display survey_trial.

Finally, you want to make sure that, whenever a trial is saved, the participant ID is saved with it. You can do that by taking the code below and adding it just above jsPsych.init().

jsPsych.data.addProperties({subject: id});

3.2 Saving data

In order to save each participant’s data, we will need to create a simple PHP file. Using R Studio, create a new empty text file and then save it as save_data.php in the same folder as your experiment HTML file.

Add the following code to the file save_data.php, and then save it.

<?php
// the $_POST[] array will contain the passed in filename and data
// the directory "data" is writable by the server (chmod 777)
$filename = "../../server_data/YOURNAMEHERE/".$_POST['filename'];
$data = $_POST['filedata'];
// write the file to disk
file_put_contents($filename, $data);
?>

What this script does, is to:

  1. Create a variable called filename, which combines a path ../../server_data/YOURNAMEHERE with another variable called .$_POST['filename']. In particular, the path is to a location on your web server which is set up to save data, while filename describes what your saved datafile should be called. Make sure you edit YOURNAMEHERE to point to the folder you created in directory called server_data.
  2. create a variable called data, which contains some data (e.g., the data from your experiment).
  3. writes that data to the server in the location specified, using the filename specified.

Now, create a variable in JsPsych that uses this php script. This should be located near the top of your experiment script.

      function saveData(filename, filedata){
       $.ajax({
          type:'post',
          cache: false,
          url: 'save_data.php', // this is the path to the above PHP script
          data: {filename: filename, filedata: filedata}
       });
    }

Finally, change the on_finish function of JsPsych.init(). Previously it was instructed to print your data to the screen. Now, it should have the following code:

saveData(id + ".csv", jsPsych.data.dataAsCSV());

What you should be able to see is that the function saveData has two arguments. The first argument is filename, and it is filled by taking the variable id (which contains the data from the prompt()) and combining it with the string .csv (which stands for comma separated value). The second argument is filedata, and it is filled by the function jsPsych.data.dataAsCSV(), which turns your JsPsych data into a csv file.

Unfortunately, you can’t run a PHP script on a computer that isn’t a server, so in order to test this we have to upload our files to the server. Do that using SCP (or Rsync for Macs), following the same instructions as before.

Run through the experiment, then use SSH to navigate over to server_data and look in your folder. See if a file has been created? If so, use SCP (or Rsync for Mac’s) to transfer it over to a new folder on your computer and look at it (remember the note above about how to use SCP/rsync to download data from the server to your computer).

4 Congrats & Advanced stuff

Congrats! At this point, you should have a working iPad experiment.