JSFiddle - React, Tailwind, and code Playground

by James Joung

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 data-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 data-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 data-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>
   ...

JavaScript

$(document).ready(function() {

  $('.answers').on('click', 'input', function() {
    $(this).is(':checked');
    if ($(this).parent().attr('data-id') == "true") {
      $(this).closest('label').css("background-color", "green");
    } else {
      $(this).parent().css("background-color", "red");
      $(this).closest('ul.answers').find('label[data-id="true"]').css("background-color", "green");
    }
  });

});