If you are looking for the REG form details, click here.

Psych Web Form Templates by bee

Here's some quick details about how to get HTML pages together in order to do web questionnaires or surveys on watarts (faculty/grads) or artsweb (undergrads). I'll use the term "survey" throughout this documentation. For links to learning HTML and other web resources, there's a few links you can use tucked away in the "World Wide Web" section of the beeHive). Following the W3Schools link there to the Try-It-Yourself page is a good place to start. HTML Reference is also pretty straightforward.

Typically you'll need to create the following files:

index.html - this is an info page
consent.html - this is a consent page where the subjects would agree to participate and depending on the survey, also enter a userid/password.
declined.html - this is the page that would be presented if the subject declines participation
page1.html - the first page of the survey
page2.html, page3.html - additional pages of the survey if needed.
thanks.html - a thank you page
passfile.txt - the file of userids and passwords

I'd really encourage you to avoid using things like Word or other WYSIWYG HTML editors - most toss in a lot of extraneous html which can make creating clean HTML problematic. Since most surveys are pretty straightforwrd, stick to Notepad, Wordpad or something which creates clean HTML. NVU is also on all Nexus stations in the department (see the Gotchas below for some settings in NVU you'll want to use).

1. index.html

Typically an info page. This is the first page that the subject will see when they first view the URL you provided them with:

------------------------cut here----------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<META NAME="ROBOTS" CONTENT="NOINDEX">
<META NAME="ROBOTS" CONTENT="NOFOLLOW">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<title>Survey</title>
</head>
<BODY bgcolor="#ffffff">

Information stuff would go here... Yada yada yada...

<P>

<form method="post" action="---CGIFORM---">
<input type="hidden" name="frompage" value="index.html">
<input type="hidden" name="sonaid" value="---SONAID---">
<input type="hidden" name="lastvv" value="0">
<input type="submit" value="Continue">
</form>

</body>
</html>
------------------------cut here----------------------

Notes:

If this is a research study, your ORE-approved Information Letter would go here. Do not include the Consent Section itself (that goes in the consent.html file). Participants click [Continue] on this page to get to the Consent Section.

2. consent.html

The consent/login page. The stuff in red is not required if you use the -sonastudy option (see below).

------------------------cut here----------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Survey</title>
</head>
<BODY bgcolor="#ffffff">

<form method="post" action="---CGIFORM---">
<input type="hidden" name="frompage" value="consent.html">
<input type="hidden" name="sonaid" value="---SONAID---">
<input type="hidden" name="lastvv" value="1">

Consent details go here... Yada yada yada...

<p>
I agree to participate in this study:
<blockquote>
<input type="radio" name="vv0001" value="Accept">Accept<br>
<input type="radio" name="vv0001" value="Decline">Decline
</blockquote>

<p>
If you agree to participate, please enter your login information:
<blockquote>
Userid: <input type="text" name="sid" size="12">
<BR>
Password: <input type="password" name="password" size="12">
</blockquote>

<blockquote>
<input type="submit" value="Submit">
<input type="reset">
</blockquote>

</form>

</body>
</html>
------------------------cut here----------------------

Notes:

If this is a research study, your ORE-approved Consent Section would go here. Participants click a radio button to Accept or Decline agreement to participate.

3. declined.html

A page for people who decline consent.

------------------------cut here----------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Survey</title>
</head>
<BODY bgcolor="#ffffff">

You have declined consent... Yada yada yada...

<P>

Thanks for your time... Yada yada yada...

<P>

If you have any questions... yada yada yada...

<blockquote>
Your name
<br>Department of Psychology
<br> University of Waterloo
<br>email and other stuff
</blockquote>

</body>
</html>
------------------------cut here----------------------

Notes:

there's no need for the various form lines in this page.
if you use 'checkgenericform', this will show as an error since there's no 'form' tags.

4. page1.html

The first page of the survey.

Below is an example that asks a few questions

------------------------cut here----------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Survey</title>
</head>
<BODY bgcolor="#ffffff">

<form method="post" action="---CGIFORM---">
<input type="hidden" name="frompage" value="page1.html">
<input type="hidden" name="sid" value="---SID---">
<input type="hidden" name="password" value="---PASSWORD---">
<input type="hidden" name="sonaid" value="---SONAID---">
<input type="hidden" name="condition" value="---CONDITION---">
<input type="hidden" name="lastvv" value="3">

<h2>Survey</h2>
<hr>

The purpose of this study is to find out what you know
about the Three Stooges.

<P><HR><P>

<OL>

<LI> Who's your favourite Stooge?
<select name="vv0001">
<option value="">Please Select
<option value="1">Mo
<option value="2">Larry
<option value="3">Curly Joe
</select>

