Welche Datenstruktur für Multiple-Choice-Fragentrainer

Wenn du dir nicht sicher bist, in welchem der anderen Foren du die Frage stellen sollst, dann bist du hier im Forum für allgemeine Fragen sicher richtig.
Benutzeravatar
Dennis89
User
Beiträge: 1123
Registriert: Freitag 11. Dezember 2020, 15:13

Hallo zusammen,

von der Bundesnetzagentur gibt es einen Fragenkatalog, den muss meine Freundin und ich gerade lernen. Das Problem ist, es ist immer die erste Antwort richtig, das wird bei der Prüfung nicht so sein :D

Naja wortwörtlich hat man mir gesagt "da du den Laptop eh mehr als mich beachtest, könntest du da ja einen Trainer programmieren, so dass die Antworten immer in einer anderen Reihenfolge kommen und dass beim klicken auf eine Antwort erkannt wird, ob es richtig war"

Okay da habe ich schon schlimmere Aufgaben bekommen.🫡
Die Fragen und Antworten konnte ich aus der PDF auslesen und habe sie zur Zeit in Textdateien.

Irgendwie finde ich kein Format, das ich verwenden könnte um die Fragen mit Antworten und irgend einem Hinweis auf die richtige Antwort "ablegen" zu können.
Vom Verständnis her braucht jede Antwort ja die Eigenschaft "richtig" oder "falsch".
Ein Dictonary finde ich nicht richtig, dann wäre die Frage der Schlüssel, die Antworten eine Liste, aber das "richtig" oder "falsch" wäre noch offen.

Mit json habe ich noch nie etwas gemacht, habe mir ein paar Seiten zur Struktur angeschaut, aber bin damit noch nicht richtig warm geworden und kann nicht sagen ob es sich lohnt, das ich mich da einarbeite und die Struktur verwende oder nicht.

Dann ist mir noch eine Datenbank eingefallen, aber auch da weis ich nicht wie ich das mit dem "richtig" und "falsch" machen soll. Das ist vielleicht auch mein größtes Problem. Vielleicht erledigt sich die Struktur von selbst, wenn ich dafür eine Lösung finden würde.
Die richtige Antwort mit einem beliebigen Zeichen markieren und das nicht mit ausgeben, klingt für mich nach einer Bastellösung.

Falls ich es mal schaffen sollte ein Python-Projekt ohne eure Hilfe zu lösen, mache ich ein Thread auf und sag es euch 🤪

Danke schon im voraus für eure Hilfe.

Grüße
Dennis
"When I got the music, I got a place to go" [Rancid, 1993]
Benutzeravatar
sparrow
User
Beiträge: 4164
Registriert: Freitag 17. April 2009, 10:28

Das kannst du sehr simpel bis sher kompliziet lösen - je nachdem wie viel Zeit dun investierne möchtest.
Die Antwort braucht das Flag "richtig" oder "falsch" nicht unbedingt, wenn man das implizit ableiten kann. Und dir stehen ja sowieso alle Python Datenstrukturen zur Verfügung.

Wenn es also simpel sein soll:
Eine Liste mit dicts, jedes dict hat 2 keys. "question" ist die Frage, "answers" ist eine Liste der Anworten, wobei die erste immer richtig ist.
Das lässt sich problemlos nach json dumpen und wieder laden.

Wenn expliziter sein soll:
die richtige Antwort steht in einem extra key "corrent_answer" statt in der "answers" Liste.
Benutzeravatar
Dennis89
User
Beiträge: 1123
Registriert: Freitag 11. Dezember 2020, 15:13

Danke für die schnelle Antwort.
Ich will so wenig Zeit wie möglich investieren. Dann würde ich das mal beispielhaft so versuchen:

Code: Alles auswählen

questions = [
        {"question": "Wie heißt du?", "answers": ["Hans", "Peter"]},
        {"question": "Was machst du morgen?", "answers": ["Arbeiten", "Mehr arbeiten"]},
    ]

for question_to_answers in questions:
    print(question_to_answers['question'])
    print(question_to_answers['answers'])
