129 lines
5.3 KiB
HTML
129 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html class="h-100" lang="en">
|
|
<head>
|
|
<title>{{ title }}</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/cyborg/bootstrap.min.css">
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
|
|
<body class="d-flex flex-column h-100">
|
|
<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"></div>
|
|
<p>{{ easy["Difficulty"] }}</p>
|
|
</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"></div>
|
|
<p>{{ medium["Difficulty"] }}</p>
|
|
</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"></div>
|
|
<p>{{ hard["Difficulty"] }}</p>
|
|
</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" value="easy" checked>Easy
|
|
</label>
|
|
<label class="btn btn-secondary">
|
|
<input type="radio" name="difficulty" id="medium" value="medium">Medium
|
|
</label>
|
|
<label class="btn btn-secondary">
|
|
<input type="radio" name="difficulty" id="hard" value="hard">Hard
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<footer class="mt-auto py-3">
|
|
<div class="container text-center">
|
|
<span class="">Created By ItIsGood.com</span>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
<script>
|
|
let easy_addresses = {{ easy["Address"]|tojson }};
|
|
let medium_addresses = {{ medium["Address"]|tojson }};
|
|
let hard_addresses = {{ hard["Address"]|tojson }};
|
|
|
|
function parse_bible_verses(bible_verses) {
|
|
let addresses = [];
|
|
for (let address of bible_verses) {
|
|
let verses = "";
|
|
if (address["Verses"] != null) {
|
|
for (let verse of address["Verses"]) {
|
|
if (verses != "") {
|
|
verses += ", ";
|
|
} else {
|
|
verses = ":";
|
|
}
|
|
if (typeof verse != "number") {
|
|
verses += `${verse[0]}-${verse[1]}`;
|
|
} else {
|
|
verses += verse.toString();
|
|
}
|
|
}
|
|
}
|
|
if (address["Chapter"] != null) {
|
|
addresses.push(`${address["Book"]} ${address["Chapter"]}${verses}`);
|
|
} else if (address["Book"] != null) {
|
|
addresses.push(`${address["Book"]}`);
|
|
}
|
|
}
|
|
return addresses;
|
|
}
|
|
|
|
function show_bible_verses(element_id, bible_verses) {
|
|
let bibleVerses = $(element_id);
|
|
if (bible_verses.length > 0) {
|
|
for (let address of bible_verses) {
|
|
if (address != bible_verses[0]) {
|
|
bibleVerses.append(`; ${address}`);
|
|
} else {
|
|
bibleVerses.append(address);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
show_bible_verses("#easy-bible-verses", parse_bible_verses(easy_addresses));
|
|
show_bible_verses("#medium-bible-verses", parse_bible_verses(medium_addresses));
|
|
show_bible_verses("#hard-bible-verses", parse_bible_verses(hard_addresses));
|
|
|
|
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>
|
|
</html> |