FUNKO Mini Game Prototype

Competition Task Overview

We need to design a minigame to be played from the daily Tracker page (Main_02_1_daily_tracker.html) based on the game called FUNKO, following are the detailed requriements:

• The Daily Tracker page will be updated to show a total number of funko chips in the bottom right corner. "Funko Chips: 4" (see storyboard)
• When the number of chips is 3 or more, there will also be a "Play" button nearby.
• When they are able to play the game, they can push the play button and a game will show up on the screen that looks like the Pinko board with various prizes along the bottom (1-10 progress points, 1 reward point, extra chip).
• As soon as the screen appears, their plinko chips (3 at a time) will begin to fall immediately. Once they have landed at the bottom, the game will tell them what they won. If they have 3 or more chips left they can "Play Again" or "Back". If they do not have enough chips, only the "Back" button is allowed.
• The prizes should be configurable, x progress point(s), x reward point(s), x chip(s)
• The prototype should NOT hard code these data in the pages, instead the data should come from a JSON file that can be easily editted by users
• The prototype must be functional, i.e. it should be playable based on the data in JSON file and the 3 chips should randomly fall into the bottom. If I play multiple times I expect to get different results each time.

Key Requirements

• Test in all the required browsers (including Safari and Chrome on iOS).
• 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.

Specific HTML/CSS/JavaScript Requirements

• You MUST use HTML5 and CSS3
• 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 scorecard in both Mac, PC and iOS 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 library already used in existing prototype, but if you want to use new ones please ask in the forum.

Browser Requirements

• IE8+
• FF 7+
• Safari 5
• Chrome Latest
• Safari / Chrome on iOS

Documentation Provided

Register to download document from challenge forum.

Final Submission Guidelines

Submission Deliverables

• Updated prototype with a functional game as described above.

Submission Guidelines

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