Change color of button after click

I have a question with four answers and I want the button to flash green when the correct answer is selected and red when the wrong answer is selected. How can I do that?page

i want to solve this problem with django and not with javascript.

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="{{erste_frage}}" formaction="{% url 'quiz' %}?page={{ questions.next_page_number  }} "  type="submit">A: <span id="option_span">{{erste_frage}}</span></button></p>
                                        </div>
                                        <div class="option">
                                            <p><button class="option_btn"  name="next"  [ngClass] = value="{{zweite_frage}}" formaction="{% url 'quiz' %}?page={{ questions.next_page_number  }} "  type="submit">B: <span id="option_span">{{zweite_frage}}</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="{{dritte_frage}}" formaction="{% url 'quiz' %}?page={{ questions.next_page_number  }} "  type="submit">C: <span id="option_span">{{dritte_frage}}</span></button></p>
                                        </div>
                                        <div class="option">
                                            <p><button class="option_btn"  name="next"  value="{{vierte_frage}}" formaction="{% url 'quiz' %}?page={{ questions.next_page_number  }} "  type="submit">D: <span id="option_span">{{vierte_frage}}</span></button></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="menü">
                                        <button class="menü_button" formaction="{% url 'Example_dashboard' %}" ><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>
                        {% elif questions.has_previous  %}

As far as I know, any Django solution needs a redirect or page reload. I assume you're not looking for something like this. Otherwise you can handle it with sending a new context to your template.

Anyway, if you don't want to use JS you can do that with this CSS trick. I'm not aware of the browsers' support status.

HTML:

<div id="nothing"></div>
<div id="one"></div>
<div class="styleSelector">
    <a href='#nothing'>Nothing</a>
    <a href='#one'>style 1</a>
</div>
<main class="scene">
    <div class="carre">
    </div>
</main>

CSS:

.scene .carre{
  width:200px;
  height:200px;
  background-color:red;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}
#one:target ~ .scene .carre {
    width:700px;
    background-color:blue;
}
Back to Top