• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 4. Interactive DHTML Quizzes > Programming Question 1 with the Show-Hide...

Programming Question 1 with the Show-Hide Layers Behavior

You have set up the page and done all your aligning. The page looks good, but it doesn't do anything yet. In this task, you'll turn your nifty-looking page into a bona fide DHTML learning interaction.

First, you will add links to the four answer options; these links will let your user cause events (such as onClick ). Then, you will make the layers invisible. Next, you will add the Show-Hide Layers behavior to each of the links, and Dreamweaver will write the requisite JavaScript for you; all you have to do is tell it which layers to show and which to hide. (JavaScript, to review, does the work of changing the layer's attribute—in this case, changing its visibility attribute from hidden to visible—when the user causes an event such as clicking the link.)

Drag to select option A, and in the Link field of the Property inspector, enter #, and apply the bodytextlink style to the link (that is, to the <a> tag).

The # symbol is used in hyperlinks when you need text to appear as a link, but you don't want it to redirect the user to a different page. Specifically, the # symbol is a shortcut that refers to the current page. When placing it by itself, you are essentially telling the browser to redirect the user to the top of the current page.

Why would you want a link that doesn't lead anywhere? You need some way for the page to receive feedback from the user. Placing the # symbol in the Link field will result in a hyperlink being added to the text; it will appear colored and underlined, and the user's cursor will turn to a hand when she or he rolls over it. The # symbol gives you a means to add interactivity without redirecting the user to a different page.

Add a # link and the proper style to each of the three remaining options.

This is no different than the first option; all four answer options have the same hyperlink. All four will also have the same behavior applied to them: Show-Hide Layers.

What, then, will distinguish the correct answer from the incorrect ones? The correct answer will have different behavior parameters than the others. Specifically, option B, the correct answer, will show the correct layer and hide the incorrect layer. The other three options (A, C, and D) will show the incorrect layer and hide the correct layer.

Click to select the top (correct) layer, and in the Property inspector, change its visibility to hidden.

Be sure you select the layer itself, rather than the text in the layer. To do so, click the border around the edge of the layer. You'll know you selected the layer when black squares appear around its edges and the Property inspector shows layer properties.

You set visibility in the drop-down Vis menu. When you are finished, if you select anything else in your page, the layer disappears. This will give you an idea of what the page looks like with an invisible layer, but it can make life difficult when you need to edit the layer. To find and edit a hidden layer in Dreamweaver, be sure that View > Visual Aids > Invisible Elements is checked. Yellow icons lined at the top of the document signify layers. Clicking one of these icons selects (and makes visible) the layer it corresponds to.

Make the incorrect layer hidden as well.

This is no different than what you did in the previous step. The important thing to keep in mind is that you are changing the layer's visibility attribute.

Click anywhere in the option B link, which is the correct answer, and open the Behaviors panel (Window > Behaviors). Click the + symbol, and choose Show-Hide Layers from the Behaviors list.

The behavior you're adding inserts a JavaScript that toggles the visibility attribute on and off, triggered by a user event. Again, behaviors are added to links, which is why you made each of the options link to #. Unless a link is selected, the choices in the Behaviors panel will be grayed out.

Once you click the + symbol, you see a healthy list of behaviors. Some of them are quite easy and fun to deploy, like Play Sound or Pop-Up Message. After you select Show-Hide Layers, a dialog box appears.

With layer “correct” selected, click the Show button. Then select layer “incorrect” and click the Hide button. Click OK.

Dreamweaver knows which layers are already on the page, and since you gave the layers meaningful names, you can easily identify each one.

It's clear why you want to show the correct layer, but you may be wondering why you need to hide the incorrect layer, since it's already hidden. Even though the incorrect layer is hidden by default, you don't know what the user has done with it in the meantime. It's technically possible to have both layers visible at the same time, such that users would be told their answer was both correct and incorrect. If, for example, the user has already chosen an incorrect answer, then the incorrect layer will be visible. If the user then selects the correct answer, both the correct and the incorrect layer will show (because nothing told the incorrect layer to go away). To avoid this problem, you need to tell Dreamweaver to show the proper layer and hide all the other layers.

Before you move on, notice that the Show-Hide Layers behavior is now visible in the Behaviors panel. You can edit it later if you make a mistake (for example, you discover that you show a wrong layer). To modify an existing behavior, simply double-click it, and the dialog box will reappear with the current settings filled out.

Now that you've added the behavior, take a look at the link in the code window. Notice that Dreamweaver added some event-handling information, which basically says when the user clicks (onClick), perform the function MM_showHideLayers() using the parameters in the parentheses. The parentheses will contain the very information you just entered in the Show-Hide Layers dialog box.

One at a time, add a Show-Hide Layers behavior to each of the remaining links, so they show the incorrect layer and hide the correct layer.

This works just the same as the previous steps. By adding this behavior to the incorrect answers (A, C, and D), you have programmed the interaction so it responds properly in every possible circumstance.

In the Behaviors panel, where the newly added behavior appears, click the event onMouseOver and change it to onClick.

If you don't see onClick in the list, select the Show Events For option, and check 4.0 And Later Browsers, and then choose onClick.

What happened here is that Dreamweaver guessed that the event that you wanted to trigger with this layer change is the user rolling over the hyperlink. In the quiz, you really want clicking to be the trigger event. Fortunately, each behavior is listed beside the event that triggers it, so changing the event handler is just a matter of clicking and selecting the right one.

Press F12 to test the quiz for yourself.

If the user clicks the wrong answer, the incorrect feedback appears while the correct feedback is hidden. If the user then clicks the correct answer, the correct layer appears and the incorrect layer is hidden. The answers can be clicked in any order, and the right layer appears every time.

When you are satisfied, save and close quiz.html.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint