Adding a Page Timer to an External Survey

One of the drawbacks to running online psychology studies is that the ability to control and measure response times is not readily available. Survey software like Survey Gizmo, Qualtrics, and Survey Monkey don’t have this functionality built-in.

To run reaction time experiments, for example, you need to either pay out for software like Inquisit 4 Web Edition (which carries a price tag of $1500 per year), or get your hands dirty with an open-source toolkit like ScriptingRT — which, as I discussed in my last blog post, appears to be more than adequate to run many cognitive RT paradigms. ScriptingRT can be embedded in HTML and run on any of the above survey platforms, and there are simple ways to also connect ScriptingRT to Mechanical Turk at the same time.

Another possibility is that you want to force participants to answer survey questions within a time limit. Time pressure has a lot of valuable uses in psychology, such as when you want participants to rely on their intuition and use heuristics in their judgment. Although some of the survey platforms mentioned before offer this functionality (Qualtrics does, SurveyMonkey does not), it’s not always free (in SurveyGizmo‘s case it is a premium feature that has to be paid for separately). Fortunately, it’s quite easy to make your own timer with some simple JavaScript and jQuery scripting. For demonstration purposes I’ll be using SurveyGizmo and I’ll be using a 30-second timer, but the code can be modified for any platform and any time frame.

1. Page timer logic

Page timer diagram

The logic of the question timer is as follows. We create two DIV containers. One container (“masking_prompt”) masks the survey page and presents a prompt (e.g., “press the spacebar to continue”). A second container (“countdown”) contains the timer countdown.

When the timed page is presented we use jQuery to show the masking_prompt and hide the survey’s body. We create an event to capture a specified keypress (e.g., spacebar), and when the keypress is detected we use jQuery to hide masking_prompt and show the body and countdown.

2. The containers

This is the code we will use for the containers:

2. The jQuery and JavaScript

This is the code we will use to control the events:

3. CSS

And this is our stylesheet for the containers:

Much of which can be changed according to your tastes (e.g., font sizes, colours).

4. Putting it all together

The last piece you would need is a call to the jQuery library (click here to download):

Now you can put it all together. In SurveyGizmo you will need to set it up as follows: Preview your survey. Click the Advanced tab, and then click Replace so you can change the stylesheet and the HTML of the theme. Now follow these steps:

  1. The CSS goes at the top of the Replacement Styles (CSS) section.
  2. The call to the jQuery library goes at the top of the Replacement Template (HTML) section.
  3. This is followed by the jQuery and JavaScript code, from part 2 above.
  4. This is followed by masking_prompt DIV container, from part 1 above.

Now on whatever page you would like to have timed you need to add the countdown DIV from step 1. To do this, create a Text/Instructions element, go to Advanced and uncheck “Verify and Fix Question HTML”. Then add the countdown DIV code to the Text/Instructions under the Basics tab.

If you’ve done everything correctly, you should end up with something like the following:

Note: if you want to change the timer, you would change “var counter” and the text in the “count” span to your liking. If you want to change the key used, you can go here to find the keyCode #. If you are using a platform other than SurveyGizmo, then you will need to change “$(“#sg_NextButton”).click();” in the JavaScript to something else, and of course navigate the platform’s own system for changing CSS and HTML and adding HTML to the pages.

Add Comment Register

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">