App

To the left is the widget tool box. Here you can simply drag whichever widget you want onto the simulated screen.

Here buttons is selected. There is a variety of button styles.
To the right is the button properties menu. Here you can change the style, text of the button, position on the screen, code and where the button goes to.

The first app I created was a simple quiz app. I imported a gif image file and buttons. I used code to create a pop up for the answer.

I named the correct answer button Correct and the other Wrong. I then made the corresponding pop up appear once the button was pressed.

Below is the test on my phone when the correct button was pressed and the code

Get with QR Code for my first App.

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.

Before I started making my portfolio app, I made a few notes to plan it out.

I decided on a US State Location Quiz Game. I wanted to make it suitable for both adults and children. This meant I had to make it simple to use.

I chose to create the app so the user selects the specified state on the page from the map.

I also decided to make the app only work in landscape. This was so the map was large enough for the user to select individual states.

The app will work more appropriately on a tablet as there is a larger screen, however it will be large enough to work on mobile devices too.

I then made rough wireframes of the menu and quiz pages of the app.

As I wanted to make the app simple, I decided to use a label as the title of the app and two buttons on the main menu.

A start quiz button and an instructions button, this will go to a simple guide to the app.

I then drew out the quiz pages of the app. I decided I would use another label at the top of the page with the name of the state that is asking for the location.

I then decided I would need a large image of the map with clear differences between each state and no writing.

Here is the menu page I created. As you can see, there are little changes to the wireframes.

The buttons are large enough and the title label is large enough.

I did however add an image to the background. I made the opacity 0.7 so the buttons were visible enough.

Here is an example of the quiz pages.

The state map image is large enough and simple enough for children and adults to select.
The label title at the top is bold enough to tell which state to select.

I also inserted the button here on Texas. I made the background transparent and no border, this is where the user will select the state specified.

I made the hidden buttons navigate to the next quiz page. For example the button in the above image on the Texas page is directed to the Florida page which is then next quiz page.

Between each quiz page, I selected a Slide Down animation.

This creates a transition between the pages as without them, it was hard to tell when you selected the right state and moved to the next question.

Here is the QR code for my State Location Quiz app.

Try it out!

Here are some test screenshots from an Iphone 5C.

Here is a test online preview on an Android(480x800)

All objects on the page are in the same position as on an IOS device. No changes are needed.

I added a finishing page. This page will be linked from the last state in the quiz.

This page will link back to the main menu so users can start over.

I then added a Home button for each quiz page as there was no way to leave the quiz without quitting the app or finishing the quiz completely.

I used a button to do this and made it fit in the top left corner