Challenge Overview
Welcome to Scout Application Updates Prototype Challenge.
The Department of Energy’s Building Technologies Office (BTO) is developing a modeling system called “Scout” that will help measure the energy conservation potential of new technologies on a national scale. BTO calls these new technologies “energy conservation measures” (abbreviated as ECMs).
We have run design and prototype challenges in the past to build up some features of the application. Now we need to complete it by prototyping new features and performing some updates.
Best of luck!
Project Overview
The goal of this challenge is to develop HTML/CSS/JS code for building the prototype. You are provided with the existing prototype code that you will use as baseline, plus the storyboards screens/source files which contain the updates and new screens that you will implement.
Keep using the same tech under the provided prototype: jQuery, Bootstrap, D3.js and Kendo UI.
Prototype Requirements
Overall
- The data to be displayed (charts numbers, dropdowns content, etc) must be displayed.
- All charts must be properly styled in the markup, use D3.js to render graphics through JSON data files.
- All UI data must be pulled from JSON files.
- Fix problem with tooltips on radar plots in Analysis Results pages. Currently the tooltips do not appear adjacent to the cursor, the desired behavior, but rather appear in the same location on the left of the radar plot area.
1. ECM Summaries
Listing
See 01-1 ~ 01-8 png screens.
Clicking on the title of any item in the table should activate the overview overlay, see 01-5.
Default ECM vs Custom ECMs toggle feature must be added. See 01-8 screen. The selected state must be blue. There is a drop down to be displayed once the user clicks on “Custom ECMs” or the toggle switches to that state (should automatically show the dropdown menu).
Chart from 01-5 must be functional, including tooltips.
Add New ECM ~ Single
See from 01-10 ~ 01-41 png screens.
Clicking on Generate ECM button in the form when the “send ECM for review” checkbox is active should trigger a popup to collect data before submitting, see 01-45.
Map view must be implemented as a chart/JSON, not a static image.
Clicking the bottom left arrows should navigate the user through the form steps back and forth. Steps on the left side of the panel must allow user navigating among the form steps (1. General, 2. Applicable Baseline Market, etc).
Provide an “Edit” view of the ECM record. By clicking on an edit icon from the listing view, it opens the form but with "Edit" instead of "New" (title change in the ECM form).
In 01-10, switch the order of the ‘Service Replacement’ and ‘Add-On’ radio buttons so they match the order in the title for that option.
Drag and drop feature is out of scope for this challenge.
Add New ECM ~ ECM Package
See 01-46 png screen.
Data Source
- Listing table and plot content can be extracted from this JSON mockup so you don't have to come up with fake data.
- Follow this documentation about how to read/translate this file.
2. Analysis Results
This is the only page that already exists in the prototype. We need to make some updates.
Left filters for Energy, CO2, Costs and Financial Metrics DO NOT NEED to be updated. Keep as in the prototype.
Default Results vs Custom Results toggle feature must be added. See 02-14.Analysis-Result-Custom-Result. The selected state must be blue. There is a drop down to be displayed once the user clicks on “Custom Result” or the toggle switches to that state (should automatically show the dropdown menu).
The graph are not required to be modified, they already work. Out of scope, don’t touch.
Change the summary ‘Avoided CO2 Emissions’ statistics in the ‘Financial Metrics’ tab tooltips to summary ‘Energy Savings’ statistics and update its content.
3. Market Calculator
See 03-1 ~ 03-10 png screens.
Notice that map interaction from 03-2 ~ 03-4 must be implemented, not a static image.
Make sure to display realistic data in those areas with inner scrolling. See a un-styled final implementation for data values guidance: https://trynthink.github.io/scout/calculator.html
4. Landing
See 04-1 png screen.
5. Section 508 Compliance
Incorporate Section 508 compliance to all existing assets, specifically:
- Every UI control must have a label (label for).
- Make sure all images have an alt attribute.
- User should be able to tab through the whole screen (no particular order needed ~ current tabbed element must be highlighted)
- Be able to use the keyboard to trigger a JSON upload (01-9 and 02-14). Let us know which key combination you used (document it).
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.
- 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.
- Mobile view is not required, however, the output should be website that doesn't completely break on a mobile device. The current version is a good sample of this statement. User is able to navigate, use the controls, technically it looks ok on mobile.
- 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.
The Department of Energy’s Building Technologies Office (BTO) is developing a modeling system called “Scout” that will help measure the energy conservation potential of new technologies on a national scale. BTO calls these new technologies “energy conservation measures” (abbreviated as ECMs).
We have run design and prototype challenges in the past to build up some features of the application. Now we need to complete it by prototyping new features and performing some updates.
Best of luck!
Project Overview
The goal of this challenge is to develop HTML/CSS/JS code for building the prototype. You are provided with the existing prototype code that you will use as baseline, plus the storyboards screens/source files which contain the updates and new screens that you will implement.
Keep using the same tech under the provided prototype: jQuery, Bootstrap, D3.js and Kendo UI.
Prototype Requirements
Overall
- The data to be displayed (charts numbers, dropdowns content, etc) must be displayed.
- All charts must be properly styled in the markup, use D3.js to render graphics through JSON data files.
- All UI data must be pulled from JSON files.
- Fix problem with tooltips on radar plots in Analysis Results pages. Currently the tooltips do not appear adjacent to the cursor, the desired behavior, but rather appear in the same location on the left of the radar plot area.
1. ECM Summaries
Listing
See 01-1 ~ 01-8 png screens.
Clicking on the title of any item in the table should activate the overview overlay, see 01-5.
Default ECM vs Custom ECMs toggle feature must be added. See 01-8 screen. The selected state must be blue. There is a drop down to be displayed once the user clicks on “Custom ECMs” or the toggle switches to that state (should automatically show the dropdown menu).
Chart from 01-5 must be functional, including tooltips.
Add New ECM ~ Single
See from 01-10 ~ 01-41 png screens.
Clicking on Generate ECM button in the form when the “send ECM for review” checkbox is active should trigger a popup to collect data before submitting, see 01-45.
Map view must be implemented as a chart/JSON, not a static image.
Clicking the bottom left arrows should navigate the user through the form steps back and forth. Steps on the left side of the panel must allow user navigating among the form steps (1. General, 2. Applicable Baseline Market, etc).
Provide an “Edit” view of the ECM record. By clicking on an edit icon from the listing view, it opens the form but with "Edit" instead of "New" (title change in the ECM form).
In 01-10, switch the order of the ‘Service Replacement’ and ‘Add-On’ radio buttons so they match the order in the title for that option.
Drag and drop feature is out of scope for this challenge.
Add New ECM ~ ECM Package
See 01-46 png screen.
Data Source
- Listing table and plot content can be extracted from this JSON mockup so you don't have to come up with fake data.
- Follow this documentation about how to read/translate this file.
2. Analysis Results
This is the only page that already exists in the prototype. We need to make some updates.
Left filters for Energy, CO2, Costs and Financial Metrics DO NOT NEED to be updated. Keep as in the prototype.
Default Results vs Custom Results toggle feature must be added. See 02-14.Analysis-Result-Custom-Result. The selected state must be blue. There is a drop down to be displayed once the user clicks on “Custom Result” or the toggle switches to that state (should automatically show the dropdown menu).
The graph are not required to be modified, they already work. Out of scope, don’t touch.
Change the summary ‘Avoided CO2 Emissions’ statistics in the ‘Financial Metrics’ tab tooltips to summary ‘Energy Savings’ statistics and update its content.
3. Market Calculator
See 03-1 ~ 03-10 png screens.
Notice that map interaction from 03-2 ~ 03-4 must be implemented, not a static image.
Make sure to display realistic data in those areas with inner scrolling. See a un-styled final implementation for data values guidance: https://trynthink.github.io/scout/calculator.html
4. Landing
See 04-1 png screen.
5. Section 508 Compliance
Incorporate Section 508 compliance to all existing assets, specifically:
- Every UI control must have a label (label for).
- Make sure all images have an alt attribute.
- User should be able to tab through the whole screen (no particular order needed ~ current tabbed element must be highlighted)
- Be able to use the keyboard to trigger a JSON upload (01-9 and 02-14). Let us know which key combination you used (document it).
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.
- 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.
- Mobile view is not required, however, the output should be website that doesn't completely break on a mobile device. The current version is a good sample of this statement. User is able to navigate, use the controls, technically it looks ok on mobile.
- 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.