Solutions Mechanism Guide Port UI Prototype

Project Overview

NASA need to develop a software version of the Solution Mechanism Guide so that users can navigate a search form to a filtered subset of solution mechanisms that are a best fit for their specific needs based on the criteria they input (experience similar to finding a car rental or airline ticket online but more fun and NASA-y).

Competition Task Overview

The goal of this challenge is to build an HTML/CSS/JS prototype that matches the provided storyboard and addresses the outlined requirements below.

Key Requirements

• Test in all the required browsers.
• Replicate the design of the approved Storyboards (PSD Files) for all pages.
• Your pages must match the colors and structure of the provided storyboards.
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
• Ensure you submission clear of HTML and CSS Validation error and warning.

Detailed Requirements

General Notes

• Hover should be implemented in all pages by following this page 02_2_Home_hover.png
• Error styling should follow styling in 12_9_Admin_Manage-Help-help-topic-added-error-overlay.png
• Loading indicator should match 03_2_Identify-Solution_Grid_loader.mov with following notes :
  • Percentage and Loading word should be removed, we only want the image of the loader.
  • For some areas where it upload images, the percentage must appear.
• There are two types of header - one for regular user and one for admin.
• You must simulate the ajax calls, you can add set interval function or use mock data with server to serve the data.

Home Page

• Screenshot : 02_2_Home_hover.png, 02_1_Home.png
• File name : home.html
• "Hands on Examples" carousal should be implemented. Clicking right/left arrows will slide the items.
• When hover hover the question mark icon the Help popup appears, this should be the same behavior for all question mark icons in all pages you are implementing in this challenge.

Identity Solution Listing Page

• Screenshot : 03_1_Identify-Solution_List.png, 03_2_Identify-Solution_Grid.png, 03_3_Identify-Solution_Grid_Compare_loader.png, 03_3_Identify-Solution_Grid_Compare.png,
• File name : smg_listing.html
• Loading indicator should be implemented for "Filter Solution" widget and for main area content.
• Hovering over question mark (info) icon will display help popup.
• Switching between Grid and List display should be via javascript.
• Clicking anywhere in the Solution entry should open up detials overlay popup (03_4_Identify-Solution_Grid_View-details-overlay.png)
• When clicking "update result" it should reload the mainc content via javascript. In production, the button will make ajax call to backend to load the content, so loader indicator should be shown during that, you need to simulate that.
• When user select an item to add to compare, it will be shown in the left widget 03_3_Identify-Solution_Grid_Compare.png
• Filter widget should be scrollable as it might contain more filter questions that currently displayed in the prototype.
• Compare widget can have exactly two solutions/entries to compare, implement that in javascript to disallow selecting more than two solutions. Display popup with message "You already have two solutions selected, please remove existing solution to add different one".
• Clicking "Compare Solutions Above" button will take user to 05_Compare.png

Identify Sollution - Details Overlay

• Screenshot : 03_4_Identify-Solution_Grid_View-details-overlay.png. 03_5_Identify-Solution_Grid_View-details-overlay.png
• File Name : smg_details_overlay.html
• The windows modal should play loader indicator, in production the application will open up the popup and call backend via ajax to load it's content, so a loading indicator is needed.

Solution Details Page

• Screenshot : 04_Solution-Details.png
• Filename : smg_details.html
• "Graphics Goes Here" should be a background-image placeholder while the original image are loaded
• Each table will be empty when the page load, a loading indicator should be placed in center of each table until content are loaded.  Same as others, ajax call will be made to populate the content so ajax loading indicator is needed.
• Back button will work as 'browser back' button

Solution Compare Page

• Screenshot : 05_Compare.png
• Filename : smg_compare.html
• The table will be playing loading indicator while the content are loaded via ajax from backend, you need to simulate that.
• Back button will work as browser back button

Admin Manage Solutions

