96 lines
3.6 KiB
HTML
96 lines
3.6 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>
|
|
<button id="btn-show-answer" class="btn btn-secondary show-answer">Show Answer</button>
|
|
<p id="question-answer" class="d-none answer"></p>
|
|
<div id="bible-verses"></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">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_hidden_answer") }}";
|
|
let questions = [
|
|
{
|
|
"current_question": 0,
|
|
"questions": [{{ easy.get_dict()|tojson }}],
|
|
},
|
|
{
|
|
"current_question": 0,
|
|
"questions": [{{ medium.get_dict()|tojson }}],
|
|
},
|
|
{
|
|
"current_question": 0,
|
|
"questions": [{{ hard.get_dict()|tojson }}],
|
|
},
|
|
];
|
|
let btn_show_answer = $("#btn-show-answer");
|
|
let question_answer = $("#question-answer");
|
|
|
|
btn_show_answer.on("click", showAnswer);
|
|
|
|
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);
|
|
}
|
|
|
|
if (question["answer_visible"]) {
|
|
btn_show_answer.css("display", "none");
|
|
question_answer.removeClass("d-none");
|
|
} else {
|
|
btn_show_answer.css("display", "block");
|
|
question_answer.addClass("d-none");
|
|
}
|
|
$("#question-text").text(question["question_text"]);
|
|
question_answer.text(question["answer"]);
|
|
$("#bible-verses").text(question["addresses"]);
|
|
}
|
|
|
|
function showAnswer() {
|
|
let question_index = questions[current_difficulty-1]["current_question"];
|
|
let question = questions[current_difficulty-1]["questions"][question_index];
|
|
question["answer_visible"] = true;
|
|
question_answer.removeClass("d-none");
|
|
btn_show_answer.css("display", "none");
|
|
}
|
|
</script>
|
|
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
|
|
{% endblock %}
|