mirror of
https://github.com/Findus23/se-simulator.git
synced 2024-09-19 15:53:45 +02:00
implement quiz
This commit is contained in:
Lukas Winkler
parent
49f2ec65ba
commit
c214508ee7
4 changed files with 198 additions and 9 deletions
17
server.py
17
server.py
|
|
@ -87,10 +87,25 @@ def quiz():
|
|||
print('{} ms'.format((time2 - time1) * 1000.0))
|
||||
return render_template(
|
||||
"quiz.html",
|
||||
question=question
|
||||
question=question,
|
||||
stats=session["quiz"] if "quiz" in session else {"total": 0, "correct": 0}
|
||||
)
|
||||
|
||||
|
||||
@app.route("/api/quiz/<int:id>/<string:guess>", methods=["POST"])
|
||||
def quiz_api(id, guess):
|
||||
if "quiz" not in session:
|
||||
session["quiz"] = {"total": 0, "correct": 0}
|
||||
session["quiz"]["total"] += 1
|
||||
query = Question.select(Site).join(Site).where(Question.id == id).get()
|
||||
if guess == query.site.url:
|
||||
correct = True
|
||||
session["quiz"]["correct"] += 1
|
||||
else:
|
||||
correct = False
|
||||
return jsonify({"site": model_to_dict(query)["site"], "correct": correct})
|
||||
|
||||
|
||||
@app.route('/api/sites')
|
||||
def sites():
|
||||
sites = Site.select().where(Site.last_download.is_null(False))
|
||||
|
|
|
|||
|
|
@ -1,12 +1,40 @@
|
|||
{% extends "base.html" %}
|
||||
{% block body %}
|
||||
|
||||
<input id="siteselector" class="awesomplete" data-mode="quiz"/>
|
||||
<button id="check">Check</button>
|
||||
<header>
|
||||
<h1>Stackexchange-Quiz</h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="quizselector">
|
||||
<input title="guess the correct site" id="siteselector" data-mode="quiz" data-id="{{ question.id }}"
|
||||
autocomplete='off'>
|
||||
<button id="check">Check</button>
|
||||
</div>
|
||||
<div id="result">
|
||||
<div id="correct">
|
||||
Correct!
|
||||
</div>
|
||||
<div id="incorrect">
|
||||
Incorrect!
|
||||
</div>
|
||||
</div>
|
||||
<div id="stats">
|
||||
<div>Total<br><span>{{ stats.total }}</span></div>
|
||||
<div>Correct<br><span>{{ stats.correct }}</span></div>
|
||||
<div>Ratio<br><span>{{ '%d' | format((stats.correct / stats.total * 100) if stats.correct > 0 else 0) }}</span>%</div>
|
||||
<button id="retry">Retry</button>
|
||||
</div>
|
||||
|
||||
<header class="siteheader"
|
||||
style="">
|
||||
</header>
|
||||
|
||||
|
||||
<h1>{{ question.title.text }}</h1>
|
||||
<div class="content question">
|
||||
<div class="vote">
|
||||
<div class="vote" data-id="{{ question.id }}" data-type="question">
|
||||
<a class="up"></a>
|
||||
<div>{{ question.upvotes - question.downvotes }}</div>
|
||||
<a class="down"></a>
|
||||
|
|
|
|||
|
|
@ -27,6 +27,45 @@ document.addEventListener("DOMContentLoaded", function (event) {
|
|||
});
|
||||
});
|
||||
var input = document.getElementById("siteselector");
|
||||
var check = document.getElementById("check");
|
||||
var header = document.getElementsByClassName("siteheader")[0];
|
||||
var retry = document.getElementById("retry");
|
||||
var selectedSite, headerimg, headertitle, entered;
|
||||
|
||||
function toast(type, message) {
|
||||
console.warn(type, message)
|
||||
}
|
||||
|
||||
function checkQuiz(selection, id) {
|
||||
console.info(selection, id);
|
||||
input.disabled = true;
|
||||
check.disabled = true;
|
||||
var request = new XMLHttpRequest();
|
||||
request.open("POST", "/api/quiz/" + id + "/" + selection.url, true);
|
||||
|
||||
request.onload = function () {
|
||||
if (this.status >= 200 && this.status < 400) {
|
||||
var resp = JSON.parse(this.response);
|
||||
console.log(resp.correct);
|
||||
headertitle.innerText = resp.site.name;
|
||||
headerimg.src = resp.site.icon_url;
|
||||
header.style.backgroundColor = resp.site.tag_background_color;
|
||||
header.style.color = resp.site.link_color;
|
||||
var result = document.getElementById(resp.correct ? "correct" : "incorrect");
|
||||
result.style.display = "block";
|
||||
retry.focus()
|
||||
} else {
|
||||
// We reached our target server, but it returned an error
|
||||
|
||||
}
|
||||
};
|
||||
request.onerror = function () {
|
||||
// There was a connection error of some sort
|
||||
};
|
||||
request.send();
|
||||
|
||||
}
|
||||
|
||||
if (input) {
|
||||
var mode = input.dataset.mode;
|
||||
var request = new XMLHttpRequest();
|
||||
|
|
@ -52,18 +91,37 @@ document.addEventListener("DOMContentLoaded", function (event) {
|
|||
minChars: 0,
|
||||
autoFirst: true
|
||||
});
|
||||
if (mode === "quiz") {
|
||||
console.log(input);
|
||||
input.focus()
|
||||
}
|
||||
input.addEventListener("awesomplete-select", function (event) {
|
||||
if (!(event.text.value in resp)) { // shouldn't happen
|
||||
return false
|
||||
}
|
||||
var selectedSite = resp[event.text.value];
|
||||
selectedSite = resp[event.text.value];
|
||||
|
||||
if (mode === "filter") {
|
||||
window.location.href = "/s/" + selectedSite.url
|
||||
} else if (mode === "quiz") {
|
||||
console.log(selectedSite);
|
||||
}
|
||||
input.focus();
|
||||
|
||||
entered = true;
|
||||
console.log(selectedSite);
|
||||
check.style.backgroundColor = selectedSite.tag_background_color;
|
||||
header.style.backgroundColor = selectedSite.tag_background_color;
|
||||
check.style.color = selectedSite.link_color;
|
||||
header.style.color = selectedSite.link_color;
|
||||
while (header.firstChild) {
|
||||
header.removeChild(header.firstChild);
|
||||
}
|
||||
headerimg = new Image(30, 30);
|
||||
headerimg.src = selectedSite.icon_url;
|
||||
headertitle = document.createElement('span');
|
||||
headertitle.innerText = selectedSite.name + "?";
|
||||
header.appendChild(headerimg);
|
||||
header.appendChild(headertitle);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// We reached our target server, but it returned an error
|
||||
|
|
@ -74,6 +132,36 @@ document.addEventListener("DOMContentLoaded", function (event) {
|
|||
// There was a connection error of some sort
|
||||
};
|
||||
request.send();
|
||||
if (mode === "quiz") {
|
||||
var handler = function (event) {
|
||||
// event.preventDefault();
|
||||
if (event.keyCode === 13 && entered) {
|
||||
checkQuiz(selectedSite, input.dataset.id);
|
||||
input.removeEventListener("keydown", handler, false)
|
||||
}
|
||||
};
|
||||
input.addEventListener("keydown", handler);
|
||||
input.addEventListener("input", function () {
|
||||
entered = false
|
||||
});
|
||||
check.addEventListener("click", function () {
|
||||
if (entered) {
|
||||
checkQuiz(selectedSite, input.dataset.id);
|
||||
|
||||
} else {
|
||||
toast("warning", "please select a site")
|
||||
}
|
||||
});
|
||||
retry.addEventListener("click", function () {
|
||||
window.location.reload(true);
|
||||
});
|
||||
retry.addEventListener("click", function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
window.location.reload(true);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ pre > code {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 15px 5px 15px;
|
||||
&:not(.question){
|
||||
&:not(.question) {
|
||||
border-bottom: solid lightgray 1px;
|
||||
}
|
||||
border-right: solid 10px transparent;
|
||||
|
|
@ -104,10 +104,14 @@ h1, h2 {
|
|||
margin-top: 10px;
|
||||
color: inherit;
|
||||
}
|
||||
h2 {font-size: 18px}
|
||||
|
||||
h2 {
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.siteheader {
|
||||
background: #ebf2f5;
|
||||
transition: background-color .3s, color .3s;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
|
|
@ -116,3 +120,57 @@ h2 {font-size: 18px}
|
|||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.quizselector {
|
||||
margin: 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
> .awesomplete {
|
||||
margin-right: 5px;
|
||||
width: 70%;
|
||||
input {
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
height: 32px;
|
||||
background-color: lightgray;
|
||||
color: #606c76;
|
||||
border: none;
|
||||
transition: opacity .3s;
|
||||
&:hover, &:focus {
|
||||
opacity: .6;
|
||||
background-color: lightgray;
|
||||
color: #606c76;
|
||||
}
|
||||
}
|
||||
|
||||
#result {
|
||||
> div {
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#correct {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
#incorrect {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
#stats {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue