1 / 36

Select tags

Select tags. Design of a page that have the user guess the author of a quote (QuoteQuizDesign.htm). Place the cursor in the cell after the first quote and double click the Select item from the Toolbox. Right click on the select element and choose Properties.

watsonj
Download Presentation

Select tags

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Select tags

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

  3. Place the cursor in the cell after the first quote and double click the Select item from the Toolbox.

  4. Right click on the select element and choose Properties.

  5. Fill in the Text and Value boxes and then click Insert.

  6. When finished adding entries to the drop-down list, click OK.

  7. In the select code generated, change the id attribute to something meaningful.

  8. Result so far in browser.

  9. Change selected=“selected” to the blank option

  10. Now the drop-down list starts out blank.

  11. Copy drop-down lists into other rows.

  12. Change the ids of the copied drop-down lists.

  13. Result in browser.

  14. Add a button to the last column of the first row. Change id and value.

  15. Copy the button and paste it in the rest of the rows.

  16. Change the id – in the Properties Window or in Source view.

  17. Double click first button.

  18. 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.

  19. Add corresponding parameter to function.

  20. Result of clicking first button.

  21. 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.

  22. Result of clicking first button – gives the value “MT” assigned to the Mark Twain option.

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

  24. Result of disabling code.

  25. Add a second argument/parameter to the function call.

  26. Add a second parameter to the function definition.

  27. 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”

  28. Result of wrong answer.

  29. Result of right answer.

  30. Add another if to make sure user has answered question.

  31. Code now forces user to make a choice

  32. Copy the “onclick calling” of the function

  33. Paste it into the 2nd button tag, change the arguments.

  34. Finish the quiz; the answers are: • OW • BF • BF • MT • OW • OW • MT • MT

  35. User completed quiz.

  36. References • www.quoteland.com

More Related