"AWAY"
at the very top has been changed to "STARTLE"
Creating your own version of the online psychology experiment is very simple. The HTML file for the experiment has been designed in such away that it doesn't require extensive knowledge of the HTML language or of javascript. This brief tutorial will highlight the elements of the script which you can modify to change the images, timing, color, size, questions asked in the user profile and in the rating scale.
For your convenience this tutorial is divided into several sections with links provided in the table below. If this is your first time using this tutorial I suggest that you read and follow the sections in sequential order. If you have used this tutorial previously and decide to skip ahead, please be certain that you have made the necessary modifications to other sections of the script.
In this section of the script you change the number, duration, and order of the slides, as well as the source of the images.
The first thing that you will need to do is open the HTML file in a text editor. For simplicity I recommend using Simpletext for Macintosh computers or Wordpad or Notepad on a PC. As with all HTML files, the first line at the top of the screen should read:
<HTML>
followed by a series of similar tags. As you scroll a little further down the page you will see the following series of lines:
*Note: the numbers that appear in bold at the left of the lines have been added for ease of reference and are not apart of the experiment's code
// ################################################
// ####### BEGIN MODIFIABLE AREA - OPTIONS ########
// ################################################
// Set debug more ("true" or "false).
// Debug mode lets the user see the data at the end of the test.
var debug_mode = true;
// ---- SLIDE OPTIONS ----
// The Total number of slides to be shown
1 var num_slides = 7;
// How many slides are practice slides? (Can be zero.)
// (IMPORTANT: Practice slides should always come first.)
2 var num_practice = 2;
// Should the slide order be randomized? ("true" or "false")
3 var randomized = true;
// The image file of each slide
// IMPORTANT: Practice slides should always come first.
4 var image_names = new Array("gun.jpg", "ski.jpg", "slide1.jpg", "slide2.jpg",
"slide3.jpg", "slide4.jpg", "slide5.jpg");
// Time duration (in seconds) of each slide
5 var slide_times = new Array(2, 2, 2, 2, 2, 2, 2);
// The duration (in seconds) for which to show the "get ready" prompt
6 var get_ready_time = 1;
1 Refers to the total number of slides, including practice slides, that you will use in the experiment. To ensure that all of your slides will be used, be sure change this number accordingly.
2 Refers to the number of practice slides you plan to use. You may notice that the line directly preceeding this specifies that the practice slides always be displayed first.
3 This is the order in which you would like your slides to appear. If you would like the order of your slides randomized, set this value to true. If not, set it to false and in section 4 when you specify the images to be used be sure to list the slides in the order you would like to appear.
4 This is one of the most important changes you will need to make to the script for the experiment. First, you need to make sure that all the images you will use are saved in the same directory as this HTML file you are modifying. Thus, if this HTML file is called Psych.html and is saved in the folder Psych Experiment on your hard drive or in your CUNIX account, all of your images must also be in this folder. The next thing you need to do is list the exact names of the files you will be using in the order you would like them to appear beginning with your practice slides. It is not necessary to name your files according to the scheme previously used in the experiment ("slide1.jpg", "slide2.jpg", etc.), in fact it is better that you name the files in a way that is most convenient for you ("dog.jpg", "cat.bmp", or whatever scheme you choose.)
5 In this line you specify the amount time that each slide should be displayed on the screen. The time scale used is seconds and each of the numbers refers to a specific slide in sequential order. Thus, if you are using two practice slides, the first two numbers refer to these followed by the rest of the slides. If you choose to do so, it is possible for the slides to appear for different time durations.
6 The last preference you need to set in this section is the amount of time the stimulus prompt "Get Ready..." to be displayed. Here again the time scale used is seconds.
There are several changes which you will need to make in this section. The first two changes appear in the segment of the script directly proceeding the Slide Options section at the beginning of the experiment's code:
// ---- QUESTION OPTIONS ---- // Number of personal info questions 1a var num_personals = 2; // Number of questions after each slide 2a var num_questions = 6;
Scrolling further through the script will bring you to
two additional separate sections where you will need to make changes:
1b <!-- ############################################################ -->
<!-- ######## BEGIN MODIFIABLE AREA - PERSONAL INFO ############# -->
<!-- ############################################################ -->
<table width="400" border="1" height="30">
<tr>
<td align=center width="90">
<font color="#FFFFFF">Please enter your name: <input type="text" name="name">
</font></td>
<td align=center width="90">
<font color="#FFFFFF">Please enter your email: <input type="text"
name="email">
</font></td>
</td>
</tr>
</table>
<!-- ########################################################## -->
<!-- ######## END MODIFIABLE AREA - PERSONAL INFO ############# -->
<!-- ########################################################## -->
2b <!-- ############################################################## -->
<!-- ######## BEGIN MODIFIABLE AREA - SLIDE QUESTIONS ############# -->
<!-- ############################################################## -->
<div align="center">
<table width="400" border="1" height="30">
<!-- ###### VALENCE ###### -->
<tr>
<td align=center width="90"><font color="#FFFFFF">Unpleasant </font></td>
<td align="center" valign="middle">
<input type="radio" name="valence" value="1">
</td>
<td align="center" valign="middle">
<input type="radio" name="valence" value="2">
</td>
<td align="center" valign="middle">
<input type="radio" name="valence" value="3">
</td>
<td align="center" valign="middle">
<input type="radio" name="valence" value="4">
</td>
<td align="center" valign="middle">
<input type="radio" name="valence" value="5">
</td>
<td align="center" valign="middle">
<input type="radio" name="valence" value="6">
</td>
<td align="center" valign="middle">
<input type="radio" name="valence" value="7">
</td>
<td align=center width="85"><font color="#FFFFFF">Pleasant</font></td>
</tr>
</table>
</div>
<br>
<div align="center">
<table width="400" border="1" height="30">
<!-- ###### AROUSAL ###### -->
*This section continues according to this pattern.
1a and 1b both refer to the number and content of the personal questions you ask the subject. As a result, the number in 1a must agree with the number of fields contained in 1b. In this case there are only two question fields, name and e-mail. However, let's say that you want to find out the age of your subjects. In order to add this question all you need to do is set 1a to 3 and add the following lines, which are simply copies of the other lines with changes to the text, to 1b:
<td align=center width="90">
<font color="#FFFFFF">What is your age: <input type="text"
name="age">
</font></td>
*Be sure to change the name="..." field
Upon making this change 1b as a whole would appear as follows:
<!-- ############################################################ -->
<!-- ######## BEGIN MODIFIABLE AREA - PERSONAL INFO ############# -->
<!-- ############################################################ -->
<table width="400" border="1" height="30">
<tr>
<td align=center width="90">
<font color="#FFFFFF">Please enter your name: <input type="text" name="name">
</font></td>
<td align=center width="90">
<font color="#FFFFFF">Please enter your email: <input type="text"
name="email">
</font></td>
<td align=center width="90">
<font color="#FFFFFF">What is your age: <input type="text"
name="age">
</font></td>
</tr>
</table>
<!-- ########################################################## -->
<!-- ######## END MODIFIABLE AREA - PERSONAL INFO ############# -->
<!-- ########################################################## -->
Similarly, modifying the number of questions which appear in the rating scales requires you to first set the number of questions you will ask in 2a and then add the question to the tables in 2b. For example let's sat thay you want find out how startling the subject rates the image along with six other ratings you are requesting. In this case, 2a would be set to "7" and then we would add the following lines of code, or similar code to 2b:
<!-- ###### STARTLE ###### -->
<tr>
<td width="180"><font color="#FFFFFF">It startled me:</font></td>
<td align="center" valign="middle" width="38">
<input type="radio" name="startle" value="1">
</td>
<td align="center" valign="middle" width="35">
<input type="radio" name="startle" value="2">
</td>
<td align="center" valign="middle" width="41">
<input type="radio" name="startle" value="3">
</td>
<td align="center" valign="middle" width="29">
<input type="radio" name="startle" value="4">
</td>
<td align="center" valign="middle" width="38">
<input type="radio" name="startle" value="5">
</td>
</tr>
This section of code is simply a copy of the code for the question labeled ######## AWAY #########. If you compare the two sections you will see that the only difference between them is that:
"AWAY"
at the very top has been changed to "STARTLE"
"It
fascinated me:" on the third line is now "It startled me:"
For each
of the radio buttons the name has been changed from name="fasc"
to name="startle". It is very important that this
change be made because it is the only way that the javascript for the experiment
separates each question.
Modifying the instructions for your experiment is very simple. If you look at the fifth line of the code below which is found toward the middle of the experiment's script, you will see two bold, blue brackets where all the others are red. It is between these two brackets where you need to type your instructions. The size of the table surrounding your text will automatically adjust to the length of your instructions.
<!-- ########################################################### -->
<!-- ######## BEGIN MODIFIABLE AREA - INSTRUCTIONS ############# -->
<!-- ########################################################### -->
<b><font size="5" color="#FFFFFF">Instructions</font></b>
<table width="400" border="1" height="30">
<tr>
<td align=center width="90">
<font color="#FFFFFF">Here are your instructions... etc...</font>
</td>
</tr>
</table>
<!-- ######################################################### -->
<!-- ######## END MODIFIABLE AREA - INSTRUCTIONS ############# -->
<!-- ######################################################### -->
The section of the script is not enclosed in a region labeling it modifiable area; however, it is very easy to find because it is located toward the very end of the script. Don't be intimidated by the looks of this section it is just as simple to modify as all of the others. Again, as earlier in the tutorial the numbers along the left side are for ease of reference and are not a part of the script.
<layer id="Output" left=140 top=82 zIndex=4 visibility="hide">
1 <form name="data" method="post" action="http://www.columbia.edu/cgi-bin/generic-inbox.pl">
2 <INPUT TYPE="hidden" NAME="file_dest" VALUE="~ilia/psych">
3 <input type=hidden name=tab_delim value="true">
<input type=hidden name=echo_data value="true">
<SCRIPT LANGUAGE="JavaScript">
<!--
if (!debug_mode) {
var d = document;
4 d.write("<input type=hidden name=ack_link nd.write("value='http://ccnmtl.columbia.edu/draft/ilia/psych/thankyou.html'>\n");
}
//-->
</SCRIPT>
<!-- Extra values -->
5 <INPUT TYPE=hidden name=mail_dest value="ilia@columbia.edu">
6 <INPUT TYPE=hidden name=cc_sender value="true">
7 <INPUT TYPE="hidden" NAME="reqfields" VALUE="valence,arousal,var3,kept,away">
<INPUT TYPE=hidden name=cvt_nl value="true">
1 Refers to form processer used to process the data each subject submits.
2 This line specifies the inbox to which the data submitted is sent. In order to change and use this option you must create a web_allow directory with an inbox in which the data will be collected. Follow these instructions located in the AcIS help pages in order to do this: http://www.columbia.edu/httpd/cgi/generic-inbox.html
For each of you your inbox will simply be your Cunix user id followed by "/inbox." To send to my inbox for example this would be set to:
<INPUT TYPE="hidden" NAME="file_dest" VALUE="~rry1/inbox">
3 One feature of the form processer being used is that it allow tab delimited data. This simply specifies that each data value is separated making it easier to decipher and export into Excel or any other spreadsheet. With data you will be working with it is essential that this value set to "true"
4 This long line of text simply refers to the message that you would like to appear at the end of the experiment after the data is submitted. The segment to which you will need to make changes is the following:
name=ack_link nd.write("value='http://ccnmtl.columbia.edu/draft/ilia/psych/thankyou.html'>\n"
The ack_link which appears here is a way to specify an html page, image, etc. that you would like to appear. In this case it is "thankyou.html," however you can change this to specify another page that you have created or to any page of your choice. Let's say that you decide you want the end of the experiment to lead you back to the course web page. In this case line of code would read as follows:
d.write("<input type=hidden name=ack_link nd.write("value='http://www.columbia.edu/~lep1/rry/w3410/'>\n");
5 The simply specifies the e-mail address to which you would like your data to be sent. If you do not want the data e-mailed to you or anyone delete this entire line.
6 Just as with an e-mail you can specify a person to whom you would like to cc the data. If this value is set to "true" the e-mail address specified in the mail_dest directly preceeding will receive the data. Here you can also specify the e-mail address of another person. Let's say that you would like Professor Putnam to receive a copy of your data. In this case the line should appear as follows:
<INPUT TYPE=hidden name=cc_sender value="putnam@paradox.psych.columbia.edu">
7 This specifies the fields that must be completed by the subjects in order for the data to be submitted. In most cases you will require that all of the personal info and rating scale questions be answered, so here you will want to specify the exact names of those fields. Earlier in the tutorial for example, we added a question which allowed the subject to rate how startled they were by the images. Additionally, we changed the name of the input to startle by specifying name="startle." If we now want to include this in the list of required fields we simply add it's name to the list:
<INPUT TYPE="hidden" NAME="reqfields" VALUE="valence,arousal,var3,kept,away,startle">