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)) \
.order_by(SQL("RAND()")).limit(3)
for site in query:
print(site)
sites.append(site)
print(len(sites))
shuffle(sites)
else:
sites = None
@ -108,21 +106,23 @@ def quiz(difficulty):
return render_template(
"quiz.html",
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,
choices=sites
)
@app.route("/api/quiz/<int:id>/<string:guess>", methods=["POST"])
def quiz_api(id, guess):
@app.route("/api/quiz/<int:id>/<string:guess>/<string:difficulty>", methods=["POST"])
def quiz_api(id, guess, difficulty):
if difficulty not in ["easy", "hard"]:
return abort(404)
if "quiz" not in session:
session["quiz"] = {"total": 0, "correct": 0}
session["quiz"]["total"] += 1
session["quiz"] = {"easy": {"total": 0, "correct": 0}, "hard": {"total": 0, "correct": 0}}
session["quiz"][difficulty]["total"] += 1
query = Question.select(Site).join(Site).where(Question.id == id).get()
if guess == query.site.url:
correct = True
session["quiz"]["correct"] += 1
session["quiz"][difficulty]["correct"] += 1
else:
correct = False
return jsonify({"site": model_to_dict(query)["site"], "correct": correct})

2
templates/base.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="de">
<html lang="de" class="{% block extraclasses %}{% endblock %}">
<head>
<meta name="robots" content="noindex, nofollow">
<title>{% block title %}Stackexchange Simulator{% endblock %}</title>

20
templates/list.html
View file

@ -3,14 +3,20 @@
{% block body %}
{{ siteheader(site) }}
<div class="filterwrapper">
<label class="label-inline" for="siteselector">Seite</label>
<input id="siteselector" class="awesomplete" value="{{ site.url if not site.fallback }}" data-mode="filter"/>
<div id="filterwrapper"
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" 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>
{% 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) }}
{% for question in questions %}
{% set vote=voted[("question", question.id)] %}

27
templates/quiz.html
View file

@ -2,12 +2,39 @@
{% block title %}
Stackexchange Simulator Quiz - {{ question.title.text }}
{% endblock %}
{% block extraclasses %}quiz{% endblock %}
{% block body %}
<header>
<h1>Stackexchange Simulator Quiz</h1>
</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" %}
<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;
check.disabled = true;
} 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;
});
}
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 () {
if (this.status >= 200 && this.status < 400) {

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

@ -30,7 +30,7 @@
list-style: none;
padding: 0;
margin: 0;
background: #fff;
background: inherit;
}
.awesomplete > ul:empty {

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

@ -5,6 +5,7 @@
@import "awesomplete.base";
.awesomplete {
background: inherit;
> ul {
padding: 1rem 1rem 0;
margin: .2em 0 0;
@ -40,7 +41,7 @@
width: 0;
height: 0;
padding: .4em;
background: white;
background: inherit;
border: inherit;
border-right: 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;
$link-hover-color: #3af;
$mobile-break-point: 500px;
@import "variables";
@mixin mobile-only() {
@media (max-width: $mobile-break-point) {
@ -128,7 +126,7 @@ h2 {
}
.siteheader {
background: #ebf2f5;
background: $stackexchange-blue;
transition: background-color .3s, color .3s;
display: flex;
height: 50px;
@ -170,10 +168,12 @@ h2 {
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
button.selection {
opacity: 1;
}
}
button {
height: 32px;
background-color: lightgray;
color: #606c76;
border: none;
@ -183,6 +183,18 @@ button {
background-color: lightgray;
color: #606c76;
}
&:disabled {
&:hover, &:active, &:focus {
background-color: lightgray;
color: #606c76;
opacity: 0.5;
}
}
}
#check {
height: 32px;
line-height: 32px;
}
#result {
@ -234,3 +246,94 @@ footer {
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;
}
}
}