Refactor to remove duplication in question views

QuizTheWord/app.py

@@ -53,11 +53,8 @@ def hidden_answer_category():
 @app.route("/category/multiple_choice")
 def multiple_choice_category():
     easy = database.get_random_multiple_choice(1)
-    easy.randomize_answer_list()
     medium = database.get_random_multiple_choice(2)
-    medium.randomize_answer_list()
     hard = database.get_random_multiple_choice(3)
-    hard.randomize_answer_list()
     return render_template(
         "multiple_choice.html",
         title="Multiple Choice",

QuizTheWord/database.py

@@ -154,6 +154,9 @@ class HiddenAnswer(Base):
             "question_id": self.question_id,
             "difficulty": self.hidden_answer_difficulty,
             "hint": self.hidden_answer_hint,
+            "question_text": self.question_text,
+            "answer": self.answer,
+            "addresses": self.addresses,
         }
 
 
@@ -192,6 +195,20 @@ class MultipleChoice(Base):
             "difficulty": self.multiple_choice_difficulty,
             "hint": self.multiple_choice_hint,
             "wrong_answers": self.wrong_answers,
+            "question_text": self.question_text,
+            "answer": self.answer,
+            "addresses": self.addresses,
+        }
+
+    def get_dict_shuffled_choices(self):
+        self.randomize_answer_list()
+        return {
+            "question_id": self.question_id,
+            "difficulty": self.multiple_choice_difficulty,
+            "hint": self.multiple_choice_hint,
+            "question_text": self.question_text,
+            "addresses": self.addresses,
+            "answer_list": self.answer_list,
         }
 
 

QuizTheWord/templates/hidden_answer.html

@@ -3,47 +3,28 @@
 {% block body %}
   <main class="container-fluid">
     <h1 class="text-center">Quiz The Word</h1>
-    <div class="row justify-content-center tab-content">
+    <div class="row justify-content-center">
-      <div id="easy-question" class="col-md col-lg-7 align-content-center question fade tab-pane show active" role="tabpanel">
+      <div class="col-md col-lg-7 align-content-center question">
-        <div class="card question-text">
+        <div class="card question-content">
-          <h5 id="easy-question">{{ easy.question_text }}</h5>
+          <h5 id="question-text"></h5>
-          <button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>
+          <button id="btn-show-answer" class="btn btn-secondary show-answer">Show Answer</button>
-          <p id="easy-answer" class="d-none answer">{{ easy.answer }}</p>
+          <p id="question-answer" class="d-none answer"></p>
-          <div id="easy-bible-verses">{{ easy.addresses }}</div>
+          <div id="bible-verses"></div>
-        </div>
-      </div>
-      <div id="medium-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
-        <div class="card question-text">
-          <h5 id="medium-question">{{ medium.question_text }}</h5>
-          <button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>
-          <p id="medium-answer" class="d-none answer">{{ medium.answer }}</p>
-          <div id="medium-bible-verses">{{ medium.addresses }}</div>
-        </div>
-      </div>
-      <div id="hard-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
-        <div class="card question-text">
-          <h5 id="hard-question">{{ hard.question_text }}</h5>
-          <button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>
-          <p id="hard-answer" class="d-none answer">{{ hard.answer }}</p>
-          <div id="hard-bible-verses">{{ hard.addresses }}</div>
         </div>
       </div>
     </div>
 
-    <ul class="nav nav-pills justify-content-center mt-2" id="myTab" role="tablist">
+    <ul class="nav nav-pills justify-content-center mt-2">
       <li class="nav-item" role="presentation">
-        <button class="nav-link active" id="home-tab" data-bs-toggle="pill" data-bs-target="#easy-question"
+        <button class="nav-link active difficulty-selection" id="btn-show-easy" type="button" aria-controls="easy" aria-selected="true">Easy
-                type="button" role="tab" aria-controls="easy" aria-selected="true">Easy
         </button>
       </li>
       <li class="nav-item" role="presentation">
-        <button class="nav-link" id="profile-tab" data-bs-toggle="pill" data-bs-target="#medium-question" type="button"
+        <button class="nav-link difficulty-selection" id="btn-show-medium" type="button" aria-controls="medium" aria-selected="false">Medium
-                role="tab" aria-controls="medium" aria-selected="false">Medium
         </button>
       </li>
       <li class="nav-item" role="presentation">
