Mercury - Survey App Responsive HTML5 Prototype Challenge

Welcome to the Mercury - Survey App Responsive HTML5 Prototype Challenge! The goal of this challenge is to create a Responsive HTML5 Prototype application based on provided storyboard design using AngularJS & Bootstrap frameworks.

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 Responsive HTML5 prototype using provided storyboard designs. You need to use Bootstrap and CSS3 Media Queries to implement responsive page layouts to support both portrait and landscape views on tablets. Your prototype must work properly in all the required browsers noted below.

Required Pages:

Below are the required pages for this prototype implementations.

1. Landing Page:

• -User opens the application and will see the landing page (00.jpg).
• -Show same header and footer as per storyboard designs for all pages - (remove login link and user info at header from all pages).
• -Please use page fluid layout designs for all pages.
• -Use deadlinks for all unused links for all pages.
• -Click on "Start Survey" button at main content, show user the email address modal popup (01.jpg).

2. Email Address Popup:

• -Once user clicks on "Start Survey" button, show user the email address modal popup (01.jpg).
• -Show validation error as per screen (02.jpg).
• -Click on "Submit" button with valid email address, show user the survey questions page (04.jpg).

3. Survey Questions Page:

• -Once user enters valid email address and submits, navigate user to the survay questions page (04.jpg).
• -Show first set of questions in carousel as shown on screens (04.jpg, 04_1.jpg, 04_2.jpg).
• -Click on "Next" button, show user next questions as per screens (05.jpg, 06.jpg, 07.jpg, 08.jpg).
• -Show current progress on questions as shown on screens (06.jpg, 07.jpg, 08.jpg), apply same to other screens (04.jpg, 05.jpg).
• -Click on "Next" button on last page, show user the survey results page (09.jpg).

4. Results Page:

• -Once user clicks on "Next" button from last survey questions page, show user the survey results page (09.jpg).
• -For each successful survey questions submission, show user randomnly selected personality resuult and corresponding image as shown on screens (09.jpg, 10.jpg, 11.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:

Use font - Arial.

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
• Bootstrap 3

Browsers Requirements:

• IE 10+ Browsers
• Latest Chrome Browsers
• Latest Firefox Browsers
• Latest Safari Browsers
• Latest Android Tablets and iPad Browsers

Documentation Provided:

Storyboard screens and PSD files