matt/quiz-the-word
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make site more mobile friendly

Browse Source 
Reformat tab size
This commit is contained in:
Matthew Welch 2021-04-17 13:14:29 -07:00
parent a0bac0ebf7
commit 4ec39e9f09
10 changed files with 451 additions and 456 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
QuizTheWord/admin/templates/admin/base.html
View File

@ -1,43 +1,45 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="h-100" lang="en"> <html class="h-100" lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Admin</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"> <title>Admin</title>
<script src="https://kit.fontawesome.com/f2d4307e62.js" crossorigin="anonymous"></script> <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> <script src="https://kit.fontawesome.com/f2d4307e62.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/cosmo/bootstrap.min.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('admin.static', filename='style.css') }}"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/cosmo/bootstrap.min.css">
{% block head %}{% endblock %} <link rel="stylesheet" href="{{ url_for('admin.static', filename='style.css') }}">
{% block head %}{% endblock %}
</head> </head>
<body class="d-flex flex-column h-100"> <body class="d-flex flex-column h-100">
<nav class="navbar navbar-expand navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url_for('admin.index') }}">Admin Site</a> <a class="navbar-brand" href="{{ url_for('admin.index') }}">Admin Site</a>
<button class="navbar-toggler" type="button"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div id="navbar" class="collapse navbar-collapse">
<div class="collapse navbar-collapse"> <ul class="navbar-nav">
<ul class="navbar-nav"> <li class="nav-item">
<li class="nav-item"> <a class="nav-link" href="{{ url_for('admin.index') }}">Home</a>
<a class="nav-link" href="{{ url_for('admin.index') }}">Home</a> </li>
</li> <li class="nav-item">
<li class="nav-item"> <a class="nav-link" href="{{ url_for('admin.questions') }}">Questions</a>
<a class="nav-link" href="{{ url_for('admin.questions') }}">Questions</a> </li>
</li> </ul>
</ul>
</div> </div>
</div>
</nav> </nav>
<div class="container"> <div class="container">
{% block body %}{% endblock %} {% block body %}{% endblock %}
</div> </div>
<footer class="mt-auto py-3"> <footer class="mt-auto py-3">
<div class="container text-center"> <div class="container text-center">
<span class="">Created By ItIsGood.com</span> <span class="">Created By ItIsGood.com</span>
</div> </div>
</footer> </footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <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> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
</body> </body>
</html> </html>

310
QuizTheWord/admin/templates/admin/edit_question.html
View File

@ -1,168 +1,176 @@
{% extends "admin/base.html" %} {% extends "admin/base.html" %}
{% block body %} {% block body %}
<form class="container mt-5" method="post"> <form class="container mt-5" method="post">
<div class="form-group"> <div class="form-group">
<label for="question_text">Question</label> <label for="question_text">Question</label>
<input id="question_text" name="question_text" type="text" class="form-control" value="{{ question.question_text }}"> <input id="question_text" name="question_text" type="text" class="form-control" value="{{ question.question_text }}">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="answer">Answer</label> <label for="answer">Answer</label>
<input id="answer" name="answer" type="text" class="form-control" value="{{ question.answer }}"> <input id="answer" name="answer" type="text" class="form-control" value="{{ question.answer }}">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="addresses">Bible Verses</label> <label for="addresses">Bible Verses</label>
<input id="addresses" name="addresses" type="text" class="form-control" value="{{ question.addresses }}"> <input id="addresses" name="addresses" type="text" class="form-control" value="{{ question.addresses }}">
</div> </div>
<label class="mt-3">Multiple Choice</label> <label class="mt-3">Multiple Choice</label>
<div class="container border mb-1"> <div class="container border mb-1">
<div id="multiple-choice-form" class="form-group"></div> <div id="multiple-choice-form" class="form-group"></div>
</div> </div>
<label class="mt-3">Hidden Answer</label> <label class="mt-3">Hidden Answer</label>
<div class="container border mb-1"> <div class="container border mb-1">
<div id="hidden-answer-form" class="form-group"></div> <div id="hidden-answer-form" class="form-group"></div>
</div> </div>
<button id="save" name="save" type="submit" class="btn btn-primary">Save</button> <button id="save" name="save" type="submit" class="btn btn-primary">Save</button>
</form> </form>
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script> <script>
let question = {{ question.get_dict()|tojson }}; let question = {{ question.get_dict()|tojson }};
if (question.hasOwnProperty("multiple_choice")) { if (question.hasOwnProperty("multiple_choice")) {
add_multiple_choice(); add_multiple_choice();
} else { } else {
$("#multiple-choice-form") $("#multiple-choice-form")
.append($("<button>") .append($("<button>")
.attr({"id": "add-multiple-choice-btn", "type": "button"}) .attr({"id": "add-multiple-choice-btn", "type": "button"})
.addClass("btn btn-secondary add-category-btn") .addClass("btn btn-secondary add-category-btn")
.text("Add Multiple Choice") .text("Add Multiple Choice")
.on("click", () => { .on("click", () => {
$("#add-multiple-choice-btn").remove(); $("#add-multiple-choice-btn").remove();
$("#multiple-choice-form").append($("<input>").attr({"hidden": true, "name": "create_multiple_choice", "value": true})) $("#multiple-choice-form").append($("<input>").attr({
add_multiple_choice(); "hidden": true,
})); "name": "create_multiple_choice",
} "value": true
if (question.hasOwnProperty("hidden_answer")) { }))
add_hidden_answer(); add_multiple_choice();
} else { }));
$("#hidden-answer-form") }
.append($("<button>") if (question.hasOwnProperty("hidden_answer")) {
.attr({"id": "add-hidden-answer-btn", "type": "button"}) add_hidden_answer();
.addClass("btn btn-secondary add-category-btn") } else {
.text("Add Hidden Answer") $("#hidden-answer-form")
.on("click", () => { .append($("<button>")
$("#add-hidden-answer-btn").remove(); .attr({"id": "add-hidden-answer-btn", "type": "button"})
$("#hidden-answer-form").append($("<input>").attr({"hidden": true, "name": "create_hidden_answer", "value": true})) .addClass("btn btn-secondary add-category-btn")
add_hidden_answer(); .text("Add Hidden Answer")
})); .on("click", () => {
} $("#add-hidden-answer-btn").remove();
$("#hidden-answer-form").append($("<input>").attr({
"hidden": true,
"name": "create_hidden_answer",
"value": true
}))
add_hidden_answer();
}));
}
function remove_item(element) { function remove_item(element) {
if ($("#wrong_answer_list").children().length > 1) { if ($("#wrong_answer_list").children().length > 1) {
element.remove(); element.remove();
} }
} }
function create_difficulty_selection(category) { function create_difficulty_selection(category) {
let option_none = $("<option>").text("None") let option_none = $("<option>").text("None")
let option_easy = $("<option>").attr("value", 1).text("Easy") let option_easy = $("<option>").attr("value", 1).text("Easy")
let option_medium = $("<option>").attr("value", 2).text("Medium") let option_medium = $("<option>").attr("value", 2).text("Medium")
let option_hard = $("<option>").attr("value", 3).text("Hard") let option_hard = $("<option>").attr("value", 3).text("Hard")
if (question.hasOwnProperty(category)) { if (question.hasOwnProperty(category)) {
switch (question[category]["difficulty"]) { switch (question[category]["difficulty"]) {
case 1: case 1:
option_easy.attr("selected", true); option_easy.attr("selected", true);
break; break;
case 2: case 2:
option_medium.attr("selected", true); option_medium.attr("selected", true);
break; break;
case 3: case 3:
option_hard.attr("selected", true); option_hard.attr("selected", true);
break; break;
default: default:
option_none.attr("selected", true); option_none.attr("selected", true);
} }
} else { } else {
option_none.attr("selected", true); option_none.attr("selected", true);
} }
return $("<div>") return $("<div>")
.addClass("form-group") .addClass("form-group")
.append($("<select>") .append($("<select>")
.addClass("custom-select") .addClass("custom-select")
.attr({"id": category+"_difficulty", "name": category+"_difficulty"}) .attr({"id": category + "_difficulty", "name": category + "_difficulty"})
.append(option_none) .append(option_none)
.append(option_easy) .append(option_easy)
.append(option_medium) .append(option_medium)
.append(option_hard)); .append(option_hard));
} }
function create_wrong_answer_item(text) { function create_wrong_answer_item(text) {
let item = $("<li>") let item = $("<li>")
.addClass("list-group-item d-flex justify-content-between align-items-center wrong_answer") .addClass("list-group-item d-flex justify-content-between align-items-center wrong_answer")
.append($("<input>") .append($("<input>")
.attr("name", "wrong_answers") .attr("name", "wrong_answers")
.addClass("form-control") .addClass("form-control")
.val(text)) .val(text))
.append($("<button>") .append($("<button>")
.addClass("btn") .addClass("btn")
.attr("type", "button") .attr("type", "button")
.on("click", () => { .on("click", () => {
remove_item(item); remove_item(item);
}) })
.append($("<i>") .append($("<i>")
.addClass("fas fa-times"))); .addClass("fas fa-times")));
return item; return item;
} }
function add_multiple_choice() { function add_multiple_choice() {
let label = $("<label>") let label = $("<label>")
.attr("for", "multiple_choice_difficulty") .attr("for", "multiple_choice_difficulty")
.text("Difficulty"); .text("Difficulty");
let difficulty = create_difficulty_selection("multiple_choice"); let difficulty = create_difficulty_selection("multiple_choice");
let wrong_answer_list = $("<ul>") let wrong_answer_list = $("<ul>")
.attr("id", "wrong_answer_list") .attr("id", "wrong_answer_list")
.addClass("list_group pl-0"); .addClass("list_group pl-0");
if (question.hasOwnProperty("multiple_choice")) { if (question.hasOwnProperty("multiple_choice")) {
$.each(question["multiple_choice"]["wrong_answers"], (i, answer) => { $.each(question["multiple_choice"]["wrong_answers"], (i, answer) => {
let item = create_wrong_answer_item(answer); let item = create_wrong_answer_item(answer);
wrong_answer_list.append(item); wrong_answer_list.append(item);
}); });
} else { } else {
let item = create_wrong_answer_item(""); let item = create_wrong_answer_item("");
wrong_answer_list.append(item); wrong_answer_list.append(item);
} }
let wrong_answers = $("<div>") let wrong_answers = $("<div>")
.addClass("form-group") .addClass("form-group")
.append($("<label>").text("Wrong Answers")) .append($("<label>").text("Wrong Answers"))
.append(wrong_answer_list) .append(wrong_answer_list)
.append($("<button>") .append($("<button>")
.attr({"id": "add_wrong_answer", "type": "button"}) .attr({"id": "add_wrong_answer", "type": "button"})
.addClass("btn btn-secondary") .addClass("btn btn-secondary")
.text("Add Answer") .text("Add Answer")
.on("click", () => { .on("click", () => {
let item = create_wrong_answer_item(""); let item = create_wrong_answer_item("");
wrong_answer_list.append(item); wrong_answer_list.append(item);
})); }));
$("#multiple-choice-form") $("#multiple-choice-form")
.append(label) .append(label)
.append(difficulty) .append(difficulty)
.append(wrong_answers); .append(wrong_answers);
} }
function add_hidden_answer() { function add_hidden_answer() {
let label = $("<label>") let label = $("<label>")
.attr("for", "hidden_answer_difficulty") .attr("for", "hidden_answer_difficulty")
.text("Difficulty"); .text("Difficulty");
let difficulty = create_difficulty_selection("hidden_answer"); let difficulty = create_difficulty_selection("hidden_answer");
$("#hidden-answer-form") $("#hidden-answer-form")
.append(label) .append(label)
.append(difficulty); .append(difficulty);
} }
</script> </script>
{% endblock %} {% endblock %}

