New Perspectives on HTML, XHTML, and Dynamic HTML Chapter 6 Case Problem 2 Civil War Studies

New Perspectives on HTML, XHTML, and Dynamic HTML Chapter 6 Case Problem 2 Civil War Studies

Civil War Studies Adanya Lynne, a professor of military history at Ridgeview State College in Bartlett, Tennessee, has been preparing a series of online quizzes for her students. She has created the basicWeb page design and layout, but has come to you for help in designing the quiz form. She envisions a series of multiple choice questions displayed in a collection of option buttons. Students will be able to click answers on the form and then submit their answers to a CGI script running on theWeb server for their scores. Figure 6-61 shows a preview of the page you’ll create for Professor Lynne.

Complete the following:
1. Use your text editor to open the cwquiztxt.htm and qformtxt.css files from the tutorial.06\case2 folder included with your Data Files. Enter your name and the date in the comment section of each file. Save the files as cwquiz.htm and qform.css, respectively.
2. Go to the cwquiz.htm file in your text editor and insert a link to the qform.css style sheet.
3. Scroll down the file to the rightColumn div element. Professor Lynne has inserted the 10 questions for the online quiz. Enclose the questions in a form element with the id quizForm. Call the CGI script at http://www.ridgeviewcollmil.edu/quiz using the post method.
4. Go to the first question and enclose the text of the question in a div element with the class name question.
5. Enclose the set of answers for the first question within a field set.
6. Place a label element around each possible answer for the first question. Put the first answer in the class answerA, the second answer in the class answerB, the third answer in the class answerC, and the fourth answer in the class answerD.
7. Within each of the four labels for the answers to the first question, insert an option button directly before the text of the answer. Assign the ids ans1a, ans1b, ans1c, and ans1d to the four option buttons. Assign the field name question1 to each of the four option buttons. Finally, set the values for the four option buttons to a, b, c, and d.
8. Associate each of the four labels with a different id. Associate the first label with the ans1a field, the second with ans1b, the third with ans1c, and the fourth with ans1d.
9. Repeat Steps 4 through 8 for the remaining nine questions in the quiz, with the following changes:
- Change the ids for the four option buttons to the question number. For example, the ids for the second question are: ans2a, ans2b, ans2c, and ans2d.
- Change the field name of the four option buttons to the number of the question. For example, the field name for the second question is question2, for the third question is question3, and so forth.
10. After the last question, insert a div element with the id buttons. Within the element, insert a submit button with the value Submit, a command button with the value Answers, and a reset button with the value Reset.
11. Save your changes to the file.
12. Go to the qform.css file in your text editor and add the following styles to the style sheet:
- Float all elements of the question class on the left margin. Set their widths to 200 pixels and right-align the text. Set the clear style to left so that the element is only displayed when the left margin is clear.
- Display all field sets as block-level elements floated on the left margin. Set the size of the field sets to 400 pixels wide by 50 pixels high. Add a 20-pixel left margin and a 5-pixel bottom margin. Set the position property to relative. Finally, display the tan.jpg file as the background image for the field sets.
- Use absolute positioning to place all elements of the answerA class at the coordinates (0, 0), place answerB class elements at the coordinates (200, 0), place answerC class elements at (0, 25), and place answerD class elements at (200, 25).
- Center the contents of the div element with the buttons id. Set the width to 600 pixels and the top/bottom padding to 10 pixels. Set the left/right padding to 0 pixels.
- For input elements within the buttons div element, set the width to 100 pixels, set the top/bottom margin to 0 pixels, and set the left/right margin to 10 pixels.
13. Save your changes to the file and open cwquiz.htm in your Web browser. Verify that the layout and design resemble that shown in Figure 6-61.
14. Submit your completed files to your instructor.