Key Information

Register
Submit
Status: ‌Cancelled zero submissions

Challenge Overview

Project Overview:

Welcome to the FAST!! 72 Hours - GSA Responsive HTML5 UI Prototype! The goal of this challenge is to create a Responsive HTML5 UI Prototype application for iPad and desktop browsers based on provided reference screens.

As part of this challenge you may need to document all HTML5/CSS3/JavaScript code for future implementation references. We would prefer to complete click through UI Prototype functionality as first priority.

IMPORTART: As per the project schedules and FAST challenge the review timelines are very close. Reviewers please note the review timelines for further reference.

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

Competition Task Overview:

The main task of this competition is to develop a click through Responsive HTML5 prototype based on the provided reference screens. Your prototype must work properly in all the required browsers listed below.

Required Pages:

Below are the required pages for this prototype. We don't have any storyboard design for this challange, so please try to use theme from the existing screens as base reference.

0. Common Header:

  • Common header component with the following elements as shown in screen "1.0 My Team".
    • Identity of user, Logout, Search input
  • Top-level site map navigation (white tabs) - (all links can be dead links for now).
    • About Group, Language Selector
  • App-level site map navigation (gray links + green button) - (all links can be dead links for now).
    • About Team, Events & Activities, Leader (green button)
  • Primary app Tab navigations
    • My Team, Year Plan, Meeting Plan, In-Meeting, Finances, Community

1. My Team Tab:

  • User needs to manage team information based on a team group.
  • Display the details of the page as shown in "1.0 My Team" with active tab as 'My Team'.
  • My Team tab should show the information for my next event.
    • Show button to view/change plan and link should launch modal popup as shown in "1.1 Change Meeting".
  • My Team tab should show a button to upload photo and link should launch modal popup with generic photo selection from device.
  • My Team tab should list of the customers in this group (name, email, phone numbers).
    • Ability to edit customer information - show modal popup with input fields, save/cancel buttons.
  • Edit the date/time for the next event - Add Save/Cancel buttons.
  • Create right-hand slide over as shown to display relevant content in "1.2 Right Slide" screen.
    • Show social community post at top.
    • Show links to relevant files as resources.
    • Clicking relevant file, show video player popup as shown in "1.3 Video Player" screen.
  • My Team tab should list additional sections for following items.
    • "Set Meeting Location" - (show blank section for now)
    • "Get Reminders" - (show blank section for now)
    • "Volunteer Directory" - (show list people attributes as shown for customers at top)

2. Year Plan Tab:

  • User needs to manage a year plan of events for my team.
  • Display the details of the page as shown in "2.0 Year Plan" with active tab as 'Year Plan'.
  • Simulated icons for download to calendar, print & help.
  • A drop down with a list of template plans should show.
  • Display a list of calendar events as shown with simulated links (dead link for now).

3. Meeting Plan Tab:

  • User needs to manage an individual meeting plan for my team.
  • Display the meeting details of the page as shown in "3.0 Meeting Plan" with active tab as 'Meeting Plan'.
  • Show dummy texts where ever the texts are not clear or invisible.
  • A section for displaying Pre-Meeting Checklist.
    • "View Overview" link should show on modal popup as shown in "3.1 View Overview" screen.
    • "View Materials List" link should show on modal popup as shown in "3.2 View Materials List" screen.
    • "Send Meeting Reminder" link should show on modal popup as shown in "3.3 Send Meeting Reminder" screen - (use tinymce editor control).

4. In-Meeting Tab:

  • User needs to manage in-meeting details for my team.
  • Display the details of the page as shown in "4.0 In Meeting" screen for each date.
  • User should be able to navigate prev/next dates.
  • Display a section for displaying Attendance as shown in "4.0 In Meeting" screen.
  • Display a section for displaying Meeting Aides - (show blank section for now)
  • Display a section for displaying Activities - (show blank section for now)
  • Display a section for displaying After the Meeting as shown in "4.1 After Meeting" screen.

5. Finances Tab:

  • User needs to manage finance details for my team.
  • Display the details of the page as shown in "5.0 Finances" screen.
  • User should be able to navigate prev/next quarters.
  • On clicking add buttons show the income/expenses and current balance after calculation.
  • Show only those texts which are visible on this screen.
  • Add "Save" button at the bottom of the page.

6. Community Tab:

  • User needs to interact with the community in a social forum.
  • Display the details of the page as shown in "6.0 Community" screen with some dummy texts.
  • Breadcumb should be "GS Communities > Conducting Meetings (353)".
  • Conducting meetings should have paginations and also each item should be text link followed by username in next line.

Specific HTML/CSS/JavaScript Requirements:

  • HTML/CSS Requirements:
  • Your HTML code must be valid HTML5 and follow best practices
  • 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 style-sheet.
  • 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 scorecard in both Mac and PC environments.

Font Requirements:

Use font - Arial.

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. We would like to use following JavaScript libraries:

Browsers Requirements:

  • Latest Safari Browser on iPad, MAC and PC
  • Latest Chrome Browser on MAC and PC
  • Latest Firefox Browser on MAC and PC

Documentation Provided:

Attached Reference Screens: Screens.zip



Final Submission Guidelines

Submission Deliverables:

Final Submission:

ELIGIBLE EVENTS:

2014 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30041396