How to Make a Psych Experiment Work Online

HOW TO MAKE A PSYCH EXPERIMENT WORK ONLINE:

Jeanine Skorinko

1)How to build a webpage 101

a)Open a typing program on your computer

For macs, Simpletext or Textedit for OS X
For pcs, use WordPad or Notepad
Occassionally, these programs will tell you that they don’t have any more memory for more code, so I use Word, but I HATE it. You have to be very careful to save it as a textfile and not a word doc or a word html file (it puts all this nonsense in the code and it is impossible to find what you want to change).

b)The first thing you need to know is that you always “open” and “close” a command. If you want to start a paragraph you’d put <p>, at the end of the paragraph you have to close it, /p>. It looks like this:

<p> I started my paragraph. I’m writing text that will be seen. Now I am finished. So, I close the paragraph. </p>

c)To begin a html document you start the page with:

<html>

d)Next comes the head section, this is where you will put the page title and if you use any javascript codes 99% of the time they go in this section. So far the webpage looks like this:

html

<head>

<title>Class Project</title>

</head>

e)Next you would add the FORM command so the data knows where to go:

html

head

title>Class Project</title

/head

f)NOTICE: The <form> is not closed. You won’t close it until the end.

g)Now the fun begins. You start the BODY section which is where all the cool stuff comes into play. You start a body section with <body>. You can change the color of the background and the text color and font too.

html

head

title>Class Project</title

/head

form action=" method="post">

h)bgcolor = the background color. To change it you need to find the web-safe colors this can be found online. Text = the color of the text, again web-safe colors and the codes can be found online.

i)The important codes to know:

Paragraph = <p> </p>

Center = <center> </center>

Bold = <b> </b>

Italics = <i> </i>

Underline = <u> </u>

Line Breaks = <br> (you don’t have to close this one)

2)The experiment tools:

Note: Things you will want to change are in orange.

Inserting a Picture:
img src="wm2p.jpg">
wm2p.jpg This is the name of your picture file. You must upload it separately onto your website.
On a mac, you can use the program Fetch
On a pc, you can use FT
For an example see:
Inserting a Video/Audio Clip:
To embed it within the same webpage (this may cause some problems with your webpage’s “look”) but it works nicely:

embed src="bball.mov"

pluginspage="

width=192 height=168

loop="false" controller="true" autoplay="true"

alt="bball.mov. You need quicktime plug in for this to work">

/embed

embed src="bball.mov" This is the name of your movie file. You must upload it separately onto your website.
pluginspage=" This is a link to get the plugin for a quicktime video if they do not have it. You can delete this if you aren’t using .mov (quicktime) or if you don’t want it there.
Note: The different movie files are: .mov, .avi., .wav.
Macs and Pcs can play both, but quicktime is sometimes the easiest…
Again, your movie file name: alt="bball.mov.
This will tell the participant that they need the plugin for the movie to work: You need quicktime plug in for this to work">
For an example see:

iii. Disabling the Back Button

This code prevents the person from accessing the previously view page (e.g. the back button won’t work)
NOTE: This code does not always work, but it is the best one out there—I promise I looked long and hard!
The code can be placed either in the <head> </head> section or just underneath it (before the <form> and <body>):

script language="JavaScript">

!--

javascript:window.history.forward(1);

//--

/script

iv) Must Answer This Question

This code prevents the person from submitting the form without answering a question.
It is long and tedious and usually not worth the effort
This one works with the Free Response Boxes:

html

head

title>Extra Credit Questionnaire</title

script language="JavaScript">

function print_missinginfo() {

missinginfo ="______\n" +

"The Following Fields are Required:\n" +

missinginfo + "\n______" +

"\n";

alert(missinginfo);

document.janetta.mombdaycode.focus();

}

function checkForm() {

missinginfo = "";

if (document.janetta.mombdaycode.value == "") {

missinginfo += "\n - Mother's Maiden Name and Your Birthday";

}

if (missinginfo != "") {

print_missinginfo();

return false;

}

else return true;

}

/script/head

body bgcolor="#99ccff" text="#000000">

form name=janetta action=" method="post" onSubmit="return checkForm();">

document.janetta.mombdaycode.focus();
This tells the webpage to take the participant to this question if they did not fill something in
As far as I know you can only focus on one question, even if you have several you want to make sure are fill out…this only means the participant needs to find the other questions
This is the form’s name: janetta This you set in the <form> area
You change it here:form name=janetta
This is the question’s name: mombdaycode
You decide which free response question you want and put the NAME you gave it up here
This is so it knows which question must be answered in order to submit the form.

