Progress Bar

One of the design features that we wanted to achieve was instead of having a question number assigned to each question, we would a progress bar at the bottom of the question page which would represent the collecting of the cake pieces (which is the aim of the game) and show which number question the user is on as each time the user gets the correct answer they get a piece of the cake (in the app the cake lights up).

dot1 dot2

Technically the process we took was firstly to get an image to change out to another image when the user gets the correct answer. To this we firstly had to set up image view in the main storyboard then link it to an IBOutlet/ variable in the view controller, so it was accessible.

@IBOutlet weak var myImageView1: UIImageView!

Then I initially set-up the image, setting the image view to the image I wanted to display when the view is initially opened.

myImageView1.image=image0

Then to create the effect of the image changing when going to the next question I created a new function called “progressImageDone” and this had an if statement in it saying, if the user has gone to the next question change set the image view to the second image, as you can see below:

if currentQuestion > 0 {
   myImageView1.image=image1
} else {myImageView1.image=image0}

Once I got to this work and tested it one of the problems that I found was that when the app was closed and re-opened the transition didn’t save, so to solve this we put, the below code in ‘viewDidLoad’ which allowed it to be saved even if the app is closed.

updateText(questions[currentQuestion])

Finally once everything was working for the single image I reciprocated the same process for all of the other progress images to create the effect of progress bar, where the images gradually change as the the user progresses through the questions.

11117548_10206062640877327_924189629_n

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s