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

的片段

在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

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

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

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

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

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

我不知道该做什么，因为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>

Django：有选择地将CSS样式应用于Quiz Radio Buttons

3 个答案: