0
Ich habe ein Quiz von wo jede Frage in separate Seite mit Optionen (Klick-Typ) geladen werden, bestimmte Fragen werden mehr als eine Antwort mit anderen Option sowie. Am Ende des Fragebogens muss der Benutzer das Formular ausfüllen.Benutzer Details Formular nach dem Klicken auf Absenden in Umfrageformular
Ich habe Umfrage erstellt, aber ich bin nicht in der Lage, Benutzerdetails Formular nach Umfrageformular zu erhalten, wenn Benutzer auf die Antwort der letzten Frage klicken.
Ich habe meinen Code angebracht bitte mich
(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 -->
was ich habe, dass Sie das Ergebnis des Quiz anzeigen möchten, nachdem er wie 3/5 fertig ist, in anderen Worten brauchen Sie die Implementierung der displayScore-Funktion, richtig? –