mercredi 15 juin 2016

How can I prevent showing non-active divs

I have some quizzes, like I showed below. Each Quiz ends with submit and reset button. The problem here is, if I click submit button in a quiz it shows the other quiz answer too.

Can someone help me to prevent showing the answer other than active quiz div

<div id="quiz-1" class="quiz">

 - Qn 1  Qn 2  Qn 3

**Submit  Reset**
</div>

<div id="quiz-2" class="quiz">

 - Qn 1  Qn 2  Qn 3

**Submit  Reset**
</div>

<div id="quiz-3" class="quiz">

 - Qn 1  Qn 2  Qn 3

**Submit  Reset**
</div>

<!--- HTML CODE --->
<div id="quiz-1" class="quiz">
    <div id="q1">
        <div class="qn">
            <p>question</p>
        </div>
        <div class="ans">
            <ul style="list-style-type: none;">
                <li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="q1a">option 1</label></li>
                <li><input type="radio" name="q1" value="b" id="q1b"/><label for="q1b">option 2</label></li>
                <li><input type="radio" name="q1" value="c" id="q1c"/><label for="q1c">option 3</label></li>
                <li><input type="radio" name="q1" value="d" id="q1d"/><label for="q1d">option 4</label></li>
            </ul>
            <div class="expn" style="display:none">
                <p><b>Some explanation</b></p>
            </div>
        </div>
    </div>

    <div id="q2">
        <div class="qn">
            <p>question</p>
        </div>
        <div class="ans">
            <ul style="list-style-type: none;">
                <li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
                <li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
                <li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
                <li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
            </ul>
            <div class="expn" style="display:none">
                <p><b>Some explanation</b></p>
            </div>
        </div>
    </div>
    <button class="btn1" type="submit">Show Answer</button>
    <button class="btn2" type="reset">Reset</button>
    <span style="display:none; color: red" class="ans_all">  Please answer all questions</span>
</div><!-- quiz-1 -->

<div id="quiz-2" class="quiz">
    <div id="q1">
        <div class="qn">
            <p>question</p>
        </div>
        <div class="ans">
            <ul style="list-style-type: none;">
                <li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="l12q1a">option 1</label></li>
                <li><input type="radio" name="q1" value="b" id="q1b"/><label for="l12q1b">option 2</label></li>
                <li><input type="radio" name="q1" value="c" id="q1c"/><label for="l12q1c">option 3</label></li>
                <li><input type="radio" name="q1" value="d" id="q1d"/><label for="l12q1d">option 4</label></li>
            </ul>
            <div class="expn" style="display:none">
                <p><b>Some explanation</b></p>
            </div>
        </div>
    </div>

    <div id="q2">
        <div class="qn">
            <p>question</p>
        </div>
        <div class="ans">
            <ul style="list-style-type: none;">
                <li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
                <li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
                <li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
                <li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
            </ul>
            <div class="expn" style="display:none">
                <p><b>Some explanation</b></p>
            </div>
        </div>
    </div>
    <button class="btn1" type="submit">Show Answer</button>
    <button class="btn2" type="reset">Reset</button>
    <span style="display:none; color: red" class="ans_all">  Please answer all questions</span>
</div><!-- quiz-2 -->

<div id="quiz-3" class="quiz">
    <div id="q1">
        <div class="qn">
            <p>question</p>
        </div>
        <div class="ans">
            <ul style="list-style-type: none;">
                <li class="correct"><input type="radio" name="q1" value="a" id="q1a"/><label for="l12q1a">option 1</label></li>
                <li><input type="radio" name="q1" value="b" id="q1b"/><label for="l12q1b">option 2</label></li>
                <li><input type="radio" name="q1" value="c" id="q1c"/><label for="l12q1c">option 3</label></li>
                <li><input type="radio" name="q1" value="d" id="q1d"/><label for="l12q1d">option 4</label></li>
            </ul>
            <div class="expn" style="display:none">
                <p><b>Some explanation</b></p>
            </div>
        </div>
    </div>

    <div id="q2">
        <div class="qn">
            <p>question</p>
        </div>
        <div class="ans">
            <ul style="list-style-type: none;">
                <li><input type="radio" name="q2" value="a" id="q2a"/><label for="q2a">option 1</label></li>
                <li><input type="radio" name="q2" value="b" id="q2b"/><label for="q2b">option 2</label></li>
                <li class="correct"><input type="radio" name="q2" value="c" id="q2c"/><label for="q2c">option 3</label></li>
                <li><input type="radio" name="q2" value="d" id="q2d"/><label for="q2d">option 4</label></li>
            </ul>
            <div class="expn" style="display:none">
                <p><b>Some explanation</b></p>
            </div>
        </div>
    </div>
    <button class="btn1" type="submit">Show Answer</button>
    <button class="btn2" type="reset">Reset</button>
    <span style="display:none; color: red" class="ans_all">  Please answer all questions</span>
</div><!-- quiz-3 -->

$('.btn1').on('click', chkd_answer);
$('.btn2').on('click', reset);

function chkd_answer() {
    var chkd_optn = $('input:checked');
    var correct = $("li.correct");
    var wrong = chkd_optn.parent("li").not(".correct");

    if (chkd_optn.length < 3) {
        $('.ans_all').fadeIn(1000).fadeOut(800);
    } else {
        $('.expn').slideToggle();
        correct.toggleClass('g-class'); // adding green
        wrong.toggleClass('r-class'); // adding red
    }
}

function reset(){
var chkd_optn = $('input:checked');
    chkd_optn.prop("checked", false);
    $('.expn').slideUp();
    $('li').removeClass('g-class r-class');
}

Aucun commentaire:

Enregistrer un commentaire