Making a simple multiple choice quiz HTML/JQUERY

Question

I'm currently making a basic review test for myself and it looks something like this:

HTML -

<form class="q">
  <h4>1. question 1 </h4>
  <input name="test" type="radio" value="inc" /> A) 1
  <input name="test" type="radio" value="ans"/> B) 2
  <input name="test" type="radio" value="inc" /> C) 3
  <input name="test" type="radio" value="inc" /> D) 4
  <input name="test" type="radio" value="inc" /> E) 5
</form>
<br />
<div class="exp"> a is right </div>
<div class="red"> a is the correct answer</div> 

<form class="q">
  <h4>1. question 2 </h4>
  <input name="test" type="radio" value="inc" /> A) 1
  <input name="test" type="radio" value="ans"/> B) 2
  <input name="test" type="radio" value="inc" /> C) 3
  <input name="test" type="radio" value="inc" /> D) 4
  <input name="test" type="radio" value="inc" /> E) 5
</form>
<br />
<div class="exp"> d is right </div>
<div class="red"> d is the correct answer</div>

jQuery -

$(function () {
$('input[name="test"]').on('click', function() {
    if ($(this).val() == 'ans') {
        $('.exp').show();
        $('.red').hide();
    } else {
        $('.exp').hide();
        $('.red').show();
    }
})
});

I have it setup so that when the user selects the correct or incorrect answer, a message will popup.

My problem is that when the user clicks an answer in the first question whether it be correct or incorrect, it displays a message for both questions instead of just the single question. I was wonder how I could make it work for each question instead of all of them at once.

because you haven't differentiate both question's message from each other — Jigar7521, Dec 06 '16 at 04:46
Possible duplicate of [jquery find next element with class](http://stackoverflow.com/questions/1793944/jquery-find-next-element-with-class) — Ken Y-N, Dec 06 '16 at 04:49

score 0 · Answer 1 · answered Dec 06 '16 at 04:52

Try this:

<div class="exp answer-text" style="display:none"> d is right </div>
<div class="red answer-text" style="display:none"> d is the correct answer</div> 


$(function () {
$('input[name="test"]').on('click', function() {
    $(".answer-text").hide();
    if ($(this).val() == 'ans') {
        $('.exp').show();
    } else {
        $('.red').show();
    }
})
});

score 0 · Answer 2 · answered Dec 06 '16 at 05:04

You can use jQuery method chaining to select the first next div to the parent. :

el.parents('.q').nextAll('.exp').first();

Example Snippet:

$(function() {
  $('.exp').hide();
  $('.red').hide();
  $('input[name="test"]').on('click', function() {
    var el = $(this);
    if (el.val() == 'ans') {
      el.parents('.q').nextAll('.exp').first().show();
      el.parents('.q').nextAll('.red').first().hide();
      $('.red').hide();
    } else {
      el.parents('.q').nextAll('.red').first().show();
      el.parents('.q').nextAll('.exp').first().hide();
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="q">
  <h4>1. question 1 </h4>
  <input name="test" type="radio" value="inc" />A) 1
  <input name="test" type="radio" value="ans" />B) 2
  <input name="test" type="radio" value="inc" />C) 3
  <input name="test" type="radio" value="inc" />D) 4
  <input name="test" type="radio" value="inc" />E) 5
</form>
<br />
<div class="exp">a is right</div>
<div class="red">a is the correct answer</div>

<form class="q">
  <h4>1. question 2 </h4>
  <input name="test" type="radio" value="inc" />A) 1
  <input name="test" type="radio" value="ans" />B) 2
  <input name="test" type="radio" value="inc" />C) 3
  <input name="test" type="radio" value="inc" />D) 4
  <input name="test" type="radio" value="inc" />E) 5
</form>
<br />
<div class="exp">d is right</div>
<div class="red">d is the correct answer</div>

Making a simple multiple choice quiz HTML/JQUERY

2 Answers2