This will help you:
Create a quiz game for Android devices
Time: 1-2 hours / Level: B2
You should already:
Have an Android device to test on (optional)
Part 1: The Layout
This game will consist of at least 3 screens: the menu, the quiz questions, and the final score. Click "Add Screen" in the upper-left area of the screen and add 2 additional screens. If you want to have anything else, like a high scores screen, create one for that as well.
Step 1: The Menu Screen
For screen one, you'll need (at least) a title and a start/play button. You may want to have additional buttons, like if you want to have a high score page, or if you want to have both "new game" and "resume" options. Or, you may want to include a text box to allow the player to give themselves a user name.
A vertical arrangement from the "Layout" tab should work well. Place all the components you need (most will be in the "User Interface" tab) into the vertical arrangement.
[image]
Step 2: The Game Screen
For the game, you'll need a question and some way of inputting or selecting an answer. For my example, I'm using a 2x2 grid of answer buttons with a question above. I put the question in a vertical layout with a grid layout underneath it, then the buttons inside the grid layout. I also have a label underneath the answer choices which will show if the answer was correct or not.
You could also have additional buttons at the top or bottom with an option to go back to the menu, or end the game early. Or, you could add a label component which will show your current score, or the number of questions remaining.
[image]
If you want, you can make each answer button a different color - although for the most part, I'll suggest that you focus on building the app first, and go into the details of how it looks on your own later.
Step 3: The Final Screen
The final screen will just need 2 things: A label to display your score, and a button to go back to the menu (or restart the game - or both.) You can just put these in a vertical arrangement.
[image]
Part 2: The Code
Okay, so you have all these screens. While playing the game, you progress through them pretty much like this:
Menu -> Game -> Score -> Menu
Within each of these screens, which we can treat like stages, there will be other processes that the game goes through. By breaking down the flow of these processes, we can figure out how to write code to make the whole game work.
Click on the "Blocks" button in the upper-right area of your screen to edit the code.
Step 4: The Menu
In the Blocks editor, make sure you have Screen 1 (or Menu) selected in the drop-down in the upper-left part of your screen.
All the menu needs to do is start the game play (go to the Game screen) when you click play. As pseudocode:
when Play button is clicked:
go to Screen 2 (Game screen)
Luckily, there are blocks made just to let you do this. In the "Blocks" menu on the left, expand the Screen and arrangement menus until you can find the component representing the Play button. Click on it to see what code blocks can be used with it. You should find a "when [Button].Click do ..." block. Place one into your workspace.
Next, open the "Control" menu under the "Built-In" section. Find the block called "open another screen [screenName]". open the "Text" menu and get a block with just quotes and an empty bubble: "[]".
Place that block so that it snaps into the "open another screen" block, and type in the name of the Game screen into the text box. The name should be exactly the same as it appears in the screen choosing drop-down. Make sure it's the name of the game screen, not the menu. Then you'd be stuck!
[image]
Now is a good time to test your app. Try it out in the emulator or on an Android device if you have one. If you don't know how to do this, check out the Android Startup.
Step 5: The Game
Once in the game, what happens? The game has to present a question, and the user has to pick an answer. then, the game has to check if that's the right answer, and update the score if so.
Let's try to put that in pseudocode:
for each question:
show question and answers
wait for user to click a button
set the answer to the clicked button's text
if the chosen answer is the real answer:
add 1 to the score
show "Correct!"
otherwise:
show "Incorrect!"
Here's my first pass at making that work:
[image]
So, there's a major problem here: I don't have a way of storing the score, or the correct answer, or the chosen answer, or the list of questions. You can tell there's some information missing with all those empty puzzle-piece sockets. To fix this, I'm going to use a few variables.
Variables need to be initialized (set to a starting value), and then they can be changed and used in multiple places. If they are "global" variables, then they can be shared across different stacks of code blocks. We'll use global variables for each of these, since we have more than one stack of code blocks where we want to use the information.
Here's the initialized variables for score, answer, correct answer, and questions:
[image]
There are several ways to do the questions, and none of them are beautiful. I created each question as a string such as "Question?; Answer 1; Answer 2; Answer 3; Answer 4". Then, each of those is split on the ";" character (which converts it into a list!) and added to a list. This is important: The result is a list of lists, where each outer list item is a list of the question and answers.
Now, let's add those variables into our code:
[image]
Notice how with the way I implemented questions, each question item is actually a list with the question data, and I have to ask for each piece of that data based on its position (index).
For the "real" answer, I have it pick a random option each time! For your game, you'll probably want to add the real answer to the end after a ";" and make it "index 6".
This is a good time to test your code! You'll notice that the app or emulator syncs up with whatever screen is open in the editor. So, you might want to switch to Screen 1/Menu to give it a real run-through.
But, there's a problem: the code that sets up the answers and questions never runs! Why might that be?
If you look at the stack of code blocks responsible for that, you'll notice there's an empty notch at the top: that means there's nothing to trigger the code, so it never gets told to run. Initializing variables happens automatically when the screen opens, and the other code stack happens specifically "when any Button.Click". So, when should the game start looping through the questions?
Ideally, it should just happen when the screen opens. Looking in the code blocks menu for the game screen, there is a "when [Screen].Initialize do ..." block. Take one and wrap the question setup code inside of it (all of it!)
Now you have this:
[image]
This would be a good time to test your code.
Is it working? Here's what we've told it to do so far:
for each question:
show question and answers
wait for user to click a button
set the answer to the clicked button's text
if the chosen answer is the real answer:
add 1 to the score
show "Correct!"
otherwise:
show "Incorrect!"
You're probably noticing that it never moves to the next question... Or does it? It's only showing the last question, but why?
There's actually nothing that we tell it to do before changing questions, so it just zips through them all ultrafast, and then lets you click away at the last one. In reality, we want it to wait until an answer is chosen, then move on.
[image]
Step 7: Extensions
Try using a TinyDB (or a TinyWebDB) under the Storage menu to maintain a high-score list for your game!
Or, try using a TinyDB (or TinyWebDB) to store questions, rather than building a list each time.
