Topic: • Enhance the prototype created in Assignment 1 with jQuery validation. This version will be used in the next assignments. Before you begin: • • • • • • • • You must complete Assignment 1 before proceeding. You must know how to search and use the online jQuery Mobile Docs to enhance your mobile app. Make yourself familiar with the hands-on examples done in the lab during class time. Make sure to view the screenshots in color, as you will be required to match the color themes used exactly. The assignment specification and screenshots are made assuming a student’s name Jason Bourne (and initial is JB). Replace Jason Bourne with your full name, JB with your own initial. Also replace xx and XX with your own initials. Applying proper initials will be treated as programming standards. All javascript files must have your initial as prefix. See AvengersDB-iteration2 hands on program in details. The screenshots below are taken from Chrome browser without using any device skin. Problem Specification: Task 1: Create Assignment 2 project • Create an empty project and name it: XXFeedbackA2 (where XX is your initials). Copy all the files and folders from your assignment 1 project except the folder called .idea (.idea is a hidden folder created by WebStorm. If you use any other IDE, the .idea folder will not exist). • Add the following Javascript files under js folder: o xxdatabase.js o xxDAL.js o xxfacade.js o xxutil.js o xxglobal.js • Add the following Stylesheet file under css folder: o xxmystyle.css • Include all of them to index.html. • Add ready event to xxglobal.js file. All the event handlers must be defined in xxglobal.js file. • Provide name and id attributes for the following items in your project. Missing id and name will result in deduction of marks (Check the marking sheet – the last page of the document). These requirements will be considered as Standards in this course. List/Combobox Textarea Checkbox Button √ √ √ √ √ √ Radiobutton √ √ √ √ Table 1: id and name requirement chart Task 2: Update ‘Home’ page Update the headers to indicate Assignment 2 (Replace A1 with A2). Also replace other references to A1 with A2 in the page content. See the screenshot below. Rest of the home page will be the same as your assignment 1. Figure 1: Screenshot of Home page for Assignment 2 Task 3: Update ‘Add Feedback’ page • • • Update the page according to the following screenshot. Add a “Type” ComboBox containing “Other”, “Asian” and “Canadian”. “Other” will be shown by default. Please check Figure 2. If ‘Do you want to add your ratings’ checkbox is checked then 4 rating TextBoxes (Food Quality, Service, Value (Hint: input type=”number”) and Overall Rating (Calculated) (Hint: input type=”text”) will be visible. Otherwise, they will be hidden. Check Figure 3 and Figure 4. • • • • When the page is shown, ‘Do you want to add your ratings’ checkbox will be unchecked by default. Check Figure 3 Overall Rating textbox is Read-only. The 3 rating textboxes will be initialized with 0 whenever they become visible. (note: hide and show will reset the textboxes to 0 as well) Check Figure 5. Any change in the 3 rating text boxes will automatically update the overall Rating (calculated) Textbox (Show average will follow the formula: o (quality service value) * 100/15 . o Add a % symbol. o Check Figure 4 Implement the show/hide feature in xxglobal.js file. Hint: put the 4 Textboxes in a div, show and hide the div if the check box is checked/unchecked, respectively. See jQuery built in function show(), hide() (https://www.w3schools.com/jquery/jquery_hide_show.asp) Figure 2: ComboBox content Figure 3: Screenshot of Add Feedback page – Do you want to add your ratings unchecked. Figure 4: Screenshot of Add Feedback page – Do you want to add your ratings checked. Figure 5: Ratings are initialized with 0 when they become visible (by selecting Do you want to add your ratings checkbox) Task 4: Update ‘Modify Feedback’ Page • • Update the ‘Modify Feedback’ page in the same way as ‘Add Feedback’ page. ‘Do you want to add your ratings’ checkbox will behave in the same way. Check the following screenshot(s) Figure 6 and Figure 7 Figure 6: Screenshot of Modify Feedback page – Do you want to add your ratings unchecked. Figure 7: Screenshot of Modify Feedback page – Do you want to add your ratings checked. Task 5: Implement validation • • • • Include jQuery validation Javascript (available in_lib.zip) to the index.html file. your validation logic in xxutil.js file. Add the following styles to xxmystyle.css file: label.error{ color: