Differences

This shows you the differences between two versions of the page.

--- eg-259:cw1 [2011/02/28 08:38] – [The Exercise] eechris
+++ eg-259:cw1 [2012/03/09 11:21] (current) – [How this Work will be Assessed] eechris
@@ Line 1: / Line 1: @@
 ====== Coursework 1: Client-Side Programming ======
-**Formally issued on**: Tuesday 1st March, 2011.
+**Formally issued on**: Tuesday 21st February, 2012.
 **Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]].
-**Due date**: Examples Class on Thursday 24th March, 2011.
+**Due date**: Session on Thursday 15th March, 2012.
@@ Line 11: / Line 11: @@
 ===== The Exercise =====
-<html><!-- 2007: Develop, test and validate an XHTML document that collects the following information from the user: last name, first name, middle initial, age (restricted to be greater than 16), and height in cm (restricted to the range 90cm to 250cm). You must have event handlers for the form elements that collect this information that check the input data for correctness. Messages in alert windows must be produced when errors are detected and the offending controls should gain focus. --></html>
+<html><!-- 2007: Develop, test and validate an HTML5 document that collects the following information from the user: last name, first name, middle initial, age (restricted to be greater than 16), and height in cm (restricted to the range 90cm to 250cm). You must have event handlers for the form elements that collect this information that check the input data for correctness. Messages in alert windows must be produced when errors are detected and the offending controls should gain focus. --></html>
-Develop, test and validate an XHTML document that acts as a registration form for a web application. The registration form should request a user name, contact email address, and a password.
+<html><!-- 2008-2011: Develop, test and validate an HTML5 document that acts as a registration form for a web application. The registration form should request a user name, contact email address, and a password.
   * The user name must be a single word which starts with a lower-case letter and contains lowercase letters, or a mixture of lower-case letters and numbers (e.g. chris, joe90). There should be no punctuation characters or embedded whitespace in the user name;
   * The email address must be a valid internet email address;
@@ Line 27: / Line 27: @@
      * run all validation checks, return focus to the first offending field and prevent data submission if there are errors.
      * send the form data to URL ''http://www.cpjobling.me/cgi-bin/echo_form.cgi'' if the data is valid.
-  - The reset button should be labelled "Cancel" and should return the form to its initial state.
+  - The reset button should be labelled "Cancel" and should return the form to its initial state. --></html>
+Your company wants an efficient way of processing employee expense claims. It has decided to use create a web app on its Intranet for this purpose. You are to create an expenses submission form with the following features:
+  * There must be fields to capture the employee's name, company mobile phone, company email and employee number (which matches the pattern ''[A-Z]{2}-\d{3}-\d{4}[A-Z]'').
+  * The expenses will be set out in a table with initially 3 rows, for each expense you need
+    * Date
+    * Description
+    * Cost
+    * Receipt available? Y/N
+  * There should be a //total claim submitted// row and the //total amounts claimed// should be computed automatically.
+  * There should be a button that adds an extra row to the expenses form if three items is insufficient.
+  * It should not be possible to submit an invalid form.
+    * Employee details, apart from company mobile are required fields
+    * Email, mobile and employee number should be in the correct format
+    * There should be at least one receipted expense claim
+    * Each expense must have a date and description and cost must be a decimal number with two decimal digits.
+  * The form should calculate two costs when the expense amount in any row is changed:
+    * expenses for which receipts are available
+    * expenses for which receipts are not available which will be displayed as "manager approval required"
+You should think about the names that you will be passing to the server-side of the web app in the choice of your field names.
+Where possible, all error messages should display in the form and be highlighted by colour changes and change of focus.
+//Hint//: Start by creating the form in HTML5 and then write the JavaScript to make it work. Use the new HTML5 input types and form validation attributes where supported.
 ===== Submission Details =====
-You should develop your solution in a single XHTML file and submit a paper copy to me in the lecture; this will be returned to you with feedback. You should also send me an electronic copy of the XHTML file via email which I can use for testing. A maximum of 5 marks will be awarded if I am not provided with the electronic version for marking.
+You should develop your solution in a single HTML5 file and submit a paper copy to me at the start of the contact hour session along with a copy of the attached submission cover sheet; this will be returned to you with feedback. You should also submit me an electronic copy of the HTML5 file and any external CSS and JavaScript library files that you have used, packaged in a single zip file using the Assignment Tool on Blackboard. I will use this version for testing.
+A maximum of 5 marks will be awarded if I am not provided with the electronic version for testing.
 ===== How this Work will be Assessed =====
+JavaScript must be used for the expenses calculation but you can and should use the new HTML5 form elements and validation attributes where appropriate. For extra credit you will provide JavaScript alternatives to these if the browser doesn't support them. //Hint//: use the modernzr library to check for the availability of the required attributes and elements.
+You may assume that JavaScript will be turned on ... but should provide a warning message to the user if it isn't!
 There will be:
-    * 8 marks for successful completion of the exercise;
+    * 7 marks for successful completion of the exercise;
-    * 1 mark for **valid** XHTML 1.1;
+    * 1 mark for **valid** HTML 5;
-    * 1 mark for **valid** use of CSS;
+    * 1 mark for **creative** use of CSS;
-    * 2 marks //extra credit// if the error messages are embedded in the document rather than using alerts.
+    * 1 marks if the names you choose for your form elements will work well server-side.
-    * 3 marks //extra credit// will be awarded for valid use of the jQuery library in the implementation of the validator;
+    * 2 marks //extra credit// will be given if you implement your active code using the jQuery library.
+    * 3 marks //extra credit// will be awarded if your form is able to use JavaScript where the necessary HTML5 form elements and attributes are not provided.
 Late submissions will **not be marked**.