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>
        <button id="btn-previous-question" class="btn btn-primary mt-2 float-start control-btn">Previous</button>
        <button id="btn-next-question" class="btn btn-primary mt-2 float-end control-btn">Next</button>
      </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 control-btn" 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 control-btn" 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 control-btn" id="btn-show-hard" type="button" aria-controls="hard" aria-selected="false">Hard
        </button>
      </li>
    </ul>

  </main>
{% endblock %}

{% block scripts %}
  <script>
      next_question_url = "{{ url_for("next_multiple_choice") }}";
      let questions = [
          {
              "current_question": 0,
              "questions": [{{ easy.get_dict_shuffled_choices()|tojson }}],
          },
          {
              "current_question": 0,
              "questions": [{{ medium.get_dict_shuffled_choices()|tojson }}],
          },
          {
              "current_question": 0,
              "questions": [{{ hard.get_dict_shuffled_choices()|tojson }}],
          },
      ];

      function update_question() {
          let difficulty = questions[current_difficulty-1];
          let question_index = difficulty["current_question"];
          let question = difficulty["questions"][question_index];
          if (question_index === 0) {
              btn_previous_question.attr("disabled", true);
          } else {
              btn_previous_question.attr("disabled", false);
          }
          if (question_index === difficulty["last_index"]) {
              btn_next_question.attr("disabled", true);
          } else {
              btn_next_question.attr("disabled", false);
          }

          $("#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 difficulty = questions[current_difficulty-1];
          let question_index = difficulty["current_question"];
          let question = difficulty["questions"][question_index];
          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>
  <script src="{{ url_for('static', filename='js/script.js') }}"></script>
{% endblock %}