mirror of
https://github.com/Findus23/se-simulator.git
synced 2024-09-19 15:53:45 +02:00
many style improvements
This commit is contained in:
parent
c2719d0183
commit
8c59baaa13
10 changed files with 170 additions and 26 deletions
16
server.py
16
server.py
|
@ -97,9 +97,7 @@ def quiz(difficulty):
|
||||||
query = Site.select().where((Site.last_download.is_null(False)) & (Site.id != question.site.id)) \
|
query = Site.select().where((Site.last_download.is_null(False)) & (Site.id != question.site.id)) \
|
||||||
.order_by(SQL("RAND()")).limit(3)
|
.order_by(SQL("RAND()")).limit(3)
|
||||||
for site in query:
|
for site in query:
|
||||||
print(site)
|
|
||||||
sites.append(site)
|
sites.append(site)
|
||||||
print(len(sites))
|
|
||||||
shuffle(sites)
|
shuffle(sites)
|
||||||
else:
|
else:
|
||||||
sites = None
|
sites = None
|
||||||
|
@ -108,21 +106,23 @@ def quiz(difficulty):
|
||||||
return render_template(
|
return render_template(
|
||||||
"quiz.html",
|
"quiz.html",
|
||||||
question=question,
|
question=question,
|
||||||
stats=session["quiz"] if "quiz" in session else {"total": 0, "correct": 0},
|
stats=session["quiz"][difficulty] if "quiz" in session else {"total": 0, "correct": 0},
|
||||||
difficulty=difficulty,
|
difficulty=difficulty,
|
||||||
choices=sites
|
choices=sites
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
@app.route("/api/quiz/<int:id>/<string:guess>", methods=["POST"])
|
@app.route("/api/quiz/<int:id>/<string:guess>/<string:difficulty>", methods=["POST"])
|
||||||
def quiz_api(id, guess):
|
def quiz_api(id, guess, difficulty):
|
||||||
|
if difficulty not in ["easy", "hard"]:
|
||||||
|
return abort(404)
|
||||||
if "quiz" not in session:
|
if "quiz" not in session:
|
||||||
session["quiz"] = {"total": 0, "correct": 0}
|
session["quiz"] = {"easy": {"total": 0, "correct": 0}, "hard": {"total": 0, "correct": 0}}
|
||||||
session["quiz"]["total"] += 1
|
session["quiz"][difficulty]["total"] += 1
|
||||||
query = Question.select(Site).join(Site).where(Question.id == id).get()
|
query = Question.select(Site).join(Site).where(Question.id == id).get()
|
||||||
if guess == query.site.url:
|
if guess == query.site.url:
|
||||||
correct = True
|
correct = True
|
||||||
session["quiz"]["correct"] += 1
|
session["quiz"][difficulty]["correct"] += 1
|
||||||
else:
|
else:
|
||||||
correct = False
|
correct = False
|
||||||
return jsonify({"site": model_to_dict(query)["site"], "correct": correct})
|
return jsonify({"site": model_to_dict(query)["site"], "correct": correct})
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de" class="{% block extraclasses %}{% endblock %}">
|
||||||
<head>
|
<head>
|
||||||
<meta name="robots" content="noindex, nofollow">
|
<meta name="robots" content="noindex, nofollow">
|
||||||
<title>{% block title %}Stackexchange Simulator{% endblock %}</title>
|
<title>{% block title %}Stackexchange Simulator{% endblock %}</title>
|
||||||
|
|
|
@ -3,14 +3,20 @@
|
||||||
{% block body %}
|
{% block body %}
|
||||||
{{ siteheader(site) }}
|
{{ siteheader(site) }}
|
||||||
|
|
||||||
<div class="filterwrapper">
|
<div id="filterwrapper"
|
||||||
<label class="label-inline" for="siteselector">Seite</label>
|
style="background-color: {{ site.background_color }}; color: {{ site.foreground_color }}">
|
||||||
<input id="siteselector" class="awesomplete" value="{{ site.url if not site.fallback }}" data-mode="filter"/>
|
<input id="siteselector" class="awesomplete" value="{{ site.url if not site.fallback }}"
|
||||||
</div>
|
data-mode="filter" title="filter by page" placeholder="filter by page"
|
||||||
|
style="" type="search"/>
|
||||||
{% if not site.fallback %}
|
{% if not site.fallback %}
|
||||||
|
<a href="{{ url_for("index") }}" class="clear"><span>Clear</span></a>
|
||||||
<a href="{{ url_for("index") }}">Clear filter</a>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div id="quizteaster"
|
||||||
|
style="background-color: {{ site.background_color }}; color: {{ site.foreground_color }}">
|
||||||
|
<a href="{{ url_for("quiz", difficulty="easy") }}">Easy Quiz</a>
|
||||||
|
<a href="{{ url_for("quiz", difficulty="hard") }}">Hard Quiz</a>
|
||||||
|
</div>
|
||||||
{{ pagination(pagearray, num_pages, page, site.url if not site.fallback else None, True) }}
|
{{ pagination(pagearray, num_pages, page, site.url if not site.fallback else None, True) }}
|
||||||
{% for question in questions %}
|
{% for question in questions %}
|
||||||
{% set vote=voted[("question", question.id)] %}
|
{% set vote=voted[("question", question.id)] %}
|
||||||
|
|
|
@ -2,12 +2,39 @@
|
||||||
{% block title %}
|
{% block title %}
|
||||||
Stackexchange Simulator Quiz - {{ question.title.text }}
|
Stackexchange Simulator Quiz - {{ question.title.text }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
{% block extraclasses %}quiz{% endblock %}
|
||||||
{% block body %}
|
{% block body %}
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<h1>Stackexchange Simulator Quiz</h1>
|
<h1>Stackexchange Simulator Quiz</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
{% if stats.correct <3 %}
|
||||||
|
<div class="tutorial">
|
||||||
|
<h3>Tutorial:</h3>
|
||||||
|
<p>Guess which of the Stack Exchange sites this question could belong to.</p>
|
||||||
|
{% if difficulty=="easy" %}
|
||||||
|
<p>There are four possible answers below.</p>
|
||||||
|
<p>Press <strong>Next</strong> to get to the next Question.</p>
|
||||||
|
<p>
|
||||||
|
If you think this is too easy, you can try out
|
||||||
|
<a href="{{ url_for("quiz",difficulty="hard") }}">the hard quiz</a>
|
||||||
|
which doesn't have possible answers.
|
||||||
|
</p>
|
||||||
|
{% else %}
|
||||||
|
<p>
|
||||||
|
Then enter your guess into the textbox below, select the website
|
||||||
|
and click on <strong>check</strong> to confirm your guess.
|
||||||
|
</p>
|
||||||
|
<p>Alternativly you can select a site with the arrow keys and press enter twice to confirm it.</p>
|
||||||
|
<p>
|
||||||
|
If you think this is too hard, you can try out
|
||||||
|
<a href="{{ url_for("quiz",difficulty="easy") }}">the easy quiz</a>
|
||||||
|
which does have possible answers to choose from.
|
||||||
|
</p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
{% if difficulty=="easy" %}
|
{% if difficulty=="easy" %}
|
||||||
<div id="quizchoices" data-id="{{ question.id }}">
|
<div id="quizchoices" data-id="{{ question.id }}">
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
Subproject commit 0fde381605c1159f39efb5c33c9600331fec4e2e
|
Subproject commit 387b453effd202c201ed30506ff602747e5901ed
|
|
@ -55,12 +55,15 @@ document.addEventListener("DOMContentLoaded", function (event) {
|
||||||
input.disabled = true;
|
input.disabled = true;
|
||||||
check.disabled = true;
|
check.disabled = true;
|
||||||
} else {
|
} else {
|
||||||
[].forEach.call(choices.childNodes, function (child) {
|
[].forEach.call(choices.children, function (child) {
|
||||||
|
if (selection.url === child.dataset.url) {
|
||||||
|
child.classList.add("selection")
|
||||||
|
}
|
||||||
child.disabled = true;
|
child.disabled = true;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
var request = new XMLHttpRequest();
|
var request = new XMLHttpRequest();
|
||||||
request.open("POST", "/api/quiz/" + id + "/" + selection.url, true);
|
request.open("POST", "/api/quiz/" + id + "/" + selection.url + "/" + (input ? "hard" : "easy"), true);
|
||||||
|
|
||||||
request.onload = function () {
|
request.onload = function () {
|
||||||
if (this.status >= 200 && this.status < 400) {
|
if (this.status >= 200 && this.status < 400) {
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: #fff;
|
background: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.awesomplete > ul:empty {
|
.awesomplete > ul:empty {
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
@import "awesomplete.base";
|
@import "awesomplete.base";
|
||||||
|
|
||||||
.awesomplete {
|
.awesomplete {
|
||||||
|
background: inherit;
|
||||||
> ul {
|
> ul {
|
||||||
padding: 1rem 1rem 0;
|
padding: 1rem 1rem 0;
|
||||||
margin: .2em 0 0;
|
margin: .2em 0 0;
|
||||||
|
@ -40,7 +41,7 @@
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
padding: .4em;
|
padding: .4em;
|
||||||
background: white;
|
background: inherit;
|
||||||
border: inherit;
|
border: inherit;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
$link-color: #07C;
|
||||||
|
$link-hover-color: #3af;
|
||||||
|
$mobile-break-point: 500px;
|
||||||
|
$stackexchange-blue: #ebf2f5;
|
|
@ -1,6 +1,4 @@
|
||||||
$link-color: #07C;
|
@import "variables";
|
||||||
$link-hover-color: #3af;
|
|
||||||
$mobile-break-point: 500px;
|
|
||||||
|
|
||||||
@mixin mobile-only() {
|
@mixin mobile-only() {
|
||||||
@media (max-width: $mobile-break-point) {
|
@media (max-width: $mobile-break-point) {
|
||||||
|
@ -128,7 +126,7 @@ h2 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.siteheader {
|
.siteheader {
|
||||||
background: #ebf2f5;
|
background: $stackexchange-blue;
|
||||||
transition: background-color .3s, color .3s;
|
transition: background-color .3s, color .3s;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
@ -170,10 +168,12 @@ h2 {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
button.selection {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
height: 32px;
|
|
||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
color: #606c76;
|
color: #606c76;
|
||||||
border: none;
|
border: none;
|
||||||
|
@ -183,6 +183,18 @@ button {
|
||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
color: #606c76;
|
color: #606c76;
|
||||||
}
|
}
|
||||||
|
&:disabled {
|
||||||
|
&:hover, &:active, &:focus {
|
||||||
|
background-color: lightgray;
|
||||||
|
color: #606c76;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#check {
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#result {
|
#result {
|
||||||
|
@ -234,3 +246,94 @@ footer {
|
||||||
background-color: rgba(0, 0, 0, 0);
|
background-color: rgba(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#filterwrapper {
|
||||||
|
background-color: $stackexchange-blue;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
input {
|
||||||
|
color: currentColor;
|
||||||
|
background: inherit;
|
||||||
|
border-radius: 0;
|
||||||
|
transition: all .3s;
|
||||||
|
padding: 10px;
|
||||||
|
&:hover, &:focus {
|
||||||
|
background-color: white;
|
||||||
|
color: #606c76;
|
||||||
|
border-color: lightgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.clear {
|
||||||
|
@extend input;
|
||||||
|
padding: 0 10px;
|
||||||
|
display: flex;
|
||||||
|
border: 0.1rem solid #d1d1d1;
|
||||||
|
border-left: none;
|
||||||
|
span {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::placeholder {
|
||||||
|
color: #666
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#quizteaster {
|
||||||
|
display: flex;
|
||||||
|
background-color: $stackexchange-blue;
|
||||||
|
a {
|
||||||
|
border: 1px lightgray;
|
||||||
|
border-top-style: solid;
|
||||||
|
&:first-child {
|
||||||
|
border-right-style: solid;
|
||||||
|
}
|
||||||
|
display: block;
|
||||||
|
flex-basis: 50%;
|
||||||
|
text-align: center;
|
||||||
|
color: inherit;
|
||||||
|
padding: 10px;
|
||||||
|
transition: all .3s;
|
||||||
|
&:hover, &:focus {
|
||||||
|
background-color: white;
|
||||||
|
color: #606c76;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html.quiz {
|
||||||
|
min-height: 100vh;
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tutorial {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 5px;
|
||||||
|
border: solid 1px lightgray;
|
||||||
|
border-right-width: 4px;
|
||||||
|
background-color: #ffffe0;
|
||||||
|
h3 {
|
||||||
|
font-size: 20px
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
strong {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
font-weight: 700;
|
||||||
|
&:hover, &:focus, &:active {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue