Softcopy: 1st March, 2020,
Sunday, at 11:59PM.
Hardcopy and Demo: The first day
your class takes place after the softcopy is due. Check the course Calendar in
eConestoga under Content->Course Information->Schedule Summary.
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
You must know how to search and use the online
jQuery Mobile Docs to enhance your mobile app.
Make yourself familiarize with the hands on
examples done in the lab during class time.
Make sure the 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 with your
Make sure to fulfill all programming and
assignment standards. The Standards Summary is available at eConestoga.
All id and name attributes must have your
initial (e.g., jb for Jason Bourne) as prefix.
your initial as prefix.
See AvengersDB-iteration2 hands on program in details.
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 .idea
folder (If Webstorm is used to create your Assignment 1. If you use any other
IDE, .idea folder will not be
Add the following Stylesheet file under 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.
Task 2: Modify ‘Home’ page
Update the headers to indicate Assignment 2
(Change all A1 to A2). See the screenshot below. Rest of the home page will be
the same as your assignment 1.
Task 3: Modify ‘Add Feedback’ page
Update the page by according to the following
Add a Type combobox containing Other, Asian,
Canadian. “Other” will be shown by default.
If ‘Do you want to add your ratings’ checkbox is
checked then 3 rating textbox (Food
Quality, Service, Value (Hint: input type=”number”)) and Overall Rating
(Calculated (Hint: input type=”text”)) will be visible. Otherwise they will be
When the page will be shown, ‘Do you want to add
your ratings’ checkbox will be unchecked by default.
Overall Rating textbox is readonly/disabled.
Any change in the 3 rating text boxes will
automatically update the overall Rating (calculated) textbox (Show average will
follow the formula:
(Quality + service + value) * 100/15 .
Add a % symbol
The 3 rating textboxes will be initialized with
Implement the show/hide feature in xxglobal.js
file. Hint: put the 4 texboxes in a div, show and hide the div if the check box
is checked/unchecked, respectively. See jQuery built in function show(), hide()
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).
Task 5: Implement validation
in eConestoga->Content->Resources->_lib.zip) in the index.html file
Define your validation logic in xxutil.js file
Add the following styles to xxmystyle.css file:
border: 1px red solid;
Both ‘Add a Feedback’ and ‘Modify Feedback’
pages will have similar validation (defined in xxutil.js file). Hint: You need to
implement a validation function for each form.
The validation will get triggered when Save
button (for Add Feedback page) and Update button (for Modify Feedback page) is
Business Name: required and length must be 2-20
Reviewer Email: required and valid email address
Any valid email will be sufficient.
Making only conestoga email valid will result in
deduction of marks.
Reviewer Date: required
If ‘Do you want to add your ratings?’ checkbox
Food Quality, Service and Value: value must be
Note: don’t use min and max attributes for the
ratings in the html file, rather define your own rules and messages for them in
Check the following screenshot:
Task 6: Update Settings page
‘Save Defaults’ button will save the ‘Default
reviewer Email’ to local storage and show a message through alert.
Use your own Conestoga email address as initial
email when the page is shown.
Check the following screenshots:
Hints: check LocalStorage.zip file available under Assignments
module. See the script block to find out how to use localstorage
Task 7: Test your app
Use Chrome browser and provide screenshots of
Add a Feedback page with checkbox unchecked
Add a Feedback page with checkbox checked and
with validation checked
Modify Feedback page with checkbox unchecked
Modify Feedback page with checkbox checked and
Settings page with alert (as shown above)
Developers tool containing Local Storage
information (just like the screenshot above)
Save your screenshots to xxA2Screenshots.doc
Task 8: Upload app
Make a zip file xxAssignment2.zip that will
Complete project for your app
After unzipping, the application must run
without any modification.
Login to eConestoga and upload to the dropbox:
For late submission: marks will be deducted as
specified in the coversheet.
Task 9: Demo your app
Demo your app on specified demo date. Please
check the calendar available under “Course information”.
Bring your hard copy during the demo containing:
Assignment coversheet and marking sheet
Printout of HTML File
Printout of xxglobal.js and xxutil.js
Printout of xxA2Screenshot.doc containing all
Assignment 2 marking sheet (The last page of
You must demo your project within 1 week of due
date. Otherwise you will not get the marks allocated for demo.
If you choose not to demo at all, you may drop
the hardcopy of your assignment at WMB-4G26. However, if you don’t submit the
hardcopy, marks will not be uploaded.