JSFiddle - React, Tailwind, and code Playground

by Aalok Mishra

HTML

<div id="test">
      <div class="btn btn-green btn-green-lg2 text-center" id="btn_test">
        <a href="#">Click</a>
      </div>
      <div id="test_inner">
        <h2>Test</h2>
        <div class="test-item">
          <h3>Ask?</h3>
          <ol>
            <li>
              <label>
                <input type="radio" value="1" name="test1" />
                <span>Variant 1</span>
              </label>
            </li>
            <li>
              <label>
                <input type="radio" value="2" name="test1" />
                <span>Variant 2</span>
              </label>
            </li>
            <li>
              <label>
                <input type="radio" value="3" name="test1" />
                <span>Variant 3</span>
              </label>
            </li>
            <li>
              <label>
                <input type="radio" value="4" name="test1" />
                <span>Variant 4</span>
              </label>
            </li>
          </ol>
        </div>
        <div class="test-item">
          <h3>Ask?</h3>
          <ol>
            <li>
              <label>
                <input type="radio" value="1" name="test2" />
                <span>Variant 1</span>
              </label>
            </li>
            <li>
              <label>
                <input type="radio" value="2" name="test2" />
                <span>Variant 2</span>
              </label>
            </li>
            <li>
              <label>
                <input type="radio" value="3" name="test2" />
                <span>Variant 3</span>
              </label>
            </li>
            <li>
              <label>
                <input type="radio" value="4" name="test2" />
                <span>Variant 4</span>
              </label>
            </li>
          </ol>
        </div>
        <div class="test-item">
          <h3>Ask?</h3>
          <ol>
            <li>
              <label>
                <input type="radio" value="1"...

CSS

#test {
    margin-top: 50px;
}
#test h2 {
    margin-top: 30px;
}
#test_inner {
    display: none;
}
#btn_test {
    margin-top: 25px;
}
.test-item {
    margin: 25px auto;
}
.test-item > ol {
    padding-left: 30px;
    counter-reset: list;
}
.test-item > ol > li {
    margin: 10px 0;
    padding-left: 20px;
    position: relative;
}
.test-item > ol > li:before {
    content: counter(list, lower-alpha)") ";
    counter-increment: list;
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
}
.test-item > ol > li input[type="radio"], .test-item > ol > li span {
    display: inline-block;
    vertical-align: middle;
}
.test-item > ol > li span {
    padding: 0 5px;
    position: relative;
}
.test-item > ol > li label input[type="radio"] {
    display: none;
}
.test-item > ol > li label input[type="radio"]:checked + span {
    background: #008000;
    color: #fff;
    display: block;
    padding: 1px 5px;
}
.test-item > ol > li label input[type="radio"]:checked + span:before {
    content:'\2714';
    position: absolute;
    top: 0;
    left: -40px;
    color: #008000;
    font-weight: 700;
}
.test-hidden {
    display: none;
}
.test-unhidden {
    display: block;
}
.test-result {
    display: block;
    padding: 5px;
    border: 1px solid green;
}
.test-result-item {
    margin: 25px auto;
    display: none;
    border: 1px solid red;
}
#totalSum {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
}

JavaScript

jQuery(function () {

    jQuery('#btn_test').click(function () {
        $(this).parent().children('#test_inner').slideToggle('500');
        return false;
    });


    jQuery("input[type='radio']").change(function () {
        calculate();
    });


    function calculate() {
        var sum = 0;

        jQuery("input[type='radio']:checked").each(function () {

            sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseInt(this.value);

            jQuery("#totalSum").html(sum);
            if(sum > 0){
                jQuery(".test-result-item").hide();
                console.log(sum);
                if (sum <= parseInt(8)) {
                    jQuery("#test_result-item_1").show();
                } else if ((9 <= sum) && (sum <= 12)) {
                    jQuery("#test_result-item_2").show();
                } else if ((13 <= sum) && (sum <= 17)) {
                    jQuery("#test_result-item_3").show();
                } else if (18 >= sum) {
                    jQuery("#test_result-item_4").show();
                }
            }
        });
    }
});