Django：有选择地将 CSS 样式应用于测验单选按钮

Question

我让用户参加测验。在每个问题之后，我想向他们展示他们的答案是正确还是错误。正确答案应以绿色突出显示，他们的答案（如果不正确）应以红色突出显示（使用 Twitter Bootstrap 样式）。

我目前正在 Django 和 HTML 中呈现测验结果页面，如下所示：

{{ player.question }}
<div class="myradio">
    <label for="choice_1"><input id="id_1" type="radio" value="q1" disabled /> {{q1}}</label>
</div>
<div class="myradio">
    <label for="choice_2"><input id="id_2" type="radio" value="q2" disabled /> {{q2}}</label>
</div>
<div class="myradio">
    <label for="choice_3"><input id="id_3" type="radio" value="q3" disabled /> {{q3}}</label>
</div>
<div class="myradio">
    <label for="choice_4"><input id="id_4" type="radio" value="q4" disabled /> {{q4}}</label>
</div>


<p><b>Correct Answer: {{solution}}<b></p>

Total Score: {{total_score}}

我将问题的解决方案存储在{{solution}} 中。我一直在试图弄清楚如何有选择地应用 CSS 过滤器，例如，{{q1}} == {{solution}} 应该以绿色突出显示。我可以使用{{player.submitted_answer}} 获取参与者的答案，因此如果{{player.submitted_answer}} != {{solution}} 则希望突出显示红色的div 元素。

我尝试过处理 if 语句块，但似乎无法正确处理。有什么想法吗？

@cezar，pages.py 和 models.py 的 sn-p

在 pages.py 我有以下类

class Question(Page):
    timeout_seconds = 120

    template_name = 'quiz/Question.html'
    form_model = 'player'
    form_fields = ['submitted_answer', 'confidence']


    def submitted_answer_choices(self):
        qd = self.player.current_question()
        return [
            qd['choice1'],
            qd['choice2'],
            qd['choice3'],
            qd['choice4'],
        ]

    def confidence_error_message(self, value):

        if value == 50:
            return 'Please indicate your confidence in your answer.  It is important you answer accurately.'


    def before_next_page(self):
        self.player.check_correct()

在models.py中，相关的类是Player和Subsession：

class Player(BasePlayer):

trial_counter = models.IntegerField(initial=0)


question_id = models.IntegerField()
confidence = models.FloatField(widget=widgets.Slider(attrs={'step': '0.01'}))
confidence_private = models.FloatField(widget=widgets.Slider(attrs={'step': '0.01'}))

question = models.StringField()
solution = models.StringField()
submitted_answer = models.StringField(widget=widgets.RadioSelect)
submitted_answer_private = models.StringField(widget=widgets.RadioSelect)

is_correct = models.BooleanField()
total_score = models.IntegerField(initial = 0)

def other_player(self):
    return self.get_others_in_group()[0]

def current_question(self):
    return self.session.vars['questions'][self.round_number - 1]

def check_correct(self):
    self.is_correct = self.submitted_answer == self.solution

def check_partner_correspondence(self):
    self.submitted_answer == self.get_others_in_group()[0].submitted_answer

def check_partner_correct(self):
    self.get_others_in_group()[0].submitted_answer == self.solution

def check_if_awarded_points(self):
    self.get_others_in_group()[0].submitted_answer == self.submitted_answer == self.solution

def score_points(self):
    if self.get_others_in_group()[0].submitted_answer == self.submitted_answer == self.solution:
        self.total_score +=1
    else:
        self.total_score -=1


def set_payoff(self):
    if(self.check_if_awarded_points()):
        self.total_score +=1

class Subsession(BaseSubsession):

def creating_session(self):
    if self.round_number == 1:
        self.session.vars['questions'] = Constants.questions
        ## ALTERNATIVE DESIGN:
        ## to randomize the order of the questions, you could instead do:

        # import random
        # randomized_questions = random.sample(Constants.questions, len(Constants.questions))
        # self.session.vars['questions'] = randomized_questions

        ## and to randomize differently for each participant, you could use
        ## the random.sample technique, but assign into participant.vars
        ## instead of session.vars.

    for p in self.get_players():
        question_data = p.current_question()
        p.question_id = question_data['id']
        p.question = question_data['question']
        p.solution = question_data['solution']

Answer 1

您可以使用一些 CSS 和最少的模板来完成此操作。

考虑以下 HTML 模板

这里的关键是class="answer{% if answer == solution %} solution{% endif %}"

<h2>{{ question }}</h2>
<form>
{% for answer in answers %}
    <label for="answer{{ forloop.counter }}">{{ answer }}</label>
    <input id="answer{{ forloop.counter }}" type="radio" name="answer" class="answer{% if answer == solution %} solution{% endif %}" value="{{ answer }}">
    <br/>
{% endfor %}

<p class="result incorrect">Sorry, that was not correct. The solution was {{ solution }}</p>
<p class="result correct">Correct! Answer: {{ solution }}</p>
</form>

使用以下 CSS

.result {
    display: none;
}
.answer:checked ~ .result.incorrect{
    display: block;
    color: red;
}
.answer.solution:checked ~ p.result.correct {
    display: block;
    color: green;
}

.answer.solution:checked ~ p.result.incorrect {
    display: none;
}

还有以下路线

def quiz(request):
    question = "What is 2 + 2?"
    solution = "4"
    answers = [solution, "22", "NaN", "0"]
    random.shuffle(answers)
    return render(request, 'foobar/quiz.html', context=locals())

你会得到类似this jsfiddle的结果

Answer 2

我同意@Sapna-Sharma 和@albar 的评论。

您可以使用简单的 CSS 类将颜色设置为绿色，并使用 {% if [...] %} 模板过滤器将 CSS 类仅添加到好的答案中

您可以参考Django official documentation了解如何处理模板过滤器。

Answer 3

我最终解决了自己的问题：

我不知道该怎么做，因为 Albar 的回答最有帮助。

  <div class={% if q1 == player.solution  %} "green" {% else %} "red" {% endif %}>
       <input type="radio" disabled/> {{q1}}</label>
   </div>

   <div class={% if q2 == player.solution  %} "green" {% else %} "red" {% endif %}>
        <input type="radio" disabled /> {{q2}}
    </div>

   <div class={% if q3 == player.solution  %} "green" {% else %} "red" {% endif %}>
        <input type="radio" disabled /> {{q3}}
    </div>

   <div class={% if q4 == player.solution %} "green" {% else %} "red" {% endif %}>
        <input type="radio" disabled /> {{q4}}
    </div>

然后是 CSS：

<style>


.green {
  color: #00FF00; 
}

.red {
  color: red; 
}

</style>