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.
A form will appear on your page in a red dotted outline:
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.
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.)
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.
Before the last > in the highlighted HTML,
type in onclick="alert(' ')". The section you edited
should look like this:
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:
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.