143
QuizTheWord/admin/templates/admin/question_list.html
View File

@ -1,88 +1,85 @@
{% extends "admin/base.html" %} {% extends "admin/base.html" %}
{% block head %} {% block head %}
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.css"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.2/extensions/filter-control/bootstrap-table-filter-control.min.css"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/filter-control/bootstrap-table-filter-control.min.css">
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<table id="question-table" class="table"></table> <table id="question-table" class="table"></table>
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script src="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.2/extensions/filter-control/bootstrap-table-filter-control.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
<script> <script>
function query_params(params) { function query_params(params) {
console.log(params); return params;
return params; }
}
var filter_data = [true, false] var filter_data = [true, false]
function disable_input() { function disable_input() {
console.log("disable"); $("input, select").attr("disabled", true);
$("input, select").attr("disabled", true); }
}
function enable_input() { function enable_input() {
console.log("enable"); $("input, select").removeAttr("disabled");
$("input, select").removeAttr("disabled"); }
}
$("#question-table").bootstrapTable({ $("#question-table").bootstrapTable({
url: "/admin/question_query", url: "/admin/question_query",
pagination: true, pagination: true,
sidePagination: "server", sidePagination: "server",
filterControl: true, filterControl: true,
queryParams: query_params, queryParams: query_params,
showRefresh: true, showRefresh: true,
searchOnEnterKey: true, searchOnEnterKey: true,
onClickRow: (item, element) => { onClickRow: (item, element) => {
console.log(item); console.log(item);
console.log(element); console.log(element);
window.location.href = `/admin/questions/edit/${item["question_id"]}` window.location.href = `/admin/questions/edit/${item["question_id"]}`
}, },
onLoadSuccess: enable_input, onLoadSuccess: enable_input,
onPageChange: disable_input, onPageChange: disable_input,
onSearch: disable_input, onSearch: disable_input,
buttons: [ buttons: [
{ {
html: "<a class='btn btn-secondary' href='{{ url_for('admin.create_question') }}'>Add Question</a>", html: "<a class='btn btn-secondary' href='{{ url_for('admin.create_question') }}'>Add Question</a>",
attributes: { attributes: {
title: "Add a new question to the database." title: "Add a new question to the database."
} }
} }
], ],
columns: [ columns: [
{ {
field: "question_id", field: "question_id",
title: "Question ID", title: "Question ID",
}, },
{ {
field: "question_text", field: "question_text",
title: "Question", title: "Question",
filterControl: "input", filterControl: "input",
}, },
{ {
field: "answer", field: "answer",
title: "Answer", title: "Answer",
filterControl: "input", filterControl: "input",
}, },
{ {
field: "multiple_choice", field: "multiple_choice",
title: "Has Multiple Choice", title: "Has Multiple Choice",
filterControl: "select", filterControl: "select",
filterData: "var:filter_data", filterData: "var:filter_data",
}, },
{ {
field: "hidden_answer", field: "hidden_answer",
title: "Has Hidden Answer", title: "Has Hidden Answer",
filterControl: "select", filterControl: "select",
filterData: "var:filter_data", filterData: "var:filter_data",
}, },
] ]
}) })
</script> </script>
{% endblock %} {% endblock %}

