You can access the full course here: Develop a Reusable Quiz System
In this course we’ll make a multiple choice quiz game. Specifically, we’ll be able to:
- Ask different questions and provide multiple answers for player to choose from.
- Ask different kinds of questions, including ordinary text questions (“What does this word mean?”), image questions (“What is this bird?”), and audio questions (“What instrument is playing?”).
- Create a screen that tells players their score.
Open Unity and create a new project. We’re calling ours Super Quiz. Select the latest version of Unity and select the 2D template. (We’ve used version 2018.3.2f1)
We have some media we will be using in this quiz, as seen below.
Table of contents
Setting up the UI:
First we want to make a Panel. R-click in the Hierarchy window, UI > Panel. Rename the Panel ‘Question‘. Zoom out and use the Hand Tool (Q) to center it.
We’re going to have our questions appear on this Panel on the left and show the possible answers on the right. Select the Rect Tool (T) and choose how much space you want the Question side to have by clicking and dragging the panel’s edge.
Anchor it to the middle left.
And remove the color: In the Inspector, click the circle by Source Image and select None, then click the color bar by Color and turn the Alpha all the way down to 0.
Text Question Layout:
For this project we’ll be using TextMeshPro instead of the default Text object because it’s better all round.
R-click Panel, UI > TextMeshPro – Text (If prompted, import TMP Essentials).
Place this new textbox in the middle of the question panel area and stretch it out. The longer you expect your questions to be, the larger you should make this textbox. Add a placeholder question in Text under Text Mesh Pro UGUI (Script), then center it horizontally and vertically (Alignment).
Check Auto-Size. This ensures the text will always be sized to fill the text box.
Now we can work on the answers area. R-click Canvas, UI > Panel. Name this new Panel ‘Answers‘, then use the Rect Tool to fit it to the remaining area and anchor it to the middle right.
For the Answers Panel, we want to have as many possible answers as we like per question rather than, say, 4 options every time. We’ll start by making a button: R-click Answers, UI > Button.
Select Answers, click Add Component and select Vertical Layout Group. This will help us to stack our Answer Buttons on top of each other and make sure they fill the space we have.
Check the Child Control Size‘s Width and Height boxes to stretch our buttons to fit the panel. Duplicate the Answer Button to see this in action!
This looks odd, so let’s add some spacing and padding. Set Spacing and all the values in Padding to 15. Feel free to add more buttons and see how it looks. When you’re ready, reduce to just one button.
Inside this Button in the Hierarchy, delete Text then R-click Button and select UI > TextMeshPro – Text. Ensure the new text box is sized to fit the Answers panel, then enter some text for a placeholder answer and center it vertically and horizontally.
Now select the Answer Button and change the colour to something pleasing (Under Button (Script), Normal Color).
Select the Answer Button Text and check Auto-Size. We can also customize this – set the minimum size to 14 and maximum to 60. Duplicate the buttons to see how this looks.
Select TextMeshPro – Text. You could drag the yellow lines from the text box’s edges to add margins to your text area, but we’ll add them in the Inspector. Under Extra Settings, set the margins to 10 each. Duplicate the buttons again to see the difference.
Now it’s looking good, we want to make sure our quiz works well at every size. Look in the Game view and change the viewing mode from Free Aspect to 16:9.
This looks wrong so we need to resize. Select Canvas and under Canvas Scaler (Script) set the UI Scale Mode to Scale with Screen Size. Set Match to 0.50 and change the Reference Resolution to 1280 x 720.
We can now start scaling objects to work with this. Drag the edges of the Question and Answers Panels so that they fit within the screen area properly and don’t overlap with each other.
Now, switching to Free Aspect in the Game window won’t break it like it did before because we’ve scaled it down to match. As long as you edit it to work within 16:9 resolution, this should always work out.
Finally, we can prepare our prefab text question and answer button. R-click the Assets folder and select Create > Folder, naming it Prefab. Make sure you only have one Answer Button and rename it ‘Answer Button‘. Rename your Question’s TextMeshPro ‘Text Question‘, then drag them both into the Prefab folder.
We now have our default text question layout!
In the next lesson, we’ll design the default layouts for the audio and image questions.
Transcript 1
Hey guys, my name is Austin Gregory. And in this course, I’m going to teach you how to create a simple little multiple-choice quiz game where you can ask questions in different forms, from audio, images, or just simple text questions, and then you have a choice of answers ranging from two choices up to however many you can fit on your screen.
So I can continue a game from where I left off. It will take me to the set or the topic of questions that I made it to, whereas New Game will start me from the very beginning here. What I can see is my first question is an audio question. I can listen to the sound. Okay, that sounds like a flute. Go to the next question. What color are these flowers? Well, they’re not orange or black. I want to say they’re magenta. Then I have a nice little score screen here that says you had two questions, you got two right, so your score is 100%.
Now typically you would have more than two questions, and you’d probably get some wrong. But that’s just how this is going to work because I know the answers to these questions unfortunately. What country does this shape most represent? This is going to be Germany. It’s not Italy or France for sure, so that’s Germany. Which of these items is cheese? Now that could be a difficult question if I tried on this question. There’s a lot of cheese names that are confusing and unusual. But in this case, provolone, umbrella is obviously not. And there we go, back to the main menu, and I can continue from the last set that I opened up. So in between sets, we have a score screen, and then the last set we go back to the main menu.
Just a nice little system that will allow you to create whatever kind of quiz game you have in mind. My name is Austin Gregory, and I will see you in the first lesson.
Transcript 2
Hey guys, my name is Austin Gregory, and in this course we’re going to build a cool little quiz game that’s going to allow us to ask questions and provide optional answers where the player will then have to choose what is the correct answer for this question.
Now it’s pretty simple and pretty straight forward, but we’re gonna have basic questions that are just strings of questions, then we’re gonna have image questions that are gonna provide an image, and then an optional caption. So you have an image of a bird, the caption can say what is this bird? That kind of thing, and then we’re also gonna have audio clip questions where we can click a button to play an audio clip with a caption as well. And it’ll be like what is this instrument playing, or what animal makes this noise? And then you’re gonna have options to choose from.
At the end of each question set or each topic set, or however you wanna organize your questions, you’ll see how easy that is to do once we get our system set up. You’re gonna get scored on how you did for that set of questions. So if there’s 10 questions and you got seven out of 10, you got a 70%, or a 70, or whatever kind of arbitrary rating system you want to add for your game, but in this case, it’s gonna be all pretty straight forward, and all pretty simple stuff.
So I wanna create a new project. I’m gonna call it Super Quiz, and I’m gonna use the latest version I have available to me, which is 2018.3.2, and I’m just gonna make sure that I just have it on 2D. It doesn’t really matter for this, but it’s just gonna be a UI game. There’s not gonna be any game graphics beyond just the interface. So it’s gonna be pretty simple stuff, and I’m gonna click Create Project.
And while it’s doing that, I wanna show you that in this folder here, I have a couple bits of media. I have a picture that’s going to just be a field we can just use for a dummy question. And this is just a Wikimedia Commons image, and then I have an outline of a country just for an example of another image question, and then I have an audio clip here that’s just a flute. So what I wanna do in this first lesson is I wanna set up the UI for our quiz game. So what I wanna do in this first lesson is get started by setting up our UI for our quiz game. Let’s see if we can knock it all out in one quick lesson here.
So what I wanna do is create just a UI. Let’s create a UI panel object here. Now what this is gonna do for us is create a canvas object and an event system object, which we need to work with the Unity UI system. So I’m just gonna just lay out my quiz question and answer layout here. And that can just be a half and half 50-50 thing here, or we could do, I don’t know, whatever you’d like to do here, but I’m just gonna have a section for my question and then a section for my answers.
And I don’t want this to have an image on it, necessarily. You could, if you would like to do that, but I just wanna just have the object there to help me lay out my game here. Now this isn’t gonna stretch. We’re not gonna do any fancy UI stuff. I’m just gonna make sure that it works. So I’m just gonna anchor this to the left side here just like that.
So now this is going to be where we can put our questions. Whatever the template may be, but we’re gonna start with a simple, just a string question. Just a text question. So we’re in this panel, I’m gonna create a UI TextMeshPro Text object. We wanna use TextMeshPro because it’s just better. Then I’m gonna just import the TMP essentials here. Which is going to give me all the stuff I need to use TextMeshPro. So we had this text. I’m just gonna center this up top a bit here. Then we can just stretch it out.
Let’s see. We’ll just do something like that. It depends on what kind of questions you plan on asking here. I plan on my questions being pretty simple and straight forward. Just a sentence, but you may want to do some serious paragraphs. So you wanna set up your layout and your design to accommodate that, but in my case, this is where my question is going to go. Pretty cool? Let’s make it a question at least. Okay, I want to make sure that I have it centered. And I want to center it horizontally and vertically. Just like that, and we can increase the font size a bit here. You can also make it auto size so it fits in the text area that it has. So if you were to keep typing, for instance. This is cool too, it’ll resize to match that. Which is pretty cool, I guess.
So you probably wanna do that, in fact, and I was actually lining this up so that I could put something below it, but this is just the text question. So it doesn’t have to have anything below it there. So we’ll just do it just right in the center, and now off to the right here is where we’re gonna have our buttons that are gonna be the answers for the question. So if the question what color are elephants typically? You would have blue, green, gray, and purple, I don’t know, and then you would just click on gray. You’d get the answer correct, and move on.
But even if you get the answer incorrect, you’ll still move on, and at the end you’ll just see that you got one incorrect. So to do that, what I wanna do is add another panel that’s going to go off to the right side of our question here. So just drag this off just like that. And again we’re just going to anchor this to the right. Now fancy UI stuff for this.
We’re keeping the UI very simple. We’re focusing more on the data and the interaction with that data. The storing of that data, and the displaying of that data, and we can just name these answers, question. Now I wanna be able to have how ever many answers I want for every question. So one could have true or false, one could have three different numbers as an option, one could have 10 different options. So it doesn’t really have to conform to four answers per question. It’s just a silly restriction. So we’re not gonna have that.
So in order to accommodate for that we’re gonna have to make sure that we have a flexible system that can deal with how ever many buttons we throw in there. So to do that, I’m going to have on answers, first of all, let’s just throw a button in here so that we can see what it’s going to look like. So if I just throw a button in my answers panel here.
Now on answers, I’m gonna go add a component, and I wanna add, it already has it there. Vertical layout group. Now vertical, you know, up and down. We’re going to lay out or objects that are within this panel. We’re gonna stack them on top of each other, and we’re gonna make sure it fills the space that we have. So to do that, we’re gonna say child control size width. Which means gonna stretch to the width of the panel, and child control size height. Which means it’s gonna stretch to the height of the panel. Now that doesn’t really work if we have one option as an answer, but also one option doesn’t work for a question in a quiz game. So we’ll never have that issue.
But if I were to duplicate the answer, now we have two. You see then we have two buttons, and they just divide the space evenly. Which is exactly what we want, but I can tell we’re gonna need some spacing in between there, so let’s add a little spacing. And I can also tell gonna add some padding around the side of this panel so we’re not just snug up against the corners. Maybe you want that. It’s kinda cool looking in fact, but for this we’re just gonna add some padding around the sides.
Cool, now if we added more buttons, you can see what happens there. As many buttons as you want. Now I wanna make sure that I take this text that’s in here, I wanna delete that text and I’m going to make sure then I add TextMeshPro Text. We wanna keep all of the text using TextMeshPro. It’s just sharper, has more options, it’s more efficient to use. It’s just better all around. Answer, and again we’re going to make sure it’s centered vertically and horizontally, and let’s take this button here and we’ll just change the color on it a little bit.
I don’t know what we’d do with it. Just do something with it then, and on the answer text here, we could do, if we do auto size, that may work pretty good because we can have any size answer in there, and also we have options for auto size. So the minimum size could be 14. The maximum size could be 60. That would work pretty good. That way they can get really small, but it can also not get too big. Notice the size goes down there.
But I don’t like the margin around that. So if we were to look at what’s happening here, I can grab this yellow box and drag it in, and it’s gonna be my margin on the text element. If we go down to extra settings, we have margins, left, top, right, and bottom. I can just add margins all around, just like that, and now let’s try this again. There we go, now it’s not snug up against the button. Look in the game view here. The game view is in free aspect, and since our UI is a little, it’s not fancy like I was saying. We’re gonna make sure that we restrict everything to 16 by nine, and just for this example, and we see that, that causes an issue here, because of the size of this.
So what we could do, is I know we said we weren’t gonna do anything too fancy, but I wanna make sure that we work at every size. Go to my canvas here and go to UI scale mode. I can set this to scale with screen size. Which means when my screen size changes, this also scales. I’m not gonna be completely static, but we have a couple things to do here.
I wanna make sure the width and the height is 50-50. The way that it affects the scaling, the width and the height both do it exactly, and the reference resolution I would like to be a bit more than what we’re looking at there. So maybe just 720 P, and that gives us a starting point so we can start scaling our objects to work with this. So I just sort of drag this in here, and then we’re gonna drag this over. And we can just make this fit. We should have done this before we did the layout, but sometimes you gotta go back and make a few changes, and that’s perfectly fine. So there we go.
Now if I were to go into here and I were to go back to free aspect, it doesn’t completely break like it was before. Because we’re scaled down to match, but as long as we stay within 16 by nine resolution, we should be fine. If I were to pull the game view out here, it’s gonna stay within 16 by nine, and the last thing I wanna do for this lesson is I wanna create a prefab of our buttons that we have for answers, because we’re gonna be able to create those at run time for every answer that we have per question.
Pretty basic stuff. I’m gonna create a prefab folder really quick here. Prefab, and we’re going to put an answer button in there. Just gonna name this answer button. And I’m gonna delete these other buttons here. And I wanna call this, actually as our question prefab, as our question panel. Text, it’s gonna be called text question, and that’s because this is going to be the default question layout. We’re gonna have the audio layout, we’re gonna have the image layout, and we’re going to design those in the next lesson, guys.
So my name is Austin, and I will see you there.
Interested in continuing? Check out the full Develop a Reusable Quiz System course, which is part of our EdTech Mini-Degree.
