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

Refactor to remove duplication in question views

Browse Source
This commit is contained in:
Matthew Welch 2021-08-29 18:56:29 -07:00
parent 24bebab6b8
commit 965cd99aeb
4 changed files with 136 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
QuizTheWord/app.py
View File

@ -53,11 +53,8 @@ def hidden_answer_category():
@app.route("/category/multiple_choice")
def multiple_choice_category():
easy = database.get_random_multiple_choice(1)
easy.randomize_answer_list()
medium = database.get_random_multiple_choice(2)
medium.randomize_answer_list()
hard = database.get_random_multiple_choice(3)
hard.randomize_answer_list()
return render_template(
"multiple_choice.html",
title="Multiple Choice",

17
QuizTheWord/database.py
View File

@ -154,6 +154,9 @@ class HiddenAnswer(Base):
"question_id": self.question_id,
"difficulty": self.hidden_answer_difficulty,
"hint": self.hidden_answer_hint,
"question_text": self.question_text,
"answer": self.answer,
"addresses": self.addresses,
}
@ -192,6 +195,20 @@ class MultipleChoice(Base):
"difficulty": self.multiple_choice_difficulty,
"hint": self.multiple_choice_hint,
"wrong_answers": self.wrong_answers,
"question_text": self.question_text,
"answer": self.answer,
"addresses": self.addresses,
}
def get_dict_shuffled_choices(self):
self.randomize_answer_list()
return {
"question_id": self.question_id,
"difficulty": self.multiple_choice_difficulty,
"hint": self.multiple_choice_hint,
"question_text": self.question_text,
"addresses": self.addresses,
"answer_list": self.answer_list,
}

88
QuizTheWord/templates/hidden_answer.html
View File

@ -3,47 +3,28 @@
{% block body %}
<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">
<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="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
<div class="card question-text">
<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="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
<div class="card question-text">
<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 class="row justify-content-center">
<div class="col-md col-lg-7 align-content-center question">
<div class="card question-content">
<h5 id="question-text"></h5>
<button id="btn-show-answer" class="btn btn-secondary show-answer">Show Answer</button>
<p id="question-answer" class="d-none answer"></p>
<div id="bible-verses"></div>
</div>
</div>
</div>
<ul class="nav nav-pills justify-content-center mt-2" id="myTab" role="tablist">
<ul class="nav nav-pills justify-content-center mt-2">
<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 class="nav-link active difficulty-selection" id="btn-show-easy" type="button" 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 class="nav-link difficulty-selection" id="btn-show-medium" type="button" 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 class="nav-link difficulty-selection" id="btn-show-hard" type="button" aria-controls="hard" aria-selected="false">Hard
</button>
</li>
</ul>
@ -53,9 +34,52 @@
{% block scripts %}
<script>
let questions = [
{{ easy.get_dict()|tojson }},
{{ medium.get_dict()|tojson }},
{{ hard.get_dict()|tojson }},
];
let difficulty_selection = $(".difficulty-selection");
let btn_show_answer = $("#btn-show-answer");
let question_answer = $("#question-answer");
let current_difficulty = 1;
change_difficulty(current_difficulty);
difficulty_selection.on("click", (event) => {
difficulty_selection.removeClass("active");
let target = $(event.target);
target.addClass("active");
if (target.prop("innerText") === "Easy") {
current_difficulty = 1;
} else if (target.prop("innerText") === "Medium") {
current_difficulty = 2;
} else {
current_difficulty = 3;
}
change_difficulty(current_difficulty);
})
btn_show_answer.on("click", showAnswer);
function change_difficulty(difficulty) {
let question = questions[difficulty-1];
if (question["answer_visible"]) {
btn_show_answer.css("display", "none");
question_answer.removeClass("d-none");
} else {
btn_show_answer.css("display", "block");
question_answer.addClass("d-none");
}
$("#question-text").text(question["question_text"]);
question_answer.text(question["answer"]);
$("#bible-verses").text(question["addresses"]);
}
function showAnswer() {
$(".question:visible").find(".answer").removeClass("d-none");
$(".show-answer:visible").css("display", "none");
questions[current_difficulty-1]["answer_visible"] = true;
question_answer.removeClass("d-none");
btn_show_answer.css("display", "none");
}
</script>
{% endblock %}

98
QuizTheWord/templates/multiple_choice.html
View File

@ -3,50 +3,26 @@
{% block body %}
<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">
<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="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
<div class="card question-text">
<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="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
<div class="card question-text">
<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 class="row justify-content-center">
<div class="col-md col-lg-7 align-content-center question">
<div class="card question-content">
<h5 id="question-text"></h5>
<div id="question-choices" class="list-group"></div>
</div>
</div>
</div>
<ul class="nav nav-pills justify-content-center mt-2" id="myTab" role="tablist">
<ul class="nav nav-pills justify-content-center mt-2">
<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 class="nav-link active difficulty-selection" id="btn-show-easy" type="button" 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 class="nav-link difficulty-selection" id="btn-show-medium" type="button" 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 class="nav-link difficulty-selection" id="btn-show-hard" type="button" aria-controls="hard" aria-selected="false">Hard
</button>
</li>
</ul>
@ -56,7 +32,59 @@
{% block scripts %}
<script>
let questions = [
{{ easy.get_dict_shuffled_choices()|tojson }},
{{ medium.get_dict_shuffled_choices()|tojson }},
{{ hard.get_dict_shuffled_choices()|tojson }},
];
let difficulty_selection = $(".difficulty-selection");
let current_difficulty = 1;
change_difficulty(current_difficulty);
difficulty_selection.on("click", (event) => {
difficulty_selection.removeClass("active");
let target = $(event.target);
target.addClass("active");
if (target.prop("innerText") === "Easy") {
current_difficulty = 1;
} else if (target.prop("innerText") === "Medium") {
current_difficulty = 2;
} else {
current_difficulty = 3;
}
change_difficulty(current_difficulty);
})
function change_difficulty(difficulty) {
let question = questions[difficulty-1];
$("#question-text").text(question["question_text"]);
$("#bible-verses").text(question["addresses"]);
$("#question-choices").empty();
for (let i=0; i< question["answer_list"].length; i++) {
let btn = $("<button>")
.attr("id", question["question_id"]+"-"+i)
.addClass("btn btn-secondary m-1")
.text(question["answer_list"][i])
.on("click", () => {
checkAnswer(question["question_id"], i, question["answer_list"][i]);
});
if (question.hasOwnProperty("chosen_answer")) {
btn.attr("disabled", true);
if (question["correct_answer"] === i) {
btn.addClass("btn-success");
}
if (question["chosen_answer"] !== question["correct_answer"] && question["chosen_answer"] === i) {
btn.addClass("btn-danger");
}
}
$("#question-choices").append(btn);
}
}
function checkAnswer(question_id, button_index, answer) {
let question = questions[current_difficulty-1];
question["chosen_answer"] = button_index;
let loading_spinner = $("<div>")
.attr("id", "check-answer")
.addClass("text-center")
@ -72,14 +100,14 @@
success: (data) => {
$("#check-answer").remove();
if (data[0] === true) {
console.log("answer correct");
question["correct_answer"] = button_index
$("#" + 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]) {
question["correct_answer"] = i;
element.addClass("btn-success");
}
})