JSFiddle - React, Tailwind, and code Playground
HTML
<div class="questionContainer hide">
<!-- Question1--><div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır?
</div>
<ul class="answers">
<li>
<label>
<input data-key="a" name="one" type="radio"/>
38.2
</label>
</li>
<li>
<label class="true">
<input data-key="b" name="one" type="radio"/>38.2</label></li>
<li><label><input data-key="c" name="one" type="radio"/>38.2</label></li>
<li><label><input data-key="d" name="one" type="radio"/>29.1</label></li>
</ul>
</div>
<div class="questionContainer hide">
<!-- Question2--><div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div>
<ul class="answers">
<li><label class="true"><input data-key="a" name="two" type="radio"/>38.2</label></li>
<li><label><input data-key="b" name="two" type="radio"/>34.1</label></li>
<li><label><input data-key="c" name="two" type="radio"/>29.2</label></li>
<li><label><input data-key="d" name="two" type="radio"/>29.1</label></li>
</ul>
</div>
<div class="questionContainer hide">
<!-- Question3--><div class="question">Airbus 300-600 uçağının yüksekliği nedir?</div>
<ul class="answers">
<li><label><input data-key="a" type="radio"/>38.2</label></li>
<li><label><input data-key="b" type="radio"/>34.1</label></li>
<li><label><input data-key="c" type="radio"/>29.2</label></li>
<li><label class="true"><input data-key="d" type="radio"/>29.1</label></li>
</ul>
</div>
<div class="questionContainer hide">
<!-- Question4--><div class="question">Airbus 300-600 uçağının maksimum yakıt kapasitesi nedir ?</div>
<ul class="answers">
<li><label><input data-key="a"...
JavaScript
$(document).ready(function(){
$('input').click(function() {
$(this).closest(".answers").find('label').css("background-color", "initial");
if ($(this).closest("label").hasClass('true')) {
$(this).closest("label").css("background-color", "green");
} else {
$(this).closest(".answers").find('.true').css("background-color", "green");
$(this).closest("label").css("background-color", "red");
}
});
});