-        <button class="nav-link" id="contact-tab" data-bs-toggle="pill" data-bs-target="#hard-question" type="button"
+        <button class="nav-link difficulty-selection" id="btn-show-hard" type="button" aria-controls="hard" aria-selected="false">Hard
-                role="tab" aria-controls="hard" aria-selected="false">Hard
         </button>
       </li>
     </ul>
@@ -53,9 +34,52 @@
 
 {% block scripts %}
   <script>
+      let questions = [
+          {{ easy.get_dict()|tojson }},
+          {{ medium.get_dict()|tojson }},
+          {{ hard.get_dict()|tojson }},
+      ];
+      let difficulty_selection = $(".difficulty-selection");
+      let btn_show_answer = $("#btn-show-answer");
+      let question_answer = $("#question-answer");
+      let current_difficulty = 1;
+
+      change_difficulty(current_difficulty);
+
+      difficulty_selection.on("click", (event) => {
+          difficulty_selection.removeClass("active");
+          let target = $(event.target);
+          target.addClass("active");
+          if (target.prop("innerText") === "Easy") {
+              current_difficulty = 1;
+          } else if (target.prop("innerText") === "Medium") {
+              current_difficulty = 2;
+          } else {
+              current_difficulty = 3;
+          }
+          change_difficulty(current_difficulty);
+      })
+
+      btn_show_answer.on("click", showAnswer);
+
+      function change_difficulty(difficulty) {
+          let question = questions[difficulty-1];
+          if (question["answer_visible"]) {
+              btn_show_answer.css("display", "none");
+              question_answer.removeClass("d-none");
+          } else {
+              btn_show_answer.css("display", "block");
+              question_answer.addClass("d-none");
+          }
+          $("#question-text").text(question["question_text"]);
+          question_answer.text(question["answer"]);
+          $("#bible-verses").text(question["addresses"]);
+      }
+
       function showAnswer() {
-          $(".question:visible").find(".answer").removeClass("d-none");
+          questions[current_difficulty-1]["answer_visible"] = true;
-          $(".show-answer:visible").css("display", "none");
+          question_answer.removeClass("d-none");
+          btn_show_answer.css("display", "none");
       }
   </script>
 {% endblock %}

QuizTheWord/templates/multiple_choice.html

@@ -3,50 +3,26 @@
 {% block body %}
   <main class="container-fluid">
     <h1 class="text-center">Quiz The Word</h1>
-    <div class="row justify-content-center tab-content">
+    <div class="row justify-content-center">
-      <div id="easy-question" class="col-md col-lg-7 align-content-center question fade tab-pane show active" role="tabpanel">
+      <div class="col-md col-lg-7 align-content-center question">
-        <div class="card question-text">
+        <div class="card question-content">
-          <h5 id="easy-question">{{ easy.question_text }}</h5>
+          <h5 id="question-text"></h5>
-          {% for answer in easy.answer_list %}
+          <div id="question-choices" class="list-group"></div>
-            <button id="{{ easy.question_id }}-{{ loop.index0 }}" class="btn btn-secondary m-1"
-                    onclick="checkAnswer({{ easy.question_id }}, {{ loop.index0 }}, '{{ answer }}')">{{ answer }}</button>
-          {% endfor %}
-        </div>
-      </div>
-      <div id="medium-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
-        <div class="card question-text">
-          <h5 id="medium-question">{{ medium.question_text }}</h5>
-          {% for answer in medium.answer_list %}
-            <button id="{{ medium.question_id }}-{{ loop.index0 }}" class="btn btn-secondary m-1"
-                    onclick="checkAnswer({{ medium.question_id }}, {{ loop.index0 }}, '{{ answer }}')">{{ answer }}</button>
-          {% endfor %}
-        </div>
-      </div>
-      <div id="hard-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
-        <div class="card question-text">
-          <h5 id="hard-question">{{ hard.question_text }}</h5>
-          {% for answer in hard.answer_list %}
-            <button id="{{ hard.question_id }}-{{ loop.index0 }}" class="btn btn-secondary m-1"
-                    onclick="checkAnswer({{ hard.question_id }}, {{ loop.index0 }}, '{{ answer }}')">{{ answer }}</button>
-          {% endfor %}
         </div>
       </div>
     </div>
 
