88 lines
4.0 KiB
HTML
88 lines
4.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block body %}
|
|
<main class="flex-shrink-0">
|
|
<h1 class="title">Quiz The Word</h1>
|
|
<div id="easy-question" class="container-md align-content-center question">
|
|
<div class="card question-text">
|
|
<p id="easy-question">{{ easy.question }}</p>
|
|
<button id="{{ easy.question_id }}-0" class="btn btn-secondary m-1" onclick="checkAnswer({{ easy.question_id }}, 0, '{{ easy.answer_list[0] }}')">{{ easy.answer_list[0] }}</button>
|
|
<button id="{{ easy.question_id }}-1" class="btn btn-secondary m-1" onclick="checkAnswer({{ easy.question_id }}, 1, '{{ easy.answer_list[1] }}')">{{ easy.answer_list[1] }}</button>
|
|
<button id="{{ easy.question_id }}-2" class="btn btn-secondary m-1" onclick="checkAnswer({{ easy.question_id }}, 2, '{{ easy.answer_list[2] }}')">{{ easy.answer_list[2] }}</button>
|
|
<button id="{{ easy.question_id }}-3" class="btn btn-secondary m-1" onclick="checkAnswer({{ easy.question_id }}, 3, '{{ easy.answer_list[3] }}')">{{ easy.answer_list[3] }}</button>
|
|
{# <button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>#}
|
|
{# <p id="easy-answer" class="answer">{{ easy.answer }}</p>#}
|
|
{# <div id="easy-bible-verses">{{ easy.addresses }}</div>#}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center difficulty">
|
|
<div class="btn-group btn-group-toggle" data-toggle="buttons" onclick="change_difficulty()">
|
|
<label class="btn btn-secondary active">
|
|
<input type="radio" name="difficulty" id="easy" autocomplete="off" value="easy" checked>Easy
|
|
</label>
|
|
<label class="btn btn-secondary">
|
|
<input type="radio" name="difficulty" id="medium" autocomplete="off" value="medium">Medium
|
|
</label>
|
|
<label class="btn btn-secondary">
|
|
<input type="radio" name="difficulty" id="hard" autocomplete="off" value="hard">Hard
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
function change_difficulty() {
|
|
let difficulty = $("input[name='difficulty']:checked").val();
|
|
console.log(difficulty);
|
|
$(".question").css("display", "none");
|
|
if (difficulty === "easy") {
|
|
$("#easy-question").css("display", "block");
|
|
} else if (difficulty === "medium") {
|
|
$("#medium-question").css("display", "block");
|
|
} else if (difficulty === "hard") {
|
|
$("#hard-question").css("display", "block");
|
|
}
|
|
}
|
|
|
|
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");
|
|
}
|
|
})
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/*function showAnswer() {
|
|
$(".question:visible").find(".answer").css("display", "block");
|
|
$(".show-answer:visible").css("display", "none");
|
|
}*/
|
|
</script>
|
|
{% endblock %}
|