Challenge Overview
Welcome to the SunShot - Livable Analytics - Survey Report and Benchmark Tool Prototype Challenge! The Survey Report and Benchmark tool will provide an interactive survey results report for a single building and showing comparisons (benchmarking) to the overall database.
For this challenge, the goal is to create the HTML5 prototype based on the provided storyboard designs and requirements/instructions outlined in the Challenge Details section.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML/CSS/JS code functions and make it easier for future developers and the client to understand what you have built. Use Bootstrap and jQuery for this challenge.
Final Submission Guidelines
Primary Requirements:
1. Navigation
- This is located on the left sidebar.
- The left sidebar should be shown/hidden when user clicks on the “hamburger” icon in the upper right part of the page.
- For this challenge, link all items to Question Details page except for Dashboard.
2. Layout
- Left sidebar will be fixed width.
- Main content should have full fluid layout ( make sure that it is not fix content - fluid background), unless otherwise specified below.
3. Header
- Logo should be image based background.
- The text “CBE Occupant Satisfaction Survey Report” after the logo is not part of the logo and should not be an image.
4. Charts
- Use D3JS library for all the charts.
- Use JSON file for the data of all the charts. Create and use dummy data for now.
5. Fonts
- Use font stack (Helvetica Neue, Helvetica, Arial).
- For big numbers use Google font Open Sans semi-bold (600 font weight).
6. Scrollbar will use native/default browser scrollbar.
Page and Screen Requirements:
The following are the screens and functionalities needed for this challenge.
1. Login
- Refer to 00.login.png for reference.
- Main content will be fixed width but the background should be fluid.
- Validate login and show error message (see the layer body > error in 00.psd for reference).
- On successful login, redirect the user to the Dashboard page.
2. Dashboard
- Refer to 01a-Dashboard.png for reference.
- This page will show the summary of survey results for single building and benchmarks by default.
2.1. Top section
- All elements are display only and no related functionality.
2.2. Chart
- Data should come from a JSON file.
- Hovering on blue dot will show a blue tooltip (01b-Dashboard-MouseHover-Blue.png)
- Hovering on gray diamond will show a gray tooltip (01c-Dashboard-MouseHover-Grey.png)
- Clicking on the “Show Details” link will expand a section to show the details of a particular item. Refer to 01d-Dashboard-ShowDetails.png for reference.
- “Expand All” should expand all the details. When all details are expanded, this text should be replaced by “Collapsed All ^”.
2.3. Filter
- When this icon is clicked, it will show filter options. Refer to 01f-Dashboard-FilterSetting.png for reference.
- By default, there will be no checked filter and the buttons should be “Check All” and “Apply”.
- Once a checkbox is checked, the “Check All” will become “Uncheck All”.
- “Check All” button will check all the checkboxes. “Uncheck All” will do the opposite thing.
- Edit (pencil) icon will open a modal similar to “Create Custom Filter”.
- Delete (x) icon will remove the specific filter.
- “Custom Filter / type here to rename” will change to input text to type in filter name. The style should be borderless and transparent (gray background). Clicking “Save” will apply the entered text.
- “Create Custom Filter” will launch a modal, see below for more details.
- Apply button will reflect the selected filter into the Filter section, see 01e-Dashboard-Subheader-FilterApplied.png for reference.
- Clicking on the “x” from the applied filter will remove that filter.
2.4. Create Custom Filter
- Refer to 01g-Dashboard-CreateCustomFilter.png
- Each section are expandable/collapsable. By default, all sections are in collapsed state.
- By default, no checkbox is selected.
- Modal should have fixed height. Use scrollbar for each sub-sections as needed.
- “Save Current Filter” is dead link.
- “Clear All” button will unselect all checked checkbox and will make all sub-sections in collapsed state.
- Apply button will close the modal.
3. Question Details
- Refer to 03a-Lighting-QuestionDetail.png for reference.
- Filter section will have the same functionality described above in the Dashboard page.
- “Show Other Responses” and “Show Details” are expandable/collapsable section. Refer to 03b-Lighting-QuestionDetail-Expanded.png for expanded details.
- This page shows one question, but most pages will show several questions, they can be of this type with histogram or the “Additional” or a variation of question details page listed below.
- For thumbs up and down, the labels may be “Satisfied, Neutral, Dissatisfied,: or “Enhances, Neutral, Interferes”. Document how to change the icon to reflect their appropriate label, that is if the label is “Satisfied” or “Enhances”, show thumbs up icon. If label is “Neutral”, show neutral icon. If label is “Dissatisfied” or “Interferes”, show thumbs down icon.
3.1. Variation Two of Question Details page
- Refer to 04-Additional.jpg
- This will be a variation of the Question Details page.
- Link the first question under “Lighting” to this page.
- “Show Other Responses” will have the same functionality described above.
3.2. Variation Three of Question Details page
- Refer to - 04A-Additional.jpg
- This will be another variation of the Question Details page.
- Link the second question under “Lighting” to this page.
Browser Compatibility:
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
HTML
- 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 "-" to separate multiple-word classes (i.e.. "main-content")
- 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
- CSS code should be valid level 3
- 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 CSS 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.
- Use variables with well-chosen names. Use some sort of naming convention.
Javascript
- 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.
- Use jQuery library for this challenge.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.