Challenge Overview
Welcome to Umbrella City Builder Game Proto Challenge 1. The goal of this challenge is to create the HTML5 Prototype using the provided "Umbralla City Game Builder" storyboards. The prototype must follow our standards and our guidelines. Review the details below.
As part of this challenge we need you to document your HTML5/CSS3/JavaScript code (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 will allow documentation updates during final fixes (but still required).
This challenge will leverage Bootstrap (http://getbootstrap.com/getting-started). This prototype will be responsive, but currently we don't have the storyboards for mobile and tablet version, so just make sure to adjust the layouts for mobile and tablets as you see fit (no specific restrictions on how you come up with that) but make sure it doesn't look cluttered or messy!
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 browsers.
Key Requirements:
- Test in all the required browsers (see the list below)
- Ensure your submission is clear of HTML and CSS Validation errors and warnings.
- You are provided with a storyboards & source files!
- We have also provided a PDF with the flow of the screens.
Required Pages:
0) Global Framework / All Screens:
NOTE: In any instance where the source file (PSD) does not match the screen files (PNG), please follow the PNG.
Header:
LOGO: The logo (upper left) should be a transparent graphic, in case the customer wants to swap it out later. Click on this shows no hover state and takes the user to the home page (play).
Main Menu:
- We need below menu items in the navigation:
- - PLAY: Clicking on this item takes the user to Home / Play (00_Play.png)
- - LEADERBOARD: Clicking on this item takes the user to Leaderboard page (02A_leaderboard.png)
- - RULES: Clicking on this item takes the user to Rules page (03_Rules.png)
- - HELP: Clicking on this item will just be a link to launch an email - use “me@umbrella.com” for the “to” address and make the subject line “City Builder Support Question”
- Hover state and active state are the same (follow the storyboards)
- - colored background blocks behind the active item and change to white text and icon
- Each of the item in the navigation should allow the text to be edited (not a graphic)
Footer:
The center content area is a fixed height on most screens, and the hotter content is tied to it, so if the viewing area in the user’s browser is taller than the screen content, show blank white space below the design rather than pushing the footer content down.
- FOOTER LEFT content here shows the user’s placement on the leaderboard (star icon) and the related revitalization stats:
— The star should be separate from the number text
— The placement numbers can be anything from 1 through 999, and then for higher placments it will just show “999+” (meaning they are ranking lower than the top 999). The star shape must be coded separately
from the numbers and the shape comes in four colors (see screen #7 in PDF). Please slightly reduce the font size of the number here to allow for the “999+” as shown in the provided “999.png” screenshot and play screen (the “play” version has been modified to show this correctly, but please make sure to use this same font size on all versions, including the leaderboard screens!)
— Please show the revitalization text as “60 blocks / 15 neighborhoods” (as seen in first two screens and play PSD).
- FOOTER CENTER content here shows the user’s profile photo and related name and level name.
— Client will changing these dummy images at a later point of time!
— Possible levels are: City Janitor (current), Town Planner, Structural Engineer, Junior Architect, Competent Architect, Black belt Architect, Overlord Architect (and each has a related icon, seen in footer right content).
- FOOTER RIGHT content here shows the player’s budget and related level icon. Maximum budget characters allowed is “$xxx, xxx,xxx,xxx” so you will have to expand the gray rounded corner background to account for this larger number.
- FOOTER BOTTOM content here shows copyright placeholder text on the left and placeholder links on the right (privacy / security / terms). Please use dead links (href=“#”) for these links, for now.
1) Home / Play:
Reference: 00_Play.png
This is a placeholder for the game section that will be created in the second prototype challenge. For now:
- Use this as the screen seen when user taps “play” in the top main menu. (also the “home page”).
- Make the entire enter graphic (just the rounded graphic area in the center) a link for the QUESTION screen (01A_Play.png).
2) Question & Answer:
Reference: 01A_Play.png
This is where the user reads the question and selects an answer.
- QUESTION content will show the question label (orange) and smaller question text.
— The height of this area is FIXED so the question cannot be longer than space allotted (max of one line more than question shown in graphic), so please add another line of question (use dummy text like storyboard) here to show max question size.
— The image to the left of the question will be an image of the related city piece (selected on screen #1 (Home / Play) - to be created later). The orange circle around the game piece graphics should be a separate layer over the square game piece graphics that will be in the system, so that the customer will not have to create the round versions of the game pieces they will be adding later.
- ANSWER content will show three (3) possible answers for the player to choose from.
— The answers (before selection) are shown as 01A_Play.png:
—— orange answer label circle with white number (1-3)
—— white question background shape with dark gray answer text.
— The answers (on hover and after selection) are shown as 01B_Play_Solution_Selected.png:
—— white answer label circle with orange number (1-3)
—— orange question background shape with white answer text.
— The blue “[arrow back]“ button on the bottom left of the answer area will take the user back to the home page (screen #1 - Home / Play). Hover state for this will be a reverse to white arrow on blue circle
background.
— The green “[checkmark]” button on the bottom right of the answer :
—— will show the “light green checkmark” (inactive state) and do nothing at all UNTIL an answer is selected (not hover state).
—— will change to the “white checkmark” version (active state) once an answer is selected and user can now click to see answer feedback popup. No hover state change for this.
3) Answer Feedback Popups:
Reference: 01C_Play_Failed.png, 01D_Play_Pass.png, 01E_Play_Success.png
This is where the player sees the feedback on the answer selected, after clicking the green checkmark button (submit).
WRONG ANSWER will result in the popup seen on 01C_Play_Failed.png (Oops!). The user MUST hit the green “retry” button and select a different answer in order to continue. On click of “retry”, no hover state / modal disappears and user still sees the answer he initially selected (active state). He must choose one of the other two answers in order to complete the question.
ACCEPTABLE ANSWER will result in the popup seen on 01D_Play_Pass.png (Not Bad). Please note that the “y” in “you will not receive a budget increase” should be a capital “Y”. In this modal the user has three (3) options:
- he can tap the home icon (left) to give up and go back to the home page (Screen #1)
- he can tap the retry icon (center) to try to select a better answer (BUT he will loose budget if he does so!). Note that if the user hits “retry” and returns to the questions screen, the answer he chose will still be selective / active.
- he can tap the next question icon (right) to accept this result and go to the next question (for our proto now, this will take him back to the default screen (01A_Play.png), where no answers have been selected yet)
CORRECT ANSWER will result in the popup seen on 01E_Play_Success.png (Success). Please note that the “y” in “you will not receive a budget increase should be a capital “Y”. In this modal the user has two (2) options:
— he can tap the home icon (left) to give up and go back to the home page
— he can tap the next question icon (right) to accept this result and go to the next question (for our proto now, this will take him back to the default screen (01A_Play.png), where no answers have been selected yet)
4) Leaderboard:
Reference: 02A_leaderboard.png, 02B_leaderboard.png
This is where the player sees the top ten (10) ranking players.
- Each player will show an abbreviated version of the player’s own profile, as seen in the footer of all screens.
- Optionally, the user can start typing to search for a specific player. for example, if he were to type “t” the green would immediately display the top ten players where the name starts in “T” (see example in 02B_leaderboard.png)
- Note that NO single player result will be “highlighted” in search by default, but if he user hovers or clicks on a single player result, he will see the purple border appear around the result as shown in 02B_leaderboard.png
- NOTE: if there are more than 10 players with a “T” at the start of their name, the user will have to type more of the first name to further narrow the results to 10 or less. If the user typed “thomas” he may see only 4 results. If the user an entire name (first and last), he will likely only see one result (unless there are more than one players with the same name!)
5) Rules:
Reference: 03_Rules.png
This is where the player sees rules related to the game. We do not know how many rules will be listed, so :
- it must be clear in the code where we add a new rule title and related details (comment out code to duplicate to add new)
- the page must be able to expand / collapse to accommodate any amount of content (including background shape)
- NOTE: Blue labels are just plain text and are not links!
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.
Browsers Requirements:
- Latest Chrome, Firefox, Safari browsers
- Internet Explorer 10+
Documentation Provided:
- Storyboard Screens and PSD files can be found in forums.
- PDF document with the flow
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.