67 lines
2.9 KiB
HTML
67 lines
2.9 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 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 id="medium-question" class="container-md align-content-center question" style="display: none">
|
|
<div class="card question-text">
|
|
<p id="medium-question">{{ medium.question }}</p>
|
|
<button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>
|
|
<p id="medium-answer" class="answer">{{ medium.answer }}</p>
|
|
<div id="medium-bible-verses">{{ medium.addresses }}</div>
|
|
</div>
|
|
</div>
|
|
<div id="hard-question" class="container-md align-content-center question" style="display: none">
|
|
<div class="card question-text">
|
|
<p id="hard-question">{{ hard.question }}</p>
|
|
<button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>
|
|
<p id="hard-answer" class="answer">{{ hard.answer }}</p>
|
|
<div id="hard-bible-verses">{{ hard.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 showAnswer() {
|
|
$(".question:visible").find(".answer").css("display", "block");
|
|
$(".show-answer:visible").css("display", "none");
|
|
}
|
|
</script>
|
|
{% endblock %}
|