Challenge Overview
Welcome to QED SHARE Webapp Responsive Prototype Challenge.
We need your help to code the front-end prototype of a responsive website.
Best of luck!
Project Overview
The goal of this challenge is to develop HTML/CSS/JS code for building a prototype. By the end of the challenge we expect to have a very clean, lean scaffolded project. You are provided with the storyboards screens and source files which you’ll use to build up the working prototype.
Prototype Requirements
Overall
- Screens provided in the storyboard in scope are those that are mentioned in the respective spec section (including their mobile mirror too).
- Your prototype must match them, in look and functionality.
- UI Data must be rendered through JSON files. Not for all pages, it will be indicated on each respective section below as required.
- Use the D3.js library to implement the charts along with JSON file (s).
1. QED SHARE > Homepage
See 1 Home screens.
There’s a slider on the top that switches images automatically each X seconds. Dots are clickable and can activate other slides.
Map should be rendered as a vector resource (SVG). On hover a country a tooltip is displayed.
Testimonies have a particular behaviour. When hovering any of the items on the right the testimony title/date must be displayed while the thumbnail changes to white.
2. QED SHARE > Explore
See 2 screens.
Filter functionality is out scope. However, we need to see how it works, e.g. adding a filter adds deletable tags.
Pagination functionality is out of scope.
3. Evaluation > Landing
See 3_a screen.
4. Evaluation > Details
See 3_b, 3_c, 3_d, 3_e screens.
Pie charts must be implemented with D3 (JSON).
Pagination functionality is out of scope.
5. Evaluation > Take Survey
See 4_Take_Survey screen.
UI Data must be rendered through JSON files (survey form).
See results button triggers enter code page, then after successful code it triggers survey results page.
6. Authentication
See 5_Enter-code, 7_a, 7_b screens.
This form is triggered from any page when “Enter Code” is clicked (top right nav). It’s also triggered from the survey results page (see details below).
Create and show error styles. There's no design, so anything you can provide is appreciated (textbox with red border, red message/text, etc).
7. Survey Results
See 6_x screens.
“Show my answers” toggles the color version of the charts. Otherwise all the charts are all colored (not my answers).
Charts can be configured to be displayed as pie, lines, bar charts, etc. Use the gear icon to display a dropdown with this options. Implement the change for the first chart (Gender of PhD students).
Charts must be implemented with D3 (JSON). If there are some of them that are better to implement with plain HTML/CSS it must use JSON data to be set up.
Commenting Feature
Commenting functionality is out of scope, however markup must be there to be coded in the future:
- Display a list of comments available below the survey results (see screen 6_f). User see comments as anonymous.
- User see "You can write comments once you complete a login process" plus a login option.
- If user is logged in, can see comments authors and write comments (see screen 6_g, 6_f).
Your prototype must not technically handle authentication but must showcase this scenario somehow. Please indicate how to see this behaviour in your prototype.
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.
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: for width >= 1280px.
-- Tablet: for width between 768px and 1024px. There's no design for tablet, just make sure layout doesn't break while making the adjustment.
-- Mobile: for width >= 375px.
-- * Expose in forums any issues with the css breakpoints (in case of any).
- 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.
We need your help to code the front-end prototype of a responsive website.
Best of luck!
Project Overview
The goal of this challenge is to develop HTML/CSS/JS code for building a prototype. By the end of the challenge we expect to have a very clean, lean scaffolded project. You are provided with the storyboards screens and source files which you’ll use to build up the working prototype.
Prototype Requirements
Overall
- Screens provided in the storyboard in scope are those that are mentioned in the respective spec section (including their mobile mirror too).
- Your prototype must match them, in look and functionality.
- UI Data must be rendered through JSON files. Not for all pages, it will be indicated on each respective section below as required.
- Use the D3.js library to implement the charts along with JSON file (s).
1. QED SHARE > Homepage
See 1 Home screens.
There’s a slider on the top that switches images automatically each X seconds. Dots are clickable and can activate other slides.
Map should be rendered as a vector resource (SVG). On hover a country a tooltip is displayed.
Testimonies have a particular behaviour. When hovering any of the items on the right the testimony title/date must be displayed while the thumbnail changes to white.
2. QED SHARE > Explore
See 2 screens.
Filter functionality is out scope. However, we need to see how it works, e.g. adding a filter adds deletable tags.
Pagination functionality is out of scope.
3. Evaluation > Landing
See 3_a screen.
4. Evaluation > Details
See 3_b, 3_c, 3_d, 3_e screens.
Pie charts must be implemented with D3 (JSON).
Pagination functionality is out of scope.
5. Evaluation > Take Survey
See 4_Take_Survey screen.
UI Data must be rendered through JSON files (survey form).
See results button triggers enter code page, then after successful code it triggers survey results page.
6. Authentication
See 5_Enter-code, 7_a, 7_b screens.
This form is triggered from any page when “Enter Code” is clicked (top right nav). It’s also triggered from the survey results page (see details below).
Create and show error styles. There's no design, so anything you can provide is appreciated (textbox with red border, red message/text, etc).
7. Survey Results
See 6_x screens.
“Show my answers” toggles the color version of the charts. Otherwise all the charts are all colored (not my answers).
Charts can be configured to be displayed as pie, lines, bar charts, etc. Use the gear icon to display a dropdown with this options. Implement the change for the first chart (Gender of PhD students).
Charts must be implemented with D3 (JSON). If there are some of them that are better to implement with plain HTML/CSS it must use JSON data to be set up.
Commenting Feature
Commenting functionality is out of scope, however markup must be there to be coded in the future:
- Display a list of comments available below the survey results (see screen 6_f). User see comments as anonymous.
- User see "You can write comments once you complete a login process" plus a login option.
- If user is logged in, can see comments authors and write comments (see screen 6_g, 6_f).
Your prototype must not technically handle authentication but must showcase this scenario somehow. Please indicate how to see this behaviour in your prototype.
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.
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: for width >= 1280px.
-- Tablet: for width between 768px and 1024px. There's no design for tablet, just make sure layout doesn't break while making the adjustment.
-- Mobile: for width >= 375px.
-- * Expose in forums any issues with the css breakpoints (in case of any).
- 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.