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

Question

我让用户做一个测试。在每个问题之后，我想让他们看看他们的答案是正确的还是错误的。正确的答案应该以绿色突出显示，他们的答案（如果不正确）应该以红色突出显示（使用Twitter引导样式）。你知道吗

我目前正在用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}}获取参与者的答案，因此我想突出显示div元素red if{{player.submitted_answer}} != {{solution}}。你知道吗

我试过摆弄if语句块，但似乎做不好。有什么想法吗？你知道吗

@cezar，一段页码.py以及型号.py你知道吗

在页码.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()

在型号.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

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

我不知道该怎么办，因为阿尔巴的回答帮助最大。你知道吗

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

Answer 2

你可以用一些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 3

我同意@Sapna Sharma和@albar的评论。你知道吗

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

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