Exit tutorial


HTML Tutorial
Dreamweaver Tutorials
Making a Quiz with Pop-up Feedback in Dreamweaver 


This page will help you make an interactive quiz with pop-up feedback using Macromedia Dreamweaver.
For an example of pop-up feedback, click the button below.

Click me!

Step 1: Creating a Form.
Create a new Web page or open up an existing page in Macromedia Dreamweaver. Format the page to how you want it (page width, page title, colors, fonts, etc.). Next, go to the Insert menu and select Form.

Insert Form

A form will appear on your page in a red dotted outline:

Form

Step 2: Inserting a radio button.
Give your quiz a title by typing in some text, and ask your first question. Hold the Shift key and press the Enter key (or Shift+Return) to go to the next line. Go to the Insert menu, select Form Objects, then Radio Button. A radio button will appear. Type in your first answer option to the right of the radio button.

Pop Quiz Sample: Seattle Trivia. True or False: Seattle is the capital of WA.

Step 3: Naming the Radio button.
Click on the radio button and go to the Properties Box, shown below. (If the box is not on your screen, go to the Window menu and select Properties.)

Radio Button

In the first box, type in Question1 (use this name for each answer in Question 1...it doesn't matter what name you choose as long as you use it consistently). For Checked Value, enter the answer corresponding to the button. Make sure the Initial State is Unchecked.

Step 4: Formatting the radio button in HTML.
To format the radio button correctly, you will need to edit the HTML of your page directly. Dreamweaver has three ways to view a page while editing it: the What-You-See-Is-What-You-Get (WYSIWYG) view, the HTML view, and a combination view with both WYSIWYG and HTML. Notice the three buttons in the upper left corner of your screen:

<> <>/  []

Click on the button in the middle to get to the view of WYSIWYG + HTML. (To return to the normal WYSIWYG view, click on the button on the right.) Click on the radio button, and the corresponding HTML code will be highlighted in black, as shown below.

<input type="radio" name="Quetion1" value="True">

Before the last > in the highlighted HTML, type in onclick="alert(' ')". The section you edited should look like this:

<input type="radio" name="Question1" value="True" onclick="alert(' ')">

Inside the single quote marks, type in the feedback for the first answer. For the sample quiz, it would be the words Sorry, try again. You may want to use Correct and Incorrect, or give other feedback. Make sure your feedback does not include commonly used HTML characters like quotation marks or apostrophes. The line should now read something like this:

<input type="radio" name="Question1" value="True" onclick="alert('Sorry, try again.')">

Repeat Steps 2 - 4 for each answer you want to include. Name the radio buttons for each answer in Question 1 "Question1" but change the Checked Value name and feedback accordingly. For Question 2, name each radio button "Question2" and so on.

Step 5: Testing the quiz.
Save your changes, then go to the File menu and select Preview in Browser to test the page. Your quiz should work like the sample below. If one or more of the buttons is not working, check to make sure you used correct punctuation in the HTML.

Pop Quiz Sample: Seattle Trivia

1. True or False: Seattle is the capital of Washington.

True.
False.

2. Which of the following bodies of water in Seattle hosts the hydroplane races?

Green Lake.
Lake Washington.
Lake Union.
Elliot Bay.

3. Which of the following can be found just outside the Seattle Art Museum?

A building shaped like a broken guitar.
A large steel sculpture of a hammering man.
A giant stone troll.
A miniature Statue of Liberty.

[Back to the Stage 4 Index]