我看到了这个quiz code，并且我一直在尝试对其进行修改，以便可以按以下方式运行
单击以开始测验>问题>对问题的回答>测验结束
因此，基本上，用户将通过单击按钮开始测验来开始测验，一旦用户回答了一个或多个问题，用户将看到每个问题的正确答案。一旦所有问题都得到解答，用户将在测验末尾看到他的结果。
/*jshint strict:false */
$(function() {
'use strict';
var questions = [{
question: 'What is bacon?',
choices: ['True', 'False'],
correctAnswer: 0,
answertext: 'The food of angels'
}, {
question: 'Jim didn\'t ate it?',
choices: ['True', 'False'],
correctAnswer: 1,
answertext: 'Oh, He sure did.'
}, {
question: 'Did he deserve it?',
choices: ['True', 'False'],
correctAnswer: 0,
answertext: 'NO, no he did not.'
}, {
question: 'He will make more?',
choices: ['True', 'False'],
correctAnswer: 0,
answertext: 'He better be cooking.'
}, {
question: 'Will he eat it again?',
choices: ['True', 'False'],
correctAnswer: 1,
answertext: 'As tempting as it sounds, No'
}];
var questionCounter = 0, //Tracks question number
selections = [], //Array containing user choices
quiz = $('.quiz-component'), //Quiz div object
answer = $('.quiz-component'); //Quiz div object
// Displays next requested element
function displayNext() {
quiz.fadeOut(function() {
$('#question-area').remove();
$('#answer-area').remove();
if (questionCounter < questions.length) {
var nextQuestion = createQuestionElement(questionCounter),
answerQuestion = showAsnwerElement(questionCounter);
//$('#answer-area').remove();
quiz.append(nextQuestion).fadeIn();
if (!(isNaN(selections[questionCounter]))) {
$('input[value=' + selections[questionCounter] + ']').prop('checked', true);
}
// Controls display of 'prev' button
if (questionCounter === 1) {
$('#prev').show();
//$('#question-area').remove();
answer.append(answerQuestion).fadeIn();
} else if (questionCounter === 0) {
$('#prev').hide();
$('#next').show();
}
} else {
var scoreElem = displayScore();
quiz.append(scoreElem).fadeIn();
$('#next').hide();
$('#prev').hide();
$('#start').show();
}
});
}
// 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();
// If no user selection, progress is stopped
if (isNaN(selections[questionCounter])) {
//$('.qalert').remove();
$('.question').append('<p class=\'qalert\'>Please make a selection!<p>');
} else {
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
$('#start').on('click', function(e) {
e.preventDefault();
if (quiz.is(':animated')) {
return false;
}
questionCounter = 0;
selections = [];
displayNext();
$('#start').hide();
});
// Animates buttons on hover
$('.button').on('mouseenter', function() {
$(this).addClass('active');
});
$('.button').on('mouseleave', function() {
$(this).removeClass('active');
});
// Creates and returns the div that contains the questions and
// the answer selections
function createQuestionElement(index) {
var qElement = $('<div>', {
id: 'question-area'
});
var header = $('<p class=\'question-number\'>Question ' + (index + 1) + ':</p>');
qElement.append(header);
var question = $('<p class=\'question\'>').append(questions[index].question);
qElement.append(question);
var radioButtons = createRadios(index);
qElement.append(radioButtons);
return qElement;
}
// Creates a list of the answer choices as radio inputs
function createRadios(index) {
var radioList = $('<ul>'),
item,
input = '';
for (var i = 0; i < questions[index].choices.length; i++) {
item = $('<li>');
input = '<input type="radio" name="answer" value=' + i + ' />';
input += questions[index].choices[i];
item.append(input);
radioList.append(item);
}
return radioList;
}
// Creates and returns the div that contains the correct anwser
function showAsnwerElement(index) {
var aElement = $('<div>', {
id: 'answer-area'
});
var header = $('<p class=\'correct-answers\'>').append(questions.correctAnswer).toString();
aElement.append(header);
var answer = $('<p class=\'answers\'>').append(questions[index].answertext);
aElement.append(answer);
return aElement;
}
// Reads the user selection and pushes the value to an array
function choose() {
selections[questionCounter] = +$('input[name="answer"]:checked').val();
}
// Computes score and returns a paragraph element to be displayed
function displayScore() {
var score = $('<p>', {
id: 'question'
});
var numCorrect = 0;
for (var i = 0; i < selections.length; i++) {
if (selections[i] === questions[i].correctAnswer) {
numCorrect++;
}
}
score.append('You got <span class="correntAns">' + numCorrect + '</span> questions out of <span class="correntAns">' + questions.length + '</span> right!!!');
return score;
}
});.fl-qbgi-slide {
position: relative;
}
.img {
visibility: hidden;
}
.fl-quiz-component {
display: block;
position: absolute;
top: 0;
width: 100%;
}
.title {
background-color: $brand-primary;
}
p {
text-align: center;
padding: 5px 12px;
}
.quiz-section {
background-color: rgba(0, 66, 131, 0.5);
color: #FFFFFF;
font-family: $font-family-sans-serif-condensed;
font-size: $font-size-large;
height: auto;
min-height: 320px;
position: relative;
}
.quiz-component {
height: auto;
margin: auto;
padding: 20px 15px 10px;
position: relative;
width: 85%;
}
.button {
background-color: $gray-light;
color: $brand-primary;
float: right;
margin: 0 2px 0 2px;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
.button.active {
background-color: $gray-light;
color: $brand-primary;
}
button {
float: right;
position: relative;
}
.button a {
color: $brand-primary;
text-decoration: none;
padding: 5px 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#prev {
display: none;
}
#start {
display: none;
width: 150px;
}
.correntAns {
@extend %text-17px-bold-italics-caps;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
--- title: Quiz ---
<div class='fl-qbgi-slide'>
<div class="img">
<!--
{{#if image}}
{{#with image}}
{{> image}}
{{/with}}
{{else}}
{{#parseJSON '{
"srcDesktop": "/img-placeholders/botm-bg-grain-0.jpg",
"srcTablet": "/img-placeholders/botm-bg-grain-0.jpg",
"srcPhone": "/img-placeholders/botm-bg-grain-0.jpg",
"altText": "Beer of the Month Carousel Slide"
}'}}
{{> image}}
{{/parseJSON}}
{{/if}}
-->
</div>
<div class="fl-quiz-component">
<div class="quiz-section">
<div class="title">
<p>Seafood Sustainability Quiz</p>
</div>
<div class='quiz-component'></div>
<!-- handlebars temp area
#quiz-questions}}
<div class="question-block">
<p class="">{{{default quiz-question}}}</p>
<a class="">True</a>
<a class="">false</a>
</div>
/quiz-question}}
-->
<div class='button' id='next'><a href='#'>Next</a>
</div>
<div class='button' id='prev'><a href='#'>Prev</a>
</div>
<div class='button' id='start'> <a href='#'>Start Over</a>
</div>
<!--
<button class='' id='next'>Next</a></button>
<button class='' id='prev'>Prev</a></button>
<button class='' id='start'> Start Over</a></button>
-->
</div>
</div>
</div>
<script src="/js/apps/quiz-component/main.js"></script>我在哪里需要帮助
需要在用户提交答案之后且在显示下一个问题之前，能够显示每个问题的正确答案。
我已经调整了代码以在之后显示答案，但是在同一屏幕上显示了下一个问题。需要它仅显示答案，用户将单击下一步，然后将显示下一个问题。
需要显示2个不同的背景图片；一个在问题中，另一个在测验末。
不需要，但肯定有帮助
如果我能看到用Handlebars.js编写的代码，那将非常有帮助，因为我正在尝试学习把手
最佳答案
好的，我要用javascript回答这个问题（我对handlebars.js不太了解）。
要在每个用户提交后显示答案，请在单选按钮上附加一个click事件。我注意到您正在使用jquery。
$("#trueRadioBut").on("click",function(){
//check your answer
if(right)
display answerText;
update score ...etc...
else
wrong option code.
});
对错误的单选按钮也执行相同的操作。如果用户正确，则应显示answerText。
也可以使用jquery和其他CSS类来更改背景。在CSS中创建一个类，也许是一个具有不同背景的
.endBackground。然后，您可以使用jquery的toggleClass()切换它。 toggleClass()交替打开和关闭元素的类。为此，您还需要更改
next按钮。向其添加一个单击事件，以获取下一个问题并重定向到下一页。如果没有其他问题，请直接切换背景。$(body).toggleClass("endBackground");
这应该改变您的背景。要在重新启动时恢复为正常背景，请在您的
startover按钮中添加一个click事件，以再次关闭该类。希望我已经清楚了。问我是否有任何疑问。
关于javascript - 动态测验-支持，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37647891/