About Final Exam

FINAL EXAM INFORMATION
DATE: Friday Dec 16
TIME: 4pm-6pm
LOCATION: CSIC 1115

Objective

Grading

• (27 pts) Form Implementation
  • (2 pts) Text fields for firstname, lastname, phone
  • (2 pts) Use of type=number for age, height, and weight
  • (2 pts) Use of checkboxes for conditions
  • (2 pts) Use of radio buttons for time period
  • (2 pts) Use of combo box for type of study
  • (2 pts) Use of text fields for study id
  • (2 pts) Text area
  • (2 pts) Clear and Submit buttons
  • (2 pts) All text fields (except text area) marked as required
  • (2 pts) Use of type=email type for email address entry
  • (3 pts) Place holders for study id
  • (4 pts) Page structure similar to expected page
  • (10 pts) Page validates as HTML5
• (8 pts) CSS Style
  • (2 pts) Shadow for Research Form title
  • (2 pts) Brown color legend
  • (2 pts) Round borders for fieldset areas
  • (2 pts) Centralized CMSC Research Institute title
• (55 pts) JavaScript Support
  • (10 pts) Phone Validation
  • (10 pts) Conditions (Diabetes, etc.) Validation
  • (10 pts) Time Period Validation
  • (15 pts) Study Id Validation
  • (10 pts) At least two functions defined
• (10 pts) Form Generates Expected Server Confirmation

Overview

For this project you will implement a web page with a form that allows the gathering of data for research purposes. The data provided in the form will be validated before it is sent to the server for processing. You do not need to provide pseudocode for this project, but you are encourage to develop it for your own benefit. No files are provided for this project (you will create them all.)

Specifications

You must define a form with the form elements you can see in the "Sample Run". The following provides additional information about this project:

• General Requirements
  1. Place all the files associated with your project in a folder named p4.
  2. Your HTML must appear in a file named research.html.
  3. All the form text fields (e.g., first name) must be defined as required using the required="required" HTML5 feature.
  4. Use the type=email to define the e-mail field.
  5. Your program must verify (using JavaScript) that a valid phone number has been provided. A valid phone number has the format
     ### ### #### where # is a digit. The message "Invalid phone number" will be generated if an invalid phone number is provided.
  6. Use of type=number for age with a minimum value of 1 and a maximum value of 125.
  7. Use of type=number to represent the height feet and inches values. For feet, the minimum value is 2 and the maximum is 7. For inches, the minimum value is 0 and the maximum is 12.
  8. Use of type=number for weight with a minimum value of 1 and a maximum value of 600.
  9. Your program must verify (using JavaScript) that at least one condition ("High Blood Pressure","Diabetes", "Glaucoma", "Asthma", "None") has been selected. If no condition is provided your program must generate the error message "No conditions selected". If the user selects any condition and also "None", your program will generate the error message "Invalid conditions selection".
  10. Your program must verify (using JavaScript) that at least one time period ("Never", "Less than a year", "One to two years", "More than two years") has been selected. Your program will generate the message "No time period selected" if none has been selected.
  11. The "Study Information" section includes a combo box with two options: "Long Term" (default) and "Short Term".
  12. Your program must verify (using JavaScript) that a valid study id has been provided. Valid ids have the following format
      A### B### where # is a digit. Your program will generate the message "Invalid study id" if an invalid id is provided.
  13. If after evaluating the data, any errors are found, your program will not submit the form and will display a single message (using alert) where the fields with invalid data are identified. If the data is correct, a confirmation message ("Do you want to submit the form data?") will be displayed asking for a submission confirmation.
  14. Remember that you can obtain the characters of a string by using the charAt() function, where the argument is the index position of the character in the string.
  15. The color associated with the legend is #A0522D
  16. Keep in mind that Komodo Edit can have problems displaying HTML5 elements. Look at your projects using Chrome.
• Functions Requirement
  1. It is up to you to define any functions you need but you must have at least two functions. All functions and all the javascript code should be in a file named research.js.
  2. You should avoid duplicating code. That is, if you have the same code segment in many functions, you should create a function for the common code.
• Style Requirement
  1. The style and appearance of your page should be very close to what you see in the "Sample Run".
  2. Style information should be in a css file named research.css.
• Server Processing
  1. The form data will be sent to the researchProcessing.php script found at the following url:
     http://www.terpconnect.umd.edu/~nelsonp/122/php/researchFormProject/researchProcessing.php
  2. You will use get as the submission method.
  3. The names to use for form fields are: firstname, lastname, phoneFirstPart, phoneSecondPart, phoneThirdPart, email, age, heightFeet, heightInches, weight, highBloodPressure, diabetes, glaucoma, asthma, none, period, studyType, firstFourDigits, secondFourDigits (these last two correspond to the study id), and comments.
  4. The link Sample Server Script Execution illustrates an example of submitting data to the script. From this example you can verify the names to use for the form entries.

Additional Requirements

• Your project must work in the Chrome browser.
• You must use good indentation.
• You must use meaningful variable names.
• Your html must validate according to http://validator.w3.org/#validate-by-upload

Sample Run

The data submission video illustrates the functionality associated with the form.