6. Load Questions and Go

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.

JS

//Runs once at the beginning
function setup() {
  var googleSheetLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRYCi4KENeZMlf9JbV8BhVrdOHse2250INSiRo7gEYWUYp3V0jiWFKWcnm1jzx5q1BMsmd9fOopk2Z_/pub?output=csv";
  trivia.loadGoogleSheet(googleSheetLink).then(displayWelcome); 
}

Note: The updated Google Sheet Link (as of August 30, 2021) used above works with the latest Trivia Library release (1.2.0 +).

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.

JS

function displayWelcome() {
  $(".screen").hide();
  $("#welcome-screen").show();
}

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.

JS

function onClickedStart() {
  displayQuestion();
}

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.

JS

function displayQuestion() {
  $(".screen").hide();
  $("#question-screen").show();
  trivia.insertQuestionInfo();
  trivia.shuffleAnswers();
}

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