<LI> Why?
<select name="vv0002">
<option value="">Please Select
<option value="1">Great personality
<option value="2">Nice hair
<option value="3">Gluton for punishment
</select>

<LI> If you were Curly Joe, which would you prefer to have Mo do to you?
<select name="vv0003">
<option value="">Please Select
<option value="1">Two finger poke in your eyes
<option value="2">Stomp on your toes
<option value="3">Nose pull and slap
</select>

</OL>

<P><HR><P>
<input type="submit" value="Submit">
<input type="reset">

</form>
</body>
</html>
------------------------cut here----------------------

Notes:

variable names must be vv0001, vv0002, etc.

there must be exactly 4 digits in the 'vvnnnn' variable name.

the lastvv line must contain the number corresponding to the last variable - ie. if the last variable used is vv0231, then the value in the lastvv line must be "231". Make sure this is always correct otherwise all your data may not be saved.

5. page2.html, page3.html, etc

Same deal as page1.html.

Notes:

change the frompage value to the name of the page (eg. page2.html, page3.html, etc).
variable names on each page must again start with vv0001, vv0002, etc.
as with all pages, be sure to set the lastvv value correctly.

6. thanks.html

Toss in a page to make the person feel good about completing the form...

------------------------cut here----------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Survey</title>
</head>
<BODY bgcolor="#ffffff">

Thanks for your time... Yada yada yada...

<P>

If you have any questions... yada yada yada...

<blockquote>
Your name
<br>Department of Psychology
<br> University of Waterloo
<br>email and other stuff
</blockquote>

</body>
</html>
------------------------cut here----------------------

Notes:

there's no need for the various form lines in the thanks page.
if you use 'checkgenericform', this will show as an error since there's no 'form' tags.

7. passfile.txt

You'll need a file containing userids and passwords which can be used to login on the consent page. Each line should simply contain a userid and password like so:

------------------------cut here----------------------
s0001 Ue6FiyIW
s0002 sJU99sbA
s0003 8fDT3A8h
...etc
------------------------cut here----------------------

If you need to match MT id#'s to your subject IDs, just add a third field containing the MT id#'s and this will also get saved in with each submitted form:

------------------------cut here----------------------
s0001 Ue6FiyIW f5615
s0002 sJU99sbA f5977
s0003 8fDT3A8h f4635
...etc
------------------------cut here----------------------

Notes:

Use only uppercase letters, lowercase letters or numbers.

When you are done creating the pages...

