Challenge Overview
Project Overview:
Welcome to the Gamification - Responsive HTML5 UI Prototype Challenge! The goal of this challenge is to create a Responsive HTML5 Prototype application for desktop browsers based on provided storyboards using AngularJS and Bootstrap development frameworks.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JavaScript code functions and make it easier for future developers and the client to understand what you have built.
NOTE: This application will use AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) and Bootstrap 3 (http://getbootstrap.com/getting-started). 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.
Competition Task Overview:
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers. We will have future implementations on making these pages as responsive for mobile devices (which is out of scope for this challenge), please make sure you follow the correct responsive layout structures.
Required Pages:
Below are the required pages for desktop browsers. We would prefer to use single page app using AngularJS routing and template features.
1. Login Page:
- User opens the application and will see the login page (01-1-1 Login).
- Show validation error for login as shown on error screen (01-1-2 Login Error).
- Allow user to login using valid user id and password, please provide as a note for both user & admin user logins.
- Forgot Password hyperlink is a dead link for now.
2. Home Page:
- Once user logs in from login page (01-1-1 Login), navigate user to welcome page (01-2-1 Home).
- Follow the storyboard designs and contents of the page.
- Use common header and footer for all pages, but follow storyboard for header background color of each tab menu item.
- Show carousel for 'Sealed Air Gamification', 'Sealed Air on twitter' sections.
- Mouse hover on username, show user the flyout panel as shown on screen (01-2-2 Home_ID Hover).
- Mouse hover on "Help" menu item, show the submenu items as shown on screen (01-6-1 Help Hover).
3. Leaderboard Page:
- Once user selects "Leaderboard" from menu item, navigate user to leaderboard page (01-3-1 Leaderboard).
- Show leaderboard table on right side panel and user data on left side panel.
- Click on user id on on leaderboard table, show corresponding user data on left side panel - (user AngularJS databinding from JSON object).
- Show all badge accomplishments as like screen (01-3-2 Leaderboard_All Badge).
4. My Scores:
- Once user selects "My Scores" from menu item, navigate user to my scores page (01-4-1 My Score).
- Show activities table on right side panel and user data on left side panel.
- Click on "Preview" button, show user the bragging preview modal popup screen (01-4-3 Bragging Preview) and clicking on "OK" button close the modal popup.
- Click on "Submit New Activity" button, navigate user to submit activity page - (follow point # 5 below).
5. Submit Activity:
- Once user selects "Submit Activity" from menu item, navigate user to submit activity page (01-5-1 Submit Activity).
- Allow user to select multiple attachments using browse button.
- Click on "Submit" button, Add the new activity into the activities table and clear the left panel fields.
- Mouse hover on 'Activity' name, show user the flyout panel as per screen (01-5-3 Submit Activity_Select Activity).
- Click on "Edit Activity" link, allow user to edit selected activity on left panel fields.
- Click on "Delete" link, show user confirmation popup (01-5-4 Submit Activity_Confirm Delete) and on cancel discard the deletion of activity.
- Click on 'Yes' button should delete the selected activity and show message on popup as per screen (01-5-5 Submit Activity_Deleted).
6. Help Page:
- Once user selects "Help" from menu item, navigate user to help page (01-6-2 Help).
- Allow user to navigate between help pages using "Previous" & "Next" buttons.
7. Admin Page:
- Show "Admin" menu item after "Home" at header for logged in admin users only.
- Contest page
- Once user selects "Admin" from menu item, navigate user to admin contest page (01-7-1 Admin_Contest).
- Allow user to delete selected contest with confirmation message - (refer delete activities).
- Click on Edit or Create Contest, navigate user to edit/create screen (01-7-2 Admin_Edit Contest).
- Click on '-' or '+' buttons, allow user to remove current prize or add new prize - (always show the '-' & '+' buttons for the last prize row).
- Click on "Save" or "Cancel" button navigate back to contest page (01-7-1 Admin_Contest).
- Activities page
- Click on activities tab, show user the screen (01-7-3 Admin_Activities).
- Allow user to delete, edit, create activities - refer the input fields and confirmation messages from Submit Activity screens.
- Badges page
- Click on badges tab, show user the screen (01-7-4 Admin_Badges).
- Allow user to reorder badges on the table using up/down arrows.
- Allow user to delete badges - (here create/edit are out of scope).
8. Featured Games:
- Click on "View All" link on 'Sealed Air Gamification' section (01-2-1 Home), navigate user to featured games page (01-8 Featured game).
- Follow the storyboard designs and contents of the page.
Specific HTML/CSS/JavaScript Requirements:
- HTML/CSS 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.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Images should be properly compressed while still having good visual quality.
- As possible using background color properties, instead of repetition usage of background based image.
- Use sprites technique for the image slicing.
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:
Browsers Requirements:
- IE 10+ Browsers on PC
- Latest Safari Browser on MAC and PC
- Latest Chrome Browser on MAC and PC
- Latest Firefox Browser on MAC and PC
Documentation Provided:
Storyboard screens and PSD files: Storyboard.zip
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.