Daimler Trucks Coverage Level Comparison Module Prototype Challenge

Challenge Summary

Welcome to the "Daimler Trucks Coverage Level Comparison Module Prototype Challenge". We want to create a working prototype for a well organized, user friendly and intuitive multi-section comparison module. This module will be added to an existing site and will continue to use the current site's branding and some key pieces of functionality. The design for the prototype has been created in a previous Design Challenge

Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Admins in the forums. Please post any questions you might have for the client in the forums.

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

Key Requirements
- Focus on overall Bootstrap/great code structure.
- Replicate the design of the approved Storyboards (PSD Files).
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.

Challenge Details
- Build  prototype of the design files using  HTML5 + Bootstrap
- The design for each of the sizes and screens is provided in the forums. Use these designs to build your prototype.
- You can view the current site at: www.aftermarketserviceproducts.com, the tab we are designing for is "Chassis Coverage" and we want to replace the "EXTENDED COVERAGE FOR DTNA VEHICLE CHASSIS" section with the Comparison tool.

- The site currently uses Bootstrap as a framework and we would like to continue to use that.  The most important thing is that your prototype MUST MATCH the Design.

Functional requirements

• The user needs to be able to compare the information in the 4 different sections, 2 at a time: TC1, TC2, TC3 and TC4
• The Prototype should work across desktop, tablet and mobile.
• The Prototype must be  responsive and adapt to the changes in screen size. Use the existing site as your guide and how it reconfigures the content on page resize.
• The UI should be slick and Transition elegantly when elements for comparison are  selected/ deselected
• You are free to come up with an elegant way to swap in and out the data points when Items to compare  (TC1, TC2 etc.) are selected/deselected. The UI Transitions should be smooth and slick. 
• Some functional details:
  • user can only compare 2 Tiers at a time. once you select 2 items, the rest of the checkboxes are disbled
  • By default show the first tier selected. There should be a setting in the JSON data to identify the Default option.
  • Show the Lower tier on the left, always. 
  • the difference of coverage between tiers is shown in different font color.

Design Requirements

• The Prototype should work for Desktop, Tablet and Mobiles
• We have supplied you with design of each screen size use that to build the prototype
• The Comparison module should be easy to add to existing web page without having to change/rearrange existing layout of the web page.
• The comparison data points for the different elements of comparison (TC1, TC2, TC3 and TC4) should reside as  JSON in a javascript file.
• The HTML for the Prototype should be build dynamically from the JSON.
• The prototype UI should be extensible such that if a new category for comparison and comparison data point needs to be shown, only the JSON should be updated and the HTML should build Dynamically.
• The complete list of coverage tiers and thier coverage data is provided in forums (data content.xlsx)
• The current web page uses  HTML5 , Bootstrap 3.0 and jQuery 1.11 and the prototype should use the same.
• For this challenge, replicate the html of existing page (https://aftermarketserviceproducts.com/chassis-coverage/) and add the comparison module to that page

Code Quality:
- All custom Java Script should be unobtrusive
- Html should not have inline CSS
- Your JS Code should have ample comments that explain logic in code
- Add HTML comments to point out to the HTML that you have added/changed to add the Comparison Module

Deliverables
- Submit your entire working folder that should include:
* Web page named "index.html" . The Comparison Module prototype should be on this page
* All Javascript files used
* All Design Elements (CSS, Images)
* Instructions for merging and deploying the prototype into existing web Page. Instructions should mention parts of the existing page that must be edited/moved/replaced to add the new Comparison Module.

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

JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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 JQuery and Bootstrap framework for this challenge.

Browsers Requirements
- Chrome is a priority
- Latest Firefox, Safari & Chrome Browsers
- IE8++ (can be left for final fixes)
- Tablet and Mobile Browser

Documentation Provided
- Storyboard and All necessary flow documents can be found in forum!

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.