How To: Building a Unity3D Quiz Game like Triva Crack or Heads Up

Quiz games like Trivia Crack are extremely popular.  Because they’re fun, easy to play, and suitable for a wide range of people.  They’re also pretty easy to build in Unity3D.  Today, we’ll go over some of the basics for building a Trivia or Quiz game, with a full example you can try out yourself.  You’ll learn how to create questions, hook them up to a UI, and build the basics of your own Quiz game.  Get ready to build your own Unity3D quiz game!

The UI

The first thing we need is a UI.  Starting with a basic UI gives us a good idea of what we’re going to need code wise and how our game components will interact with each other.  We could do everything else first and build the UI last, but I really prefer to have some sort of outline for what I’m building before digging into the details too much.

Take a look at the Canvas.

Question Panel

The Question Panel is where we’ll hold the current question.  It’s just a panel with a text object under it.  The panel is there to provide a little visual separation, and the text is set to “New Text”.

Answers

Next, we have an answers panel area.  The answers are all buttons, and this panel is setup with a “Vertical Layout Group” to keep them stacked.

The answer buttons were created by adding a new UI->Button and changing the color.

Correct and Wrong Popups

These popups are panels with a text object under them.  Plain and simple, but ready for you to pretty up.

Time for Code

Now that we have an idea how the UI is going to look, it’s time to get some code written.

The first thing I wrote is a class for the questions.  Here, I decided to go with a ScriptableObject so we can edit the questions and answers right in the engine and visually manage them all.  If we got to a point where we have 100’s of questions though, I’d recommend switching to another format like json or xml and managing the questions with really good custom editors or an external tool.

QuizQuestion.cs

Code

The QuizQuestion class is primarily for storing data.  It has a “question” field, an array of “answers“, and an integer for the correct answer.

It’s important to note that the correctAnswer field is using a 0 based index.  That means if the first question is the correct answer, the value should be 0.  If the 3rd question is correct, the value should be 2.  This matches up with our array indexes.

The Asked boolean is there to mark off questions as we ask them, so we don’t ask the same question twice (unless we run out of questions).

OnValidate()

Everything else in the class is there to re-name the ScriptableObject.. why?  because it makes our questions easier to manage by giving a good view of the question and answer.

Here’s what that looks like:

UI Controller.cs

Code

The UI Controller has ONE purpose.  Control the UI.

Here, we reference the different UI components like the QuestionText & Answer Buttons.

Then we provide a public method to setup the UI for a question.  This way, our QuizController (coming later), doesn’t need to worry about the presentation details and can stay small.

One thing we do in the SetupUIForQuestion method that’s of interest is disable any answer buttons beyond the # of answers we have available.  The current UI supports 6 answers, but we could add more buttons and it would ‘just work’.

We also handle submitted answers here.  Not the logic for if they’re correct, but the UI actions based on their correctness.

Question Collection.cs

Code

The QuestionCollection class has the job of loading and providing questions.  In the LoadAllQuestions method, we grab every QuizQuestion in the “Questions” folder.

It provides one public method GetUnaskedQuestion, which as the name implies, will return an unasked question.

Quiz Controller.cs

Code

Because we’ve split up responsibilities, our QuizController class is nice and succinct.

It’s primary purpose is to handle the state of our game.

The PresentQuestion method asks the questionCollection for a question.

Then it tells the UI Controller to update for the question.

When a button is clicked, SubmitAnswer is called and we check to see if the answer is correct.

We tell the UI Controller if the player was correct or not, then wait a few seconds and present the next question.

Button Events

The Quiz Controller’s SubmitAnswer() method still needs to be called by something.  I mentioned previously that it’s called by buttons, so let’s take a look at how that’s setup.

Each button should pass in the value for it’s index.  We could add some code to auto configure all this, but since we’re only gonna have 6 buttons, it’s easier to just put in the numbers manually.

Remember to start with 0 for the first button, and keep them in order.

Conclusions, thoughts, and extensions

This project shows how to build a basic quiz game.. but more importantly, it should serve as a reminder to split up your classes and work towards SRP.  By keeping things separated, we’re able to easily understand what everything is doing and extending the project is much easier.

One thing that’s important to point out though is that keeping questions in scriptableobjects may be unscalable.  If you want to have 1000’s of questions, you’re gonna want to build a new QuestionCollection that gets data from XML, JSON, or some other data source (you’ll need remove the ScriptableObject stuff from QuizQuestion too).  Again, since everything is split out, that’s a pretty easy task.

This post came from a question in the Unity3d.College facebook group, where we talk about problems people present and work together to give good solutions.

Project Download

Want the source?  You can get it here: https://unity3dcollegedownloads.blob.core.windows.net/vrgames/QuizGame.zip

 

Part 2 – XML Loading

This article is continued in part 2 here: https://unity3d.college/2017/07/14/using-unity3d-xml-files-game-data-quiz-game-example/

Part 2 shows how to convert the data source from ScriptableObjects to something a little more scalable with XML or JSON files.