c. This is the question you are asking and it is shown to the Participant so they know which question you are talking about (you could add a question #): missinginfo += "\n - Mother's Maiden Name and Your Birthday";

For an example see:
Try clicking the submit button 

This one works with the Buttons (7 point likert):

html

head

title>Civil Trials</title

script language="JavaScript">

function print_missinginfo() {

missinginfo ="______\n" +

"The Following Fields are Required:\n" +

missinginfo + "\n______" +

"\n";

alert(missinginfo);

document.civil1.disagree.focus();

}

function checkForm() {

}

if (disagreechecked != true) {

missinginfo += "\n - Mary Stuart Disagreeable";

}

if (missinginfo != "") {

print_missinginfo();

return false;

}

else return true;

}

/script/head

body bgcolor="#99ccff" text="#000000">

form name=civil1 action=" method="post" onSubmit="return checkForm();">

document.civil1.disagree.focus();
This tells the webpage to take the participant to this question if they did not fill something in
As far as I know you can only focus on one question, even if you have several you want to make sure are fill out…this only means the participant needs to find the other questions
This is the form’s name: civil1 This you set in the <form> area
You change it here:form name=civil1
This is the question’s name: disagree
You decide which free response question you want and put the NAME you gave it up here
This is so it knows which question must be answered in order to submit the form.

c. This is the question you are asking and it is shown to the Participant so they know which question you are talking about (you could add a question #): missinginfo += "\n - How Disagreeable is Mary Stuart?

For an example see:

Try clicking the submit button 

3)The survey tools:

7 point scales (or 5 or 9 or however many you want)
This is for an buttons to be clicked
Things you will want to change are in orange.

p1. How talented do you think the announcer is?/p

table border=0>

td width=90 align=center> <input type=radio name=annoucertalent value="1"</td

td width=90 align=center> <input type=radio name=annoucertalent value="2"</td

td width=90 align=center> <input type=radio name=annoucertalent value="3"</td

td width=90 align=center> <input type=radio name=annoucertalent value="4"</td

td width=90 align=center> <input type=radio name=annoucertalent value="5"</td

td width=90 align=center> <input type=radio name=annoucertalent value="6"</td

td width=90 align=center> <input type=radio name=annoucertalent value="7"</td

/tr

td width=90 align=center> 1 </td

td width=90 align=center> 2 </td

td width=90 align=center> 3 </td

td width=90 align=center> 4 </td

td width=90 align=center> 5 </td

td width=90 align=center> 6 </td

td width=90 align=center> 7 </td

/tr

td width=90 align=center> Not At All/td

td width=90 align=center> </td

td width=90 align=center> Extremely/td

/tr

/table

<table border=0This says “I don’t want a border”. If you want a border change it to: <table border=na0
This is your question, so change it to whatever your question is <p1. How talented do you think the announcer is?/p
annoucertalent : This is VERYimportant to change foreach question!!!!! It will become your column name for your data. If it is the same as any other question, the data will not separate because it will think it is the same question. This really sucks when it happens, I know!, so be careful!
td width=90 align=center> <input type=radio name=annoucertalent value="7"</td> This code here tells the web that you want radio button and that if someone were to click on this particular button to report that as a number 7. You add this line as many times as you want or delete it, but you want to make sure that you don’t have all the values the same number (e.g. 7) or you won’t know which button they picked.
td width=90 align=center> 1 </tdThis code displays a “1” underneath the button, you can change that if you wish
td width=90 align=center> Not At All/tdThis will put the words “Not At All” underneath the “1” on the webpage. If you want it to be blank, it would just simply not say anything:td width=90 align=center> </td
For an example see:

ii) Drop Down Boxes

This is to select one (e.g. like when you need to select your state on an online form)
In order to do this:

p21. What is your gender?

select NAME="gender">

<option VALUE="0">Select One

option VALUE="1">Male

option VALUE="2">Female

/select

p21. What is your gender? Again, this is the question you are asking
select NAME="gender"> The gender is going to be the columns name in the excel sheet, so make sure it is the only one!
option VALUE="0">Select One Select One is the choice the participant will see. The value is the number you want it to report as. So in this case Males = 1, Females = 2. By putting select one and = 0, you know if they answered it or not.
For an example see:

iii) Free Response Boxes

This is so people can type in whatever they want.
It should look like this:

p25. What do you think this study is about?/p

textarea NAME="purpose" WRAP="Virtual" ROWS="4" COLS="100"</textareap

p25. What do you think this study is about?/pAgain, your question…you change it to whatever you want it to be
NAME="purpose" Again, this will be the name of the column for this question in excel. If you don’t change the name to something different it will not report correctly.
ROWS="4" This determines how far down the webpage the box will go. This one will go down 4 rows, you can change it to however many or few you want.
COLS="100"> This determines how far across the page the box will go, again you can change it at your will.
For an example see:

iv) Small Text Boxes

This is when you only want them to put a small number or something short.
It should look like this:

p17. Please estimate the percentage of UVA students whose attitudes towards African Americans are similar to you. </p

pinput TYPE="text" NAME="uvaattitude" SIZE="10" MAXLENGTH="10"</p

