Creating a Pop-up Quiz with Microsoft FrontPage 2002
This page will help you make an interactive quiz with pop-up feedback using Microsoft FrontPage 2002. (FrontPage 2000 users see this page.) For an example of pop-up feedback, click the button below.
Click me!
Step 1: Inserting an option button
Create a new Web page or open up an existing page in Microsoft FrontPage. Format the page to how you want it (page width, page title, colors, fonts, etc.). Next, go to the Insert menu and select Form, then Option Button.
A form will appear on your page in a dotted outline with an option button, Submit button, and Reset button:
:
Delete the Submit and Reset buttons by clicking on them and pressing Backspace or Delete. Give your quiz a title by typing in some text to the left of the option button, and ask your first question. Type in your first answer option to the right of the option button. Insert an option button for each answer option like the sample below.
Step 2: Formatting the option buttons in HTML.
To format the option button correctly, you will need to edit the HTML of your page directly. Microsoft FrontPage has three ways to view a page while editing it: the Normal view, the HTML view, and the Preview view. Notice the three buttons in the bottom left corner of your screen:
Click on the first option button to select it, then click on the HTML tab in the middle to get to the HTML view. (You may return to the normal view at any time by clicking on the Normal tab.) The HTML corresponding to your first option button will be highlighted:
Delete the word checked from the HTML (so that neither button will appear checked on your quiz). Before the last » in the highlighted section, enter in onclick="alert(' ')". The section you edited should look like this:
<input type="radio" value="V1" name="R1" 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" value="V1" name="R1" onclick="alert('Sorry, try again.')"»
Now change the HTML for the second button from
<input type="radio" name="R1" value="V2"»
to
<input type="radio" name="R1" value="V2" onclick="alert(' ')"»
and enter in your feed back between the single quote marks like this:
<input type="radio" name="R1" value="V2" onclick="alert('Correct. Olympia is the capital of Washington.')"»
Repeat Steps 1 and 2 for each answer you want to include. The option buttons for each answer in Question 1 should have the name "R1". For Question 2, name each option button "R2". For each in Question 3, name them "R3" and so on.
Step 3: Previewing the pop-up buttons
Click on the Preview tab to test out your quiz:
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.