How i change the positions of the anwsers

I have a Quiz-Game and wanna change the positions of the answer. How i can fixed that?

I've tried a few things but unfortunately nothing worked. In order for the correct questions to be displayed, the category WILL be asked before the game and then the game will begin

the game

database

html
{% for q in questions %}
                {% if q.kategorie == category and q.flaag == True %}
                        {% if questions.has_next %}
                            <br/>
                            <div class="flex-container">
                                <div class="container1">
                                     <div class="position_startButton"><button  type="submit" name="next"  value="{{q.question}}" class="nächstefrage_btn">Nächste Frage!</button></div>
                                    <div class="game_options_top">
                                        <div class="option">
                                            <p><button class="option_btn"  name="next"  value="{{q.op1}}" formaction="{% url 'quiz' %}?page={{ questions.next_page_number  }} "  type="submit">A: <span id="option_span">{{q.op1}}</span></button></p>
                                        </div>
                                        <div class="option">
                                            <p><button class="option_btn"  name="next"  value="{{q.op2}}" formaction="{% url 'quiz' %}?page={{ questions.next_page_number  }} "  type="submit">B: <span id="option_span">{{q.op2}}</span></button></p>
                                        </div>
                                    </div>
                                    <div class="game_question">
                                        <h1 class="display_question">{{q.question}}</h1>
                                    </div>
                                    <div class="game_options_bottom">
                                        <div class="option">
                                            <p><button class="option_btn"  name="next"  value="{{q.op3}}" formaction="{% url 'quiz' %}?page={{ questions.next_page_number  }} "  type="submit">C: <span id="option_span">{{q.op3}}</span></button></p>
                                        </div>
                                        <div class="option">
                                            <p><button class="option_btn"  name="next"  value="{{q.op4}}" formaction="{% url 'quiz' %}?page={{ questions.next_page_number  }} "  type="submit">D: <span id="option_span">{{q.op4}}</span></button></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="menü">
                                        <button class="menü_button"><i class="fa fa-bars" aria-hidden="true"></i><b> Menü</b></button>
                                        <div class="items">
                                            <a href="{% url 'Example_dashboard' %}"> <i class="fa-solid fa-house"></i> Startseite </a>
                                            <a href="{% url 'Example_fragenkatalog' %}"> <i class="fa-solid fa-pen"></i> Fragenkatalog </a>
                                            <a href="{% url 'statistics' %}"> <i class="fa-solid fa-trophy"></i> Statistik </a>
                                            <a href="{% url 'settings' %}"> <i class="fa-solid fa-gear"></i> Einstellungen </a>
                                            <a href="{% url 'logoutUser' %}"> <i class=></i> Log-Out </a>
                                        </div>
                                </div>
                            </div>
                            <div class="buttons">
                                <div class="position_begründung_button">
                                    <button class="begründung_button">Begründung</button>
                                </div>
                                <div class="position_fragemelden_button">
                                    <button class="fragemelden_button">Frage melden</button>
                                </div>
                                <div class="position_quizbeenden_button">
                                    <button class="quizbeenden_button" formaction="{% url 'Example_dashboard' %}">Quiz beenden</button>
                                </div>
                            </div>
                            <div id="footer">
                                <a class="information" href="https://www.google.at/?hl=de.">Impressum |</a>
                                <a class="information" href="https://www.google.at/?hl=de.">Datenschutz |</a>
                                <a class="information" href="https://www.google.at/?hl=de.">Support</a>
                            </div>

views.py
    if first == True and request.POST.get("Kategorie") != "kategorie":

        score = 0
        wrong = 0
        correct = 0
        total = 0
        globalCategory = request.POST.get("Kategorie")
        first= False
        count_of_selected_category = Paginator(QuesModel.objects.filter(kategorie__exact=globalCategory), 1)
        page = request.GET.get("page")
        x = count_of_selected_category.get_page(page)
        global_counter = 1
        questions = x

        globalQuestions = questions
        global_count_of_questions = len(QuesModel.objects.filter(kategorie__exact=globalCategory, flaag__exact=True))

        


        context = {
                'questions': globalQuestions,
                'category': request.POST.get("Kategorie"),


            }

        return render(request, 'quiz.html', context)

Actual is the correct answer in the same place every time and I want the position to change every time

Back to Top