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

Lesson 4. Interactive DHTML Quizzes > Programming Quiz 3 Using Set Text of Laye...

Programming Quiz 3 Using Set Text of Layer

You are becoming an expert at using layers and behaviors to create interactivity. This is the creative side of Dreamweaver that I find rewarding, since the result/effort ratio is so high.

As with the previous task, I have already set up the page, so all you need to do is program it. You will use the Set Text of Layer behavior, which works like this: A user-initiated event (onClick) invokes a JavaScript that changes a layer property on the fly. But this time, the layer property refers to all of the HTML text and formatting that appears on the layer!

In effect, while there will be only one layer on the page, it can display five different pages of content: the original layer text, then one page for each of the four quiz options, or distracters.

Open quiz3_text.txt in the Text Files folder, in any text editor, and copy the first block of HTML code.

This behavior replaces all of the HTML code inside the layer with new HTML code. To spare you some typing, I provide all of the text and code you need for the task in this file. For now, you only need the first block of code. Don't close the file, though; you'll need it later.

Open quiz3.html and add a dummy hyperlink (using #) to each of the four distracters, making sure to apply the bodytextlink style to each.

This is old hat to you at this point. Once again, adding the dummy links makes it possible for your user to initiate an event.

Click anywhere in the first distracter, click the Behaviors panel + symbol, and choose Set Text > Set Text of Layer.

This behavior is nestled among a group of set text behaviors. Again, the text you set with the Set Text of Layer is any kind of HTML markup that can be stored in a layer, including the text and tags used to format it. Just imagine what you could do with some of those other behaviors!

Paste the code you copied in step 1 into the New HTML field and click OK.

Here is one excellent reason to know some HTML. Sure, you can just paste in text and not worry about the formatting, but it won't look very professional. Take a moment to study the HTML and figure out what it does.

In a pinch, if you don't know HTML, you can always format the text the way you like it in Dreamweaver, then copy it and its formatting in Code View, and paste that into the HTML field of this dialog.


Since this is source HTML you are inserting, you could do much more than change some text: You could change images or even swap embedded Flash movies! Just about whatever you can do in HTML, you can do on a layer, so the possibilities of this interaction are truly impressive.

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.

Using the quiz3_text.txt, add the Set Text of Layer behavior to each of the remaining three distracters, changing each one's event to onClick.

Once you know how, adding behaviors is a breeze.

Press F12 to test the page.

Make sure that clicking (not rolling over) each distracter changes the layer to the correct text.

From within the browser, view the source code. To do that in Internet Explorer, choose View > Source; in Netscape, choose View > Page Source.

Scroll down toward the bottom of the page and try to look for any text (as opposed to code). You will see the complete answers to this quiz question as a part of the Set Text of Layer behavior.

There is a crucial security issue here. Even though the layer is invisible when browsing, all of the text is still downloaded onto the user's machine. That means that the answers are as easy to find as viewing the source code.


Do not use DHTML for graded or secure quizzes or exams.

Notice the text of the site mentions this is a “self-assessment” quiz. DHTML is great for quizzes taken for fun, but it is dangerous to use it for quizzes for testing or grading. Use a secure environment, such as the ColdFusion server-side scripting shown later in this book, for that. Remember that you can use DHTML to create all sorts of interactions—not just quizzes—so run with your instructional design creativity.

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