Gerade als ich schreiben wollte, das ich den Vergleich mit dem ersten Element in der Liste hinbekommen sollte ist mir was eingefallen. Wie war das nochmal, ist die Reihenfolge der Liste fix? Irgendeine Struktur war doch nicht fix.
Das lässt sich problemlos nach json dumpen und wieder laden.
Was hätte ich dadurch denn für einen Vorteil?

Grüße
Dennis
"When I got the music, I got a place to go" [Rancid, 1993]
Benutzeravatar
sparrow
User
Beiträge: 4164
Registriert: Freitag 17. April 2009, 10:28

Die Reihenfolge von Elementen ist fix.

Du kannst die Daten auch in dein Programm schreiben.
Ich würde es voneinander trennen, weil die Daten für mich nichts mit dem Progamm zu tun haben. Sie sind eine Ressource, die geladen und ausgewertet wird.
Und man könnte die Ressource außerhalb des Codes bearbeiten.
Benutzeravatar
Dennis89
User
Beiträge: 1123
Registriert: Freitag 11. Dezember 2020, 15:13

Vielen Dank, dann weis ich Bescheid.
Direkt in den Code will ich die nicht schreiben, dachte vielleicht in eine weitere Datei, die ich dann importiere, aber das mit json versuche ich mal.

Das soll eine Webanwendung werden, jetzt hoffe ich mal dass ich den HTML-Teil irgendwie zügig hinbekomme 🤯

Grüße
Dennis
"When I got the music, I got a place to go" [Rancid, 1993]
Benutzeravatar
Dennis89
User
Beiträge: 1123
Registriert: Freitag 11. Dezember 2020, 15:13

Schönen Sonntag zusammen,

es wäre nett wenn ihr mir noch einmal weiter helfen könnte.
Wie ich die Logik schreiben würde, habe ich bis jetzt im Kopf, aber bevor ich das ausarbeite wollte ich erst mal schauen ob ich die Kommunikation zwischen Python und HTML hinbekomme.
Seit gestern Abend lese ich und probiere aus, bin aber bis jetzt komplett gescheitert.

Mein Plan bis jetzt ist, dass ich die Antworten als Buttons darstelle. Wenn einer gedrückt wird, dann sollte ich laut 100 Stackoverflow-Beiträgen den Button auslesen können, also zum Beispiel 'value'.

In HTML sieht das so aus:

Code: Alles auswählen

    What pet(s) do you have?<br>

    <form action="/button" method="POST">
        <input type="button" value="Schildi" >
    </form>



    <form action="/button" method="POST">
        <input type="button" id=1 value="Hippo" >
    </form>



    <form action="/button" method="POST">
        <input type="button" id=2 value="Katze" >
    </form>


    <form action="/button" method="POST">
        <input type="button" id=3 value="Hund" >
    </form>



{{ message }}
Ich nutze 'flask' und haben dann sowas probiert:

Code: Alles auswählen

@app.route('/button', methods=["POST"])
def button():
    return render_template("post.html", message=request.form['value'])
Meine Erwartung war, dass das 'message' im HTML Code mit dem "Inhalt" des geklickten Buttons gefüllt wird.
Aber es passiert nichts.
Wenn ich den Type des Buttons ins 'submit' ändere, dann erhalte ich im Browser diese Fehlermeldung:

"Bad Request

The browser (or proxy) sent a request that this server could not understand."

Ich bin leider komplett planlos, ob ich da überhaupt auf dem richtigen Weg bin. Es müssen ja keine Buttons sein, ich dachte nur, die könnte man auch am Handy einigermaßen gut treffen.

Ich kann an sich auch kein HTML, verstehe so ein paar Sachen, weil ich es am Rande schon mal etwas gebraucht habe, aber vom können kann man nicht sprechen. Man stolpert auch immer wieder über Antworten mit JavaScript, aber damit hatte ich noch gar keine Berührpunkte. Naja allgemein gefragt: Was soll ich tun?

Konkreter, wenn ihr das mit den Buttons gut findet, wie erhalte ich denn die 'value'-Wert?
Wenn ihr das nicht gut findet oder zu kompliziert, wie wäre es denn besser/einfacher?

Vielen Dank und viele Grüße
Dennis