-    <ul class="nav nav-pills justify-content-center mt-2" id="myTab" role="tablist">
+    <ul class="nav nav-pills justify-content-center mt-2">
       <li class="nav-item" role="presentation">
-        <button class="nav-link active" id="home-tab" data-bs-toggle="pill" data-bs-target="#easy-question"
+        <button class="nav-link active difficulty-selection" id="btn-show-easy" type="button" aria-controls="easy" aria-selected="true">Easy
-                type="button" role="tab" aria-controls="easy" aria-selected="true">Easy
         </button>
       </li>
       <li class="nav-item" role="presentation">
-        <button class="nav-link" id="profile-tab" data-bs-toggle="pill" data-bs-target="#medium-question" type="button"
+        <button class="nav-link difficulty-selection" id="btn-show-medium" type="button" aria-controls="medium" aria-selected="false">Medium
-                role="tab" aria-controls="medium" aria-selected="false">Medium
         </button>
       </li>
       <li class="nav-item" role="presentation">
-        <button class="nav-link" id="contact-tab" data-bs-toggle="pill" data-bs-target="#hard-question" type="button"
+        <button class="nav-link difficulty-selection" id="btn-show-hard" type="button" aria-controls="hard" aria-selected="false">Hard
-                role="tab" aria-controls="hard" aria-selected="false">Hard
         </button>
       </li>
     </ul>
@@ -56,7 +32,59 @@
 
 {% block scripts %}
   <script>
+      let questions = [
+          {{ easy.get_dict_shuffled_choices()|tojson }},
+          {{ medium.get_dict_shuffled_choices()|tojson }},
+          {{ hard.get_dict_shuffled_choices()|tojson }},
+      ];
+      let difficulty_selection = $(".difficulty-selection");
+      let current_difficulty = 1;
+
+      change_difficulty(current_difficulty);
+
+      difficulty_selection.on("click", (event) => {
+          difficulty_selection.removeClass("active");
+          let target = $(event.target);
+          target.addClass("active");
+          if (target.prop("innerText") === "Easy") {
+              current_difficulty = 1;
+          } else if (target.prop("innerText") === "Medium") {
+              current_difficulty = 2;
+          } else {
+              current_difficulty = 3;
+          }
+          change_difficulty(current_difficulty);
+      })
+
+      function change_difficulty(difficulty) {
+          let question = questions[difficulty-1];
+          $("#question-text").text(question["question_text"]);
+          $("#bible-verses").text(question["addresses"]);
+          $("#question-choices").empty();
+          for (let i=0; i< question["answer_list"].length; i++) {
+              let btn = $("<button>")
+                  .attr("id", question["question_id"]+"-"+i)
+                  .addClass("btn btn-secondary m-1")
+                  .text(question["answer_list"][i])
+                  .on("click", () => {
+                      checkAnswer(question["question_id"], i, question["answer_list"][i]);
+                  });
+              if (question.hasOwnProperty("chosen_answer")) {
+                  btn.attr("disabled", true);
+                  if (question["correct_answer"] === i) {
+                      btn.addClass("btn-success");
+                  }
+                  if (question["chosen_answer"] !== question["correct_answer"] && question["chosen_answer"] === i) {
+                      btn.addClass("btn-danger");
+                  }
+              }
+              $("#question-choices").append(btn);
+          }
+      }
+
       function checkAnswer(question_id, button_index, answer) {
+          let question = questions[current_difficulty-1];
+          question["chosen_answer"] = button_index;
           let loading_spinner = $("<div>")
               .attr("id", "check-answer")
               .addClass("text-center")
@@ -72,14 +100,14 @@
               success: (data) => {
                   $("#check-answer").remove();
                   if (data[0] === true) {
-                      console.log("answer correct");
+                      question["correct_answer"] = button_index
                       $("#" + question_id + "-" + button_index).addClass("btn-success");
                   } else {
-                      console.log("answer wrong");
                       $("#" + question_id + "-" + button_index).addClass("btn-danger");
                       $(`button[id*='${question_id}']`).each((i, element) => {
                           element = $(element);
                           if (element.text() === data[1]) {
+                              question["correct_answer"] = i;
                               element.addClass("btn-success");
                           }
                       })