63 lines
2.0 KiB
HTML
63 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>{{ title }}</title>
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/cyborg/bootstrap.min.css">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container-md align-content-center">
|
|
<h1 class="title">Quiz The Word</h1>
|
|
<div class="card question">
|
|
<p id="question">{{ question }}</p>
|
|
<button id="show-answer" class="btn btn-secondary" onclick="showAnswer()">Show Answer</button>
|
|
<p id="answer">{{ answer }}</p>
|
|
<div id="bible-verses"></div>
|
|
<p>{{ difficulty }}</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
let raw_addresses = {{ addresses|tojson }};
|
|
let addresses = [];
|
|
for (let address of raw_addresses) {
|
|
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"]}`);
|
|
}
|
|
}
|
|
let bibleVerses = $("#bible-verses");
|
|
if (addresses.length > 0) {
|
|
for (let address of addresses) {
|
|
if (address != addresses[0]) {
|
|
bibleVerses.append(`; ${address}`);
|
|
} else {
|
|
bibleVerses.append(address);
|
|
}
|
|
}
|
|
}
|
|
|
|
function showAnswer() {
|
|
$("#answer").css("display", "block");
|
|
$("#show-answer").css("display", "none");
|
|
}
|
|
</script>
|
|
</html> |