Callum Hussell Callum Hussell - 3 months ago 23
jQuery Question

jQuery - Function to display next element on page and hide the current one on click

I've been trying to create a function that will allow, once a radio button is checked, to check if the ID is correct and then display a subsequent button in the another div (not the very next one).

Once the subsequent button is clicked, it will hide the previous div and display the rest of the content for the current one.

I was trying to create a script that would do this for however many containers I wanted. So you could essentially traverse down the page showing and hiding elements with a click and check based on answer.

I can't figure out how to make this happen after the first instance however. Any help would be much appreciated. Here's my code:



$(document).ready(function () {
$(this).find(".check-answer-button").click(function () {
if ($("#correct-answer").is(":checked")) {
if ($(".wrong-answer").is(":visible")) {
$(".wrong-answer").hide();
}
$(".right-answer").show();
$(".next-question-div:first").show();
$(".next-question-button").click(function () {
$(".question-radio-button-div:first").show(500);
$(".answer-div:first").show(500);
$(".question-div:nth-child(1)").hide();
$(".next-question-button").hide();
if ($("h4").is(":visible")) {
$("h4").hide();
}
});
}
else {
$(".wrong-answer").show();
}
});
});

.right-answer,
.wrong-answer {
display: none;
}

.next-question-div {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- QUESTION 1 -->
<div class="question-div" id="question-one">
<div class="row">
<div class="col-12">
<p>Q1</p>
<ul>
<li>
<input type="radio" name="radio" value="value1" id="correct-answer">A
</li>
<li>
<input type="radio" name="radio" value="value1">B
</li>
<li>
<input type="radio" name="radio" value="value1">C
</li>
</ul>
</div>
</div>
<div class="row" id="answer-one-div">
<div class="col-12">
<button type="button" class="check-answer-button">Check Answer</button>
<h4 class="right-answer">Well done this is correct</h4>
<h4 class="wrong-answer">Sorry, try again</h4> </div>
</div>
</div>
<!-- QUESTION 2 -->
<div class="question-div" id="question-two">
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
<div class="row question-radio-button-div">
<div class="col-12">
<p>Q2</p>
<ul>
<li>
<input type="radio" name="radio" value="value1">A
</li>
<li>
<input type="radio" name="radio" value="value1">B
</li>
<li>
<input type="radio" name="radio" value="value1" id="correct-answer">C
</li>
</ul>
</div>
</div>
<div class="row answer-div" id="answer-two-div">
<div class="col-12">
<button type="button" class="check-answer-button">Check Answer</button>
<h4 class="right-answer">Well done this is correct</h4>
<h4 class="wrong-answer">Sorry, try again</h4> </div>
</div>
</div>





What's the best way to approach this? Thanks

Answer

I suggest you to correct your question-div. This must be a template valid for all questions but each with different question/answer.

Avoid to use duplicated ID and consider the next button is part of every question. Only the last question has no more next question.

Consider to use attribute like answer="true" instead to use ID.

Try to avoid to mix HTML and bootstrap.

A simple demo of what you are looking for could be:

$(document).ready(function (e) {
  $(".next-question-button").on('click', function (e) {
    var cachedDiv = $(this).closest('.question-div');
    cachedDiv.fadeOut(500, function () {
      cachedDiv.nextAll('.question-div:first').fadeIn(500);
    });
  });

  $(".check-answer-button").on('click', function (e) {
    var cachedDiv = $(this).closest('.question-div');
    if (cachedDiv.find(':radio:checked').attr('answer') == 'true') {
      $(this).nextAll(".wrong-answer").hide();
      $(this).nextAll(".right-answer").show();
      cachedDiv.find('.next-question-div').show();
    }
    else {
      $(this).nextAll(".wrong-answer").show();
    }
  });

  $(".question-div:gt(0)").hide();
});
.right-answer,
.wrong-answer {
  display: none;
}

.next-question-div {
  display: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- QUESTION 1 -->
<div class="question-div">
    <div class="row">
        <div class="col-12">
            <p>Q1</p>
            <ul>
                <li>
                    <input type="radio" name="radio" value="value1" answer="true">A
                </li>
                <li>
                    <input type="radio" name="radio" value="value1">B
                </li>
                <li>
                    <input type="radio" name="radio" value="value1">C
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <button type="button" class="check-answer-button">Check Answer</button>
            <h4 class="right-answer">Well done this is correct</h4>
            <h4 class="wrong-answer">Sorry, try again</h4></div>
    </div>
    <div class="next-question-div">
        <button type="button" class="next-question-button">Next Question</button>
    </div>
</div>
<!-- QUESTION 2 -->
<div class="question-div">
    <div class="row">
        <div class="col-12">
            <p>Q2</p>
            <ul>
                <li>
                    <input type="radio" name="radio" value="value1">A
                </li>
                <li>
                    <input type="radio" name="radio" value="value1" answer="true">B
                </li>
                <li>
                    <input type="radio" name="radio" value="value1">C
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <button type="button" class="check-answer-button">Check Answer</button>
            <h4 class="right-answer">Well done this is correct</h4>
            <h4 class="wrong-answer">Sorry, try again</h4></div>
    </div>
    <div class="next-question-div">
        <button type="button" class="next-question-button">Next Question</button>
    </div>
</div>
<!-- QUESTION 3 -->
<div class="question-div">
    <div class="row">
        <div class="col-12">
            <p>Q3</p>
            <ul>
                <li>
                    <input type="radio" name="radio" value="value1">A
                </li>
                <li>
                    <input type="radio" name="radio" value="value1">B
                </li>
                <li>
                    <input type="radio" name="radio" value="value1" answer="true">C
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <button type="button" class="check-answer-button">Check Answer</button>
            <h4 class="right-answer">Well done this is correct</h4>
            <h4 class="wrong-answer">Sorry, try again</h4></div>
    </div>
    <div class="next-question-div">
        <button type="button" class="next-question-button">See results</button>
    </div>
</div>
<!-- QUESTION ENDED -->
<div class="question-div">
    <div class="row">
        <div class="col-12">
            <p>FINISH</p>
        </div>
    </div>
</div>