Template 2.0 for web experiments
I am currently working on a complete rewrite using jquery
Download
Download the current version (zip archive, see below for an explanation of the contents).
It should work just fine, but I haven't tested it extensively, and I keep
changing things without testing in browsers other than Firefox, so you
should do at least a few test runs (including data collection) before
you use it. See the known issues page
for more information.
Template 2.0 is released under the GPLv2 and GPLv3 and comes with absolutely NO WARRANTY.
Try it out without downloading
Even before you download, you can click through a mock questionnaire, as if you were a participant in a study.
The mock questionnaire should give you some impression of what the template can do. If you view the source code in your browser (e.g., View → Page Source in Firefox) you will also get an impression of what the underlying code looks like that you would modify for your study.
If you download the template, you can design your own study: you can of course change the number of cases and their wording, the number of questions, their wording and answer format, whether cases are presented in a random order or "as is", whether the order of cases is the same within each block of questions.
What is it?
Template 2.0 aims to help researchers to quickly do their own online studies. It consists of several files, but at its core is a single HTML/JavaScript file that contains two sections: A user-defined section at the top and a code section below. The idea is that researchers only have to define some variables in the user-defined section, such as the questions they want to ask and the answer options, and the design (within- or between-subjects, number of groups, randomization). The code section will interpret these variables correctly to present the questionnaire.
Template 2.0 is a complete rewrite of Jon Baron's template for web experiments. I tried to simplify the design by using "<div>"s and "inner.HTML" rather than invisible frames. I also created a user-defined section, to minimize the amount of code researchers have to understand — by limiting modifications to variables in the user-defined section, and writing a code section that adapts to these variables in a flexible manner to create the desired questionnaire.
Why would I want this?
Conducting research online has many advantages both for researchers and participants. Participants do not have to come to a lab, and they can participate at a time that is convenient for them. Researchers do not have to set up lab schedules, they do not have to enter data manually, and they can recruit a sample of participants with more diverse geographical and demographic background than the common convenience sample of students at their own university.
However, many researchers do not know how to construct a web experiment from scratch. Commercial services exist to help them, but they cost money and are limited in the flexibility they offer. Some years ago, Jon Baron created an HTML/JavaScript template and put it online on his website. The template is like a skeleton that handles presentation of stimulus material and questions, times and collects responses, then calls a PHP script for data submission. The template can be downloaded, the modified for the experiment at hand, and used. Obviously, before doing the first experiment, the researcher also needs to set up, for example on a university server, the PHP script that will store the data.
On top of basic HTML, JavaScript offers the researcher great flexibility in the design of the experimental setup, as well as the possibility to time responses (although not with great enough accuracy for reaction time tasks). Additionally, since JavaScript is executed by the browser ("client-side"), once the participant has loaded the first page of the experiment, the whole file is already loaded and the experiment runs locally on his machine — presentation does not lag for slow connections, and participants on pay-per-minute services can go offline until they submit their responses.
List of features
- Separate user-defined section so all things you need to customize are in one place.
- Ideal for within-subject designs with repeated questions to different stimuli ("Cases")
- Order of cases is randomized for each subject (but can also be presented "as is")
- Questions can be spread across different pages by simply putting in a number
- Easy to randomize between-subjects for different groups
- Supports the following answer formats "out of the box" (and easy to "roll your own" too)
- Line of radio buttons (7-pt scale) labeled at each end ("radioline")
- Line of ratio buttons (7-pt scale) labeled at each end, formatted using a table so answer options for all such questions on the same page line up ("radioscale"). Spacing of radio buttons gets set for each page based on user screen size and font size.
- Radio buttons with individual labels
- Checkboxes
- Text area
- List of text inputs (e.g. for ranking, order can be randomized)
- The script checks the variable names you have defined for questions, to avoid a screwup in your data if you have duplicates
- Can now insert pages between blocks of questions.
- Improved styling with external style sheet. The PHP sript (saveform.php) automatically uses the same style sheet, for a consistent look.
- Cases get background colors assigned to them from a palette. Colors are assigned randomly, then each case gets that color throughout the study, making it easier for participants to recognize cases.
- The PHP script is integrated in the download and easier to modify (with variables for researcher name and e-mail).
- If data submission fails (usually this would happen because of wrong write permissions on the server), the participant's answers are e-mailed to the researcher along with a notification. Data are not lost and the researcher can fix the problem.
- The PHP script stores the data in .csv format, which should be easy to use in any software program you want to use for analysis.
- The PHP script writes a header before the first entry, so you know which variable is which when you open the .csv file.
What do I need?
You can immediately start trying out the template, up to but excluding submission of the data, if you have
- a browser (we recommend using Firefox)
- and a text editor.
Note that to modify the source code, you must use a text editor, and not a word processor (like MS Word), because a word processor would insert extra characters that make the code unusable. Linux comes with good text editors preinstalled, Microsoft only has Notepad. If you use Microsoft, you will make your life much easier if you install a good free text editor, such as Notepad++ or Geany (both are open source under a GPL license). On a Mac, you could try Smultron (open source: BSD) or TextWrangler (freeware). (These text editors have what is called "syntax highlighting", so they make it much easier for you to read your code. You want them to highlight for JavaScript syntax, but since the document has an .html extension they probably highlight for HTML by default, in which case you need to tell them manually to use JavaScript highlighting.)
If you also want to try out how the PHP script submits the data and sends the acknowledgement e-mails, you need a server that runs PHP. This could for example be a university server (ask your IT department), or it could be an XAMPP environment on your own computer (on Linux, you might already have that, depending on your distribution).
How do I use it?
You start by downloading the zip file and unpacking it on your computer. You will see that it contains different files:
- template2.html: This is the core file that you need to modify for each experiment. Start by renaming it for your first study, for example by calling it "study1.html". You open this in a text editor and in a browser at the same time. In the text editor, you see the code, and you see, at the start, a "user defined section" with variables. There are comments that will help you with your modifications. In the browser, you see how it will look to your participants. Try it out, then modify the source code in the text editor, and then reload the file in the browser to see how your changes look.
- template2.css: This is the style file, it defines how things look. You do not have to modify it. You can also create a different style file to use and give it a different name. In that case, make sure you change the variable "CssFile" in the source code of your study.
- saveform2.php: This is the PHP file that stores the data and sends the acknowledgment e-mails. You need to modify this once by putting in your name and e-mail, and possibly by changing the file permissions it sets on the data file. Then you put it on your server, or ask your friendly IT staff to do that for you. If you don't know what you're doing, you probably also want to ask them to take a look at it and explain how secure the resulting data file is on your server setup. This setup on the server only needs to be done once and will then work for all your studies.
- smalltest.png: This is just a tiny image so we can show you, in the source code of template2.html, how you can present images in your experiment. You do not need this file, but obviously, if you want to present your own images in your study, you will need to include those.
- data: This is just the folder where your data (would) get stored. It contains a single file:
- .htaccess This file is in the "data" directory,
and it may not be visible, esp in Linux, unless you tell your file
browser to "show hidden files". (This is because of the initial dot in
its name, which is important, so do not remove it if you want to use
it as intended.) The file only contains the following two lines:
order deny,allow deny from all
Uploaded to the server, this file prevents browsers from accessing the containing folder and its contents (i.e., the data files that saveform2.php will put there).
Is it ready to use?
Yes and no. It is a work in progress. (But then again, it always will be). Some setups should already work nicely, others do not. Whatever you do, test it first and collect some data using your own input, then check that the responses make sense. For many cases, it will work; I'm just not taking any reponsibility.
In fact, I'm very grateful if you send me a quick note whether it works or not with different browsers.
See the page with known issues and planned features for more information.
If you need more help or have feature requests
Currently, this is a project I work on in my own spare time, without payment.
If you need additional help, you can e-mail me with small questions and hope that I have time to answer them.
You could also hire me as a consultant to help you get started — set up your PHP file on your server, design your first study, talk you through how things work. If you pay me, I could also design individual studies for you.
I'm planning to extend the functionality of this as I have time or someone pays me. If you have specific features you'd like to see implemented, do go ahead and e-mail me, even if you cannot or do not want to pay me — good ideas and input about what is lacking are always welcome.