P.S. Ob ich das Projekt weiter verfolge, wollte ich eigentlich anhand des Fortschrittes bis heute Abend entscheiden. Da ich jetzt noch die Platine mit den Rauchzeichen vermessen muss, verschiebe ich die Entscheidung vermutlich auf morgen Abend.

Wie würde man das denn sinnvoll aufbauen?
"When I got the music, I got a place to go" [Rancid, 1993]
paddie
User
Beiträge: 101
Registriert: Donnerstag 11. Oktober 2018, 18:09

Ich glaub du möchtest zuerst nur einen GET-Request machen, deshalb solltest du den Decorator so ändern:

Code: Alles auswählen

@app.route('/button', methods=['GET', "POST", ])
:geek:
Benutzeravatar
Dennis89
User
Beiträge: 1123
Registriert: Freitag 11. Dezember 2020, 15:13

Danke für deine Antwort, dadurch hat sich leider nichts geändert.

Grüße
Dennis
"When I got the music, I got a place to go" [Rancid, 1993]
Sirius3
User
Beiträge: 17711
Registriert: Sonntag 21. Oktober 2012, 17:20

Wenn Du eine Web-Anwendung schreiben möchtest, solltest Du Dir wenigstens die Grundlagen von HTML aneignen.
Zum Beispiel, wie man Formulare richtig schreibt.
Man verwendet nur ein form-Tag, in das man das ganze Formular schreibt, und natürlich braucht jedes Eingabeelement einen Namen, sonst weiß der Browser ja nicht, wie das Feld heißen soll, das an den Server geschickt wird.
Zum Abschicken des Formulars braucht es Input-Felder vom Typ "submit". Dann sollte es noch ein Feld geben, das die Frage enthält, wie sonst soll der Server wissen, auf was sich die Antwort bezieht.

Code: Alles auswählen

    Welches Haustier lebt bei Dir?
    <form action="/button" method="POST">
        <input type="hidden" name="frage" value="17">
	<input type="submit" name="antwort" value="Schildi">
	<input type="submit" name="antwort" value="Hippo">
	<input type="submit" name="antwort" value="Katze">
	<input type="submit" name="antwort" value="Hund">
    </form>
Benutzeravatar
Dennis89
User
Beiträge: 1123
Registriert: Freitag 11. Dezember 2020, 15:13

Danke für die Antwort.
Sorry das ich erst jetzt antworte, ich hatte noch keine Zeit zum testen, aber musste jetzt doch kurz Bescheid geben, dass ich die Nachricht gelesen habe.

Ich habe gestern Abend noch eine ähnliche Möglichkeit gefunden, bin aber gerade noch am falschen Laptop. Ich melde mich heute Abend oder morgen damit nochmal.

Grüße
Dennis
"When I got the music, I got a place to go" [Rancid, 1993]
Benutzeravatar
Dennis89
User
Beiträge: 1123
Registriert: Freitag 11. Dezember 2020, 15:13

So hier noch mein Nachtrag, hier habe ich Code gefunden, der gibt mir den "Inhalt des Buttons aus, wenn ich ihn drücke.

Naja, ich habe es mittlerweile trotzdem eingesehen, das ich wohl mal ein HTML-Tutorial durcharbeiten sollte, weil schneller bin ich so jetzt auch nicht. Dann lieber richtig oder zumindest besser wie blind kopieren.

Dein Code sollte mir "nur" zeigen wie man 'form' schreibt? Ich wundere mich über den Wert von 17.

Grüße
Dennis
"When I got the music, I got a place to go" [Rancid, 1993]
Sirius3
User
Beiträge: 17711
Registriert: Sonntag 21. Oktober 2012, 17:20

Mich wundert, dass Du was suchst, was ich Dir schon geliefert habe. Der Wert 17 ist genauso sinnvoll wie Deine Antworten "Hund", "Katze", "Maus".
Benutzeravatar
Dennis89
User
Beiträge: 1123
Registriert: Freitag 11. Dezember 2020, 15:13

Dann muss ich jetzt noch einmal nachfragen.
Ich bin davon ausgegangen, das ich

Code: Alles auswählen

request.form["value"]
schreiben muss, wenn ich das will was an 'value' zugewiesen wird. (Wenn das bei HTML auch so ist).

