HTML for Basic Question Screen Content

Take a look at the code below and carefully review the nested elements in this block along with the classes and ids used. The <div> with an id = "answer-set" encloses the four answer buttons to help with shuffling answers later on. We wouldn't want the correct answer to always be on top, would we? :) Also, notice the <div> with id = "feedback" that can be used to give a player feedback after answering.

Update your question screen HTML to match the code below.

<!-------------- QUESTION SCREEN --------------->
<div class='screen' id='question-screen'>
  <h4 id="category">Category Name</h4>
  <h1 id="question">Question goes here?</h1>
  <div id="answer-set">
    <button class="answer-btn" id="correctAnswer">Correct Answer</button>
    <button class="answer-btn" id="incorrectAnswer1">Wrong Answer</button>
    <button class="answer-btn" id="incorrectAnswer2">Wrong Answer</button>
    <button class="answer-btn" id="incorrectAnswer3">Wrong Answer</button>
  </div>
  <h1 id="feedback">Feedback will go here.</h1>
</div>

No additional CSS needed for the question screen, since we already added style for buttons and the screen class. Yea!

Once all questions are answered the trivia library will call your displayThankyou( ) function. Notice how the game results are also displayed in this function. Your thank you screen HTML provides a restart button that will allow the player to play again. Update your displayThankyou( ) function to match the one below.

function displayThankyou() {
  $(".screen").hide();
  $("#thankyou-screen").show();
  $("#game-results").html(`You got ${trivia.totalCorrect} of ${trivia.totalAnswered} correct.`);
}

Your core trivia game code should work from start to finish now.

When a Player Clicks an Answer

The onClickedAnswer( ) function is called by the Trivia library when a button of class "answer-btn" is clicked. In the code below you will notice that a parameter, isCorrect, is "passed" to the function to indicate whether the answer is correct or not. Based on the answer we will provide appropriate feedback by inserting text and showing the "feedback" HTML element. We will also highlight the correct answer by adding a "highlight" class to the correct answer button. Finally, we will wait 3 seconds then use the trivia library method to gotoNextQuestion. Update your function to match the one below.

function onClickedAnswer(isCorrect) {
  if (isCorrect) $("#feedback").html(`Way to go!`).show();
  else $("#feedback").html(`Better luck next time.`).show();
  $("#correctAnswer").addClass("highlight"); //highlight right answer
  setTimeout(trivia.gotoNextQuestion, 3000); //wait 3 secs...next question
}

In order for the button highlight to work you need to add the following to your CSS. Add this to the bottom of your CSS.

.highlight {
  background-color: green;
  color: white;
}

If you run your trivia now the first question should respond nicely to a clicked answer, but you will notice a couple of problems once you get passed the first question. The highlight is stuck on and the feedback is not cleared. Let's fix that by adding two lines of code to your displayQuestion( ) function.

Add the code below just after $("#question-screen").show(); inside your displayQuestion( ) function. This resets your feedback.

  $("#correctAnswer").removeClass("highlight");
  $("#feedback").hide();

Your trivia game should be clipping along well now. The final piece is to handle what happens when all questions have been answered.

A Word About the iDEW Trivia Library

You will come across bits of code that use the iDEW trivia library -- for example, trivia.loadGoogleSheet( ) , trivia.insertQuestionInfo( ), trivia.totalQuestions. These methods and trivia values were designed to make programming your game easier. Once you dig in to your own game design you will want to review all the goodies offered in the Trivia Library Reference section of this book.

Load Questions Then Display Welcome

Update your setup ( ) function to match the one below that loads the example question database. You will eventually change the googleSheetLink value to your own. Notice that once the questions are loaded (see .then in code) the displayWelcome ( ) function is called.

Update your displayWelcome( ) function to match the one below. This function first hides all screens, since they are all of class "screen". Then, only the welcome-screen is displayed using it's unique id.

Responding to Start Button Click

The onClickedStart( ) function is called by the Trivia library when a button of class "start" is clicked, like the one in your welcome screen HTML and thank you screen HTML. Here we simply call the displayQuestion( ) function. You may add more code here later for additional game features.

Update your onClickedStart( ) function as below.

Below the displayQuestion( ) function hides all HTML screen then displays only the question screen. Then the question info (category, question, and answers) are inserted into the question screen HTML using a method from the Trivia library. The answers are then shuffled for obvious reasons. Update your displayQuestion( ) function to match.

Update your displayQuestion( ) function as below.

Test your code. Your game will get stuck at the first question, but we will address that next.

HTML to Load JavaScript Libraries

In the code below the script tags load that make coding your game much easier. To all the people that work on free and open source projects, thank you!! You are adding the , , , and the iDEW trivia libraries here.