Again, this is the question you are asking :p17. Please estimate the percentage of UVA students whose attitudes towards African Americans are similar to you. </p
Again, this is the column name in excel, if it is the same as any other name on the webpage, you won’t get the answer back properly. NAME="uvaattitude"
You can change the size of the box by changing these numbers: SIZE="10" MAXLENGTH="10">
For an example see:

A) To submit your data:

This will put a “submit” button at the bottom of your page
Enter this code:

p>Please click the Submit button. </p

</p

/form

br>Thank you for participating!

brbrbr

/body

/html

3. Notice that you closed the form, the body, and the html.

4)How to get the data back to you—spreadsheet ready

a)First you want to create a new folder for the data to be stored in (this way you can run and keep several different studies on your account without the data getting bunched into one directory)

On a mac, you can log into Fetch and create a folder there, or access your home directory
On a pc, don’t know so let me know….

b) UVA uses a program they created called Easyform

To get it onto your account you:
Log into your UNIX account
via telenet—on a mac
Select # 9 to log into UNIX
type in:

cd public_html

This changes your directory to your public_html directory

then type in:

/contrib/bin/efsetup -d /home/jls9tp/public_html/survey/

instead of “jls9tp” put your Email ID
instead of “survey” put your folder’s name

You will know if it worked if you see the following blurb on your UNIX account:

E-mail will be sent to:

Installing /home/mst3k/public_html/email.dat

Installing /home/mst3k/public_html/easyform.cgi

Installing /home/mst3k/public_html/easymail.cgi

Installing /home/mst3k/public_html/efresult.html

Installing /home/mst3k/public_html/Readme file.

All done.

5)How to get my webpage to know that I want the data to send to my account and where to send it to?

a)Inside your html code, you will put the following piece of code inbetween the </head> and <body> sections (if this doesn’t make sense now it will in the web page building section—I hope ):

b)instead of “mst3k” you will put your email id

c)If you want to get each piece of data emailed to you after it is submitted then you would use the following piece of code:

d)again, instead of “mst3k” you will put your email id

e)notice the only difference is “easyform” and “easymail”

6)So how do I get my data from my account?

a)You’ll have to log into your account, go into your folder, and download the data

b)The data is stored as a text file on your account it is called output.txt

c)The column names are stored in another text file called formkeys.dat

d)To open output.txt in excel:

Download output.txt
Mac—use Fetch; PC—use FTP
Open Excel
Click FILE, OPEN, and find and select output.txt

e)To open formkeys.dat in excel:

Follow directions above
The list will come in one column. To get them across the rows do the following:
Copy the Column with all the names
Open a new Excel Sheet
Select the Row you want to paste into so the entire row is highlighted
Click on EDIT, and PASTE SPECIAL
In the Paste Special box, you will see a little checkbox that says TRANSPOSE
Click OK, and it should work
You can then copy that row and insert it into the excel sheet with the data.

7) So how do I randomize this thing anyway?

To randomize, you need to have a “homepage”. I usually use this page as the instruction and informed consent page. You put the randomization code on this page, they click a link “Begin Study” and it will randomly take them to one of the several webpages you want
The code is placed at the bottom of the page just before </body> </html> and looks like this:

centerscript language="Javascript"> <!--

var currentdate = 0

var theranlink = " "

var core = 0

function StringArray (n) {

this.length = n

for (var i =1; i<= n; i++) {

this[i] = ''

}

link = new StringArray(3)

link[0] = 'trial/group2.html'

link[1] = 'trial/group3.html'

link[2] = 'trial/group4.html'

var ran = 60/link.length

function ranlink () {

currentdate = new Date()

core = currentdate.getSeconds()

adcore = Math.floor(core/ran)

core = adcore

theranlink = link[core]

self.location = theranlink

}

document.write("<a href='javascript:ranlink()'<fontsize=10Begin Study/a>")

//-->

/script

/center

/body

/html

This is the total # of webpages that you want randomized. In this case I have 3 pages: link = new StringArray(3)
This is where you put the webpage name: link[0] = 'trial/group2.html'
Note: You always begin with “0” (link[0]) and start counting up from there
Here I’ve included the folder name trial that this study is stored in: 'trial/group2.html'
However, this only works for Netscape. To use with Explorer, you will only put the file name: link[0] = 'group2.html'
Note: Try it on both browsers, sometimes the no folder name works with both, sometimes it doesn’t….it is really weird
For an example see
Note: If you are using EXPLORER you may get an error message that says “The requested URL /~jls9tp/impression/impression/rate4.html was not found on (Error 404-NOT_FOUND).” All you have to do is take out the one extra impression. Explorer puts two folder names, it works find with Netscape. This is an example of the browser incompatibilities. You can resolve this by putting a note on your study saying you can only use one browser over the other…or have your Ras only use one browser.

8) So how do I know which data set is for which condition

This can be solved by adding a hidden code that will be always be submitted with the page.
The code looks like this and can be placed underneath the <form> command:

input TYPE="hidden" Name="condition" value="white defendant">