29
QuizTheWord/static/style.css
View File

@ -1,32 +1,3 @@
.title {
text-align: center;
}
.question-text {
font-size: 25px;
}
.answer {
display: none;
}
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.difficulty {
margin: 10px;
}
.vertical-nav {
position: fixed;
right: 0;
writing-mode: vertical-rl;
text-orientation: mixed;
}
.thin-border { .thin-border {
border-width: 0.15em; border-width: 0.15em;
} }

45
QuizTheWord/templates/base.html
View File

@ -1,27 +1,44 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="h-100" lang="en"> <html class="h-100" lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Quiz The Word - {{ title }}</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"> <title>Quiz The Word - {{ title }}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/darkly/bootstrap.min.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/darkly/bootstrap.min.css">
{% block head %}{% endblock %} <link rel="stylesheet" href="/static/style.css">
{% block head %}{% endblock %}
</head> </head>
<body class="d-flex flex-column h-100"> <body class="d-flex flex-column h-100">
<nav class="nav vertical-nav"> <nav class="navbar navbar-expand-lg navbar-dark">
<a class="nav-link" href="{{ url_for('multiple_choice_category') }}">Multiple Choice</a> <div class="container-fluid">
<a class="nav-link" href="{{ url_for('hidden_answer_category') }}">Hidden Answer</a> <div class="navbar-brand"></div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<a class="navbar-brand" href="{{ url_for('index') }}">Quiz The Word</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('multiple_choice_category') }}">Multiple Choice</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('hidden_answer_category') }}">Hidden Answer</a>
</li>
</ul>
</div>
</div>
</nav> </nav>
{% block body %}{% endblock %} {% block body %}{% endblock %}
<footer class="mt-auto py-3"> <footer class="mt-auto py-3">
<div class="container text-center"> <div class="container text-center">
<span class="">Created By ItIsGood.com</span> <span class="">Created By ItIsGood.com</span>
</div> </div>
</footer> </footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <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> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
</body> </body>
</html> </html>

