我让用户参加测验。在每个问题之后,我想向他们展示他们的答案是正确的还是错误的。正确答案应以绿色突出显示,他们的答案(如果不正确)应以红色突出显示(使用 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}}
。
我试过弄乱 if 语句 block ,但似乎无法正确处理。有什么想法吗?
@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']
最佳答案
您可以使用一些 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 的结果
关于python - Django:有选择地将 CSS 样式应用于测验单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49366473/