Select tags CSD 340 (Blum)

Design of a page that have the user guess the author of a quote (QuoteQuizDesign.htm). CSD 340 (Blum)

Place the cursor in the cell after the first quote and double click the Select item from the Toolbox. CSD 340 (Blum)

Right click on the select element and choose Properties. CSD 340 (Blum)

Fill in the Text and Value boxes and then click Insert. CSD 340 (Blum)

When finished adding entries to the drop-down list, click OK. CSD 340 (Blum)

In the select code generated, change the id attribute to something meaningful. CSD 340 (Blum)

Result so far in browser. CSD 340 (Blum)

Change selected=“selected” to the blank option CSD 340 (Blum)

Now the drop-down list starts out blank. CSD 340 (Blum)

Copy drop-down lists into other rows. CSD 340 (Blum)

Change the ids of the copied drop-down lists. CSD 340 (Blum)

Result in browser. CSD 340 (Blum)

Add a button to the last column of the first row. Change id and value. CSD 340 (Blum)

Copy the button and paste it in the rest of the rows. CSD 340 (Blum)

Change the id – in the Properties Window or in Source view. CSD 340 (Blum)

Double click first button. CSD 340 (Blum)

Add an argument/parameter to the function. I added this 1 to refer to the question number. Instead of sending an id, I will construct the id from the number. CSD 340 (Blum)

Add corresponding parameter to function. CSD 340 (Blum)

Result of clicking first button. CSD 340 (Blum)

Concatenated id Note how in the argument of the getElementById method, we get a specific id for a drop-down list by concatenating “selQuote” and the number sent when the function was called. CSD 340 (Blum)

Result of clicking first button – gives the value “MT” assigned to the Mark Twain option. CSD 340 (Blum)

Add disabling code for both the button and the drop-down list (select element). CSD 340 (Blum)

Result of disabling code. CSD 340 (Blum)

Add a second argument/parameter to the function call. CSD 340 (Blum)

Add a second parameter to the function definition. CSD 340 (Blum)

Declare variable for user’s selection/answer Declare variable for user’s selection/answer. Use if to compare answer to user’s answer. If user’s answer and the answer are NOT equal, then change value of button to “No” CSD 340 (Blum)

Result of wrong answer. CSD 340 (Blum)

Result of right answer. CSD 340 (Blum)

Add another if to make sure user has answered question. CSD 340 (Blum)

Code now forces user to make a choice CSD 340 (Blum)

Copy the “onclick calling” of the function CSD 340 (Blum)

Paste it into the 2nd button tag, change the arguments. CSD 340 (Blum)

Finish the quiz; the answers are: OW BF MT CSD 340 (Blum)

User completed quiz. CSD 340 (Blum)

References www.quoteland.com CSD 340 (Blum)