Challenge Overview
Welcome to QED - ODKM Responsive Website Prototype Challenge.
We need your help to code the front-end prototype of a survey process.
Best of luck!
Project Overview
The goal of this challenge is to develop HTML/CSS/JS code for building a prototype which will be powered by Angular 4.x (latest). This means that you must use Angular 4.x in your solution already. By the end of the challenge we expect to have a very clean, lean scaffolded project ready to accept RESTFUL API responses.
You are provided with the storyboards screens and source files which you’ll use to build up the working prototype.
Prototype Requirements
Overall
- All screens provided in the storyboard are in scope.
- Your prototype must match them, in look and functionality.
- UI Data must be rendered through JSON files data (survey questions).
- Use the D3.js library to implement the radar/spider graphic on the results page.
1. Homepage
Desktop: See 01 Home screens.
Mobile: See 04 screens.
2. Survey
Desktop: See 02 screens.
Mobile: See 05 screens.
User shouldn’t be able to move to the next section after filling all the questions, all of them are required (validate ~ prev/next button should be disabled until all questions are replied).
3. Results
Desktop: See 03 screen.
Mobile: See 06 screen.
Radar/Spider chart must be implemented using JSON data and D3.
HTML Requirements
- HTML should be valid HTML5 compliant.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use Bootstrap.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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.
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.
- Avoid using jQuery, it has compatibility issues with Angular 4.x.
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Screen Specifications
- Must support desktop and mobile views (browser).
- Must support retina display.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
- Tablet: Latest Android and Safari Browsers.
- Mobile: Latest Android and Safari Browsers.
- Provide all your files within a zip container.
We need your help to code the front-end prototype of a survey process.
Best of luck!
Project Overview
The goal of this challenge is to develop HTML/CSS/JS code for building a prototype which will be powered by Angular 4.x (latest). This means that you must use Angular 4.x in your solution already. By the end of the challenge we expect to have a very clean, lean scaffolded project ready to accept RESTFUL API responses.
You are provided with the storyboards screens and source files which you’ll use to build up the working prototype.
Prototype Requirements
Overall
- All screens provided in the storyboard are in scope.
- Your prototype must match them, in look and functionality.
- UI Data must be rendered through JSON files data (survey questions).
- Use the D3.js library to implement the radar/spider graphic on the results page.
1. Homepage
Desktop: See 01 Home screens.
Mobile: See 04 screens.
2. Survey
Desktop: See 02 screens.
Mobile: See 05 screens.
User shouldn’t be able to move to the next section after filling all the questions, all of them are required (validate ~ prev/next button should be disabled until all questions are replied).
3. Results
Desktop: See 03 screen.
Mobile: See 06 screen.
Radar/Spider chart must be implemented using JSON data and D3.
HTML Requirements
- HTML should be valid HTML5 compliant.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use Bootstrap.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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.
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.
- Avoid using jQuery, it has compatibility issues with Angular 4.x.
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Screen Specifications
- Must support desktop and mobile views (browser).
- Must support retina display.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
- Tablet: Latest Android and Safari Browsers.
- Mobile: Latest Android and Safari Browsers.
Final Submission Guidelines
- Include both source & prebuilt/minified.- Provide all your files within a zip container.