Nach deinem Post gerade habe ich probiert was passiert wenn ich 'form["antwort"]'' und 'form["frage"]' schreibe. Bei 'antwort' kommt das raus was ich wollte, aber das hätte ich beim besten Willen nicht erwartet.

Und auch weil in der Doku zu 'form' nicht sonderlich viel stand, bin ich davon ausgegangen, dass ich das bekomme, was ich eingebe.

Wie das jetzt zusammenhängt muss ich erst noch verstehen, aber jetzt ist der Abend auch schon wieder vorbei.

Vielen Dank für die Hilfe.

Grüße und Gute Nacht
Dennis
"When I got the music, I got a place to go" [Rancid, 1993]
Sirius3
User
Beiträge: 17711
Registriert: Sonntag 21. Oktober 2012, 17:20

Es ist wirklich schwierig, genau den Punkt in seinem Tutorials zu name zu finden, der einigermaßen verständlich erklärt, was da passiert. https://developer.mozilla.org/en-US/doc ... web_server
Wie immer gilt, dass man am besten verschiedene Forms ausprobiert und schaut, was flaskbin request.form liefert.

Was hast Du erwartet, wie viel verschiedene Eingabefelder unterschieden werden, wenn alle Werte als "value" übertragen werden?
Benutzeravatar
Dennis89
User
Beiträge: 1123
Registriert: Freitag 11. Dezember 2020, 15:13

Guten Morgen,

danke für den Link.
Auf dieser Seite war ich gestern Abend tatsächlich auch, aber nicht weil ich eine Erklärung zu 'name' gesucht habe (als mir aufgefallen ist, dass das mit 'name' geht, war es mir schon zu spät), sondern auf der Suche nach einem Tutorial.
Was hast Du erwartet, wie viel verschiedene Eingabefelder unterschieden werden, wenn alle Werte als "value" übertragen werden?
Soweit habe ich ehrlich gesagt noch gar nicht gedacht. Hatte mich stumpf auf die Rückgabe von einem Feld konzentriert. Bei mehreren Feldern wäre die 'value'-Abfrage natürlich Mist, das leuchtet mir ein.

Ich bleibe an dem Thema jetzt dran.

Viele Grüße und einen guten Start in den Tag
Dennis
"When I got the music, I got a place to go" [Rancid, 1993]
Benutzeravatar
Kebap
User
Beiträge: 686
Registriert: Dienstag 15. November 2011, 14:20
Wohnort: Dortmund

Dennis89 hat geschrieben: Samstag 28. Januar 2023, 21:45 Das soll eine Webanwendung werden, jetzt hoffe ich mal dass ich den HTML-Teil irgendwie zügig hinbekomme 🤯
Außerdem darfst du dann noch einen Webserver betreiben. :mrgreen: Wieso kann es keine Offline-App sein?
MorgenGrauen: 1 Welt, 8 Rassen, 13 Gilden, >250 Abenteuer, >5000 Waffen & Rüstungen,
>7000 NPC, >16000 Räume, >200 freiwillige Programmierer, nur Text, viel Spaß, seit 1992.
Benutzeravatar
grubenfox
User
Beiträge: 411
Registriert: Freitag 2. Dezember 2022, 15:49

Sirius3 hat geschrieben: Dienstag 31. Januar 2023, 06:44 Es ist wirklich schwierig, genau den Punkt in seinem Tutorials zu name zu finden, der einigermaßen verständlich erklärt, was da passiert.
Ich finde das sollte bei einem Tutorial relativ weit oben, gleich am Anfang stehen, zum Beispiel nach einer Überschrift "Formular-Versand" im Abschnitt "Angaben für die Dateiübertragung" https://wiki.selfhtml.org/wiki/HTML/Tut ... ormular%3F
Benutzeravatar
Dennis89
User
Beiträge: 1123
Registriert: Freitag 11. Dezember 2020, 15:13

@Kebap (das man bei deinem Namen auch immer Hunger kriegen muss) Ich habe schon einen VServer, der gerade nur dazu da ist den Temperaturverlauf unserer Schildkröten auszugeben. Also besser gesagt, die Raumtemperatur um sicher zustellen, das es für den Winterschlaf nicht zu warm und nicht zu kalt ist.
Den Server würde ich dafür auch nehmen wollen. Der Aufwand dürfte dafür ähnlich sein 😊

