I'm new to jQuery and I have a problem with next() method.Im currently working on an online exam, Im new to programming so I copy some codes online, so fetch my questions from database then display it like this.
<div class='myQuestion active'>..</div>
<div class='myQuestion'>..</div>
<div class='myQuestion'>..</div>
<div class='myQuestion'>..</div>
<div class='myQuestion'>..</div>
<div class='myQuestion'>..</div>
So each div has form inside with button next and prev so this is the out out
But when i click next sometimes it working but most of the time nothing will happened it will just display question 1.
This is the code I copy from some source , but I already change some here.
$(document).on("keydown", e), setTimeout(function() {
$(".nextbtn").on('click',function() {
var e = $(".myQuestion.active");
$(e).removeClass("active"), $(e).next().length == 0 ? (check()) : ($(e).next().addClass("active"), $(".myForm")[0].reset(),
$(".prebtn").attr("disabled", false));
}),
$(".prebtn").click(function() {
var i;
var e = $(".myQuestion.active");
$(e).removeClass("active"),
$(e).prev().addClass("active"), $(".myForm")[0].reset()
$(".myQuestion:first-child").hasClass("active") ? $(".prebtn").attr("disabled", true) : $(".prebtn").attr("disabled", false);
$(".prebtn").prop("disabled")?i=1:i=0;
})
}, 700);
I don't know what's the point of on keydown, but this code is inside already the document.ready function.
This is the vue template which contain the form:
<template>
<div class="main-questions">
<div class="myQuestion" v-for="(question, index) in questions" :key="index + uuid">
<div class="row">
<div class="col-md-6">
<blockquote>
Total Questions /
</blockquote>
<div class="q-block">
<p class="question"></p>
</div>
<form class="myForm" action="/quiz_start" v-on:submit.prevent="createQuestion(question.question_id,question.index)" method="post">
<div v-for="choices,indx in JSON.parse(question.choices)" :key="indx">
<label class="form-label">
<input class="radioBtn" v-bind:id="'radio'+indx" type="radio" v-bind:value="'opt-'+indx" v-model="result.user_answer" aria-checked="false"> <span></span>
</label><br>
</div>
<div class="row">
<div class="col-md-6 col-xs-8">
<button type="submit" class="btn btn-wave btn-block prebtn">Previous</button>
</div>
<div class="col-md-6 col-xs-8">
<button type="submit" class="btn btn-wave btn-block nextbtn">Next</button>
</div>
</div>
</form>
</div>
<div class="question-block-tabs" v-if="question.question_img != null || question.question_video_link != null">
<ul class="nav nav-tabs tabs-left">
<li v-if="question.question_img != null" class="active"><a href="#image" data-toggle="tab">Question Image</a></li>
<!--<li v-if="question.question_video_link != null"><a href="#video" data-toggle="tab">Question Video</a></li>-->
</ul>
<div class="tab-content">
<div class="tab-pane active" id="image" v-if="question.question_img != null">
<div class="question-img-block">
<img :src="'../images/questions/'+question.question_img" class="img-responsive" alt="question-image">
</div>
</div>
<!--<div class="tab-pane fade" id="video" v-if="question.question_video_link != null">
<div class="question-video-block">
<h3 class="question-block-heading">Question Video</h3>
<iframe :id="'video'+(index+1)" width="460" height="345" :src="question.question_video_link" frameborder="0" allowfullscreen></iframe>
</div>
</div>-->
</div>
</div>
</div>
</div>
</div>
</template>
Can someone help me with this to figure out what is missing or wrong about this code.
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire