Added category support.

Author: jlyst

src/trivia.js

@@ -1,12 +1,14 @@
 var trivia = {
   questions: [],
+  currentCategory: null,
+  categoriesEnabled: false,
   currentQuestion: {},
   questionIndex: 0,
   totalQuestions: 0,
   totalCorrect: 0,
   totalAnswered: 0,
   state: "welcome",
-  loadGoogleSheet: function(link) {
+  loadGoogleSheet: function (link) {
     return new Promise((resolve, reject) => {
       Tabletop.init({
         key: link,
@@ -25,33 +27,71 @@ var trivia = {
       });
     });
   },
-  advanceQuestion: function() {
-    trivia.questionIndex++;
+  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"
+    displayQuestion();
+  },
+  insertCategoriesInfo: function () {
+    var cats = this.getCategories();
+    var unfcats = this.getUnfinishedCategories();
+    $('#category-set').html('');
+    cats.forEach((c)=> {
+      var $catbtn = $(`<button class="category-btn">${c}</button>`);
+      if (unfcats.includes(c)) {
+        $catbtn.on('click', function(e) {
+          trivia.currentCategory = c;
+          onClickedCategory();
+        });
+      }
+      else $catbtn.attr("disabled", true);
+      $('#category-set').append($catbtn);
+    })
+  },
+  insertQuestionInfo: function () {
     trivia.state = "question";
-    if (trivia.questions[trivia.questionIndex])
+    $(".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];
-  },
-  gotoNextQuestion: function() {
-    trivia.advanceQuestion(); //advance counter to the next question
-    $("button").attr("disabled", null);
-    if (trivia.totalQuestions > trivia.questionIndex) displayQuestion();
-    else {
-      displayThankyou(); //game over
-      trivia.state = "thankyou";
+      for (var prop in trivia.currentQuestion) {
+        $("#" + prop).html(trivia.currentQuestion[prop]);
+      }
     }
-  },
-  insertQuestionInfo: function() {
-    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";
+        displayCategories();
+      }
+      else alert('Yikes');
     }
   },
-  shuffleAnswers: function() {
+  shuffleAnswers: function () {
     $("#answer-set").html(shuffle($("#answer-set").children())); //shuffle answers
   },
-  startClickListeners: function() {
+  startClickListeners: function () {
     //listen for answer button clicks
     $(".screen").on("click", ".answer-btn", ev => {
-      $("button").attr("disabled", "disabled"); //turn off buttons to prohibit cheating :)
+      $(".answer-btn").attr("disabled", "disabled"); //turn off buttons to prohibit cheating :)
       if ($(ev.target).is("#correctAnswer")) {
         trivia.currentQuestion.response = "correct";
         trivia.state = "correct";
@@ -70,9 +110,11 @@ var trivia = {
 
     //listen for restart button click
     $(".screen").on("click", ".start-btn", ev => {
-      trivia.questionIndex = 0;
-      trivia.state = "question";
-      trivia.currentQuestion = trivia.questions[0]; //reset to the first question
+        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
       onClickedStart();
     });
   }