This year, I decided to learn how to present cognitive psychology experiments online. Five months in, I’m happy with my progress.

Since the second-year of my PhD, when I spent a couple of weeks getting nowhere with Java, I have been keen to use the web to present experiments. What enabled me to move from thinking about it to doing it was Codecademy. I’ve previously blogged about how useful I found the codecademy website in getting me familiar with the syntax of Javascript, but at the time of writing that post, I was unsure of how a knowledge of the coding architecture alone (and certainly not coding aesthetic) would translate into a webpage presenting a functional cognitive psychology experiment. Thankfully I did have a barebones knowledge of basic HTML, much of which is now obsolete and deprecated, from which I was able to salvage snippets to combine with CSS (thanks to w3schools) to get something functional and not hideously ugly.

Syllable-counting in the Study Phase.
(click to be taken to the experiment)

Before I present the experiment I have spent the past few months working on, here are a few things I have learned from the experience so far.

1) In choosing Javascript over a medium like Flash, I hoped to maximise the number of devices on which the experiments would run. I think I made the right choice. Pressing response buttons with your finger on an iPad or an Android phone feels like a Human Factors triumph!

2) Javascript-driven user-interaction operates quite differently to user-interaction in languages like Matlab. Javascript is user-driven, which means you can’t have the browser start an event that waits for a response – the browser will crash. Instead, you must start an event that changes the state of the elements within the browser, such that should those elements be responded to, it will be as if the browser had waited for a response.

3) It is very quick and very easy to learn how to code functionally… if it works – it is generally functional. It is much more difficult to learn how to code both elegantly and functionally. I do not know how to code elegantly and I don’t think I ever will. (I’m not flippant about this either.  This is something I would really like to learn how to do).

4) Getting everything to look OK in different browsers is a pain. It wasn’t so much the Javascript as the newer snippets of HTML5 that I have struggled to get to work in every browser.

5) Web security is a subject on which I have very little knowledge.

6) Sending information from a browser to a server is a pain in the arse.


And finally, here is the experiment:

It is a fairly straightforward recognition experiment, takes about 15 minutes to complete and should provide data for use in a larger project, so do feel free to take it as seriously as you want. As I have already mentioned, it works on an iPad, and I thoroughly recommend you give it a go this way if you have access to one.

3 thoughts on “Web-based Cognitive Psychology Experiments

  1. This has to be one of the most polished versions of online testing I’ve come across – very nice!

    I also agree with Matt that the feedback was a nice touch. Would you be open to sharing your process for creating the site? Right now I understand that I need to learn HTML and javascript and can do so (or start to) at Codecademy – great tip! Whether you also used SQL (i.e. how you record people’s responses) would be wonderful to know as well as a general workflow.



    • Thanks very much John.

      The general workflow for me was as follows.

      1) Secure webspace and learn how to use a basic FTP client.
      Learn how to upload files to your webspace and how to change the properties of directories within your webspace so that you can write to them
      2) Learn HTML/CSS & Javascript.
      Pay particular attention to how you might pass variables from one html page to another or as you get more advanced, how you might communicate with a server.
      3) Code the experiment.
      I use Notepad++ and Firefox (despite the fact that I’m normally a Chrome user). Getting javascript to run through your experiment in the background is one thing, getting it to play nicely with your HTML, CSS and the browser is another. I wouldn’t have been able to do this without firebug, a browser plugin which tells you when and where in your code errors have occurred (
      4) Learn how to pass information from javascript to PHP
      It’s all very well having a working experiment, but if you can’t get data from it, what’s the point? I use a few basic PHP commands to save user data once the experiment has been completed. This was the most frustrating experience for me (PHP code is all housed on the server and I couldn’t efficiently troubleshoot error) and easily the least well developed aspect of all the experiments I have coded so far. The nice thing though is that once you’ve done it a first time, you can easily recycle what works for future experiments.
      5) Test the hell out of it
      Make sure the thing works in any (reasonable) browser, on any platform (PC, Mac, Android, iOS etc) and if not, fix it so that it does.

      I hope this helps!


Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>