Livable Analytics web app is a Survey Report and Benchmark tool will provide an interactive survey results report for a single building and showing comparisons (benchmarking) to the overall database.

You are provided with HTML prototype, you will update it to render page content and charts using JSON files.

Challenge Requirements

JSON Files

In the challenge forums you are provided with the JSON files you will use in this challenge, and a document detailing the json objects/fields.

Mapping Documents

In the challenge forums you are provided with mapping between the JSON content and the HTML UI fields.

If there is any conflicts or missing fields please raise this in forums to get clarifications from Client/Copilot/PM.

Login Page

• - Page : Login.html

• - This is the entry page.

• - Update JS to use username/password for login, otherwise, display login error as in prototype.

• - Successful login will take user to dashboard as done in the prototype.

Dashboard Page

• - Page : Dashboard.html

• - Input parameter to the page :

  • - filter_id : represents the JSON file to be pulled from backend. By default this is not set.

• - When the page opens, an ajax call will be made to pull sample_report_full.json or the filter_id file name if provided..

• - Refer to mapping documents to map between JSON response fields/objects and the Dashboard UI elements.

• - The left side navigation menu will contain the following :

  • - First item is the Dashboard and takes user to Dashboard.html

  • - The remaining items will list the categories array :

    • - The item will use category : “name” field.

    • - The menu item will be a link to Question Details page, the expected parameters should be set properly, the applied filter should be passed to the page.

    • - The categories items should be listed based on the “order” json field, the category items in the array are not sorted per “order” field so you must do a reordering before rendering the items in the menu.

      • - Please note that the order in the JSON file is 1 for all categories, you need to fix it so each category has different order.

  • - Clicking on a category item will take user to Question Details page.

Question Details Page

• - Page : question_details.html

• - Parameters to be passed to this page should be :

  • - category_id : this is the selected category_id from the menu.

  • - filter_id : this represents the json file ID to use in the page.

• - When the page opens make an AJAX call to pull the JSON file using the passed filter_id query string parameter.

• - Pull the category item fro “modules#categories” array using the passed “category_id” query string parameter.

• - Refer to mapping documents to map between JSON response fields/objects and the Dashboard UI elements.

Filtering Feature

• - User can filter the content in Dashboard and Question Details page as shown in slide 10 in the powerpoint mapping document.

• - We will have 3 filtering options :

  • -  Age – Under 30 : selecting this option will pull sample_report_filtered1.json

  • - Age – 31-50 : selecting this option will pull sample_report_filtered2.json

  • - Age – Over 50 : selecting this option will pull sample_report_filtered3.json

• - When clicking apply an ajax call will be made to pull the json content.

• - Cleaning filtering will refresh data from  sample_report_full.json file.

• - Hardcode these file names in the JS frontend. and Use a template URL to be used : http://<url>/api/<filter-id> where <filter-id> is the file name.

• - Any changes in filter should update the menu items to set the filter_id query string properly for the links.

Hosting

Please provide scripts and files to host the HTML and JSON files in Heroku or AWS.

Documents

Provided in challenge forums :

• - JSON content and Documentation files.

• - Mapping documents.

• - HTML UI Prototype.

 

Final Submission Guidelines

Deliverable

• - Updated UI prototype with JSON files.

• - Deployment guide and verification steps.

• - JSON documentation and Mapping documents.