Topcoder Challenge | Topcoder Community

Challenge Overview

Welcome to NASA PAM - Responsive Web App Prototype Update & Fixes Challenge. In this challenge, we are looking to enhance a UI prototype that was built out in the last challenge. The code from the earlier prototype challenge is available in the forums.

The Problem:

The NASA Partnership Office manages an enterprise agency run routing concurrence system that is in need of an updated user experience. The system is for the development, review, concurrence, and approval of NASA’s various agency agreements, including Space Act Agreements, InterAgency Agreements, and Cooperative Research and Development Agreements. The current interface is mainly text based and form driven, and is outdated and requires multiple steps for users to navigate. Since the interface is mainly form driven, there is a need to provide drag and drop capabilities and rich text box editing to allow for better navigation for the user.

Target Audience:

- Users at the NASA Partnership Office

Notes:

- The objective of this challenge is to produce front end that should be easily integrated within view component of Microsoft’s Model-View-Controller (MVC) framework. The presentation technologies that can/should be used are (Razor view engine, HTML 5, Bootstrap, CSS 3, JQuery UI). You are expected to use the provided codebase from earlier prototype challenge.

- Desktop Size: 1366 x 768px

- Should be resizeable to function on a tablet (iPad, other), so please consider responsiveness while designing your solution.

Supporting Documents:

- Existing prototype app code

KEY CONSIDERATIONS

- The prototype must be responsive and built using technologies mentioned above

- 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.

- 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.

- Your HTML code must be valid HTML5 and follow best practices

- 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.

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.

Browser Requirements

Desktop (latest versions)

- Chrome

- Safari

- Firefox

- IE11

Requirements:

1) The current prototype is only for desktop. As part of this challenge, we need to support mobile and tablet as well.

2) The client needs the codebase to be compliant with Section 508 standards . You can use any of the 508 compliance checker tools listed here to ensure compliance. The following issues are reported under this section and need to be fixed

This form control has no associated LABEL element.

Guideline: Section 508 1194.22 (n)

This form has fields without LABEL elements or TITLE attributes.

Guideline: Section 508 1194.22 (n)

3) The “review-details.html” current flow for the user experience is as follows:

a. When the page opens, the screen below appears

Screen Shot 2017-03-21 at 1.26.15 PM.png

b. When the user clicks “I concur/approve” the message below appears

Screen Shot 2017-03-21 at 1.26.21 PM.png

c. When selecting yes to the “Are you sure you concur/approve with this agreement?” Another screen is shown (note the radio buttons under comment area and the buttons)

Screen Shot 2017-03-21 at 1.26.26 PM.png

The fix for “review-details.html” is the screen needs to be broken up into two pages. The first page should be called “review-details.html” and the flow to the page should be just only be steps “a” and “b” above. The second page should be created from steps “c” to “b” where step “c” should have its own page and after clicking the buttons at the bottom the message should appear with the text “Are you sure you concur/approve?” The second page should be called “review-abstract-details.html”

4) A new review screen needed for routing a PAM agreement close-out questionnaire. This screen we be the based on the "review-details.html” screen requested in fix # 2 with 2 fixes needed.

The comment section should be replaced with a set of questions. See “closeoutquestions.docx” for the standard text/layout that can be used. The sample view we are expecting can be found in “close-outscreen.png” with the standard style applied for the appropriate controls.

The set of buttons at the bottom of the screen should be labeled “Cancel”, “Save”, “Submit”.

5) routing-templates.html and routing-templates-my-templates.html links under the “Template Name” column should navigate the user to an edit page to load and edit the template people on the template. There doesn’t appear to have any functionality for this.

Final Submission Guidelines

- All pages of the UI prototype developed according to the provided design as described above

- Any standard Topcoder documentation for a web UI prototype challenge

- All source code from your project uploaded as a zip

NASA PAM - Responsive Web App Prototype Update And Fixes Challenge

Challenge Overview

Final Submission Guidelines

Learn

Review style

Final Review

Approval

Challenge links

Toolbox

ID: 30055739