4
QuizTheWord/templates/error.html
View File

@ -1,8 +1,8 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block body %} {% block body %}
<div class="mt-5 container"> <div class="mt-5 container">
<h1>{{ error_code }}</h1> <h1>{{ error_code }}</h1>
<p>{{ error_msg }}</p> <p>{{ error_msg }}</p>
</div> </div>
{% endblock %} {% endblock %}

99
QuizTheWord/templates/hidden_answer.html
View File

@ -1,66 +1,61 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block body %} {% block body %}
<main class="flex-shrink-0"> <main class="container-fluid">
<h1 class="title">Quiz The Word</h1> <h1 class="text-center">Quiz The Word</h1>
<div id="easy-question" class="container-md align-content-center question"> <div class="row justify-content-center tab-content">
<div id="easy-question" class="col-md col-lg-7 align-content-center question fade tab-pane show active" role="tabpanel">
<div class="card question-text"> <div class="card question-text">
<p id="easy-question">{{ easy.question_text }}</p> <h5 id="easy-question">{{ easy.question_text }}</h5>
<button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button> <button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>
<p id="easy-answer" class="answer">{{ easy.answer }}</p> <p id="easy-answer" class="d-none answer">{{ easy.answer }}</p>
<div id="easy-bible-verses">{{ easy.addresses }}</div> <div id="easy-bible-verses">{{ easy.addresses }}</div>
</div> </div>
</div> </div>
<div id="medium-question" class="container-md align-content-center question" style="display: none"> <div id="medium-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
<div class="card question-text"> <div class="card question-text">
<p id="medium-question">{{ medium.question_text }}</p> <h5 id="medium-question">{{ medium.question_text }}</h5>
<button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button> <button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>
<p id="medium-answer" class="answer">{{ medium.answer }}</p> <p id="medium-answer" class="d-none answer">{{ medium.answer }}</p>
<div id="medium-bible-verses">{{ medium.addresses }}</div> <div id="medium-bible-verses">{{ medium.addresses }}</div>
</div> </div>
</div> </div>
<div id="hard-question" class="container-md align-content-center question" style="display: none"> <div id="hard-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
<div class="card question-text"> <div class="card question-text">
<p id="hard-question">{{ hard.question_text }}</p> <h5 id="hard-question">{{ hard.question_text }}</h5>
<button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button> <button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>
<p id="hard-answer" class="answer">{{ hard.answer }}</p> <p id="hard-answer" class="d-none answer">{{ hard.answer }}</p>
<div id="hard-bible-verses">{{ hard.addresses }}</div> <div id="hard-bible-verses">{{ hard.addresses }}</div>
</div> </div>
</div>
</div> </div>
<div class="text-center difficulty">
<div class="btn-group btn-group-toggle" data-toggle="buttons" onclick="change_difficulty()"> <ul class="nav nav-pills justify-content-center mt-2" id="myTab" role="tablist">
<label class="btn btn-secondary active"> <li class="nav-item" role="presentation">
<input type="radio" name="difficulty" id="easy" autocomplete="off" value="easy" checked>Easy <button class="nav-link active" id="home-tab" data-bs-toggle="pill" data-bs-target="#easy-question"
</label> type="button" role="tab" aria-controls="easy" aria-selected="true">Easy
<label class="btn btn-secondary"> </button>
<input type="radio" name="difficulty" id="medium" autocomplete="off" value="medium">Medium </li>
</label> <li class="nav-item" role="presentation">
<label class="btn btn-secondary"> <button class="nav-link" id="profile-tab" data-bs-toggle="pill" data-bs-target="#medium-question" type="button"
<input type="radio" name="difficulty" id="hard" autocomplete="off" value="hard">Hard role="tab" aria-controls="medium" aria-selected="false">Medium
</label> </button>
</div> </li>
</div> <li class="nav-item" role="presentation">
</main> <button class="nav-link" id="contact-tab" data-bs-toggle="pill" data-bs-target="#hard-question" type="button"
role="tab" aria-controls="hard" aria-selected="false">Hard
</button>
</li>
</ul>
</main>
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script> <script>
function change_difficulty() { function showAnswer() {
let difficulty = $("input[name='difficulty']:checked").val(); $(".question:visible").find(".answer").removeClass("d-none");
console.log(difficulty); $(".show-answer:visible").css("display", "none");
$(".question").css("display", "none"); }
if (difficulty === "easy") { </script>
$("#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 %} {% endblock %}

155
QuizTheWord/templates/multiple_choice.html
View File

@ -1,94 +1,91 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block body %} {% block body %}
<main class="flex-shrink-0"> <main class="container-fluid">
<h1 class="title">Quiz The Word</h1> <h1 class="text-center">Quiz The Word</h1>
<div id="easy-question" class="container-md align-content-center question"> <div class="row justify-content-center tab-content">
<div id="easy-question" class="col-md col-lg-7 align-content-center question fade tab-pane show active" role="tabpanel">
<div class="card question-text"> <div class="card question-text">
<p id="easy-question">{{ easy.question_text }}</p> <h5 id="easy-question">{{ easy.question_text }}</h5>
{% for answer in easy.answer_list %} {% for answer in easy.answer_list %}
<button id="{{ easy.question_id }}-{{ loop.index0 }}" class="btn btn-secondary m-1" onclick="checkAnswer({{ easy.question_id }}, {{ loop.index0 }}, '{{ answer }}')">{{ answer }}</button> <button id="{{ easy.question_id }}-{{ loop.index0 }}" class="btn btn-secondary m-1"
{% endfor %} onclick="checkAnswer({{ easy.question_id }}, {{ loop.index0 }}, '{{ answer }}')">{{ answer }}</button>
{% endfor %}
</div> </div>
</div> </div>
<div id="medium-question" class="container-md align-content-center question" style="display: none"> <div id="medium-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
<div class="card question-text"> <div class="card question-text">
<p id="medium-question">{{ medium.question_text }}</p> <h5 id="medium-question">{{ medium.question_text }}</h5>
{% for answer in medium.answer_list %} {% for answer in medium.answer_list %}
<button id="{{ medium.question_id }}-{{ loop.index0 }}" class="btn btn-secondary m-1" onclick="checkAnswer({{ medium.question_id }}, {{ loop.index0 }}, '{{ answer }}')">{{ answer }}</button> <button id="{{ medium.question_id }}-{{ loop.index0 }}" class="btn btn-secondary m-1"
{% endfor %} onclick="checkAnswer({{ medium.question_id }}, {{ loop.index0 }}, '{{ answer }}')">{{ answer }}</button>
{% endfor %}
</div> </div>
</div> </div>
<div id="hard-question" class="container-md align-content-center question" style="display: none"> <div id="hard-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
<div class="card question-text"> <div class="card question-text">
<p id="hard-question">{{ hard.question_text }}</p> <h5 id="hard-question">{{ hard.question_text }}</h5>
{% for answer in hard.answer_list %} {% for answer in hard.answer_list %}
<button id="{{ hard.question_id }}-{{ loop.index0 }}" class="btn btn-secondary m-1" onclick="checkAnswer({{ hard.question_id }}, {{ loop.index0 }}, '{{ answer }}')">{{ answer }}</button> <button id="{{ hard.question_id }}-{{ loop.index0 }}" class="btn btn-secondary m-1"
{% endfor %} onclick="checkAnswer({{ hard.question_id }}, {{ loop.index0 }}, '{{ answer }}')">{{ answer }}</button>
{% endfor %}
</div> </div>
</div>
</div> </div>
<div class="text-center difficulty"> <ul class="nav nav-pills justify-content-center mt-2" id="myTab" role="tablist">
<div class="btn-group btn-group-toggle" data-toggle="buttons" onclick="change_difficulty()"> <li class="nav-item" role="presentation">
<label class="btn btn-secondary active"> <button class="nav-link active" id="home-tab" data-bs-toggle="pill" data-bs-target="#easy-question"
<input type="radio" name="difficulty" id="easy" autocomplete="off" value="easy" checked>Easy type="button" role="tab" aria-controls="easy" aria-selected="true">Easy
</label> </button>
<label class="btn btn-secondary"> </li>
<input type="radio" name="difficulty" id="medium" autocomplete="off" value="medium">Medium <li class="nav-item" role="presentation">
</label> <button class="nav-link" id="profile-tab" data-bs-toggle="pill" data-bs-target="#medium-question" type="button"
<label class="btn btn-secondary"> role="tab" aria-controls="medium" aria-selected="false">Medium
<input type="radio" name="difficulty" id="hard" autocomplete="off" value="hard">Hard </button>
</label> </li>
</div> <li class="nav-item" role="presentation">
</div> <button class="nav-link" id="contact-tab" data-bs-toggle="pill" data-bs-target="#hard-question" type="button"
</main> role="tab" aria-controls="hard" aria-selected="false">Hard
</button>
</li>
</ul>
</main>
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script> <script>
function change_difficulty() { function checkAnswer(question_id, button_index, answer) {
let difficulty = $("input[name='difficulty']:checked").val(); let loading_spinner = $("<div>")
console.log(difficulty); .attr("id", "check-answer")
$(".question").css("display", "none"); .addClass("text-center")
if (difficulty === "easy") { .text("Checking answer")
$("#easy-question").css("display", "block"); .append($("<div>")
} else if (difficulty === "medium") { .addClass("spinner-border thin-border ml-1")
$("#medium-question").css("display", "block"); .attr("role", "status"));
} else if (difficulty === "hard") { $(".question-text:visible").append(loading_spinner);
$("#hard-question").css("display", "block"); $(`button[id*='${question_id}']`).attr("disabled", true);
} $.ajax(`{{ url_for("check_answer") }}?question_id=${question_id}&answer=${answer}`, {
} method: "GET",
datatype: "json",
function checkAnswer(question_id, button_index, answer) { success: (data) => {
let loading_spinner = $("<div>") $("#check-answer").remove();
.attr("id", "check-answer") if (data[0] === true) {
.addClass("text-center") console.log("answer correct");
.text("Checking answer") $("#" + question_id + "-" + button_index).addClass("btn-success");
.append($("<div>") } else {
.addClass("spinner-border thin-border ml-1") console.log("answer wrong");
.attr("role", "status")); $("#" + question_id + "-" + button_index).addClass("btn-danger");
$(".question-text:visible").append(loading_spinner); $(`button[id*='${question_id}']`).each((i, element) => {
$(`button[id*='${question_id}']`).attr("disabled", true); element = $(element);
$.ajax(`{{ url_for("check_answer") }}?question_id=${question_id}&answer=${answer}`,{ if (element.text() === data[1]) {
method: "GET", element.addClass("btn-success");
datatype: "json", }
success: (data) => { })
$("#check-answer").remove(); }
if (data[0] === true) { }
console.log("answer correct"); });
$("#"+question_id+"-"+button_index).addClass("btn-success"); }
} else { </script>
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");
}
})
}
}
});
}
</script>
{% endblock %} {% endblock %}