• Screenshot : 07_1_Admin_Manage-Solution.png
• Filename : smg_admin_listing.html
• The loading indicator should be placed in center of the table while content are loaded via ajax, you need to simulate that.
• Pagination must be implemented, pagination will use ajax call to retrieve the new content, loading indicator must be present in table center while content are being loaded, simulate that flow.
• Load per page pick list must be implemented.
• Clicking "Add new solution" takes user to 08_Add-New-Solution_Step1_help-popout.png
• Clicking "edit" takes user to 09_Edit-Solution-Step1.png (same as add new solution steps except that data are populated)
• Clicking "delete" should display message "Are you sure you want to delete this item?" with Yes/Cancel buttons.
• Search panel, fields are optional, but at least one field must be filled in order for search to make a call, add this validation and display error.
• Search will make ajax call to load results, the table should have loading indicator in the center while ajax call is executed, you need to simulate that.

Admin Manage Solution - Details Page

• Screenshot : 07_2_Admin_Manage-Solution_view-details.png
• Filename : smg_admin_details.html
• Loading indicator must be added to center of each table, in production the app will make ajax call so ajax indicator is needed, you need to simulate that.
• "Back" button should take user to previous page (same as browser back button)
• Clicking "edit" takes user to 09_Edit-Solution-Step1.png (same as add new solution steps except that data are populated)
• Clicking "delete" should display message "Are you sure you want to delete this item?" with Yes/Cancel buttons.
• "Graphics Goes Here" should be a background-image placeholder while the original image are loaded

Add/Edit Solution

• Filename : smg_admin_add_edit_smg.html
• Edit solution is same as add except that it will be populate with content.
• Step 1
  • 08_Add-New-Solution_Step1_help-popout.png, 09_Edit-Solution-Step1.png
  • Help popup should be displayed on hover over (?) icon.
  • Loading indicator should be playing in middle of the content area while loading the smg fields, they are dynamic and will be loaded from backend, so loading indicator needs to be displayed, please simulate it in your submission.
  • Clicking "Cancel" should display poup with message "Are you sure you want to cancel ? " with Yes/Cancel buttons.
  • Clicking "next" should validate the existing entries, they must not be empty, if any is empty, error styling should be applied to that entry/field.
  • Browse button will open up dialog to select image, it will play loading indicator to show it is uploading image (this loader should display the percentage), and if uploaded succeeded it should show the section as in "09_Edit-Solution-Step1.png"
• Step 2
  • Screenshots : 08_Add-New-Solution_Step2.png, 09_Edit-Solution-Step2.png
  • Loading indicator should be playing in middle of the content area while loading the smg fields, they are dynamic and will be loaded from backend, so loading indicator needs to be displayed, please simulate it in your submission.
  • Help popup should be displayed on hover over (?) icon.
  • Click "Add another example" will add another ckeditor section
  • Clicking "next" should validate the existing entries, they must not be empty, if any is empty, error styling should be applied to that entry/field.
  • Clicking "Cancel" should display poup with message "Are you sure you want to cancel ? " with Yes/Cancel buttons.
  • Clicking "previous" takes the user to previous step.
  • Click on active step in progress navigation bar should take user to that step.
• Step 3
  • Screenshots : 08_Add-New-Solution_Step3.png, 09_Edit-Solution-Step3.png
  • Clicking "next" should validate the existing entries, they must not be empty, if any is empty, error styling should be applied to that entry/field.
  • Clicking "Cancel" should display poup with message "Are you sure you want to cancel ? " with Yes/Cancel buttons.
  • Clicking "previous" takes the user to previous step.
  • Click on active step in progress navigation bar should take user to that step.
  • Help popup appears when hovering over (?) icon.
