Challenge Overview
Project Overview
Our client is going to build a mobile app that is meant to inform and engage the employees. In this mobile app there's a placeholder for gamification like Whackamole to give users a score and keeps track of the score.
In this project we are going to build a mobile app that needs to fit into the existing bigger mobile app, they reserved a page / screen for it and HTML5 needs to be used (flash is NOT allowed). There also needs to be a way to keep track of scores on a local app level but also being able to post the scores to Bluemix database.
This app needs to be built as an ionic based hybrid app that works on both iOS and Android phones, so you'll need to use Angular.js and NOT jQuery.
Competition Task Overview
In this challenge, we need to build the prototype for this mobile app, it's a pretty small app with only a couple of screens / pages. Please implement the game annimations by swapping out image spirtes (which we will provide in the challenge forum) and make sure there's no performance issue.
Key Requirements
- Create the game interface / animation / interactions based on the provided documents (pptx and spirtes)
- The prototype must be fully functional except that it doesn't have to store data (like scores) to any backend services, but it should be possible to play the game on the UI
- The prototype must also include the rules, help content and show scores
-
rules and help could be a pop up, activated when someone hits a ? button
-
For scores, we envisioned a pop up box to show the high scores at the end of the game. There would be a list of the top 3 scores, and a link where player could see a longer list of high scores. Player’s score for the current game would be indicated by the red score bar on the right
-
- The prototype must be built using HTML5 / Angular.js, no flash and no jQuery
- Make sure the prototype works on iOS and Android phones (need to adpat to different phone screen sizes)
- Test in all the required browsers (example: Safari on iOS, Chrome on iOS / Safari).
- 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.
Detailed Requirements
Please see the documents we provide in the forum.
Timeline
Please note this challenge has shortened timeline for several phases, make sure you don't miss the deadlines.
Specific HTML/CSS/JavaScript Requirements
- You MUST use HTML5 and CSS3 and Angular.js
- 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 we listed
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 should use Angular.js for this challenge
- Usage of jQuery is not allowed
Browser Requirements
- Safari on iOS
- Chrome on iOS / Android
References
Check this page to know more about the game: https://en.wikipedia.org/wiki/Whac-A-Mole
Final Submission Guidelines
Submission Deliverables
- Full prototype that works as expected, note the UI is expected to be fully working, it just doesn't need to save data or scores to backend.
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.