Web Experiment Tutorial: Chapter 5, HTML for Flash Experiments

Several years ago, I wrote a tutorial for my previous lab on how to create Web-based experiments in Flash. Over the next number of months, I'll be posting that tutorial chapter by chapter.

Now you have an experiment, but you can’t retrieve the data from it. This limits the usefulness of the experiment. In this chapter, we will finish implementing the experiment. This includes both recording the data and also presenting the experiment online.

To do this, you will need to learn a small amount of HTML, MySQL and PHP.

1. What is HTML?

HTML is the bread and butter language of the Web. It is not a programming language in the same sense that C++ or BASIC are. It’s better described as a “mark-up” language. That is, an HTML file is essentially a text document with codes interspersed, telling the web browser how to display that text.

An HTML file can have more than just HTML in it. Frequently, it also contains JavaScript, which are quite different from HTML. We will use both.

An indepth discussion of HTML and JavaScript is outside the scope of this manual. Our purpose here is to learn just enough to allow you to display your experiment to participants.

2. Create an experiment homepage.

I use Dreamweaver to create web pages. Dreamweaver allows a great deal of flexibility in formatting. Having a pretty webpage is not strictly necessary, but the better your webpage looks, the more participants will take it seriously. Think about whether you would rather give personal information to a website that looks like it was created by an orangutan or one that looks like it was created by a highly sophisticated team of programmers.

Download and expand VSTM.zip. Open index.html. Index.html is the experiment’s homepage. It has some nice features you could use, such as a scroll bar for the center frame.

You should edit this page as appropriate. If you have a standard formatting for your website, you can adjust to fit that. One thing to notice is that the name of the laboratory is prominently displayed. This is because people may surf directly to this page. Ideally, you would also have links to the rest of your lab website (that’s what I use the top bar of this page for).

Also, notice that there is very little text. It's often a good idea to have as little text as possible, but at the same time, be as informative as possible. Notice also that the link to the experiment (VSTM) is highlighted so that participants don’t have to hunt around for it.

3. The consent form.

There is a link in the center of the page. The text is “Try the VSTM experiment by clicking here.” This link opens “consent.html”. Consent.html is a fairly simple page and as actually created in a text editor. The participant sees a consent form. This particular consent form was required by the Harvard IRB.

If you want your experiment to pop up in a new window centered in computer screen, you can do this with some JavaScript, which you can find by looking through consent.html:

This sets up a subroutine called “NewWindow” that does two things. First, it will open test_in_progress.html. It will also open another window and center it in the middle of the subject’s screen. This other window will contain the experiment itself (to be discussed in another chapter). Generally in vision experiments, you would like the experimental window to be centered.

This subroutine is called by the link itself. Look towards the bottom of the file:

This code both presents the link to the participant and also causes the new window to appear in the middle of the screen when "Yes, I Agree" is clicked. Notice that the size of the window is set to 650x500. You'll want that to match both the size of the Flash file you've created (slightly larger is OK) and also the dimensions specified in the .php file which will be discussed in the next chapter.

3. The other HTML files.

There are two other HTML files included: test_in_progress.html and done.html. These two are themselves called by PHP files. test_in_progress.html is called by test_popup.php (linked to by Consent.html). It displays below the experimental window itself while the experiment is running. It contains some text telling participants what to do if the experimental window doesn’t show up or if they should leave the experiment early. Done.html is called by the experiment when the subject exits the experiment.

Both are fairly self-explanatory.