quiz-the-word/QuizTheWord/templates/multiple_choice.html

{% extends "base.html" %}

{% block body %}
  <main class="container-fluid">
    <h1 class="text-center">Quiz The Word</h1>
    <div class="row justify-content-center">
      <div class="col-md col-lg-7 align-content-center question">
        <div class="card question-content">
          <h5 id="question-text"></h5>
          <div id="question-choices" class="list-group"></div>
        </div>
      </div>
    </div>

    <ul class="nav nav-pills justify-content-center mt-2">
      <li class="nav-item" role="presentation">
        <button class="nav-link active difficulty-selection" id="btn-show-easy" type="button" aria-controls="easy" aria-selected="true">Easy
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link difficulty-selection" id="btn-show-medium" type="button" aria-controls="medium" aria-selected="false">Medium
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link difficulty-selection" id="btn-show-hard" type="button" aria-controls="hard" aria-selected="false">Hard
        </button>
      </li>
    </ul>

  </main>
{% endblock %}

{% 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")
              .text("Checking answer")
              .append($("<div>")
                  .addClass("spinner-border thin-border ml-1")
                  .attr("role", "status"));
          $(".question-text:visible").append(loading_spinner);
          $(`button[id*='${question_id}']`).attr("disabled", true);
          $.ajax(`{{ url_for("check_answer") }}?question_id=${question_id}&answer=${answer}`, {
              method: "GET",
              datatype: "json",
              success: (data) => {
                  $("#check-answer").remove();
                  if (data[0] === true) {
                      question["correct_answer"] = button_index
                      $("#" + question_id + "-" + button_index).addClass("btn-success");
                  } else {
                      $("#" + 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");
                          }
                      })
                  }
              }
          });
      }
  </script>
{% endblock %}