Mobile

Introduction
As a part of the assignment I developed a Mobile Application. I was offered to use my own idea or choose from three options: UWE “Freshers” Guide, an Event app, or a simple game. I decided to create a Logo quiz game.

Functional specification of Logo Quiz App
The user gets one question at a time. If the answer is wrong, the user stays on the same page with the same question. If the answer is correct, the user is moved to the next page with the next question. When all correct answers are given, the user is moved to the final page which contains “Congratulations! You won!” sign.
The question icon is positioned on the top half of the page. Four answer buttons are positioned on the bottom half – two buttons in a row, two rows.

Wireframe
After I created the idea, I got down to an app wireframe design. I put an image of a logo at the top of each page and 4 buttons with one correct and three incorrect answers below it. This is a sketch of what I thought the app would look like:

To make sure all the elements are on the fixed positions, I set the size and position of every element:

I looked through high resolution Google images to find appropriate and recognizable logos. I saved them and then using Photoshop I deleted the bits that would give away the answers.

Then I created an account on AppFurnace.com and started implementing my app.
I wanted some neutral colour for the background so I picked #bdc3c7. I also set inner shadow and position, blur, opacity, spread and colour for it.

As planned I placed an image of a logo at the top of each page

Then I set 4 answer buttons:

I added some design to the image (like transparent background) and the buttons (same as the background of the page).

I duplicated this page for 29 times because I had 30 logos.

Then I filled the pages with logos and correct and incorrect answers making sure the correct answers are positioned on different buttons:

I gave each page a name. And set its property to FADE when moving to the next page.

Then I set the buttons with correct answers to navigate the app to the next page if they are clicked.

I also created a home and a last page I mentioned before:

Assessment of the design on Android
I wanted the label with the game name on my home page to cover the whole screen. But when I tested the app on devices with different screens I realized it was displayed incorrectly. To solve this problem I made the label big but not full screen (see the image above).
Feedback
I was happy with the result. The app worked nicely. So I started showing my app to my relatives, friends and peers. I got positive feedback in general. I also received a couple of suggestions: those asked wanted to see more sophisticated features such as the score display, pop-up window if incorrect answer is clicked and randomized pages. While observing them playing I realised the app is too long. They got tired half way. So I decided to shorten each game to 10 questions, and in case questions are randomized, each game would have new questions. To implement these ideas I needed coding in JavaScript which AppFurnace allows.
Coding
I used the following JavaScript language features, statements and functions:
- if-then-else Statement for verifying the progress of the game play and displaying the final page.

- random function to make sure the user will get 10 unrepeatable questions out of 30 for each new game.

- global variables to track the score and the page count and displaying them in real time.

As well I used the “add label to page” method to display the “wrong answer” message over the current page in case of incorrect answer is given. The idea was to avoid using popup message which requires the user’s action but instead automatically going to the next page after certain time out (2 seconds). I used internal timer (Date().getTime()) to count 2000 milliseconds. The pause worked however due to the nature of the AppFurnace the sequence of commands was executed in the wrong way and as a result the “wrong answer” message appeared after the pause completed and immediately after the next page was displayed.

To simplify my life instead of adding identical text labels on each of 30 pages in the layout I used the unpopular eval (cmd) command to programmatically add score, current page and wrong answer text labels on current page. I understand that it is not recommended to use eval command due to its evil nature. However, because the size of this project is relatively small and the code fits into one page, I considered this to be acceptable (see image above).

Conclusion
I am happy with the result in general. A couple of moment in the process of development could be improved. Because the idea of the way the app is done changed while I was implementing it, Functional specification and Wireframe look different from the ready app. So this is the lesson I learned while developing the mobile app: I need to give more time and effort while thinking over Functional specification and wireframe.

PS
If you like the game you can download it. There are two options:
First option: Get the app with QR Code
Step 1: Download & Install the Apple or Android version of the AppFurnace Player. It's a free app.
Step 2: Load AppFurnace Player, and click the + icon.
Step 3: Click 'Scan & Add' and scan the QR code. Your Test Version will start downloading automatically.
Step 4: When it has downloaded, tap the entry in the list and press PLAY.

Second option: Get it with URL
Step 1: Download & Install the Apple or Android version of the AppFurnace Player. It's a free app.
Step 2: Load AppFurnace Player, and click the + icon.
Step 3: Click this link appfurnace.com or type in the URL http://the.appfurnace.com/test/R8tfQ/ and hit download.
Step 4: When it has downloaded, tap the entry in the list and press PLAY.