【发布时间】：2018-01-08 08:21:02
【问题描述】：
我正在尝试构建一个测验应用程序。几乎完成了，现在我想向用户显示我的所有问题，只向用户显示一个问题，然后当用户单击下一步按钮时，将出现下一个问题并隐藏已回答的问题。如果用户没有选择任何两个答案，那么用户不允许点击下一步按钮。最后，提交按钮将出现，用户将能够提交数据。我搜索了一些来源，发现几乎与我的预期相似。但是，它完全是 javascript，现在我正在尝试在我的 laravel 项目中重用。但是在这里我遇到了一些问题，请有人帮助我获得预期的结果-（如果您还有任何简单的过程来获得预期的结果，请告诉我） 我的 index.blade.php 是 -
<div class="question" id="question-div">
<form action="{{ url('en-question-answer') }}" method="POST" id="question-form">
{{ csrf_field() }}
<?php
$count=0;
;?>
@foreach($equestions as $equestionType)
@foreach($equestionType as $key => $equestion)
<p>{{ $equestion->question }}</p>
<input type="hidden" id="question_id[{{$count}}]" name="question_id[{{$count}}]" value="{{ $equestion->id }}">
<label class="radio-inline">
<input type="radio" required name="en_answer[{{$count}}]" value="{{ $equestion->choice_a }}">{{ $equestion->option1 }}
</label>
<label class="radio-inline">
<input type="radio" required name="en_answer[{{$count}}]" value="{{ $equestion->choice_b}}">{{ $equestion->option2 }}
</label>
<hr>
<?php $count++; ?>
@endforeach
@endforeach
<button type="submit" id="submit" class="btn btn-primary btn-sm pull-right">Submit</button>
<div class='button' id='next'><a href='#'>Next</a></div>
<div class='button' id='prev'><a href='#'>Prev</a></div>
</form>
</div>
脚本是 -
<script>
//scripts for next-prev button
(function() {
var questions = document.getElementById('question_id[{{$count}}]');
//console.log(questions);
var questionCounter = 0; //Tracks question number
var quiz = $('#question-div'); //Quiz div object
// Display initial question
displayNext();
// Click handler for the 'next' button
$('#next').on('click', function (e) {
e.preventDefault();
// Suspend click listener during fade animation
if(quiz.is(':animated')) {
return false;
}
choose();
questionCounter++;
displayNext();
});
// Click handler for the 'prev' button
$('#prev').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
choose();
questionCounter--;
displayNext();
});
// Click handler for the 'Start Over' button
$('#submit').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
questionCounter = 0;
displayNext();
$('#submit').hide();
});
// Animates buttons on hover
$('.button').on('mouseenter', function () {
$(this).addClass('active');
});
$('.button').on('mouseleave', function () {
$(this).removeClass('active');
});
// Displays next requested element
function displayNext() {
quiz.fadeOut(function() {
$('question_id[{{$count}}]').remove();
if(questionCounter < questions.length){
var nextQuestion = createQuestionElement(questionCounter);
quiz.append(nextQuestion).fadeIn();
// Controls display of 'prev' button
if(questionCounter === 1){
$('#prev').show();
} else if(questionCounter === 0){
$('#prev').hide();
$('#next').show();
}
}else {
$('#next').hide();
$('#prev').hide();
$('#submit').show();
}
});
}
})();
</script>
【问题讨论】：
-
也许this可以给你一个想法
标签： javascript php jquery loops laravel-eloquent