如何用Django实现答题按钮点击后正确闪绿、错误闪红？

问题 #

我有一道包含四个选项的题目，希望选中正确答案时对应的按钮闪烁绿色，选中错误答案时对应的按钮闪烁红色。要求使用Django框架完成，不使用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"  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></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  %}

解决方案 #

核心思路：通过Django后端判断用户提交的选项是否正确，将判断结果传递到模板，给对应按钮添加动态CSS类，最后用CSS动画实现闪烁效果。

1. 修改Django视图逻辑 #

在处理quiz请求的视图中，获取用户提交的选项并与正确答案对比，将结果传入模板：

from django.shortcuts import render
from .models import Question  # 替换为你的题目模型

def quiz(request):
    # 保留原有分页逻辑，新增答案判断部分
    selected_option = request.POST.get('next')
    current_question = None
    is_correct = False
    
    # 获取当前显示的题目对象（根据你的分页逻辑调整）
    for q in questions:
        if q.kategorie == category and q.flaag == True:
            current_question = q
            break
    
    if selected_option and current_question:
        # 假设Question模型有correct_answer字段存储正确答案文本
        is_correct = (selected_option == current_question.correct_answer)
    
    # 传递变量到模板
    context = {
        # 原有变量：questions、category等
        'selected_option': selected_option,
        'is_correct': is_correct,
    }
    return render(request, 'quiz.html', context)

2. 修改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 
                            {% if selected_option == erste_frage %}
                                {% if is_correct %}flash-green{% else %}flash-red{% endif %}
                            {% endif %}" 
                            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 
                            {% if selected_option == zweite_frage %}
                                {% if is_correct %}flash-green{% else %}flash-red{% endif %}
                            {% endif %}" 
                            name="next" 
                            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 
                            {% if selected_option == dritte_frage %}
                                {% if is_correct %}flash-green{% else %}flash-red{% endif %}
                            {% endif %}" 
                            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 
                            {% if selected_option == vierte_frage %}
                                {% if is_correct %}flash-green{% else %}flash-red{% endif %}
                            {% endif %}" 
                            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>
        <!-- 菜单、按钮、footer部分保持不变 -->
        <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></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  %}
    <!-- 保留原有上一页逻辑 -->
    {% endif %}
{% endif %}
{% endfor %}

3. 添加CSS闪烁动画 #

在你的CSS文件中添加以下动画样式：

/* 正确答案闪烁动画 */
@keyframes flashGreen {
    0%, 100% { background-color: transparent; }
    50% { background-color: #4CAF50; color: #fff; }
}

.flash-green {
    animation: flashGreen 1s ease-in-out 3; /* 闪烁3次，每次1秒 */
}

/* 错误答案闪烁动画 */
@keyframes flashRed {
    0%, 100% { background-color: transparent; }
    50% { background-color: #f44336; color: #fff; }
}

.flash-red {
    animation: flashRed 1s ease-in-out 3;
}

内容的提问来源于stack exchange，提问作者replaalpi