A Departmental Survey of Graduating Majors, Part 2

For practice, this lab refines and extends the initial lab for A Departmental Survey of Graduating Majors.

As noted on the course's Web page, the following references may be useful for information on cascading style sheets:

• World Wide Web Consortium (W3C), Cascading Style Sheets, level 2 CSS2 Specification
• World Wide Web Consortium (W3C), CSS Tutorial: Starting with HTML + CSS, 5 April 2004.
• Hakon Wium Lie and Bert Bos, Cascading Style Sheets, designing for the Web, Chapter 2, Second Edition, Addison Wesley, 1999.
• Dave Raggett and the W3C, Adding a touch of style, 8 April 2002.
• HTML Code Tutorial, Style Sheets

Adding Headers to Questions

The previous lab initially described the exit interview survey for 2007-2008 graduates as follows:

In the previous lab, questions were given in table surveyQuestions, and table surveyForm identified which questions were to go on which form. For this lab, the first work is to add headers for some questions. The approach is to revise the surveyForm table to get a new table surveyFormFormatted, defined as follows:

create table surveyFormFormatted
( surveyID varchar(25),
  questionID bigint(20),
  sectionNum bigint(20),
  sequenceNum bigint(20),
  primary key (surveyID, questionID)
);

The idea is that the sectionNum field indicates what header a question might be under, and the sequenceNum field indicates the ordering of questions under a header. Also, we use category "header" in the surveyQuestions table to indicate a title (with no question or text box). For now, any other category indicates that the question should be presented with a text or textarea box.

To implement this approach for the above survey, we first add header records to the surveyQuestions table:

insert into surveyQuestions
   set questionID=12, 
       questionText="Experiences with the CS Major",
       category="header";
insert into surveyQuestions
   set questionID=13, 
       questionText="Learnings",
       category="header";
insert into surveyQuestions
   set questionID=14, 
       questionText="Courses",
       category="header";

Next, we organize the questions for the 2006-2007 and the 2007-2008 surveys:

INSERT into surveyFormFormatted VALUES
   ("2007-2008", 12, 10,  0), 
   ("2007-2008",  1, 10, 10), 
   ("2007-2008",  2, 10, 20), 
   ("2007-2008", 13, 30,  0), 
   ("2007-2008",  3, 30, 10), 
   ("2007-2008",  4, 30, 20), 
   ("2007-2008", 14, 50,  0), 
   ("2007-2008",  5, 50, 10), 
   ("2007-2008",  6, 50, 20), 
   ("2007-2008",  7, 50, 30), 
   ("2007-2008",  8, 50, 40), 
   ("2007-2008",  9, 70, 10), 
   ("2007-2008", 10, 90, 10),
 
   ("2006-2007", 12, 10,  0), 
   ("2006-2007",  1, 10,  5), 
   ("2006-2007",  2, 10, 10), 
   ("2006-2007", 13, 20,  0), 
   ("2006-2007",  3, 20,  5), 
   ("2006-2007",  4, 20, 10), 
   ("2006-2007", 14, 30,  0), 
   ("2006-2007",  5, 30,  5), 
   ("2006-2007",  6, 30, 10), 
   ("2006-2007",  7, 30, 15), 
   ("2006-2007",  8, 30, 30), 
   ("2006-2007", 11, 40,  5), 
   ("2006-2007",  9, 50,  5);

As this coding indicates, section numbers and sequence numbers can be any non-negative integer — the only constraint is that the ordering of the values place the sections in an appropriate order and that the questions within a section are in the correct sequence.

Steps for this Lab

1. Revise the survey-display script from the initial departmental-survey lab to meet these specifications:

   • the HTML/PHP script should have the name display-survey-2.php
   • the script should get the survey name as the query string following the question mark in the URL. For example, display-survey-2.php?2006-2007
     or
     display-survey-2.php?2007-2008
   • questions for the form are identified from the surveyFormFortatted table and should be read from the surveyQuestions table.
     • question text designated as having category header should be in an italics serif font and in red (this should be specified as a stylesheet class header)
     • text for other questions should be in a regular sans-serif font and in blue (this should be specified as a stylesheet class short-answer)
     • overall, the question category from the surveyQuestions table should specify the stylesheet class for formatting.
   • as in the sample form at the top of this page, main questions within categories should appear with consecutive integer numbering starting at 1 (e.g., 1, 2, 3). (A stylesheet should indicate that ordered lists at the top level should be positive integers.)
   • questions under a header should be numbered with lower case letters starting at a (e.g., a, b, c). (A stylesheet should indicate that ordered lists at the second level should be lower-case letters.)
   • The generated survey should be in the form of a Web form that calls script process-survey-2.php as its action.
   • The survey form name should be given as a hidden field in the form, so it will be known for subsequent processing.

Background Color

Sometimes a background color can be used to help contrast one section from another. The following example illustrates this idea, although it takes the point to an extreme:

The above approach incorporates style information directly in each tag. A cleaner approach defines a two classes for li tags and then specifies which class to use.

More Steps for this Lab

2. Adjust the background color for the main questions of a survey, so two colors alternate (one color for odd-numbered questions; a second color for even-numbered questions).

3. Many Web-based resources discuss the design and implementation of overall Web sites and individual Web pages. Two starting places are:

   • James R. Grunwald, Six Basic Principles of Web Page Design, 2004.
   • Patrick Lynch and Sarah Horton, Web Style Guide, 2nd Edition, 2002.

   For some general background on principles of Web design, read Grunwald's brief summary and read the subsection on User-centered Design in Chapter 2 of the text by Lunch and Horton.

4. Time for Creativity: Review the overall appearance of the survey form display-survey-2.php for clarity, usability, and layout.

   Then develop a revised HTML/PHP script display-survey-3.php to make a more refined and polished on-line survey form. The new script should have the same functionality as display-survey-2.php, but you are free to change font styles, colors, backgrounds, layouts, etc. to improve the appearance and usability of the resulting page.

Work to Turn In

• Listings of your stylesheet and HTML/PHP script for both display-survey-2.php and display-survey-3.php
• The URL of the directory containing these stylesheets and scripts.
• A paragraph summary of the adjustments you made in step 4 to obtain a revised on-line survey.

Added Notes:

• Note that all content (form name, questions, sections, etc.) must be table driven for this assignment. Expect that some new form and questions will be added to surveyQuestions and surveyFormFormatted before testing.
• To begin a discussion of styles and readability, expect that each person or group may be asked to discuss/present their refined survey form display-survey-3.php with the class.

This document is available on the World Wide Web as

     http://www.cs.grinnell.edu/~walker/courses/325.fa08/lab-grad-survey-2.shtml

created 8 August 2008 last revised 23 October 2008
For more information, please contact Henry M. Walker at walker@cs.grinnell.edu.