0
我已經開發了一個測驗，其中每個問題必須在帶有選項的單獨頁面中加載（點擊類型），某些問題與其他選項也有不止一個答案。在問卷末尾，用戶必須填寫表格。用戶信息表單在點擊提交調查表後
我已經創建了調查，但是當用戶點擊最終問題的答案時，我無法在調查表單後獲取用戶詳細信息表單。
我重視我的代碼，請我
(function() {
var questions = [{
question: "Does Your Business have IT Security Policies and Procedures?",
choices:[ "yes",
"No"],
}, {
question: "What is 8*9?",
choices: [72, 99, 108, 134, 156],
correctAnswer: 0
}, {
question: "What is 1*7?",
choices: [4, 5, 6, 7, 8],
correctAnswer: 3
}, {
question: "What is 8*8?",
choices: [20, 30, 40, 50, 64],
correctAnswer: 4
}];
var questionCounter = 0; //Tracks question number
var selections = []; //Array containing user choices
var quiz = $('#quiz'); //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();
// If no user selection, progress is stopped
if (isNaN(selections[questionCounter])) {
alert('Please make a selection!');
} 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'
});
var header = $('<h2>Question ' + (index + 1) + ':</h2>');
qElement.append(header);
var question = $('<p>').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>');
var item;
var 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;
}
// Reads the user selection and pushes the value to an array
function choose() {
selections[questionCounter] = +$('input[name="answer"]:checked').val();
}
// Displays next requested element
function displayNext() {
quiz.fadeOut(function() {
$('#question').remove();
if (questionCounter < questions.length) {
var nextQuestion = createQuestionElement(questionCounter);
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();
} else if (questionCounter === 0) {
$('#prev').hide();
$('#next').show();
}
} else {
var scoreElem = displayScore();
quiz.append(scoreElem).fadeIn();
$('#next').hide();
$('#prev').hide();
$('#start').show();
}
});
}
})();CSS INDEX
===================
\t
1. Theme Default CSS (body, link color, section etc)
2. Header Area
3. Slider Area
4. Feature Area
5. Service Area
6. Video Area
7. Features Carousel Area
8. Pricing Area
9. Clients Area
10. Blog Area
11. Download Area
12. Contact Area
13. Footer Area
14. Image, Solid, Gradient, Transparent, Video Background Area
15. Light Section Style
16. Layout Two Style
17. Scroll Up Start
-----------------------------------------------------------------------------------*/
/*----------------------------------------*/
/* 1. Theme default CSS
/*----------------------------------------*/
* { margin:0; padding:0; }
html, body {height: 100%;}
.floatleft {float:left !important;}
.floatright {float:right !important;}
.floatnone {float:none !important;}
.alignleft {text-align:left !important;}
.alignright {text-align:right !important;}
.aligncenter {text-align:center !important;}
.no-display { display:none; }
.no-margin { margin:0 !important; }
.no-padding { padding:0 !important; }
a:focus, button:focus {outline:0px solid}
img {
max-width:100%;
height:auto;
border:0;
vertical-align:top;
}
.fix {overflow:hidden}
p {
font-family: "Neuton",serif;
font-weight: 300;
line-height: 24px;
margin: 0 0 15px;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px;
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
color: #fff;
text-decoration: none;
}
a:active, a:hover, a:focus {
outline: 0 none;
text-decoration: none
}
ul{
list-style: outside none none;
margin: 0;
padding: 0
}
.clear{clear:both}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
body {
color: #D0D0D0;
font-family: "montserratregular";
font-size: 16px;
line-height: 20px;
text-align: left;
}
#header {
\t width:100%;
\t height:100px;
\t border:1px solid #000;
}
#logo{
\t clear:both;
\t margin:20px;
}
#logo a {
display: block;
margin-left: -18px;
position: relative;
}<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<title>Security Simplified</title>
\t
\t <!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css" >
<!-- Theme Style -->
<link rel="stylesheet" type="text/css" href="CSS/style.css">
\t
</head>
<body class="no-transition stretched">
<div id="wrapper" class="clearfix">
<header id="header" class="full-header">
\t \t \t \t \t <!-- Logo-->
\t \t \t \t \t <div id="logo">
\t \t \t \t \t \t <a href="index.html" class="standard-logo"><img src="images/logo.png" alt=" Logo"></a>
\t \t \t \t \t </div><!-- #logo end -->
</header> \t \t \t
<div id='quiz'></div>
<div class='button' id='next'><a href='#'>Next</a></div>
<div class='button' id='prev'><a href='#'>Prev</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>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
</div> <!-- end of wrapper -->
我得到了什麼，你想顯示測驗結果後，他完成了3/5，換句話說，你需要執行displayScore函數，是否正確？ –