Automatic Scrolling

Ok, now this is really important. See how big your browser window is? You can't see very much information. Think you can cram your entire online survey, including room for responses, into that space? Not likely. This means your users will have to scroll through the questionnaire using those little scroll bars on the right side of the window to get through your questionnaire.

This may not seem like an inordinate amount of work for someone filling out a survey, but it represents one more place where you might get errors in responding, failures to complete the questionnaire, and so on. Can it be avoided?

Yes! The answer is to use what are called targets in your survey page. Targets are simply "anchors" in your web page. These are useful in order to get directly to a piece of information within a larger web page that won't fit on one screen's visible area. The location of the targets themselves are invisible to the user.

Here are few examples of targets. This piece of text here will scroll the web page to a target I have inserted in front of the word "Yes!" above. See how the page rolls to that location when you click the link. Here's another link that will scroll the page to the top of this paragraph. Pretty neat! It works only because in writing this page, I have inserted named targets (which are invisible to you) in this web page, and linked the relevant text to them.

The way to create a link that scrolls to a target is to link the text (or a button, or an image, etc.) to the target by using the # character. So, to link to a target named "yes," I would create a link to #yes. To link to a target named "here," I use the syntax #here. You can also link to specific locations in other web pages. Just append #targetname to the web page, like so:

http://www.depts.drew.edu/bhvr/forms/automaticscrolling.htm#yes

You can use this technique to help you users move through the questionnaire by inserting links that will scroll the next item to the top of the page every few items or so. In some cases, this is your only option. What it means is that the user can avoid using the scroll bar (which may cause them to inadvertently skip some items), and precisely scroll to the next item. I would use this only as much as is necessary (i.e., not after every item, but rather when the user reaches the bottom of a viewable page) -- if you do it every single item, your user might get dizzy.

Here is an example of how you might use this technique on a short survey. Answer the questions in sequence and see what happens.

With some types of form objects, (go to the page on form objects to learn more about what these are) you can automate the process even further, so that the document automatically scrolls to the next item with the previous item has been completed. This is done by attaching a behavior to a form object. This can be done with most types of form objects, but you need to be careful that the page behaves appropriately.

You simply attach the desired behavior -- which is to "Go to URL" in the menu that pops up when you try to attach a behavior in Dreamweaver, where the URL is #anchorname -- using an appropriate event. An event specifies exactly when you want the behavior to be executed. In some case, you might want the survey page to scroll when the user selects a response for an item. In others, you may want it to scroll when the user moves the mouse to the desired area.

Here are the events that are generally most useful for these form objects. Dreamweaver selects a default event when you attach a behavior to a form object, which you can change by clicking once on the behavior in the Behaviors dialog box, and clicking on the down arrow that appears next to "events."

1. Check boxes. Here you almost always want to use the "onClick" event. This event will trigger the behavior when the user presses and releases the mouse over the checkbox (i.e., selects the check box). But be careful! In many applications, check boxes will be used when the user is given a number of options, and is asked to select more than one, like so:

What are your favorite sports?
Basketball
Baseball
Volleyball
American Football
Soccer		  
With an item like this, you can't accurately predict what action will indicate that the user is done answering the question. Triggering the scroll by attaching the onClick event to the "soccer" checkbox might seem like a good idea, but it isn't. A user might click that box first, but still not be finished answer the question. Better to add a button after the item that is clicked when the user is finished with the item.

2. Radio Buttons. Same as with check boxes. You can use the "onClick" event, but be careful that that click on the radio button actually means that the user has completed the corresponding question.

3. Menus. Here the event you will use is called "onChange." This means that the behavior you attach will be triggered whenever the selected value in the menu changes. A special type of menu, called a Jump Menu is sometimes useful here too. A jump menu allows you to direct a user to a location based on the actual choice they make from the list. So, rather than simply directing users to a new location when the menu contents change, you can tailor where the user will go based on the choice they make. This is extremely useful if your questionnaire employs contingent questions. For example, suppose you are studying religious behavior, and your sample includes both "atheists" and "Muslims." Your questionnaire contains a number of questions about the degree of religiousness, but these only make sense to Muslims, so you don't want atheists to answer them. So, you could use a jump menu which asks, "Are you an atheist or a Muslim?" If users select "Muslim" they jump menu can be programmed to send them to the section questionnaire pertaining to Muslim religious behavior. If users select "atheist," they can be directed to the following section, skipping the religious questions. The questionnaire asks the "right" questions of the "right" people automatically. Neat!

4. Text Fields. Here you have some other options. The most likely event you'll want to use is "onBlur" which is triggered when the user stops interacting with the text field, that is, moves on to the next item. Or you can use "onFocus" which will be triggered when the user starts interacting with the text fields (i.e., uses the mouse to put the cursor in the text field. Another potentially useful event is "onKeyPress" which will fire when the user presses and releases a key while in the text field.

 

Experiment with different events and different degrees of scrolling until you get your questionnaire working smoothly and as you expect it to. Make sure you have a friend try to fill it out, so you can catch any confusing elements.