Make site more mobile friendly
Reformat tab size
This commit is contained in:
parent
a0bac0ebf7
commit
4ec39e9f09
@ -1,43 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="h-100" lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Admin</title>
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
<script src="https://kit.fontawesome.com/f2d4307e62.js" crossorigin="anonymous"></script>
|
||||
<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/cosmo/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="{{ url_for('admin.static', filename='style.css') }}">
|
||||
{% block head %}{% endblock %}
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Admin</title>
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
<script src="https://kit.fontawesome.com/f2d4307e62.js" crossorigin="anonymous"></script>
|
||||
<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="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/cosmo/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="{{ url_for('admin.static', filename='style.css') }}">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<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>
|
||||
<button class="navbar-toggler" type="button">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('admin.index') }}">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('admin.questions') }}">Questions</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="navbar" class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('admin.index') }}">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('admin.questions') }}">Questions</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
{% block body %}{% endblock %}
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
<footer class="mt-auto py-3">
|
||||
<div class="container text-center">
|
||||
<span class="">Created By ItIsGood.com</span>
|
||||
</div>
|
||||
<div class="container text-center">
|
||||
<span class="">Created By ItIsGood.com</span>
|
||||
</div>
|
||||
</footer>
|
||||
<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 %}
|
||||
</body>
|
||||
</html>
|
||||
@ -1,168 +1,176 @@
|
||||
{% extends "admin/base.html" %}
|
||||
|
||||
{% block body %}
|
||||
<form class="container mt-5" method="post">
|
||||
<div class="form-group">
|
||||
<label for="question_text">Question</label>
|
||||
<input id="question_text" name="question_text" type="text" class="form-control" value="{{ question.question_text }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer">Answer</label>
|
||||
<input id="answer" name="answer" type="text" class="form-control" value="{{ question.answer }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="addresses">Bible Verses</label>
|
||||
<input id="addresses" name="addresses" type="text" class="form-control" value="{{ question.addresses }}">
|
||||
</div>
|
||||
<label class="mt-3">Multiple Choice</label>
|
||||
<div class="container border mb-1">
|
||||
<div id="multiple-choice-form" class="form-group"></div>
|
||||
</div>
|
||||
<label class="mt-3">Hidden Answer</label>
|
||||
<div class="container border mb-1">
|
||||
<div id="hidden-answer-form" class="form-group"></div>
|
||||
</div>
|
||||
<button id="save" name="save" type="submit" class="btn btn-primary">Save</button>
|
||||
</form>
|
||||
<form class="container mt-5" method="post">
|
||||
<div class="form-group">
|
||||
<label for="question_text">Question</label>
|
||||
<input id="question_text" name="question_text" type="text" class="form-control" value="{{ question.question_text }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="answer">Answer</label>
|
||||
<input id="answer" name="answer" type="text" class="form-control" value="{{ question.answer }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="addresses">Bible Verses</label>
|
||||
<input id="addresses" name="addresses" type="text" class="form-control" value="{{ question.addresses }}">
|
||||
</div>
|
||||
<label class="mt-3">Multiple Choice</label>
|
||||
<div class="container border mb-1">
|
||||
<div id="multiple-choice-form" class="form-group"></div>
|
||||
</div>
|
||||
<label class="mt-3">Hidden Answer</label>
|
||||
<div class="container border mb-1">
|
||||
<div id="hidden-answer-form" class="form-group"></div>
|
||||
</div>
|
||||
<button id="save" name="save" type="submit" class="btn btn-primary">Save</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
let question = {{ question.get_dict()|tojson }};
|
||||
<script>
|
||||
let question = {{ question.get_dict()|tojson }};
|
||||
|
||||
if (question.hasOwnProperty("multiple_choice")) {
|
||||
add_multiple_choice();
|
||||
} else {
|
||||
$("#multiple-choice-form")
|
||||
.append($("<button>")
|
||||
.attr({"id": "add-multiple-choice-btn", "type": "button"})
|
||||
.addClass("btn btn-secondary add-category-btn")
|
||||
.text("Add Multiple Choice")
|
||||
.on("click", () => {
|
||||
$("#add-multiple-choice-btn").remove();
|
||||
$("#multiple-choice-form").append($("<input>").attr({"hidden": true, "name": "create_multiple_choice", "value": true}))
|
||||
add_multiple_choice();
|
||||
}));
|
||||
}
|
||||
if (question.hasOwnProperty("hidden_answer")) {
|
||||
add_hidden_answer();
|
||||
} else {
|
||||
$("#hidden-answer-form")
|
||||
.append($("<button>")
|
||||
.attr({"id": "add-hidden-answer-btn", "type": "button"})
|
||||
.addClass("btn btn-secondary add-category-btn")
|
||||
.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();
|
||||
}));
|
||||
}
|
||||
if (question.hasOwnProperty("multiple_choice")) {
|
||||
add_multiple_choice();
|
||||
} else {
|
||||
$("#multiple-choice-form")
|
||||
.append($("<button>")
|
||||
.attr({"id": "add-multiple-choice-btn", "type": "button"})
|
||||
.addClass("btn btn-secondary add-category-btn")
|
||||
.text("Add Multiple Choice")
|
||||
.on("click", () => {
|
||||
$("#add-multiple-choice-btn").remove();
|
||||
$("#multiple-choice-form").append($("<input>").attr({
|
||||
"hidden": true,
|
||||
"name": "create_multiple_choice",
|
||||
"value": true
|
||||
}))
|
||||
add_multiple_choice();
|
||||
}));
|
||||
}
|
||||
if (question.hasOwnProperty("hidden_answer")) {
|
||||
add_hidden_answer();
|
||||
} else {
|
||||
$("#hidden-answer-form")
|
||||
.append($("<button>")
|
||||
.attr({"id": "add-hidden-answer-btn", "type": "button"})
|
||||
.addClass("btn btn-secondary add-category-btn")
|
||||
.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) {
|
||||
if ($("#wrong_answer_list").children().length > 1) {
|
||||
element.remove();
|
||||
}
|
||||
}
|
||||
function remove_item(element) {
|
||||
if ($("#wrong_answer_list").children().length > 1) {
|
||||
element.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function create_difficulty_selection(category) {
|
||||
let option_none = $("<option>").text("None")
|
||||
let option_easy = $("<option>").attr("value", 1).text("Easy")
|
||||
let option_medium = $("<option>").attr("value", 2).text("Medium")
|
||||
let option_hard = $("<option>").attr("value", 3).text("Hard")
|
||||
if (question.hasOwnProperty(category)) {
|
||||
switch (question[category]["difficulty"]) {
|
||||
case 1:
|
||||
option_easy.attr("selected", true);
|
||||
break;
|
||||
case 2:
|
||||
option_medium.attr("selected", true);
|
||||
break;
|
||||
case 3:
|
||||
option_hard.attr("selected", true);
|
||||
break;
|
||||
default:
|
||||
option_none.attr("selected", true);
|
||||
}
|
||||
} else {
|
||||
option_none.attr("selected", true);
|
||||
}
|
||||
return $("<div>")
|
||||
.addClass("form-group")
|
||||
.append($("<select>")
|
||||
.addClass("custom-select")
|
||||
.attr({"id": category+"_difficulty", "name": category+"_difficulty"})
|
||||
.append(option_none)
|
||||
.append(option_easy)
|
||||
.append(option_medium)
|
||||
.append(option_hard));
|
||||
}
|
||||
function create_difficulty_selection(category) {
|
||||
let option_none = $("<option>").text("None")
|
||||
let option_easy = $("<option>").attr("value", 1).text("Easy")
|
||||
let option_medium = $("<option>").attr("value", 2).text("Medium")
|
||||
let option_hard = $("<option>").attr("value", 3).text("Hard")
|
||||
if (question.hasOwnProperty(category)) {
|
||||
switch (question[category]["difficulty"]) {
|
||||
case 1:
|
||||
option_easy.attr("selected", true);
|
||||
break;
|
||||
case 2:
|
||||
option_medium.attr("selected", true);
|
||||
break;
|
||||
case 3:
|
||||
option_hard.attr("selected", true);
|
||||
break;
|
||||
default:
|
||||
option_none.attr("selected", true);
|
||||
}
|
||||
} else {
|
||||
option_none.attr("selected", true);
|
||||
}
|
||||
return $("<div>")
|
||||
.addClass("form-group")
|
||||
.append($("<select>")
|
||||
.addClass("custom-select")
|
||||
.attr({"id": category + "_difficulty", "name": category + "_difficulty"})
|
||||
.append(option_none)
|
||||
.append(option_easy)
|
||||
.append(option_medium)
|
||||
.append(option_hard));
|
||||
}
|
||||
|
||||
function create_wrong_answer_item(text) {
|
||||
let item = $("<li>")
|
||||
.addClass("list-group-item d-flex justify-content-between align-items-center wrong_answer")
|
||||
.append($("<input>")
|
||||
.attr("name", "wrong_answers")
|
||||
.addClass("form-control")
|
||||
.val(text))
|
||||
.append($("<button>")
|
||||
.addClass("btn")
|
||||
.attr("type", "button")
|
||||
.on("click", () => {
|
||||
remove_item(item);
|
||||
})
|
||||
.append($("<i>")
|
||||
.addClass("fas fa-times")));
|
||||
return item;
|
||||
}
|
||||
function create_wrong_answer_item(text) {
|
||||
let item = $("<li>")
|
||||
.addClass("list-group-item d-flex justify-content-between align-items-center wrong_answer")
|
||||
.append($("<input>")
|
||||
.attr("name", "wrong_answers")
|
||||
.addClass("form-control")
|
||||
.val(text))
|
||||
.append($("<button>")
|
||||
.addClass("btn")
|
||||
.attr("type", "button")
|
||||
.on("click", () => {
|
||||
remove_item(item);
|
||||
})
|
||||
.append($("<i>")
|
||||
.addClass("fas fa-times")));
|
||||
return item;
|
||||
}
|
||||
|
||||
function add_multiple_choice() {
|
||||
let label = $("<label>")
|
||||
.attr("for", "multiple_choice_difficulty")
|
||||
.text("Difficulty");
|
||||
function add_multiple_choice() {
|
||||
let label = $("<label>")
|
||||
.attr("for", "multiple_choice_difficulty")
|
||||
.text("Difficulty");
|
||||
|
||||
let difficulty = create_difficulty_selection("multiple_choice");
|
||||
let difficulty = create_difficulty_selection("multiple_choice");
|
||||
|
||||
let wrong_answer_list = $("<ul>")
|
||||
.attr("id", "wrong_answer_list")
|
||||
.addClass("list_group pl-0");
|
||||
if (question.hasOwnProperty("multiple_choice")) {
|
||||
$.each(question["multiple_choice"]["wrong_answers"], (i, answer) => {
|
||||
let item = create_wrong_answer_item(answer);
|
||||
wrong_answer_list.append(item);
|
||||
});
|
||||
} else {
|
||||
let item = create_wrong_answer_item("");
|
||||
wrong_answer_list.append(item);
|
||||
}
|
||||
let wrong_answers = $("<div>")
|
||||
.addClass("form-group")
|
||||
.append($("<label>").text("Wrong Answers"))
|
||||
.append(wrong_answer_list)
|
||||
.append($("<button>")
|
||||
.attr({"id": "add_wrong_answer", "type": "button"})
|
||||
.addClass("btn btn-secondary")
|
||||
.text("Add Answer")
|
||||
.on("click", () => {
|
||||
let item = create_wrong_answer_item("");
|
||||
wrong_answer_list.append(item);
|
||||
}));
|
||||
$("#multiple-choice-form")
|
||||
.append(label)
|
||||
.append(difficulty)
|
||||
.append(wrong_answers);
|
||||
}
|
||||
let wrong_answer_list = $("<ul>")
|
||||
.attr("id", "wrong_answer_list")
|
||||
.addClass("list_group pl-0");
|
||||
if (question.hasOwnProperty("multiple_choice")) {
|
||||
$.each(question["multiple_choice"]["wrong_answers"], (i, answer) => {
|
||||
let item = create_wrong_answer_item(answer);
|
||||
wrong_answer_list.append(item);
|
||||
});
|
||||
} else {
|
||||
let item = create_wrong_answer_item("");
|
||||
wrong_answer_list.append(item);
|
||||
}
|
||||
let wrong_answers = $("<div>")
|
||||
.addClass("form-group")
|
||||
.append($("<label>").text("Wrong Answers"))
|
||||
.append(wrong_answer_list)
|
||||
.append($("<button>")
|
||||
.attr({"id": "add_wrong_answer", "type": "button"})
|
||||
.addClass("btn btn-secondary")
|
||||
.text("Add Answer")
|
||||
.on("click", () => {
|
||||
let item = create_wrong_answer_item("");
|
||||
wrong_answer_list.append(item);
|
||||
}));
|
||||
$("#multiple-choice-form")
|
||||
.append(label)
|
||||
.append(difficulty)
|
||||
.append(wrong_answers);
|
||||
}
|
||||
|
||||
function add_hidden_answer() {
|
||||
let label = $("<label>")
|
||||
.attr("for", "hidden_answer_difficulty")
|
||||
.text("Difficulty");
|
||||
function add_hidden_answer() {
|
||||
let label = $("<label>")
|
||||
.attr("for", "hidden_answer_difficulty")
|
||||
.text("Difficulty");
|
||||
|
||||
let difficulty = create_difficulty_selection("hidden_answer");
|
||||
let difficulty = create_difficulty_selection("hidden_answer");
|
||||
|
||||
$("#hidden-answer-form")
|
||||
.append(label)
|
||||
.append(difficulty);
|
||||
}
|
||||
</script>
|
||||
$("#hidden-answer-form")
|
||||
.append(label)
|
||||
.append(difficulty);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,88 +1,85 @@
|
||||
{% extends "admin/base.html" %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.2/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/bootstrap-table.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 %}
|
||||
|
||||
{% block body %}
|
||||
<table id="question-table" class="table"></table>
|
||||
<table id="question-table" class="table"></table>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="https://unpkg.com/bootstrap-table@1.18.2/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>
|
||||
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.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>
|
||||
|
||||
function query_params(params) {
|
||||
console.log(params);
|
||||
return params;
|
||||
}
|
||||
function query_params(params) {
|
||||
return params;
|
||||
}
|
||||
|
||||
var filter_data = [true, false]
|
||||
var filter_data = [true, false]
|
||||
|
||||
function disable_input() {
|
||||
console.log("disable");
|
||||
$("input, select").attr("disabled", true);
|
||||
}
|
||||
function disable_input() {
|
||||
$("input, select").attr("disabled", true);
|
||||
}
|
||||
|
||||
function enable_input() {
|
||||
console.log("enable");
|
||||
$("input, select").removeAttr("disabled");
|
||||
}
|
||||
function enable_input() {
|
||||
$("input, select").removeAttr("disabled");
|
||||
}
|
||||
|
||||
$("#question-table").bootstrapTable({
|
||||
url: "/admin/question_query",
|
||||
pagination: true,
|
||||
sidePagination: "server",
|
||||
filterControl: true,
|
||||
queryParams: query_params,
|
||||
showRefresh: true,
|
||||
searchOnEnterKey: true,
|
||||
onClickRow: (item, element) => {
|
||||
console.log(item);
|
||||
console.log(element);
|
||||
window.location.href = `/admin/questions/edit/${item["question_id"]}`
|
||||
},
|
||||
onLoadSuccess: enable_input,
|
||||
onPageChange: disable_input,
|
||||
onSearch: disable_input,
|
||||
buttons: [
|
||||
{
|
||||
html: "<a class='btn btn-secondary' href='{{ url_for('admin.create_question') }}'>Add Question</a>",
|
||||
attributes: {
|
||||
title: "Add a new question to the database."
|
||||
}
|
||||
}
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
field: "question_id",
|
||||
title: "Question ID",
|
||||
},
|
||||
{
|
||||
field: "question_text",
|
||||
title: "Question",
|
||||
filterControl: "input",
|
||||
},
|
||||
{
|
||||
field: "answer",
|
||||
title: "Answer",
|
||||
filterControl: "input",
|
||||
},
|
||||
{
|
||||
field: "multiple_choice",
|
||||
title: "Has Multiple Choice",
|
||||
filterControl: "select",
|
||||
filterData: "var:filter_data",
|
||||
},
|
||||
{
|
||||
field: "hidden_answer",
|
||||
title: "Has Hidden Answer",
|
||||
filterControl: "select",
|
||||
filterData: "var:filter_data",
|
||||
},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
$("#question-table").bootstrapTable({
|
||||
url: "/admin/question_query",
|
||||
pagination: true,
|
||||
sidePagination: "server",
|
||||
filterControl: true,
|
||||
queryParams: query_params,
|
||||
showRefresh: true,
|
||||
searchOnEnterKey: true,
|
||||
onClickRow: (item, element) => {
|
||||
console.log(item);
|
||||
console.log(element);
|
||||
window.location.href = `/admin/questions/edit/${item["question_id"]}`
|
||||
},
|
||||
onLoadSuccess: enable_input,
|
||||
onPageChange: disable_input,
|
||||
onSearch: disable_input,
|
||||
buttons: [
|
||||
{
|
||||
html: "<a class='btn btn-secondary' href='{{ url_for('admin.create_question') }}'>Add Question</a>",
|
||||
attributes: {
|
||||
title: "Add a new question to the database."
|
||||
}
|
||||
}
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
field: "question_id",
|
||||
title: "Question ID",
|
||||
},
|
||||
{
|
||||
field: "question_text",
|
||||
title: "Question",
|
||||
filterControl: "input",
|
||||
},
|
||||
{
|
||||
field: "answer",
|
||||
title: "Answer",
|
||||
filterControl: "input",
|
||||
},
|
||||
{
|
||||
field: "multiple_choice",
|
||||
title: "Has Multiple Choice",
|
||||
filterControl: "select",
|
||||
filterData: "var:filter_data",
|
||||
},
|
||||
{
|
||||
field: "hidden_answer",
|
||||
title: "Has Hidden Answer",
|
||||
filterControl: "select",
|
||||
filterData: "var:filter_data",
|
||||
},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@ -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 {
|
||||
border-width: 0.15em;
|
||||
}
|
||||
|
||||
@ -1,27 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="h-100" lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Quiz The Word - {{ title }}</title>
|
||||
<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">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/darkly/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
{% block head %}{% endblock %}
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Quiz The Word - {{ title }}</title>
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
<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="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/darkly/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body class="d-flex flex-column h-100">
|
||||
<nav class="nav vertical-nav">
|
||||
<a class="nav-link" href="{{ url_for('multiple_choice_category') }}">Multiple Choice</a>
|
||||
<a class="nav-link" href="{{ url_for('hidden_answer_category') }}">Hidden Answer</a>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||
<div class="container-fluid">
|
||||
<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>
|
||||
{% block body %}{% endblock %}
|
||||
<footer class="mt-auto py-3">
|
||||
<div class="container text-center">
|
||||
<span class="">Created By ItIsGood.com</span>
|
||||
</div>
|
||||
<div class="container text-center">
|
||||
<span class="">Created By ItIsGood.com</span>
|
||||
</div>
|
||||
</footer>
|
||||
<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 %}
|
||||
</body>
|
||||
</html>
|
||||
@ -1,8 +1,8 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block body %}
|
||||
<div class="mt-5 container">
|
||||
<div class="mt-5 container">
|
||||
<h1>{{ error_code }}</h1>
|
||||
<p>{{ error_msg }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@ -1,66 +1,61 @@
|
||||
{% 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">
|
||||
<main class="container-fluid">
|
||||
<h1 class="text-center">Quiz The Word</h1>
|
||||
<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">
|
||||
<p id="easy-question">{{ easy.question_text }}</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>
|
||||
<h5 id="easy-question">{{ easy.question_text }}</h5>
|
||||
<button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>
|
||||
<p id="easy-answer" class="d-none 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>
|
||||
<div id="medium-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
|
||||
<div class="card question-text">
|
||||
<p id="medium-question">{{ medium.question_text }}</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>
|
||||
<h5 id="medium-question">{{ medium.question_text }}</h5>
|
||||
<button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>
|
||||
<p id="medium-answer" class="d-none 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>
|
||||
<div id="hard-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
|
||||
<div class="card question-text">
|
||||
<p id="hard-question">{{ hard.question_text }}</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>
|
||||
<h5 id="hard-question">{{ hard.question_text }}</h5>
|
||||
<button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>
|
||||
<p id="hard-answer" class="d-none answer">{{ hard.answer }}</p>
|
||||
<div id="hard-bible-verses">{{ hard.addresses }}</div>
|
||||
</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>
|
||||
|
||||
<ul class="nav nav-pills justify-content-center mt-2" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="home-tab" data-bs-toggle="pill" data-bs-target="#easy-question"
|
||||
type="button" role="tab" aria-controls="easy" aria-selected="true">Easy
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="profile-tab" data-bs-toggle="pill" data-bs-target="#medium-question" type="button"
|
||||
role="tab" aria-controls="medium" aria-selected="false">Medium
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<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 %}
|
||||
|
||||
{% 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>
|
||||
<script>
|
||||
function showAnswer() {
|
||||
$(".question:visible").find(".answer").removeClass("d-none");
|
||||
$(".show-answer:visible").css("display", "none");
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,94 +1,91 @@
|
||||
{% 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">
|
||||
<main class="container-fluid">
|
||||
<h1 class="text-center">Quiz The Word</h1>
|
||||
<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">
|
||||
<p id="easy-question">{{ easy.question_text }}</p>
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
<h5 id="easy-question">{{ easy.question_text }}</h5>
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div id="medium-question" class="container-md align-content-center question" style="display: none">
|
||||
</div>
|
||||
<div id="medium-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
|
||||
<div class="card question-text">
|
||||
<p id="medium-question">{{ medium.question_text }}</p>
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
<h5 id="medium-question">{{ medium.question_text }}</h5>
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div id="hard-question" class="container-md align-content-center question" style="display: none">
|
||||
</div>
|
||||
<div id="hard-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
|
||||
<div class="card question-text">
|
||||
<p id="hard-question">{{ hard.question_text }}</p>
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
<h5 id="hard-question">{{ hard.question_text }}</h5>
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
</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>
|
||||
<ul class="nav nav-pills justify-content-center mt-2" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="home-tab" data-bs-toggle="pill" data-bs-target="#easy-question"
|
||||
type="button" role="tab" aria-controls="easy" aria-selected="true">Easy
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="profile-tab" data-bs-toggle="pill" data-bs-target="#medium-question" type="button"
|
||||
role="tab" aria-controls="medium" aria-selected="false">Medium
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<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 %}
|
||||
|
||||
{% 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 checkAnswer(question_id, button_index, answer) {
|
||||
let loading_spinner = $("<div>")
|
||||
.attr("id", "check-answer")
|
||||
.addClass("text-center")
|
||||
.text("Checking answer")
|
||||
.append($("<div>")
|
||||
.addClass("spinner-border thin-border ml-1")
|
||||
.attr("role", "status"));
|
||||
$(".question-text:visible").append(loading_spinner);
|
||||
$(`button[id*='${question_id}']`).attr("disabled", true);
|
||||
$.ajax(`{{ url_for("check_answer") }}?question_id=${question_id}&answer=${answer}`,{
|
||||
method: "GET",
|
||||
datatype: "json",
|
||||
success: (data) => {
|
||||
$("#check-answer").remove();
|
||||
if (data[0] === true) {
|
||||
console.log("answer correct");
|
||||
$("#"+question_id+"-"+button_index).addClass("btn-success");
|
||||
} else {
|
||||
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>
|
||||
<script>
|
||||
function checkAnswer(question_id, button_index, answer) {
|
||||
let loading_spinner = $("<div>")
|
||||
.attr("id", "check-answer")
|
||||
.addClass("text-center")
|
||||
.text("Checking answer")
|
||||
.append($("<div>")
|
||||
.addClass("spinner-border thin-border ml-1")
|
||||
.attr("role", "status"));
|
||||
$(".question-text:visible").append(loading_spinner);
|
||||
$(`button[id*='${question_id}']`).attr("disabled", true);
|
||||
$.ajax(`{{ url_for("check_answer") }}?question_id=${question_id}&answer=${answer}`, {
|
||||
method: "GET",
|
||||
datatype: "json",
|
||||
success: (data) => {
|
||||
$("#check-answer").remove();
|
||||
if (data[0] === true) {
|
||||
console.log("answer correct");
|
||||
$("#" + question_id + "-" + button_index).addClass("btn-success");
|
||||
} else {
|
||||
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 %}
|
||||
|
||||
@ -1,22 +1,26 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% 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">
|
||||
{{ login_user_form.hidden_tag() }}
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" name="email" type="email" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input id="password" name="password" type="password" class="form-control">
|
||||
</div>
|
||||
<div class="form-group custom-control custom-checkbox">
|
||||
<input id="remember" name="remember" type="checkbox" class="custom-control-input">
|
||||
<label class="custom-control-label" for="remember">Remember me</label>
|
||||
</div>
|
||||
<button id="submit" name="submit" type="submit" class="btn btn-primary">Submit</button>
|
||||
{{ login_user_form.hidden_tag() }}
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" name="email" type="email" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input id="password" name="password" type="password" class="form-control">
|
||||
</div>
|
||||
<div class="form-group custom-control custom-checkbox">
|
||||
<input id="remember" name="remember" type="checkbox" class="custom-control-input">
|
||||
<label class="custom-control-label" for="remember">Remember me</label>
|
||||
</div>
|
||||
<button id="submit" name="submit" type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@ -1,22 +1,26 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% 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">
|
||||
{{ register_user_form.hidden_tag() }}
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" name="email" type="email" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input id="password" name="password" type="password" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password_confirm">Retype Password</label>
|
||||
<input id="password_confirm" name="password_confirm" type="password" class="form-control">
|
||||
</div>
|
||||
<button id="submit" name="submit" type="submit" class="btn btn-primary">Register</button>
|
||||
{{ register_user_form.hidden_tag() }}
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" name="email" type="email" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input id="password" name="password" type="password" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password_confirm">Retype Password</label>
|
||||
<input id="password_confirm" name="password_confirm" type="password" class="form-control">
|
||||
</div>
|
||||
<button id="submit" name="submit" type="submit" class="btn btn-primary">Register</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue
Block a user