make sure all your folders and filenames are lowercase and contain no spaces.
[Optional] use the Weblint Gateway or W3C Markup Validation Service to confirm there are no problems with your HTML. Just "Validate by File Upload". This step isn't required, but it can help if you have problems with your HTML.
Additional HTML documentation can be found at:
- html code tutorial
I've been working on a program which will hook up web studies for you so that folks don't need to track me down for each study. Try this:
1. Transfer your html files to your watarts (faculty/grads) or artsweb (undergrads) account. There's various ways of doing this so pick your favourite. If you aren't sure how to do this, go to a Nexus station and do this:
  1. Create a new folder in your N:\public_html folder and place the html files and passfile.txt file there. Again, make sure there's no space or funny characters in the folder name you create.
  2. Using the example of your userid being 'johndoe' and the web directory name you want to set up is 'mywebstudy' (this name should not contain spaces or other "funny characters"), do the following...
  3. if it doesn't already exist, create a fodler under your home called 'public_html'.
  4. in the 'public_html' directory, create a folder called 'mysebstudy' (or whatever name you give your study - remember, no spaces) and avoid creating folders within folders.
  5. transfer all your html files and passfile.txt into this new directory.
  [[[If you are working on a home machine, laptop or non-Psych Nexus station, you can download winscp from http://winscp.net/eng/download.php to transfer your files - the "portable executable" is a standalone program which doesn't require an install. If you are working from a non-Psych Nexus station, you can also open open "Start --> Programs --> Internet Tools --> File Transfer --> Secure File Transfer Client" and you can probably figure out how to connect and carry on using the above.]]]
2. Once the files are in place, you'll just need to login to watarts (faculty/grads) or artsweb (undergrads) and an run a program to set things up. On a Nexus station, do this:
  1. double-click "Psych Shortcuts" on the desktop, then "Programs", then "putty artsweb" or "putty watarts" (depending on where your account is. The above will only work on Psych Nexus PCs.
  2. change to the directory where you have your web files. Eg. if you have them in public_html/mywebstudy, type:
    cd public_html/mywebstudy
  3. run the program which will set things up for you. Type:
    /u/bee/perl/makewebstudy.pl
    and follow the instructions.
  [[[If you are working on a home machine, laptop or non-Psych Nexus station, you can also download putty from http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html - the putty.exe is a standalone program which doesn't require an install. If you are working from a non-Psych Nexus station, you can also open open "Start --> Programs --> Internet Tools --> Remote Login --> Secure Shell Client" and you can probably figure out how to connect and carry on using the above.]]]
3. The program will give error messages if it finds things it's not expecting. If you run into an error, fix it and just re-run things. As long as you follow the format of the webformtemplate, it should work as expected. If you are using something from a previous study, you may need to edit the files a little to make things work.
The responses from each submitted page will be stored in a file called 'output.txt' in the same folder that your put your html files into. Just download this file to your computer, start Excel and select File/Open. An import wizard will open and you can specify that you are working with "Delimited" data, and on the next screen indicate *only* the '|' character as a delimiter (uncheck the tab key which is a default), and also indicate that the "Text qualifier" is "{none}". It will then separate each variable into a separate column. From there you will probably have a handle on things... Apparently this format is also easily readable in SPSS, but I really don't know SPSS at all.
Let me know if you have any special conditions in which case I'll need to tweak the program which processes the files.

Fine Tuning

Additional makewebstudy command line options. You may also choose ONE (don't mix-n-match) of the following command line options when creating your web study:
1. If people will be accessing your study with SONA run the script with the following command line option:
  /u/bee/perl/makewebstudy.pl -sonastudy
  Subjects will only be able to access the study from the link within SONA and the subjects' SONA ID will be saved along with the data. If you use this option, you don't need the passfile.txt file.
  Be sure to backup your files elsewhere first just in case. If errors are returned when the script is run, you'll need to copy your backups in place before running it again.
2. If you don't want an info page, run the script with the following command line option:
  /u/bee/perl/makewebstudy.pl -noinfopage
  
  This will basically rename consent.html to index.html and make the necessary changes to the file.
  Be sure to backup your files elsewhere first just in case. If errors are returned when the script is run, you'll need to copy your backups in place before running it again. I'd probably suggest you get things working without the -noinfopage option first and then use it.
3. If people will be accessing your study without a userid/password, run the script with the following command line option:
  /u/bee/perl/makewebstudy.pl -nologin
  A userid will be automatically assigned. If you use this option, you don't need the consent.html, declined.html or passfile.txt files.
  Be sure to backup your files elsewhere first just in case. If errors are returned when the script is run, you'll need to copy your backups in place before running it again.
To refer to your external web study page in SONA, login to SONA and in the place you specify the "Study URL" use something like:
on watarts: https://arts.uwaterloo.ca/cgi-bin/cgiwrap/myuserid/mywebstudy.pl?sonaid=%SURVEY_CODE%
on artsweb: https://artsweb.uwaterloo.ca/cgi-bin/cgiwrap/myuserid/mywebstudy.pl?sonaid=%SURVEY_CODE%
Just substitute your userid for "myuserid" and your study directory for "mywebstudy".
N.B. SONA studies should use the "-sonastudy" option (see above) when running the makewebstudy command.
To randomize between a group of external web study pages in SONA you will need to set up an addional thingy which randomly selects between a group of URL's. At the unix prompt, type something like:
/u/bee/perl/makerandomurl.pl mixurls
Change the 'mixurls' to whatever you would like to see in your url - this name (eg. mixurls) must be unique for each of your randomized studies. You will then be prompted to enter a list of URL's to chose from, one per line.
One additional gotcha here. In order for the SONA ID#'s to be saved correctly, you'll need to enter the URL's slightly differently than what you are used to. For instance, if one of the study URL's you would like to use in the randomization is something like:
https://arts.uwaterloo.ca/cgi-bin/cgiwrap/myuserid/mywebstudy.pl?sonaid=%SURVEY_CODE%
you will instead need to enter:
https://arts.uwaterloo.ca/cgi-bin/cgiwrap/myuserid/mywebstudy.pl
do NOT enter the "?sonaid=%SURVEY_CODE%" at the end of the URL if you are using SONA.
Once the URLs have been entered, you can then test the randomization of your study by referring to the program which does the randomization. Continuing the example of using the name 'mixurls', this will be something like:
if not using SONA: https://arts.uwaterloo.ca/cgi-bin/cgiwrap/myuserid/mixurls
or: https://artsweb.uwaterloo.ca/cgi-bin/cgiwrap/myuserid/mixurls
if using SONA: https://arts.uwaterloo.ca/cgi-bin/cgiwrap/myuserid/mixurls?sonaid=%SURVEY_CODE%
or: https://artsweb.uwaterloo.ca/cgi-bin/cgiwrap/myuserid/mixurls?sonaid=%SURVEY_CODE%
Just change "myuserid" to your userid. Again, keep in mind that if you are running different independent studies requiring randomizations, you should specify different names when running the makerandomurl.pl command. If you run with the same name, people going to your 1st study would be redirected to your 2nd study which would be a "BAD THING (TM)".
If you are using SONA, to test things, you can go to your "Study Information" page, click the ""Sample Link with Embedded ID Code]" link and one of your randomly selected URLs should pop up.
To include text of responses from previous pages you can include a line something like this:
---VVSUBSTART---page3.html---12---VVSUBEND---
This would substitute in the response for vv0012 from page3.html from the same subject into your text.
For instance, if on page3.html, variable vv0012, you had people answer a question such as, "what is your friend's name?" and based on that answer, you would like the remainder of the questions (on different pages) to include their friend's name? (e.g. if they answered "Jimmy"), then "How old is ---VVSUBSTART---page3.html---12---VVSUBEND---?" would become "How old is Jimmy?"
Just to make things a little easier for me to parse, I only allow one of these per line in your html file.
If you want to use VVSUB, stop by my office.
To include images on your pages you can include a line like this:
<IMG src="---BASEURL---/theimage.jpg">
which would display the image "theimage.jog" which would obviously need to be copied to your study directory.
If you have a bunch of images, you can organize things a bit better by putting all the images in a separate folder in your study directly called "images" or whatever. If you do this, you'll need to refer to this subdirectory in the URL for the image like so:
<IMG src="---BASEURL---/images/theimage.jpg">
As well, depending on how you transfer the image files, you may need to change the permission of the images files to make them readable with the 'chmod' command at the unix prompt, e.g. after cd'ing to the directory where your images are, type something like the following to change the permission of the file to make it world readable:
chmod ugo+r theimage.jpg
If you are using SurveyMonkey...
- If you only have one condition, Survey Monkey will give you a URL that's something like:
  https://www.surveymonkey.com/s/XTZSC9Y
  
  When entering it as an external website in SONA, just append ?c=%SURVEY_CODE% at the end, so you'd enter:
  https://www.surveymonkey.com/s/XTZSC9Y?c=%SURVEY_CODE%
- If you want to use the makerandomurl's method to randomize between multiple conditions, just run the makerandomurl.pl program and enter your base SurveyMonkey URL's, each on a separate line, e.g.:
  https://www.surveymonkey.com/s/XTZSC9E
  https://www.surveymonkey.com/s/XMGZGGR
  Then, take the URL the program generates and append ?GID=%SURVEY_CODE% to the end for the SONA link. So if you are working on artsweb and called your makerandomurl's program "test", the URL would be:
  https://artsweb.uwaterloo.ca/cgi-bin/cgiwrap/myuserid/test?GID=%SURVEY_CODE%
  That should automatically pass the ID from SONA, through the randomization program, into SurveyMonkey. In the datafile the SONA ID will be labelled "Custom Field".

Gotchas

Here's some gotchas and additional notes:

There must be exactly 4 digits in the 'vvnnnn' variable name otherwise the submitted value will not be saved in the output file.
Make sure you follow the format of the files above, if you don't, things won't work
In order to do some easy error checking, some of the scripts I use require format to match fairly closely in the form "headers" - ie case is important, order of arguments, etc.
Make sure the first vv variable in each html file is vv0001.
Make sure you have the lastvv variable set correctly.
Always backup your html elsewhere before running the script in case something doesn't work as expected.
If you are using NVU to edit the html files, go into "Tools/Perferences/General" and select "Retain Original Source Formatting" rather than "Reformat HTML Source" otherwise the element tags may get rearranged to a wrong order. Also, in 'Tools/Preferences', uncheck 'Use CCS styles instead of HTML elements and attributes'. As well, when pasting HTML source into a document, right-click where you want to paste and select "Paste without Formatting" - this prevents some problems which a simple "paste" may introduce (sort of depends on the app you cut from). Also, if using NVU, the Publishing Site may need something like 'ftp://arts.uwaterloo.ca//u/bee/public_html/mywebstudy' or 'ftp://artsweb.uwaterloo.ca//home/bee/public_html/mywebstudy' (sub in your userid and student folder name) - note the two places requiring a double slash.
Here's some HTML samples you can cut and paste from.
check Psych Javascript Web Form Templates by Jeff Ouimet to check for blank fields, validate date fields and to display additional questions only in the event of specific responses.
check JavaScript Slider Templates on how to set up and save slider responses.
Jeff Hughes has a Scripts Repository with a number of useful tools.
Be sure not to place files containing confidential information (ie. subject names, contact informatio) anywhere under your public_html folder. By default, this information would become available to the world which would be a Bad Thing(TM).

Jump to - beeHive - UW Psychology - UWInfo Home Page