• Step 4
  • Screenshots : 08_Add-New-Solution_Step4.png, 09_Edit-Solution-Step4.png
  • Clicking "next" should validate the existing entries, they must not be empty, if any is empty, error styling should be applied to that entry/field.
  • Clicking "Cancel" should display poup with message "Are you sure you want to cancel ? " with Yes/Cancel buttons.
  • Clicking "previous" takes the user to previous step.
  • Click on active step in progress navigation bar should take user to that step.
  • Help popup appears when hovering over (?) icon.
  • Click "Finish" will run ajax call to create the solution and popup appears on succesful 08_Add-New-Solution_Step4_Popout.png (loading indicator must be played in the popup while the ajax call is executed, once return successful message, then change the popup message to successful.

Admin Manage Characterstics Page

• Screenshots : 10_0_Admin_Manage-Characteristic.png
• Filename : smg_admin_characterstics_listing.html
• The loading indicator should be placed in center of the table while content are loaded via ajax, you need to simulate that.
• Pagination must be implemented, pagination will use ajax call to retrieve the new content, loading indicator must be present in table center while content are being loaded, simulate that flow.
• Load per page pick list must be implemented.
• Clicking "Add new characterstic" opens up create characterstics popup 10_1_Add-New-Characteristic_blank-.png
• Clicking "edit" opens up same "add characterstics" popup with content loaded (10_4_Edit-Characteristic_selected-type-.png)
• Clicking "delete" should display message "Are you sure you want to delete this item?" with Yes/Cancel buttons.

Admin - Add new characterstics Popup

• Screenshots : 10_1_Add-New-Characteristic_blank-.png, 10_2_Add-New-Characteristic_selected-type-.png, 10_3_Add-New-Characteristic_added-.png, 10_4_Edit-Characteristic_selected-type-.png, 10_5_Edit-Characteristic_saved-.png
• When user click edit/add a loading indicator must be displayed to the left of the button indicating that ajax call is made to process the request.
• Add error validation, all fields are required.

Admin Manage Search Form Page

• Screenshots : 11_1_Admin_Manage-Search-Parameter.png, 11_6_Admin_Manage-Search-Parameter_add-new-filter-form.png, 11_6_Admin_Manage-Search-Parameter_add-new-filter-form.png
• There will always be one active checkbox at a time, so change it to radio button
• Clicking "view" opens up 11_2_1_Admin_Manage-Search-Parameter_view-details.png
• clicking delete does 11_9_Admin_Manage-Search-Parameter_delete-filter-form.png
• Clicking "add/edit" opens up popup 11_3_Admin_Manage-Search-Parameter_view-details_Edit-mode.png or 11_4_Admin_Manage-Search-Parameter_view-details_add-new.png
• Add validation and error styling to the popup, not allowed to submit empty fields
• Clicking 'save' buttons in the popup will play loading indicator to the left of the button, if succeeded it will show 11_5_Admin_Manage-Search-Parameter_view-details_save.png

Admin - Add new filter form page

• Screenshots : 11_6_Admin_Manage-Search-Parameter_add-new-filter-form.png, 11_8_Admin_Manage-Search-Parameter_add-new-filter-form-after-saved.png
• Clicking "delete" display this message popup 11_9_Admin_Manage-Search-Parameter_delete-filter-form.png

Admin - manage search form details

• 11_2_1_Admin_Manage-Search-Parameter_view-details.png
• Click move up/down will reorder the search parameters position in the list.
• Clicking delete button should display popup message with message "Are you sure you want to delete this item?" with Yes/No buttons.
• Clicking edit will open up the form parameter popup.
• Clicking cancel will cancel creation of the form.
• Clicking save will make ajax call so loading indicato rmust be played, on successful it should take user back to 11_9_Admin_Manage-Search-Parameter_delete-filter-form.png
• Clicking add search parameter opens up 11_4_Admin_Manage-Search-Parameter_view-details_add-new.png when edit it is 11_3_Admin_Manage-Search-Parameter_view-details_Edit-mode.png
• When saving it opens 11_5_Admin_Manage-Search-Parameter_view-details_save.png
• When saved it shows 11_7_Admin_Manage-Search-Parameter_add-new-filter-form-saved.png, then take user to 11_8_Admin_Manage-Search-Parameter_add-new-filter-form-after-saved.png

Specific HTML/CSS/JavaScript Requirements

• HTML5 is not allowed. MUST use HTML4.
• 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.
• 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.
• No inline CSS styles - all styles must be placed in an external stylesheet.
• Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• 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).
• Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
• Your code must render properly in all browsers listed in the browser requirements section in both Mac and PC environments.

JavaScript Libraries/Plugins

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.

• You are allowed to use the JQuery JavaScript library for this contest.

Browser Requirements

• IE8+
• FireFox Latest
• Safari  Latest
• Chrome Latest

Documentation Provided

Storyboard is provided in the challenge forums.

Final Submission Guidelines

Submission Deliverables

• A fully functional UI prototype with all pages outlined below, and must matches the provided storyboard.
• You must include Deployment Guide.

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.