Trivia JS Library Reference

The information on this page is in development and is provided for advanced use of the library.

Trivia Methods

Used to load a question bank from a Google Sheet.


Returns all category names in an array.


Returns category names of the categories having unanswered questions. Returns as an array.


Advances the trivia game to the next question.


This function places a button for each category into the HTML.


This function puts the current question and answers taken from your database into the HTML to be displayed.


This function shuffles the multiple choice answers so that the correct answer does not always show at the top.


This function simply starts the event listeners for different types of player clicks.

Trivia Objects and Attributes


This is an array of the trivia question objects.


This is the current trivia question object which contains key/value pairs defined by the question database. For example, trivia.currentQuestion.category will contain the category label for the current question if it is available. The standard question object keys are below, but can be extended as needed.
  • category
  • question
  • correctAnswer
  • incorrectAnswer1
  • incorrectAnswer2
  • incorrectAnswer3


This provides the current question's index in the questions array.


The provides the total questions in the game.


This provides how many correct answers the player has at the moment.


This provides how many questions have been answered by the player at that moment.


This provides the state of the game. Possible states -- 'welcome', 'question', 'correct', 'incorrect', and 'thankyou'.

Raw Library JavaScript

var trivia = {
questions: [],
currentCategory: null,
categoriesEnabled: false,
currentQuestion: {},
questionIndex: 0,
totalQuestions: 0,
totalCorrect: 0,
totalAnswered: 0,
state: "welcome",
loadGoogleSheet: function (link) {
return new Promise((resolve, reject) => {
var self=this;
Papa.parse(link, {
download: true,
header: true,
complete: function (results) {
self.questions =;
console.log("Questions loaded: ",self.questions);
self.questions = shuffle(self.questions);
if (self.questions.length) self.currentQuestion = self.questions[0];
self.questionIndex = 0;
self.totalQuestions = self.questions.length;
self.totalCorrect = 0;
self.totalAnswered = 0;
self.state = "welcome";
getCategories: function () {
var cats = [];
this.questions.filter((q) => {
if (!cats.includes(q.category)) cats.push(q.category);
return cats;
getUnfinishedCategories: function () {
var cats = [];
this.questions.filter((q) => {
if (!cats.includes(q.category) && !q.response) cats.push(q.category);
return cats;
gotoNextQuestion: function () { //this just forwards a "deprecated function"
insertCategoriesInfo: function () {
var cats = this.getCategories();
var unfcats = this.getUnfinishedCategories();
cats.forEach((c) => {
var $catbtn = $(`<button class="category-btn">${c}</button>`);
if (unfcats.includes(c)) {
$catbtn.on('click', function (e) {
trivia.currentCategory = c;
else $catbtn.attr("disabled", true);
insertQuestionInfo: function () {
trivia.state = "question";
$(".answer-btn").attr("disabled", null);
trivia.questionIndex = trivia.questions.findIndex((q) => {
if (!this.categoriesEnabled) return !q.response;
else return !q.response && q.category == this.currentCategory;
if (trivia.questions[trivia.questionIndex]) {
trivia.currentQuestion = trivia.questions[trivia.questionIndex];
for (var prop in trivia.currentQuestion) {
$("#" + prop).html(trivia.currentQuestion[prop]);
else {
if (this.totalAnswered == this.totalQuestions) {
trivia.state = "thankyou";
displayThankyou(); //game over
else if (this.categoriesEnabled) {
trivia.state = "categories";
else alert('Yikes');
shuffleAnswers: function () {
$("#answer-set").html(shuffle($("#answer-set").children())); //shuffle answers
startClickListeners: function () {
//listen for answer button clicks
$(".screen").on("click", ".answer-btn", ev => {
$(".answer-btn").attr("disabled", "disabled"); //turn off buttons to prohibit cheating :)
//listen for restart button click
$(".screen").on("click", ".start-btn", ev => {
this.questions.forEach(function (q) { delete q.response });
trivia.questionIndex = 0;
if (!this.categoriesEnabled) trivia.state = "question";
else trivia.state = "categories";
trivia.currentQuestion = trivia.questions[0]; //reset to the first question
triggerAnswer: function (correct) {
$(".answer-btn").attr("disabled", "disabled");
if (correct) {
trivia.currentQuestion.response = "correct";
trivia.state = "correct";
} else {
trivia.currentQuestion.response = "incorrect";
trivia.state = "incorrect";
trivia.totalCorrect = trivia.questions.filter(item => {
return item.response == "correct";
trivia.totalAnswered = trivia.questions.filter(item => {
return item.response;
onClickedAnswer(trivia.currentQuestion.response == "correct");

Quick Start for Code Template

Copy the HTML/CSS/JavaScript below to get started immediately.
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
<!-------------- 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>
<!-------------- 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>
<h1 id="feedback">Feedback will go here.</h1>
<!-------------- THANK YOU SCREEN --------------->
<div class='screen' id='thankyou-screen'>
<h1>Thanks for playing our game!</h1>
<h4 id='game-results'>Looks like you did pretty well.</h4>
<button class="start-btn">Restart</button>
<!-- JS Libraries -->
<script type="text/javascript" src=""></script>
<script src=''></script>
<script src=''></script>
<script src=''></script>
<script src=""></script> <!-- iDEW trivia -->
<script src="code.js"></script>
body {
margin: 0;
background-color: gray;
.screen {
background-color: rgba(255,255,255,.5);
box-sizing: border-box;
margin: 15px auto;
padding: 15px;
max-width: 700px;
width: calc(100vw - 30px);
height: calc(100vh - 30px);
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%;
.highlight {
background-color: green;
color: white;
canvas {
min-width: 100vw;
min-height: 100vh;
position: absolute;
top: 0;
z-index: -1;
//Runs once at the beginning
function setup() {
var googleSheetLink = "";
//Loops continously for background effects and animations. (p5.js)
function draw() {
if (trivia.state == "welcome") background("yellow");
else if (trivia.state == "question") background("lightblue");
else if (trivia.state == "correct") background("green");
else if (trivia.state == "incorrect") background("red");
else if (trivia.state == "thankyou") background("orange");
function displayWelcome() {
function displayQuestion() {
function displayThankyou() {
$("#game-results").html(`You got ${trivia.totalCorrect} of ${trivia.totalAnswered} correct.`);
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 question
function onClickedStart() {