mirror/se-simulator
1
0
Fork 0
mirror of https://github.com/Findus23/se-simulator.git synced 2024-09-19 15:53:45 +02:00
Code Releases Activity

many style improvements

Browse source
This commit is contained in:
Lukas Winkler 2018-04-13 21:28:25 +02:00
parent c2719d0183
commit 8c59baaa13
10 changed files with 170 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
server.py
View file

@ -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})

2
templates/base.html
View file

@ -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>

20
templates/list.html
View file

@ -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 }}"
data-mode="filter" title="filter by page" placeholder="filter by page"
style="" type="search"/>
{% if not site.fallback %}
<a href="{{ url_for("index") }}" class="clear"><span>Clear</span></a>
{% 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> </div>
{% if not site.fallback %}
<a href="{{ url_for("index") }}">Clear filter</a>
{% endif %}
{{ 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)] %}

27
templates/quiz.html
View file

@ -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 }}">

2
web/milligram

@ -1 +1 @@
Subproject commit 0fde381605c1159f39efb5c33c9600331fec4e2e Subproject commit 387b453effd202c201ed30506ff602747e5901ed

7
web/static/js/app.js
View file

@ -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) {

2
web/static/sass/_awesomplete.base.scss
View file

@ -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 {

3
web/static/sass/_awesomplete.custom.scss
View file

@ -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;

4
web/static/sass/_variables.scss
View file

@ -0,0 +1,4 @@
$link-color: #07C;
$link-hover-color: #3af;
$mobile-break-point: 500px;
$stackexchange-blue: #ebf2f5;

113
web/static/sass/style.scss
View file

@ -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;
}
}
}