Challenge Overview
Welcome to What the Hack! Cyber Security Game - Design Screen Implementation Contest Part 2! In this contest, we will be extending an existing app built for Android using Ionic.
Contest Details
We have a bunch of designs for an Android based mobile game that we are now implementing using Ionic (latest).
The designs will be shared with you in the contest forum. Note that you will be building the screens using Ionic and the target platform will be Android - you can use Android version 6 and above for testing and for reviews.
We have already completed building half of the screens. This contest will require you to implement the remaining screens, which are as follows:
05-00
05-01
05-02, 07-01 (Same screens, different content)
05-03, 07-02 (Same screens, different content)
08-01
08-02
08-03
08-04
While the earlier contest focussed on QUEST based screens, this contest will focus on ATTACK screens, among others.
Points to note
-
The existing app only shows QUEST based screens. For this contest, what will happen is that the user will first scan the qr code for QUEST (and thus be shown the QUEST based screen) following which they will scan the qr code for ATTACK (and thus be shown the ATTACK based screen). Once this cycle completes, the app will go into another cycle, where user will scan qr code for QUEST and then ATTACK. Thus, the cycle will run three times. How the user has answered in all cycles determines if the user has won or lost the game at the end of the third cycle. (Screens 08-01 and 08-02)
-
Currently, after a QUEST screen, another QUEST screen is shown - the qr code does not scan ATTACK yet. Update this. After QUEST, the user will always scan ATTACK code. After which, the user will scan QUEST code and so on (until 3 cycles are completed). At the end of the third cycle, the app will let the user know if they have won or lost the game. In other words, the flow of the app will be as follows:
Start Game -> QUEST -> ATTACK -> QUEST -> ATTACK -> QUEST -> ATTACK -> Won or Lost the game.
-
Follow existing conventions used in the provided app
-
Use Ionic 3 (latest) and work with Ionic CLI
-
Where possible, use Ionic UI Components and customize as necessary to meet the design
-
The QUEST screens have their data copied over from a spreadsheet which we will share in the contest forum. The same spreadsheet contains data for the ATTACK screens which you also need to store in json in the app.
-
Follow best practices, both in Angularjs and Ionic
Shared Assets
-
The existing app which you need to add more screens
-
Design.
-
Screen specification - a detailed explanation of each screen. For the screens that are in scope for this contest, go through the corresponding description in this document. Be sure to check out the last page.
-
Spreadsheet. This spreadsheet contains the content for the app. Go through the screen specification first and then go through this
-
QR codes for QUEST and ATTACK