Online weil ich es geschickter finde. Zum einen kann ich auch mal das Handy oder Tablet zum lernen nehmen und zum anderen kann ich es "überall" nutzen.

@grubenfox Danke für den Link.

Grüße
Dennis
"When I got the music, I got a place to go" [Rancid, 1993]
Benutzeravatar
Dennis89
User
Beiträge: 1123
Registriert: Freitag 11. Dezember 2020, 15:13

Edit: Sorry, habe glaub gerade eine Lösung gefunden. Ich melde mich gleich oder morgen wieder.

War wahrscheinlich eine doofe Frage.

Grüße
Dennis
"When I got the music, I got a place to go" [Rancid, 1993]
Benutzeravatar
Dennis89
User
Beiträge: 1123
Registriert: Freitag 11. Dezember 2020, 15:13

Okay, die Frage ist doch noch aktuell, im folgenden der editierte Post:

Guten Abend,

ich war etwas fleißig und habe einen funktionierenden Stand.
Theoretisch fehlt nur noch etwas Design und die Anordnung der Buttons. Leider habe ich mit der 'style.css' keinen Erfolg.
Zum Beispiel würde ich gerne den "Weiter"- und "Zurück"-Button nebeneinander haben. Auch wird die Auswahl der Fragen vollständig untereinander angezeigt, das wäre in drei oder vier Spalten vielleicht auch übersichtlicher.

Hier mal meine Ordnerstruktur:

Code: Alles auswählen

questions_trainer) [dennis@dennis Question_Trainer]$ ls -l
insgesamt 8
-rw-r--r--. 1 dennis dennis 2782  4. Feb 22:12 app.py
drwxr-xr-x. 1 dennis dennis   80  3. Feb 22:32 __pycache__
-rw-r--r--. 1 dennis dennis  198  2. Feb 22:16 questions.json
drwxr-xr-x. 1 dennis dennis    6 27. Jan 20:20 static
drwxr-xr-x. 1 dennis dennis   86  3. Feb 22:35 templates

Code: Alles auswählen

(questions_trainer) [dennis@dennis Question_Trainer]$ ls -l templates
insgesamt 16
-rw-r--r--. 1 dennis dennis 1715  3. Feb 22:37 base.html
-rw-r--r--. 1 dennis dennis  137  3. Feb 22:42 finish.html
-rw-r--r--. 1 dennis dennis  386  4. Feb 06:59 index.html
-rw-r--r--. 1 dennis dennis  642  4. Feb 22:05 question.html

Code: Alles auswählen

(questions_trainer) [dennis@dennis Question_Trainer]$ ls -l static/css/
insgesamt 4
-rw-r--r--. 1 dennis dennis 163  4. Feb 22:07 style.css
Und hier mal die Dateien:

app.py

Code: Alles auswählen

from json import loads
from pathlib import Path
from random import sample

from flask import Flask, render_template, request
from werkzeug.exceptions import abort

QUESTIONS_PATH = Path("/home/dennis/Question_Trainer/questions.json")

app = Flask(__name__)


class QuestionTrainer:
    def __init__(self):
        self.questions = loads(QUESTIONS_PATH.read_bytes())
        self.active_question = 0
        self.answers_random_order = None

    @property
    def number_of_questions(self):
        return [number for number, _ in enumerate(self.questions)]

    def get_question(self, number=None):
        if number is not None:
            self.active_question = number
        return self.questions[self.active_question]["question"]

    def get_answers_in_random_order(self):
        self.answers_random_order = sample(self.questions[self.active_question]["answers"], 4)
        return self.answers_random_order

    def get_right_answer(self, answer):
        return answer == self.questions[self.active_question]["answers"][0]


@app.route("/question", methods=["GET", "POST"])
def chose_question():
    question = int(request.form["answer"]) - 1
    question = question_trainer.get_question(question)
    question_trainer.get_answers_in_random_order()
    return render_template(
        "question.html",
        question=question,
        answers=question_trainer.answers_random_order,
    )


