Challenge Overview

Challenge Overview

The client has an VBA application in excel format and we’re converting it to a java base application. This application has about 30 tabs and we’ve already converted some of the tabs in the past few challenges. For this challenge, we need to convert some of the remaining tabs into the prototype so we can hand it over to the development challenges.

 

This is one of the series of prototype challenges are launching so it’s a good chance to get familiar and be prepared for the upcoming ones!

Challenge Details

Following are the tabs to be added to the prototype:

  • Solutions

  • ProSphere

  • Vblock

  • MSS

  • CTA Rainfinity

  • Atmos - Centera

���

You will need to have Excel 2007 / 2010 on Windows in order to open the excel file we provided in challenge forum and see how the tabs work, this is essential to the success of this challenge. Many sections / fields are hidden in the excel sheets by default, you need to click through all checkboxes to see what happens and do the same in the web prototype.

 

Note these tabs are hidden in the excel by default, and you need to right click on the “Start” sheet and “unhide” them.

 

Your submission should be based on the provided prototype which already has some tabs implemented. And these 6 new tabs should be added to step 3 of the
Create Service Request” process (i.e. CreateServiceRequestStep3.html), and you should create a separate file for each tab you add (example: CreateServiceRequestStep3Solutions.html, CreateServiceRequestStep3ProSphere.html, etc…)

 

General Requirements:

The following are general guidelines you must follow in building the prototype:

- Produce a UI Prototype that can be used to demonstrate all tabs mentioned above.

- Your submission must be based on the previous prototype (same styles) and replicate all behaviors of the tabs (example: some sections are hidden by default and will become visible when you check some options) in the Excel.

 

You need to include those in your submission:

- Implement hover state for all buttons and links.

- All elements (such as the select boxes, radio buttons and checkboxes) will be browser based.

- Follow all coding styles / standards already used in previous prototype.

 

The following are specific requirements for HTML, CSS and Javascript files:

- Your HTML code must use the same doctype as the provided prototype from a previous challenge (attached to forum)

- 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.

- Pagination is required to be included where necessary

 

Browsers and Standards:

Your submission must works on browser in the list below:

- IE8+

- FF 3+ Mac & PC

- Safari 4 PC

- Chrome Mac & PC



Final Submission Guidelines

Submission Deliverables

  • A complete prototype with all required tabs implemented.

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.

 

ELIGIBLE EVENTS:

2014 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30041240