JSFiddle - React, Tailwind, and code Playground

by Ganesh Yadav

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 class="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 class="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 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" 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...

JavaScript

$(document).ready(function(){
    $('input[type="radio"]').change(function(){
    	if (!$(this).closest('label').hasClass('true')){
     		  $(this).closest("label").css("background-color", "red");
          $(this).parents('.answers').find("label.true").css("background-color", "green");
    	} else{
      	$(this).closest("label").css("background-color", "green");
      }
 	 });
});