@app.route("/answer", methods=["GET", "POST"])
def check_answer():
    answer = str(request.form["answer"])
    rating = "Richtig!" if question_trainer.get_right_answer(answer) else "Falsch!"
    return render_template(
        "question.html",
        question=question_trainer.get_question(),
        answers=question_trainer.answers_random_order,
        rating=rating,
    )


@app.route("/next", methods=["GET", "POST"])
def next_question():
    try:
        number = question_trainer.active_question + 1
        question = question_trainer.get_question(number)
        question_trainer.get_answers_in_random_order()
        return render_template(
            "question.html", question=question, answers=question_trainer.answers_random_order
        )
    except IndexError:
        return render_template("finish.html")


@app.route("/back", methods=["GET", "POST"])
def previous_question():
    number = question_trainer.active_question - 1
    if number < 0:
        return index()
    question = question_trainer.get_question(number)
    question_trainer.get_answers_in_random_order()
    return render_template(
        "question.html", question=question, answers=question_trainer.answers_random_order
    )


@app.route("/")
def index():
    questions = question_trainer.number_of_questions
    return render_template("index.html", questions=questions)


question_trainer = QuestionTrainer()

Ist das jetzt eigentlich eine von den Situationen, in denen ich 'question_trainer' global verfügbar brauche oder geht das auch anders?

questions.json (Beispieldaten)

Code: Alles auswählen

[
    {"question": "Wie heißt du?", "answers": ["Hans", "Peter", "Hubert", "Karle"]},
    {"question": "Was machst du morgen?", "answers": ["Arbeiten", "Essen", "Sport", "Schlafen"]}
  ]
base.html (Habe ich von hier geklaut. So tief konnte ich noch nicht einsteigen. Ist eigentlich nur mit drin, weil mir das Top-Menü gefällt)

Code: Alles auswählen

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>{% block title %} {% endblock %}</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a class="navbar-brand" href="{{ url_for('index')}}">Fragenübersicht</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </nav>
    <div class="container">
        {% block content %} {% endblock %}
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
index.html

Code: Alles auswählen

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
    <title>Fragetrainer</title>
</head>

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Willkommen zum BZF Prüfungstrainer {% endblock %}</h1>
    
    Wähle die Frage, mit der du beginnen willst:
    <form action="/question" method="POST">    
    {% for question in questions %}
    <p><input type="submit" name="answer" value={{ question + 1 }}></p>
    {% endfor %}
    </form>

{% endblock %}
question.html (Hier versuche ich gerade die "Weiter"- und "Zurück"-Buttons nebeneinander anzuordnen)

Code: Alles auswählen

{% extends 'base.html' %}

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
    <title>Fragetrainer</title>
</head>

{% block content %}
    <h1>{% block title %} Wähle weise! {% endblock %}</h1>
    
    {{ question }}
    <form action="/answer" method="POST">    
    {% for answer in answers %}
    <p><input type="submit" name="answer" value={{ answer }}></p>
    {% endfor %}
    </form>

{{ rating }}

    <div class="button-container">
        <form action="/back" methode="POST">
            <div>    
                <p><input type="submit" name="back" value="Zurück"></p>
            </div>
        </form>
   
        <form action="/next" methode="POST">
            <div>         
                <p><input type="submit" name="next" value="Weiter" formaction="next"></p>
            </div>
        </form>
    </div>

{% endblock %}

finish.html

Code: Alles auswählen

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Juhu, ab zur Prüfung! {% endblock %}</h1>
   

{% endblock %}
style.css

Code: Alles auswählen

h1 {
    border: 2px #eee solid;
    color: brown;
    text-align: left;
    padding: 10px;
}

.button-container form,
.button-container form div {
    display: inline-block;
}

.button-container button {
    display: inline-block;
    vertical-align: middle;
}
Sieht das soweit einigermaßen vertretbar aus? Habt ihr eine Idee wie ich die Anordnung der Buttons umsetzen könnte?
Die Stackoverflow-Threads zum Thema "html button side by side" und "html form side by side" haben leider nicht funktioniert.


Danke und viele Grüße
Dennis
"When I got the music, I got a place to go" [Rancid, 1993]
Antworten