92 lines
4.2 KiB
HTML
92 lines
4.2 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 tab-content">
|
|
<div id="easy-question" class="col-md col-lg-7 align-content-center question fade tab-pane show active" role="tabpanel">
|
|
<div class="card question-text">
|
|
<h5 id="easy-question">{{ easy.question_text }}</h5>
|
|
{% for answer in easy.answer_list %}
|
|
<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">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="home-tab" data-bs-toggle="pill" data-bs-target="#easy-question"
|
|
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"
|
|
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"
|
|
role="tab" aria-controls="hard" aria-selected="false">Hard
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
</main>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
function checkAnswer(question_id, button_index, answer) {
|
|
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) {
|
|
console.log("answer correct");
|
|
$("#" + 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]) {
|
|
element.addClass("btn-success");
|
|
}
|
|
})
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|