Pop Quiz
In this lesson we recreate every student's worst nightmare, the pop quiz! Test your friends, parents, and teachers with this trivia knowledge based app.
To the left are blocks hold written text and to the right are blocks that represent numerical values.
This block is used to create global variables. It takes in any type of value as an argument. Clicking on name will change the name of this global variable. Global variables are used in all procedures or events so this block will stand alone. Global variables can be changed while an app is running and can be referred to and changed from any part of the app.
Yeah its weird...I know. But we do have to teach the computer how to do math. Math blocks allow us to make various mathematical calculations within our app. This includes everything from adding and subtracting to comparing two values to determine which one is larger.
These block components allow us to create logic that will only run if a statement is true. For instance we might have a variable x and some sound file. We only want to play the sound file if x is 5. See below. Note that the green block is from the logic section of the blocks and allows us to determine if two things are equal.
Add these block components to your code to create a list of variables. Many apps use lists of data. For example, a game may keep a list of high scores and your Facebook app keeps a list of your friends. Lists are a type of data structure used in every programming language, not just App Inventor. We use lists to create and manipulate different sets of values/elements.
# Let's Get Started
### Step 1: Creating a User Interface using the Designer Page
Here is the finished UI. Let's get started.
Alright so we have a pretty minimal ui design going here with only two labels and two buttons.
Change the label properties to font size 40 and 25 and center them on the screen by adjusting their alignment property and setting their width to 100%.
Now we can work on the buttons, first we need to align them next to each other with a horizontal arrangement.
Let's resize our buttons and our horizontal arrangement to make them stretch across our screen.
Now we can rename the buttons.
Lastly we need to set the height of the question text to 'fill parent' this will cause our question label to take the renaming space on the screen.
Let’s add some sounds to indicate when the player got the question right and when they got it wrong.
Now’s a good time to mention that you can rename components with the rename button at the bottom of the component section. This will help you keep track of all the different parts of your app once we move over the working with blocks.
Now that we’ve built the basics of our UI, let’s move on to the block editor. Let’s keep it simple for now, since the answer to my question is false, when the user clicks false (which is the correct answer), we will play the correct sound. When they click true (which is the wrong answer), we will play the incorrect sound.
But a quiz with only one section is pretty boring, so let’s try and to add another question. We can do this by setting the text of question label to our new question. Keep in mind that since we are not changing any other logic, our question will still have to be false.
Here’s the thing about programmers…were lazy. Let’s say we show our app to a close friend. They play through our quiz and say its pretty cool, but they thought the second question was too easy. We’d have to go through our code and change the question each time if we wanted to make it harder. We can fix this by using a variable.
Alright our quiz is looking pretty good; however, we only have two questions. What if we wanted 10 questions? How could we do that? Well we can use lists.
To get access to our questions now we need to use an index which is the place in the list where we want to access our data.
But what if we have 5 questions, will the app show all seven? The answer is of course, no.
Rather than giving plain numbers to use as the index we are going to need another variable to keep track of which question we should ask.
Now take some time and experiment with your app, you’ll note that when we get an error if we click through all of our questions:
If we look at the text in the error, it reads: “Attempt to get item number 6 of a list of length 5”. Once we hit 6, the computer tries to read in the 6th value of the list. Unfortunately, there is no 6th value. To fix this error we must use an if statement.
The last chunk of this project will deal with the final glaring problem with our app. ALL THE ANSWERS ARE THE SAME! What if we want different answers per question? Well we are going to need a second list to represent the answers of our questions. We will fill it with true and false values which are located in the logic section. Make sure that your answers are ordered in the same order as your questions this will allow us to use the same index to reference both.
We’re going to use another if statement here to determine which sound the phone should play when user presses a button. Let’s start with the true button. If the user presses true and the answer is true then we should play the correct sound. Since our answer list and our question list are in a matching order we can use the same index value to reference both. Here we use a green logic block to set our if statement to check if the answer is true.
But now we want to play the incorrect sound if the answer was false. We can use this blue button next inside our if block to add an else to our if.
And there you have it, this block will check the answer and play the right sound depending on the answers value
Now do the same for the false click change the value the conditional wants to false and we should have a completed quiz app!
- Try and make your app keep track of score and announce it at the end of the game. Use a global variable to keep track of the score and rather than restarted when we hit the end, just announce the score. Add an additional label to your screen so the user can see their score at all times.
- Recreate heads up! Using the gyroscope in the sensors section have your app say true when the phone is tilted up and false when the phone is tilted down.
- Instead of asking the user true and false questions, create short answer questions like "In what year was c developed?" Change the text of the buttons to read a true answer and a false answer ie 1973 and 1742.