Challenge Overview
Humana is managed health care company that markets and administers health insurance. Humana and TopCoder (HTC) have teamed up to convert internal Humana's application that is named CrossPlatformXref to use another technology. This web-based application will be used by our internal business user. The first step is to redesign this application so it will have better user experience. In this contest we need your help to convert the storyboard we already got into working prototype.
Refer to contest document, it is attached in Download Section in bottom right corner in this page, you need to register to the contest to download it. You only need to create 1 page, name it as index.html. Following are details requirements and informations regarding prototype functionality:
- There are 3 main functionality that are placed in left navigation, they are Group, Master and Affiliation. Each of them has 3 functionality that are placed in the tab, they are Master, Groups and Products.
- When one of main functionality is selected, the search functionality below it must be reflected as shown in screen 02 - Display Group, 02 - Master and 02 - Display Affiliation.
- You need to demonstrates how the prototype loads data. Use JSON to presented information and use AJAX to loads it. You may use different file for each different data (Master, Groups and Products).
- You need to simulate loading process when performing searching functionality. Refer to screen 03 - Loading Data for details.
- If there is no data found (based on searching criteria), shows an information in result section as shown in screen 04 - Data Not Found.
- No data is shown when the page is loaded at first time.
- Use each field name and its data as shown in storyboard for presented information in JSON file format.
- For the products section, you need to implements pagination and display item per page functionality. For display item per page its value are 10, 25 and all. This section must be fluid based on the height of the table. The minimum height of this result section should be parallel with the left navigation section.
- Searching functionality must be performed based on searching criteria on the left navigation.
- When Update button is clicked, show cancel and save button and enable the field as shown in each screen.
- When Save and Cancel button is clicked, hide both these button, show Update button and disabled edited fields.
- Implement hover state for all links and button as shown in storyboard.
- Create documentation for all Javascript function you created including its parameter and return value if any.
- Set all links in the header and footer as deadlink.
- Implements animation for loading icon and transition when performing searching functionality.
- Create a deployment guide.
MAKE SURE TO WATCH CONTEST FORUM FOR ANY ADDITIONAL REQUIREMENTS AND CLARIFICATIONS THAT MAY BE ISSUED.
Final Submission Guidelines
Following are specific requirements for HTML, CSS and Javascript files:
- Your HTML code must be XHTML 1.0 Strict compliant
- 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 tabular data and not for page layout.
- No inline CSS styles, all styles must be placed in an external stylesheet.
- 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".
- 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. You are allowed to use the JQuery JavaScript library for this contest.
Your submission must works on browser in the list below:
- IE7+
- FF 3+ Mac & PC
- Safari 4 Mac & PC
- Chrome Mac & PC
Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.