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