diff --git a/server.py b/server.py index 679faf3..598a728 100644 --- a/server.py +++ b/server.py @@ -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//", methods=["POST"]) -def quiz_api(id, guess): +@app.route("/api/quiz///", 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}) diff --git a/templates/base.html b/templates/base.html index d8e36cc..050a423 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,5 +1,5 @@ - + {% block title %}Stackexchange Simulator{% endblock %} diff --git a/templates/list.html b/templates/list.html index adebabf..803c17f 100644 --- a/templates/list.html +++ b/templates/list.html @@ -3,14 +3,20 @@ {% block body %} {{ siteheader(site) }} -
- - +
+ + {% if not site.fallback %} + Clear + {% endif %} +
+ - {% if not site.fallback %} - - Clear filter - {% 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)] %} diff --git a/templates/quiz.html b/templates/quiz.html index 5de88bd..3b2451d 100644 --- a/templates/quiz.html +++ b/templates/quiz.html @@ -2,12 +2,39 @@ {% block title %} Stackexchange Simulator Quiz - {{ question.title.text }} {% endblock %} +{% block extraclasses %}quiz{% endblock %} {% block body %}

Stackexchange Simulator Quiz

+ {% if stats.correct <3 %} +
+

Tutorial:

+

Guess which of the Stack Exchange sites this question could belong to.

+ {% if difficulty=="easy" %} +

There are four possible answers below.

+

Press Next to get to the next Question.

+

+ If you think this is too easy, you can try out + the hard quiz + which doesn't have possible answers. +

+ {% else %} +

+ Then enter your guess into the textbox below, select the website + and click on check to confirm your guess. +

+

Alternativly you can select a site with the arrow keys and press enter twice to confirm it.

+

+ If you think this is too hard, you can try out + the easy quiz + which does have possible answers to choose from. +

+ {% endif %} +
+ {% endif %} {% if difficulty=="easy" %}
diff --git a/web/milligram b/web/milligram index 0fde381..387b453 160000 --- a/web/milligram +++ b/web/milligram @@ -1 +1 @@ -Subproject commit 0fde381605c1159f39efb5c33c9600331fec4e2e +Subproject commit 387b453effd202c201ed30506ff602747e5901ed diff --git a/web/static/js/app.js b/web/static/js/app.js index 3bc53cd..b5632e7 100644 --- a/web/static/js/app.js +++ b/web/static/js/app.js @@ -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) { diff --git a/web/static/sass/_awesomplete.base.scss b/web/static/sass/_awesomplete.base.scss index ce4f4de..711699a 100644 --- a/web/static/sass/_awesomplete.base.scss +++ b/web/static/sass/_awesomplete.base.scss @@ -30,7 +30,7 @@ list-style: none; padding: 0; margin: 0; - background: #fff; + background: inherit; } .awesomplete > ul:empty { diff --git a/web/static/sass/_awesomplete.custom.scss b/web/static/sass/_awesomplete.custom.scss index 46c7ceb..a60217b 100644 --- a/web/static/sass/_awesomplete.custom.scss +++ b/web/static/sass/_awesomplete.custom.scss @@ -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; diff --git a/web/static/sass/_variables.scss b/web/static/sass/_variables.scss index e69de29..f000d2c 100644 --- a/web/static/sass/_variables.scss +++ b/web/static/sass/_variables.scss @@ -0,0 +1,4 @@ +$link-color: #07C; +$link-hover-color: #3af; +$mobile-break-point: 500px; +$stackexchange-blue: #ebf2f5; diff --git a/web/static/sass/style.scss b/web/static/sass/style.scss index 45cb7fa..fa9766a 100644 --- a/web/static/sass/style.scss +++ b/web/static/sass/style.scss @@ -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; + } + } +}