Django：为测验单选按钮选择性应用CSS样式

嘿，这个需求我之前做过类似的，结合Django模板和Bootstrap样式完全可以轻松实现！咱们分两步来：先在视图层把需要的数据准备好，再在模板里渲染出带高亮的结果。

第一步：在Django视图中准备数据 #

首先，你需要把每道题的题目文本、用户所选答案、正确答案以及所有选项都整理好传到模板里。假设你有Player和QuizQuestion模型，视图代码可以这么写：

# views.py
from django.shortcuts import render
from .models import Player, QuizQuestion

def quiz_result(request, player_id):
    player = Player.objects.get(id=player_id)
    # 获取所有测验题目
    all_questions = QuizQuestion.objects.all()
    # 整理每道题的结果数据
    result_list = []
    for question in all_questions:
        # 从Player模型中取用户的答案（这里假设你用字典存储用户答案，键是题目ID）
        user_selected = player.answers.get(str(question.id), None)
        # 获取这道题的正确答案
        correct_choice = question.correct_choice  # 假设这是存储正确选项值的字段，比如'q1'
        # 把选项整理成键值对（比如{'q1': '选项A', 'q2': '选项B'}）
        question_choices = {
            f'q{i+1}': choice.text 
            for i, choice in enumerate(question.choices.all())
        }
        result_list.append({
            'question_text': question.text,
            'user_answer': user_selected,
            'correct_answer': correct_choice,
            'choices': question_choices,
            'is_correct': user_selected == correct_choice
        })
    return render(request, 'quiz/result.html', {'results': result_list})

第二步：在HTML模板中渲染带高亮的结果 #

接下来用Bootstrap的样式类来实现绿色/红色高亮，同时保留你原来的myradio类和单选框结构：

<!-- templates/quiz/result.html -->
{% load static %}
<!-- 引入Bootstrap CSS（可以用CDN或者本地静态文件） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container mt-4">
    <h2>你的测验结果</h2>
    {% for item in results %}
    <div class="card mb-3">
        <div class="card-body">
            <h5 class="card-title">{{ item.question_text }}</h5>
            <!-- 显示对错状态 -->
            {% if item.is_correct %}
            <p class="text-success mb-3">✅ 回答正确！</p>
            {% else %}
            <p class="text-danger mb-3">❌ 回答错误，正确答案已高亮显示</p>
            {% endif %}
            <!-- 渲染选项 -->
            <div class="myradio">
                {% for choice_key, choice_text in item.choices.items %}
                    {% if choice_key == item.correct_answer %}
                    <!-- 正确答案：绿色背景+文字高亮 -->
                    <label class="d-block mb-2 p-2 bg-success-subtle text-success border border-success rounded">
                        <input 
                            id="id_{{ choice_key }}" 
                            type="radio" 
                            value="{{ choice_key }}" 
                            disabled 
                            {% if choice_key == item.user_answer %}checked{% endif %}
                        >
                        {{ choice_text }} <small class="ms-2">(正确答案)</small>
                    </label>
                    {% elif choice_key == item.user_answer %}
                    <!-- 用户错误答案：红色背景+文字高亮 -->
                    <label class="d-block mb-2 p-2 bg-danger-subtle text-danger border border-danger rounded">
                        <input 
                            id="id_{{ choice_key }}" 
                            type="radio" 
                            value="{{ choice_key }}" 
                            disabled 
                            checked
                        >
                        {{ choice_text }} <small class="ms-2">(你的答案)</small>
                    </label>
                    {% else %}
                    <!-- 其他选项：正常显示 -->
                    <label class="d-block mb-2 p-2 bg-light border rounded">
                        <input 
                            id="id_{{ choice_key }}" 
                            type="radio" 
                            value="{{ choice_key }}" 
                            disabled
                        >
                        {{ choice_text }}
                    </label>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>

关键说明 #

1. Bootstrap样式类：用bg-success-subtle和text-success实现正确答案的绿色高亮，bg-danger-subtle和text-danger实现错误答案的红色高亮，这些是Bootstrap 5的类，如果你用的是Bootstrap 4，换成bg-success-light和bg-danger-light即可。
2. 单选框状态：给所有单选框加disabled属性防止用户修改，用checked标记用户实际选择的选项。
3. 数据适配：如果你的Player模型存储用户答案的方式和示例不同（比如不是字典），只需要调整视图中user_selected的获取逻辑即可。

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