Topcoder - Community Leaderboards UI Prototype Challenge

Welcome to the  topcoder community leaderboard prototype challenge. 

The goal of this challenge is build UI Prototype of Leaderboad page based on provided Storyboard. it will be integrated to http://www.topcoder.com on next assembly challenge.

As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear documentation (or a note on text file) on your code changes for all the Images/HTML5/CSS3/JS codes and which will make it easier for future developements.

NOTE :
- The leaderboard pages will eventually use AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide), more code using AngularJS will be on next assembly challenge later, but for any angular coder added now, please follow coding standards (https://gitlab.com/topcoderinc/angularjs-styleguide/blob/master/README.md). Writing in full AngularJS would be great.

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

General Rules :

• Storyboard is attached for this challenge.
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly. Make sure you test on tablets and mobiles too.
• Please update existing related CSS files instead of creating new CSS files.
• Ensure you submission clear of HTML and CSS Validation error and warning.
• Watch word typos in every place including the source code. Make sure they have correct meaning.
• Layout (background) should be fluid, depend on browser width.
• Please provide animated mouse hover (with transition effect) for each clickable icons/buttons.
• Please use Mobile view is for portrait orientation of tablet device, and it should be fluid based on browser width.
• Switching the orientation (from landscape to portrait or vice versa) will also switch layout to correct layout directly, without reloading page. (References: http://www.cloudspokes.com/, http://bradfrostweb.com/demo/mobile-first/ and http://www.studiopress.com/responsive/ and also provided Prototype)
• Please follow existing  (community.topcoder.com/tc) naming class for handle color, ie. "coderTextYellow" for yellow handle color.
• Please reserve All flags for All countries
• Baseline UI Prototype is attached (contain header, footer, main menu)

 

Required Pages:

1. Overview Tab
This tab will be as main tab, which will show the three leaders from three tracks (no table data).
Photo should be circled automatically, and please use current photo URL, e.g : http://community.topcoder.com/i/m/iamtong_big.jpg

2. Individual Tabs (Design/Develop/Data Science)
- Basically these track will  show Top Ten of a track, and show rest leader in a table.
- One HTML file for each tab
- Please only show a rolling 30 days
- Add Challenge Type drop down (not exist in Storyboard), put it as replacement of "30 days | 90 Days | One Year ..." position.
- Please also show top 10 member in table, so they still can be searched. Currently table only show from 11th
- ToolTips and Expanded View should be implemented
- Donuts Chart should be implemented, and value should be configured. there are two layout (single and three chart), single chart is for Design and Develop, and three chart is for Data Science
- Donuts Chart should use highchart.js, please see how it works on http://www.topcoder.com/member-profile/hello-c/algorithm
- Performance Graph should be implemented. it will show winning history for month by month (using next - prev navigation button), and also dropdown "2014 Winning Graph" should be displayed, so user can jump to another year. 
- Sorting feature would be by AngularJS later on assembly challenge. but for now please reserve stylesheet to show up and down arrrow
- Hightlighting row by search would be by AngularJS later, but for now please reserve stylesheet to hightlight it. may you need to highlight a row for demo.

2.1 Mobile View
- All screen in Mobile/ should be implemented
- Tap on Load More link will show the rest data
- Tap on any photo or any table row will show detail, see 7.dataDetail.png
- Donuts Chart and Performance Graph should work as well as on Desktop view

 

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.

 

Font Requirements:

Use same font as per current site.

JavaScript Requirements:

JavaScript libraries are already used in the current site which can be used in this challenge too.

Browsers Requirements:

• IE 9+ Browsers on PC
• Firefox 7+ Browsers
• Safari 5+ Browsers
• Latest Chrome Browser
• Latest Chrome / Safari on Tablets and Mobiles

 

Documentation Provided:

Storyboard Screens and PSD files: Storyboard.zip
Existing Baseline Prototype: baseline_prototype.zip
Wireframe : wireframe.zip

Final Submission Guidelines