Challenge Overview
Welcome to Sky Zone - In park Display UI Prototype Challenge. This is a simple challenge where we just need to create a HTML 5, CSS 3, JavaScript for the provided storyboard.
As part of this challenge we need you to document your HTML5/CSS3/JavaScript (using best practices). We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development.
We would like you to use angular JS and Bootstrap (http://getbootstrap.com/getting-started).
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 an HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required screen size.
Key Requirements:
- Screen size: Screen sizes will vary, but in general will be large TV monitors ranging in size from 50” to 80” (diagonal), HDMI and networked, 1080p, 16:9 ratio, digital displays. Display ratio will be 1920x1080.
- Ensure your submission is clear of HTML and CSS Validation errors and warnings.
Required Pages:
Dashboard Screen:
The dashboard needs to serve 2 main purposes:
1) Guests need to easily see next available jump times in a readable format on the monitor.
2) Guests need to easily see the park capacity for the next several hours on the monitor.
This is a standalone page and this will be displayed on large TV monitors (60-80”) in their trampoline parks on which they want to display available jump times for guests. The general purpose of the dashboard is to allow guests at the park to view what times are available for ticket purchase.
- Though the page is static, the elements within this page dynamically keeps updating, wherever we have mentioned "its pulled from a service" - for those we would like you to use JSON to fetch and update values. You can animate when changing between values (please see below for which of the elements need to dynamically change / animate).
- Title ("Open Jump Availability") will be static and please change the title at the top of the screen from "Open Jump" to "Open Jump Availability".
- Time at the header should always display system time (please make sure it works as there is some dependecy based on this time)
- The text below the title needs to show when the next session starts based on the current clock time (say for example: in the storyboard - clock time is 09:50 in top right, so now the next immediate jump session starts at 10:00, next - if the time is 10:00, we need to say the "next jump session starts at 10:15 and so on)..
- Jump products (30 minute, 60 minute, 90 minute, 120 minute) will be pulled in from a service and show in the left side.
- The first column of availability should always be the next jump time beyond current time. When the clock changes (the one on the top right) to 10:00, availability columns should use slide left animation to move the next jump time (10:15 in the design) into the first column and now we see should be able to see 12:15 as the last column, so this gets updated on a 15min interval based on the clock time upto 22:00 (10PM).
- Jump times will be pulled in from a service and assume these Jump Times sessions: 10:00am through 10:00pm, with 15 minute intervals (10:00, 10:15, 10:30, ...etc.. - you can use 24hr time format, so we don't need to use AM/PM for time).
- Jump Availability for each jump product will be pulled from a service. For this prototype, you can use numbers between 0 and 250 for each Product-Jump Time combination. If the available slots are 10 or less, number should be orange. All numbers over 10 should be dark grey. Assume this service is updating every 30 seconds, and consider flip animation for values that changed.
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 layout 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.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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 JQuery (MIT License) for this contest.
Documentation Provided:
- Storyboard Screens and PSD files can be found in forums.
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.