130 lines
5.4 KiB
HTML
130 lines
5.4 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>
|
|
<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 %}
|