CS 101   Web Construction,  Fall 2015  Instructor:  Jeffrey Horn ASSIGNMENTS

• Assignment 6  "Survey Forms"    
  • Handed out:    Thursday, October 28, 2015
  • Due:     TBA
  • Readings:   Ch. 6 of Jamsa text (same as for A5!), and pp. 182-5 of Ch. 7.
  •  Goals:
  • Learn how to work with a realistic server-side script by implementing a medium-size survey form.
  • Learn to be the interface between user and (script) programmer.
  • Learn how to use external style sheets
  • Learn to use form grouping elements <legend> and <fieldset>
  • DETAILS:
  • Overall:  Create a web page with a survey that uses two forms:  one form conducts a poll (i.e., survey) that you create and the other form conducts a particular poll we have created (4 questions) .  Test your survey forms to make sure they work with the scripts, then upload your survey page to a web server and ask users to take the quiz.   Send me the URL.
  • The value of the "action" attribute (of the "form" element) will be different for the two polls.   For the class poll, the "action" attribute of <form> should be set to "http://www.ballot-box.net/service3/poll.vote.php".  For your own poll, "action" should be set to the URL that you will get from ballot-box, which you can find by asking ballot-box to generate some html code for your poll...
  • Named data fields:   You will need to follow these rules carefully and completely!
  • For the CLASS POLL (poll ID:  26869):
    1. In your form you will need a FIXED data field (i.e., make it  "type='hidden' ").   It needs to have name="pollid" and value="26858".
    2. There are four questions in the survey and hence you will need four data fields for them, to be complete.   The following images show how the survey results are printed.   They are in order.   The name for each data field is of the form "answer[#][]", where the '#' is the number of the question.   Thus the names go "answer[1][]" for question 1, "answer[2][]" for question 2, etc.   For the values of the questions (i.e., the value of the "value" attribute), these are simply the numerals 1,2,3, ...   So for example the value for answer choice 1, of question 1, is "1". 
    3. Here is a snippet of the html code generated by ballot-box.net for this poll.   From this code you will be able to extract the field names and values that serverside script expects:
       1. name="answer[1][]"
          1. value = "1","2", "3","4"
       2. name="answer[2][]"
          1. value = "1","2", "3","4",...,"6"
       3. name="answer[3][]"
          1. value = "1","2", "3","4"
       4. name="answer[4][]"
          1. value = "1","2", "3"
    4. You will also, of course, need a submit button!  (<input type="submit" />)
    5. Here are images (one and two) of the report with the survey results that is generated by the server-side script.   The wording of your questions and answers do not have to be EXACTLY the same, but if they are too different, users who take the survey might complain that what they answered is not what was compiled into the survey results!
  • For your INDIVIDUAL POLL (poll ID:  whatever; you must get this from the ballot-box.net site after you have created a new poll!)
  1. Create your own poll on ballot-box.net with four questions. 
  2. At least one question must use mutual exclusion.
  3. At least one question must use check boxes (i.e., not mutual exclusion).
  4. You will need the name of each data field and also the values for those data fields.   You must get these from Ballot-Box.  They will not necessarily be the same as the ones for the class poll above (e.g., "answer[1][]" and "1","2","3", etc. for the values; the numbers may be different, such as "answer[10201]" for a data field, or "1004" for a value).   To find out the correct data field names and values for your poll, you can ask Ballot-Box to generate the html code for your survey, and then copy and paste what you need for your html code.  To get to this code, login to your account on Ballot-Box, select your poll, and choose "HTML codes" from the navigation panel on the left.
  • Use the <link> element to link to the external style sheet at http://cs.nmu.edu/~jeffhorn/css/forms.css.   You will know that this is working when you see your form style change as viewed in a browser!  (see pp. 182-5 of Ch. 7 of Jamsa text)
  • Use <fieldset> and <legend> elements to group the questions from the two forms into two separate, labeled sections of your survey page. 
  • Upload your survey form to the web and test it.  Then send me the URL.  (jhorn@nmu.edu) in an email with the SUBJECT:    "CS101:  A6"