Brittany Brittany - 2 months ago 7
CSS Question

Changing text colour with CSS in jQuery

I am displaying results of a quiz and want it to show a green correct or a red incorrect beside the corresponding question. I have a PHP file holding the questions, that returns true or false depending on whether the users answer was correct or not. My code below shows how my results are shown (in a table, with true or false being shown). I've tried an if statement to say if that field equals true, make it green, else red. But nothing works. I just want to transform 'true' into a green 'correct' and 'false' into a red incorrect using jQuery.

Related JavaScript code:

$("#tblextendedresults tbody").prepend("<br>")
$.each(extendedResults, function(i) {
$("#tblextendedresults tbody").append("<tr><td>" + extendedResults[i]["question"] + "</td><td>" + extendedResults[i]["your_answer"] + "</td><td>" + extendedResults[i]["correct"] + "</td></tr>")
if (extendedResults[i]["correct"] == "true") {
$(this).css("color", "green");
}
else {
$(this).css("color", "red");
}
})


Related HTML code:

<table id="tblextendedresults">
<thead>
<th>Question</th>
<th>Your answer</th>
<th>Correct?</th>
</thead>
<br>
<tbody></tbody>
</table>


Also 'extendedResults' is an array that each question and chosen answer are pushed to.
Any help would be appreciated. Thanks!

Answer

Try using last:child Selector - $("#tblextendedresults tbody tr:last-child td:last-child")

$(this) in your code does not refer the appropriate element.

JSFiddle

var extendedResults = [{
  "question": "Question1",
  "your_answer": "your_answer1",
  "correct": true
}, {
  "question": "Question2",
  "your_answer": "your_answer2",
  "correct": false
}, {
  "question": "Question3",
  "your_answer": "your_answer3",
  "correct": true
}];

$("#tblextendedresults tbody").prepend("<br>")

$.each(extendedResults, function(i) {
  $("#tblextendedresults tbody").append("<tr><td>" + extendedResults[i]["question"] + "</td><td>" + extendedResults[i]["your_answer"] + "</td><td>" + extendedResults[i]["correct"] + "</td></tr>")

  if (extendedResults[i]["correct"] == true) {
    $("#tblextendedresults tbody tr:last-child td:last-child").css("color", "green");
  } else {
    $("#tblextendedresults tbody tr:last-child td:last-child").css("color", "red");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="tblextendedresults">
  <thead>
    <th>Question</th>
    <th>Your answer</th>
    <th>Correct?</th>
  </thead>
  <br>
  <tbody></tbody>
</table>

Comments