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

Lesson 4. Interactive DHTML Quizzes > Preparing for the Question 1 Interaction

Preparing for the Question 1 Interaction

The first quiz question strategically uses the changing of a single parameter—the visibility of the feedback layers—to provide useful feedback to the quiz-taker. Behind the scenes, it will work just as explained above. On the page, you will need to create layers, which is a first in this book, and add the behaviors that will make this interaction tick.

Open quiz1_text.txt, which can be found in the site's Text Files folder, in any text editor (including Dreamweaver MX), copy all of the text, and paste it into quiz.html over the XXXX placeholder text.

Write all the content in advance to make development that much easier; then you'll only have to worry about the technology.


This process of writing the content of a multimedia interaction is called scripting. To avoid confusion with scripting in the sense of JavaScript programming, I use the term “write.” But be aware that in common terminology, when developers build a multimedia asset from an already written document, that document is referred to as the script.

Place the cursor just before the 1 in the first question, choose Insert Table, and give it the following specifications: 1 row, 2 columns, 0 cell padding, 0 cell spacing, 735 pixels width, 1 border.

Before putting in this table, the text ran all the way across the screen from left to right. The goal is to position the correct-feedback layers to the right of the questions, so they are side-by-side. But since the layers float, they would block everything beneath them in the right half of the page. Creating a table solves this problem by containing all the question text on the left. The table divides the page neatly into columns, while the layer can float over the right half of the page. To the user, it will look like the layer text is inside the right half of the table, but in fact the layers are not affected (much less contained) by the table.

Select the question and the four options, then copy and paste them into the left table cell. If necessary, when finished, drag the center vertical line of the table back to the middle.

Here you are simply containing the text in the left half of the table. Sometimes Dreamweaver changes the width of the table cells when you paste in content. If that happens, simply drag the middle divider to the desired spot.

You don't need to copy the correct-answer feedback text into the table, because that will go into the two layers.

Click the Draw Layer object in the Common tab of the Insert panel, and drag out a layer that fills the top half or so of the right side of the table, leaving some white space around its four sides.

Layers use the <div> tag, and their parameters include size and positioning in pixels. They usually appear near the top of the <body> segment. Because they float, they do not need to be placed in line, so it doesn't matter where the cursor is on the page when you insert one (in contrast to inserting images).

Layers don't always appear exactly where you expect them to in different browsers. To deal with this nuisance, leave some white space around them, thus providing a small buffer for imprecision.

If the table suddenly resizes itself again, just drag the middle divider (which could be all the way over to the right) to the desired location—in this case, the middle.

With the layer still selected, in the Property inspector, choose a medium gray (#999999) as the background color and change the Layer ID field to correct.

Coloring the layer will help distinguish it when it appears.

Giving the layer a descriptive name will make it easier to identify it when you start building behaviors, and here's why: You know that when the user triggers an event, a JavaScript function or method is called. That function or method finds the layer and changes whatever property it was written to affect. But how does the function know which layer to modify? When the user clicks link X, not only is the function called, but it also is told to act on layer X. Each layer has a unique ID, which the event handler passes to the function as a parameter. The minimum requirement for all this to work is for each layer to have a unique ID; Dreamweaver automatically gives layers unique IDs when you create them.

You also need to give each layer a descriptive name because when you are programming the behaviors, you have to select the target layer from a drop-down list of all the layers on the page. If the layers are called layer1, layer2, and so on, it will be hard for you to ensure you are assigning actions to the proper layers. By giving each layer a descriptive name, you simplify your own job later on. Always give objects, whether CSS layers in Dreamweaver or Flash objects, descriptive names.

Place your cursor inside the “Correct!…” response near the bottom of the page, select the <p> tag in the tag selector, and choose Edit > Cut. Then click anywhere inside the new layer, and choose Edit > Paste. Be sure the bodytext CSS style is applied to this paragraph. Finally, select the text and change its color to white (#FFFFFF) using the Property inspector.

Setting the correct-answer feedback text as white against dark sets it apart from the question text, which is dark on white. Little nuances like this make your applications easier to understand.

Following the steps above, add a second layer beneath the first, whose background is red (#990000), with incorrect as the Layer ID, with the “Incorrect…” feedback pasted in, formatted as a paragraph with the bodytext style applied, and with a white font.

Giving a different color to the layer for the incorrect-answer feedback distinguishes it from the correct-answer layer. Making it red is an impish play with the color's association with error and the fact that this is a red-dominated site about the Inferno.

Again, it is equally important to give this layer a meaningful layer ID to simplify adding behaviors.

Press F12 to preview the page in your browser. If the layers are in the wrong place (a common problem), go back into Dreamweaver and move them, eyeballing the page as you go back and forth between Dreamweaver and the browser. It may take several tries. When it is positioned correctly in the browser, save the file in Dreamweaver.

This is a huge annoyance. Different browsers render pages differently. All of them place a small gutter margin around the page, but that gutter is not uniform across browsers. Since layers are positioned relative to the top-left corner of the screen without taking the gutter margins into account, they usually end up in the wrong place.

The worst part about this is that once you have the layer positioned correctly in your browser (however weird it may look in Dreamweaver), chances are it will look misplaced (slightly or horribly) in a different browser, or in the same browser on a different operating system. There is not much you can do about this. Some high-budget sites customize pages for different browsers, using a browser detection script to load the best page for that browser. Most educators don't have access to those high budgets, though. About all you can do is recommend to your users the browser that you developed for or the one more commonly used among your user group. If you are a professor, you have the luxury of requiring that your students use a certain browser. That won't guarantee that they will, but at least you're covered if they complain.


You might also consider the following workaround. You can force the page margins to 0, which at least minimizes the inconsistency, making the layers more likely to show up in the right place in different browsers. To do so, choose Modify > Page Properties. Enter 0 in both the Top Margin and Left Margin fields, which are empty by default. The only catch with this technique is that the page will be positioned slightly differently than all the other pages in the site. To be consistent, you would have to remove the margins from all pages in the site. The best way to do that (though it's beyond the scope of this book) is to use the Find and Replace dialog box, which can make changes to source code in multiple documents.

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