34
QuizTheWord/templates/security/login_user.html
View File

@ -1,22 +1,26 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block body %} {% block body %}
<div class="container mt-5"> <div class="container-fluid mt-5">
<div class="row justify-content-center tab-content">
<div class="col-sm col-lg-3">
<form method="post"> <form method="post">
{{ login_user_form.hidden_tag() }} {{ login_user_form.hidden_tag() }}
<div class="form-group"> <div class="form-group">
<label for="email">Email</label> <label for="email">Email</label>
<input id="email" name="email" type="email" class="form-control"> <input id="email" name="email" type="email" class="form-control">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password">Password</label> <label for="password">Password</label>
<input id="password" name="password" type="password" class="form-control"> <input id="password" name="password" type="password" class="form-control">
</div> </div>
<div class="form-group custom-control custom-checkbox"> <div class="form-group custom-control custom-checkbox">
<input id="remember" name="remember" type="checkbox" class="custom-control-input"> <input id="remember" name="remember" type="checkbox" class="custom-control-input">
<label class="custom-control-label" for="remember">Remember me</label> <label class="custom-control-label" for="remember">Remember me</label>
</div> </div>
<button id="submit" name="submit" type="submit" class="btn btn-primary">Submit</button> <button id="submit" name="submit" type="submit" class="btn btn-primary">Submit</button>
</form> </form>
</div>
</div> </div>
</div>
{% endblock %} {% endblock %}

34
QuizTheWord/templates/security/register_user.html
View File

@ -1,22 +1,26 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block body %} {% block body %}
<div class="container mt-5"> <div class="container-fluid mt-5">
<div class="row justify-content-center tab-content">
<div class="col-sm col-lg-3">
<form method="post"> <form method="post">
{{ register_user_form.hidden_tag() }} {{ register_user_form.hidden_tag() }}
<div class="form-group"> <div class="form-group">
<label for="email">Email</label> <label for="email">Email</label>
<input id="email" name="email" type="email" class="form-control"> <input id="email" name="email" type="email" class="form-control">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password">Password</label> <label for="password">Password</label>
<input id="password" name="password" type="password" class="form-control"> <input id="password" name="password" type="password" class="form-control">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password_confirm">Retype Password</label> <label for="password_confirm">Retype Password</label>
<input id="password_confirm" name="password_confirm" type="password" class="form-control"> <input id="password_confirm" name="password_confirm" type="password" class="form-control">
</div> </div>
<button id="submit" name="submit" type="submit" class="btn btn-primary">Register</button> <button id="submit" name="submit" type="submit" class="btn btn-primary">Register</button>
</form> </form>
</div>
</div> </div>
</div>
{% endblock %} {% endblock %}