Cardinal HEC - Mobile Application Prototype Challenge

Welcome to the Cardinal HEC - Mobile Application Prototype Challenge! The goal of this challenge is to create a HTML5 Angular Mobile Application Prototype based on the provided storyboard design.

NOTE: This application will use AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide). Please follow coding standards and write clean code for AngularJS data binding instead of using plain HTML code.

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

IMPORTART: As per the project schedules the review timelines are very close, please note the post submission timelines for further reference.

Competition Task Overview:
The main task of this competition is to develop a HTML5/Angular mobile application prototype using the provided storyboard designs. Your prototype must work properly latest mobile browsers (iPhone/Android)

If you have any questions, please ask in challenge forum as early as possible.

Required Pages:
Below are the required pages for this prototype implementations.

See static prototype here
http://invis.io/PB2GLWG4C

Challenge Requirements
- Use orientation lock to support only Portrait view on iPhone.
- Use full screen mode implementation for this application. 
- User can save prototype app url into home screen and open later the app in full screen. (when viewinng on the phone we want it to be full screen/no browser chrome visible)
- Show 'header' section as fixed at top of the page, but only page content will be scrollable.
- Use AngularJS data binding as much as possible to load dynamic page content.
- You may use JSON data for data binding purpose.
- Use tap events instead of click events.
- You may use other libraries (like - https://github.com/Pasvaz/bindonce, https://github.com/allaud/quick-ng-repeat, https://github.com/wzr1337/angular-gestures) to improve performance in which user should not feel delay in loading page data/content.
- You may refer another example of optimizations: http://www.binpress.com/tutorial/speeding-up-angular-js-with-simple-optimizations/135.

01. Welcome Screen
- User opens the application and will see the home page with welcome message (01-Cardinal-Welcome).
- Tap on "Explore" button, show user the tap on state as per screen (01-Cardinal-Welcome-Button-Tap).
- Click on "Explore" button, navigate user to dashboard page (02-Cardinal-Dashboard-Exhibit-Home). 

02. Dashboard Page
- Once user clicks on "Explore" button from welcome page, navigate user to the dashboard page (02-Cardinal-Dashboard-Exhibit-Home).
- Tap on any exhibit navigation item - it will slide open and show the short exhibit description (02-Cardinal-Dashboard-Exhibit-Home-Blurb).
- User can click on the right arrow or the click on "Learn More" link to navigate user to corresponding Exhibit Detail Screen (03-Exhibits-Details Folder). 

00. Navigation
- Once user clicks on header menu icon (hamburger icon), show user the left navigation panel (00-Cardinal-Navigation-Close-v2)
- Click on Cardinal Health logo, navigate user to dashboard page (02-Cardinal-Dashboard-Exhibit-Home).
- Click on "Exhibits" menu, expand the sub-menu items under "Exhibits" menu (refer screen 00-Cardinal-Navigation-Open-v2).
- Again click on "Exhibits" menu, toggle the sub-menu items content as expand/collapse.
- Click on any sub-menu items under "Exhibits" menu, navigate user to corresponding Exhibit Details Page.
- Click on "Feedback" menu, navigate user to feedback page (04-Cardinal-Feedback-v2).
- Click on "Notification" menu, navigate user to notification page (05-Notifications). 

03. Exhibit Page
The Exhibit pages have Alerts and Details pages
- Alerts are triggered by iBeacons. For this prototype the user will see them via the Notification page
- Exhibit Details pages are shown from the navigation, dashboad and as the More Information from Exhibit Alert screens

We need Detail and Alerts for each exhibit:
- Essential To Care Wall
- Gallery Wall
- Continuum of Care Wall
- Patient Story Portal
- Interactive Video Wall
- Solutions Showcase
- Care is everywhere Wall

Exhibit Detail Pages
- Dashboard: Click on the right arrow or  "Learn More" link from the Dashboard to go to that Exibit Detail screen  (See 03-Exhibits-Details Folder).
- Click on back button on Details page, navigate user back to the Dashboard
- Video Example: Show video on the Detail screen (03-Cardinal-Essential-To-Care-Detail.jpg)
- Image Carousel Example: Show carousel example (Most Detail Screens)
- Click on external links, open url (http://www.cardinal.com) on new tab for now.
- Note the different detail screens are structured to show different types of content (Bullet List, Hyperlinks, Quotes, Graphic Inserts) - Please capture these details.

Exhibit Alert Pages
- Click on "Close" button on alerts page, navigate user back to dashboard page.
- Click on "More Information" button on the exhibit alert, navigate user to exhibit details screen
- Video: Show Video in the Alert Screen (03-Cardinal-Exhibit-Alert1-v2.jpg)
- Images: Show Image in the Alert Screen (03-Cardinal-Exhibit-Alert2-v2.jpg)
- Image Carousel: Show Image carousel in Alert Screen (03-Cardinal-Exhibit-Alert4-v2.jpg)

04. Feedback Page
- Click on "Feedback" button from left navigation menu, show user the feedback page (04-Cardinal-Feedback-v2).
- Click on the "Start Survey" button, open url (http://www.cardinal.com) on new tab for now.

05. Notifications Page
- This page is where the "ibeacon" alerts are stored
- If a user cancels an alert or ignores it - it will still display here
- Any of these links will show the "Alert view" of an Exhibit
- Note: The screens do not show all of the Alerts - but we want to show all of them here (so we can naigate and see all of them)

- Click on "Notifications" button from left navigation menu, show user the notification page (05-Notifications).
- Once user reads a notifications - show that alert as being viewed (05-Notifications-Viewed).

iBeacons
- We would like to trigger/simulate an iBeacon Alert. 
- From the Welcome Screen - use the Logo to trigger an ibeacon alert (25-Cardinal-Exhibit-Alert-v2.jpg)
- User will click OK and it will take them to the Exhibit Alert (03-Cardinal-Exhibit-Alert5-v2.jpg)

Specific HTML/CSS/JavaScript Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e. "main-content", or "mainContent")
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.

Font Requirements:
- You need to use "Arial" font for this prototype.

JavaScript Requirements:
All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. We would like to use following JavaScript libraries:

-jQuery
-AngularJS

Browsers Requirements:
- Latest Mobile Browsers (iPhone and Android)

Documentation Provided:
- Storyboard screens and PSD files