change color of button after click - html

Question

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?
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">
<i class="fa-solid fa-house"></i> Startseite
<i class="fa-solid fa-pen"></i> Fragenkatalog
<i class="fa-solid fa-trophy"></i> Statistik
<i class="fa-solid fa-gear"></i> Einstellungen
<i class=></i> Log-Out
</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 %}

Answer 1

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;
}