Add the code below to the bottom of your HTML body. (Place just before the tag for your custom JS code<script src="script.js"></script> if needed.

Core JavaScript Functions of Trivia Game

We are assuming you don't want your trivia game to be a static page and make people scroll down the screen just to see a trivia question. That's where JavaScript comes in to give you control of how the trivia game interacts and displays content when and where you want.

• setup( ) This function runs once when the visitor first comes to the page. For example, we will load the question database here.

• displayWelcome( ) , displayQuestion( ) , displayThankyou( ) These functions control what is displayed for each of our screens.

• onClickedAnswer( ) , onClickedStart( ) These functions control what happens when buttons are clicked.

Copy the JavaScript below and paste it in a new script.js file. Nothing new will happen just yet. That's next.

Using P5.js to Add Animation (Optional)

Let's include a function that will enable you to create fancy animations later. Add the following function just after your setup( ) function. Examples of how to add visual effects to your trivia game are available in the , but for now we will simply change the background color.

You will also need to add the following code to the end of your CSS.

You should now see that the screen’s background color changes based on the current state of the game.

HTML for Thank You Screen Content

Below you see that we are updating the thank you screen much like your welcome screen, but you will definitely want to put some game results here later instead of saying, "Looks like you did pretty well." The id called "game-results" will help us easily insert the game results later.

Update your thank you screen HTML to match the code below.

Again, no additional CSS to add.

HTML for the Screen Containers

Below you see the HTML for the three screen "containers" as <div> elements. We will add more detail to each screen later. Notice that each screen has class='screen' . This will allow us to easily change the style (CSS) of all three screens later in the same way. Also, notice that each screen has a unique id that will allow us to target each screen in a particular way later.

Copy the HTML code and paste it into a new index.html file, or use the CodePen version if you are starting with . The browser page preview is not exciting, but it should contain text from all three screens.

CSS for the Body and Screens

Let's add a little style to our screens next. In the code below notice how the body , which contains all contents of the page, is given a background color of "gray" and a margin of "0". This gives us a nice edge-to-edge background for placing our screen content.

Next you will see several styles being applied to screens, since .screen affects all elements with that class. Notice how background-color uses rgba( ) so that we can "see through" the screen a bit to the background. You will want this feature later. The rest of the styling has to do with sizing the screens and content in a way that fits nicely on any device, and you will probably want to leave these elements alone.

Copy the CSS code below into your style.css file and notice the change. You will need to scroll down in the live preview to see all the screens now.

Save your Code before the next step!

HTML of Basic Welcome Screen Content

Now you will update your welcome screen HTML slightly by adding a <button> element and an h4 element. The button will start the game after we add more code later. Later you can customize your welcome message and even add some specific data about the trivia game.

Update your welcome screen HTML to match the code below. (Don't add another welcome screen!)

<!-------------- WELCOME SCREEN --------------->
<div class='screen' id='welcome-screen'>
    <h1>Welcome to our example game!</h1>
    <h4>You have questions waiting for you.</h4>
    <button class="start-btn">Start</button>
</div>

CSS for More Style

Add the following CSS styles to the bottom of your stylesheet for buttons and headings. Modify styles as you wish, but be careful about the effects of changing display, margin, and width , which can be problematic sometimes.

h1, h4 {
  text-align: center;
}
button {
  background-color: rgba(255,255,255,.7);
  border: none;
  outline: none;
  border-radius: 19px;
  box-shadow: 3px 3px 7px black;
  font-size: 24px;
  display: block;
  margin: 10px auto;
  min-height: 70px;
  width: 100%;
}

Core Game Structure

There are three screens in the core game structure. While it may seem simple, you will find that there are many creative and engaging things you can do in your customized design.

• Welcome Screen The welcome screen can simply welcome the visitor to the game and give some background on your game. It will display a start button to take the visitor to the first question. You can optionally include some basic metrics about the game, like how many questions await them.

• Question Screen The question screen is the most important screen. In that it not only presents the trivia questions to the visitor, but also will display feedback on correct and incorrect answers. The question screen can also include running data; like a score, progress, or timer.

• Thank You Screen The thank you screen will gracefully inform the visitor that they have finished the game. This screen can provide additional data, like how well they played the game, and provide a button to play it again.

Programming and Question Database

The code template is built with HTML/CSS/Javascript. The custom question database can be directly included as a Javascript object array or created in a connected Google Sheet. Creating the database in a Google Sheet is most convenient and much easier to edit.

Let's Get Building...

This tutorial simply builds the code template step by step to help you understand how it works. Go to 1. Screens as Containers.