JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="question-container">
  <div class="container">
    <!-- Example row of columns -->
    <h1>Which option is correct?</h1>
    <div class="row">

      <div class="col-md-12">
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
            <span class="distractors">Option 1</span>
          </label>
        </div>
      </div>
      <!-- /.col-md-12 -->

      <div class="col-md-12">
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
            <span class="distractors">Option 2</span>
          </label>
        </div>
      </div>
      <!-- /.col-md-12 -->

      <div class="col-md-12">
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
            <span class="distractors">Option 3</span>
          </label>
        </div>
      </div>
      <!-- /.col-md-12 -->

      <div class="col-md-12">
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">
            <span class="distractors">Option 4</span>
          </label>
        </div>
      </div>
      <!-- /.col-md-12 -->
    </div>
    <!-- /.row -->
    <p>
      <button class="btn btn-default submit-question" role="button">Submit</button>
    </p>
  </div>
  <!-- /container -->
</div>
<!-- /question-container -->

CSS

body {
  padding: 30px;
}

.distractors {
  padding: 20px;
}

.submit-question {
  margin-top: 20px;
}

.radio {
  padding-left: 20px;
  border: 1px solid #ecf0f1;
  border-radius: 6px;
}

.radio:hover {
  background-color: #ecf0f1;
}

label {
  width: 100%;
  padding: 20px;
}

JavaScript

$(function() {
  /* Variables */
  var userTries = 0,
    userLimit = 2,
    correctAnswer = "optionsRadios3";

  /* Events */
  $('.submit-question').click(function() {
    getFeedback();
  });

  /* Functions */
  var getFeedback = function() {
    var userAnswer = $('input:radio:checked').map(function() {
      return this.id;
    }).get().join();

    if (userAnswer === "" || userAnswer === undefined) {
      alert('Please make a selection.');
    } else if (userAnswer === correctAnswer) {
      alert('You choose the correct answer. Great job!');
      $('input:radio, .submit-question').prop("disabled", true);
      $("label").css("cursor", "not-allowed");
    } else {
      userTries++;
      if (userTries === userLimit) {
        alert("The correct answer is displayed.");
        $('#' + correctAnswer).attr('checked', 'checked');
        $('input:radio, .submit-question').prop("disabled", true);
        $("label").css("cursor", "not-allowed");
      } else {
        alert("Incorrect. Please try again.");
      }
    }
  }
});