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" type="radio"/>38.2</label></li>
<li><label id="true"><input data-key="b" type="radio"/>38.2</label></li>
<li><label><input data-key="c" type="radio"/>38.2</label></li>
<li><label><input data-key="d" 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 id="true"><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><input data-key="d" 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 id="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" 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 id="true"><input...
JavaScript
jQuery(document).ready(function(){
jQuery('input[data-key="a"]').click(function(){
if (jQuery(this).is(':checked'))
{
$(this).closest("label").css("background-color", "red");
jQuery("#true").css("background-color", "green");
}
});
jQuery('input').click(function(){
if (jQuery(this).is(':checked'))
{
jQuery("#true").css("background-color", "green");
}
});
jQuery('input[data-key="c"]').click(function(){
if (jQuery(this).is(':checked'))
{
$(this).closest("label").css("background-color", "red");
} document.getElementById("true").style.backgroundColor = "green";});
jQuery('input[data-key="d"]').click(function(){
if (jQuery(this).is(':checked'))
{
$(this).closest("label").css("background-color", "red");
}
});
});