Django: aplicar selectivamente los estilos CSS a los botones de radio de prueba

Tengo usuarios toman una prueba. Después de cada pregunta, quiero mostrarles si su respuesta fue correcta o incorrecta. La respuesta correcta debe resaltarse en verde, y su respuesta (si es incorrecta) debe resaltarse en rojo (con los estilos de Twitter Bootstrap)

Actualmente estoy mostrando la página de resultados de la prueba en Django y HTML como:

{{ player.question }} 

Correct Answer: {{solution}}

Total Score: {{total_score}}

Estoy almacenando la solución a la pregunta en {{solution}} . He estado tratando de averiguar cómo aplicar selectivamente los filtros CSS si, por ejemplo, {{q1}} == {{solution}} que debería estar resaltado en verde. Puedo capturar la respuesta del participante con {{player.submitted_answer}} , y quiero resaltar un elemento div en rojo si {{player.submitted_answer}} != {{solution}} .

He intentado perder el tiempo con bloques de instrucciones, pero parece que no puedo hacerlo bien. ¿Algunas ideas?

@cezar, un fragmento de pages.py y models.py

En pages.py tengo la siguiente clase

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

En models.py, la clase relevante es Player y 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'] 

Puedes acumular esto con algo de CSS y plantillas mínimas.

Considere la siguiente plantilla HTML

La clave aquí es class="answer{% if answer == solution %} solution{% endif %}"

 

{{ question }}

{% for answer in answers %}
{% endfor %}

Sorry, that was not correct. The solution was {{ solution }}

Correct! Answer: {{ solution }}

Con el siguiente 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; } 

Y la siguiente ruta

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

Obtendrías un resultado como este jsfiddle

Estoy de acuerdo con @ Sapna-Sharma y @albar comentar.

Puede usar una clase CSS simple para establecer el color en verde y usar un filtro de plantilla {% if [...] %} para agregar la clase CSS solo a la buena respuesta

Puede consultar la documentación oficial de Django para saber cómo manejar el filtro de plantillas.

Terminé resolviendo mi propio problema:

No estoy seguro de qué hacer ya que la respuesta de Albar fue la que más me ayudó.

  
{{q1}}
{{q2}}
{{q3}}
{{q4}}

Y luego el CSS: