This Construct 2 Trivia App series was originally intended to be a 4 part series, but I have had a couple of questions on how to add a few additional features. So, I figured I would just add a part 5 here to cover those features. If you haven't read through this series yet, you can start with Part 1. Otherwise, let’s go ahead and get started adding some additional functionality to our game!
The first question I got was how to choose not to repeat questions. Right now, we are choosing a random question each time from our questions array, but we can potentially repeat the same question, which is not ideal. If you have a trivia game with 100’s of questions, you wont notice this much, but if you only have, let’s say, 10 questions, then the repetition will be obvious. I admit, definitely a good idea here to keep from repeating questions if possible. Additionally, you might have noticed one other thing worth fixing. When you answer a question, you probably don't keep tapping on the screen before the next question comes up, but if you do, you will notice that you can potentially answer the next question even though it hasn’t showed up yet. Obviously, this is not ideal so we will walk through how to fix that as well.
Let’s address the second issue first as it is the easier of the two. The idea here will be to simply not allow the user to click on one of the answer choices after they submitted an answer and before the next questions is displayed. To do this, let’s create a simply number global variable called Is_Answered with an initial value of 0. 0 will signify that the user has not answered the question, and 1 will mean the user has answered and is waiting on another question.
So, when do we need to update this variable? This needs to happen right after the user submits an answer and then updated again right after the next question is loaded. We can do both of these things within our DisplayFeedback method. We will change the variable from 0 to 1 at the beginning of this method before we set the feedback text, and set it back to 0 at the end of the method after we call GetRandomQuestion. Your DisplayFeedback method should now look like this.
Now, every time the user clicks on an answer choice we need to check whether or not he has already answered before we call our CheckAnswer method. To do this, add another condition to each of our on touched events that checks if the Is_Answered variable is 0. It will look like this.
If you play the game now, you will notice that after you choose an answer, you will not be able to submit another answer until the next question is loaded. So, our next step is to keep track of questions that we have already used so that we don't use them again. There are several different ways to do this, and you can get creative, but I am just going to use an array, called Used_Array, that is the same length as our questions array. The elements of this array will be either 0 or 1 signifying whether or not the question has already been used. In other words, if there is a 1 in the 6th index of the Used_Array, that means that the question in the 6th index of the Questions_Array has already been used. Obviously, every time we use a question, we will mark it as used, and then we need to check every time we get a random question that the question that we chose has not already been used.
We will need to check that a question has not been used in our GetRandomQuestion method. Currently, we are just setting our random_number global variable to a number between 0 and the number of questions we have. To solve the problem of getting a random question that has not been used, let’s create a function that will continue to get a random number until we get one that doesn’t signify a used question. That function will then set our global variable to that number, and from there the function for getting the random question can simply continue as is. So, we can replace the first line in the GetRadnomQuestion method to make a call to the function we are about to create, SetRandomNumber. This change is highlighted in the second image below.
Now we need to go ahead and create the SetRandomNumber function. We've done this several times so I’ll trust that you have been paying attention. The first thing we do in this function, is to set our random number variable to a random number between 0 and the number of questions we have.
Within this function, we want to include a while loop, which will execute a certain piece of code as many time as it takes to reach a certain condition. For example, here we will create a random number until we get one that does not represent a used question. So, the first step is to add a sub-event in this function, using System->While as the event.
Now we need to give the while loop its condition by right clicking to the left of the while loop and choosing Add->Add Another Condition. Again, the ending condition will be that our random_number variable does NOT signify a question that has been used. So therefore, we want to continue to get random numbers as long as we are getting used questions. In other words that index in our used_array will be equal to 1, meaning we have a used question and need to repeat getting a random number. We will want to choose System->Compare Two Values here with the first value being the value at the given index in our used array, and the second value being 1. It will look like this.
The corresponding action here will be to set our random number variable to another random number. You can simply copy and paste the action that we created a couple of steps back since it is the exact same.
So, what do we do when we a random number that does give us a question that has not been used? Well, we just want to change its value at that index in the Used_Array to 1, meaning that we chose the question and it has now been used. For this, we will need to create a sub event for our while loop. This sub event will use the almost the same comparison that we just created but it will check for an unused question instead of used one. This time it will look like this.
The corresponding action here, like we said, it to now update the random index in the used array to 1.
The whole function will look like this.
So this takes care of the repeated questions issue, but as you develop your game you have to keep a couple of things in mind. If your game only has 10 questions, and the time limit allows the user to answer all 10 and maybe more questions, you will obviously run out of questions to use. We haven't accounted for that here, and actually if you run the game, you will notice that if you answer all of the questions, the game just freezes. This happens because the computer has gone into an “infinite loop” meaning that it will infinitely be looking for an unused question because there aren’t any left. So you have to do one of two things. Either have so many questions that there is no possible way for the user to answer all of the them in the given time limit. Or, you have to handle the condition for all of the questions being answered somehow. I won’t cover that here, but you just have to be aware of this issue.
I added this post to this series because of the feedback that I received. Please comment below if I am missing anything that you think is missing or that you would like to add to a trivia game! Thanks for following along!
Lastly, here is a link to the project file for this template in case you missed a step or got lost. You can find it here
Part 1 > Part 2 > Part 3 > Part 4
@James... Perfect!!! I can Create my 1st Game now without full knowledge in Construct 2... I just follow your guide step by step... all I need to do is to create more question and design the game layout... Thanks a lot... ^_^
@Julito. So glad that I can help! Keep me updated on your progress!!
@james, Yes, I will show you my game when I'm done... maybe it will take a months for me to finish, I'm still experimenting in construct 2...
Thank you for this fantastic tutorial. It has really helped a lot :-)
Should the webstorage/highscore work on iOS? At the moment, my highscore field is always 0 on my iphone. Any ideas?
Hey matt thanks for the feedback! I haven't done any testing myself but in theory it should work the same on all platforms. The web storage happens in the browser and is abstracted from any of the specifics of the phone. I'm assuming you tested on other platforms and it worked correctly?
how can I reset all the values in the array?
Hey Yaian, to reset all values in the array, you could iterate through each of them, and set them to something specific. You can find a section on looping through each item of an array here, www.scirra.com/.../arrays-for-beginners . Basically, you loop through using the ForEach of the array object. Then as the action, set the array.CurValue to whatever you want. Little tricky to explain in text, but the website is a good reference. Let me know if you have any further questions.