120 lines
4.7 KiB
HTML
120 lines
4.7 KiB
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 %}
|