2
Mein Beispiel-Quiz scheint in Ordnung zu sein, bis ich zum Ende komme. Das Ende des Quiz zeigt nicht die Punktzahl, also nehme ich an, dass ich etwas falsch gemacht habe mit der Verarbeitung der Antworten. Hier ist, was ich jetzt habe:Jquery Quiz - Scoring-Funktion
var score = 0; //Initial score
var total = 3; //total number of questions
var point = 1; //Points per correct answer
var highest = total * point; //equation for highest score
//Initialize
function init(){
//Correct Answers are set below
sessionStorage.setItem('a1','b');//This basically says that for question 1, the answer is B
sessionStorage.setItem('a2','b');
sessionStorage.setItem('a3','c');
}
$(document).ready(function(){
//This hides the questions after the first one
$('.questionForm').hide();
//This one shows the first question on load
$('#q1').show();
//This function jumps to the next question when the "submit" button is pressed
$('#q1 #submit').click(function(){
$('.questionForm').hide();
$('#q2').fadeIn(300);
return false;
});
$('#q2 #submit').click(function(){
$('.questionForm').hide();
$('#q3').fadeIn(300);
return false;
});
$('#q3 #submit').click(function(){
$('.questionForm').hide();
$('#results').fadeIn(300);
return false;
});
});
//Process the answers
function process(q) {
if(q == "q1"){
var submitted = $('input[name=q1]:checked').val();
if (submitted == sessionStorage.a1){
score++;
}
}
if(q == "q2"){
var submitted = $('input[name=q2]:checked').val();
if (submitted == sessionStorage.a2){
score++;
}
}
if(q == "q3"){
var submitted = $('input[name=q3]:checked').val();
if (submitted == sessionStorage.a3){
score++;
}
$('#results').html('<h3>Your score is: '+score+' out of 3</h3>');
}
return false;
}
//function below shows the order of functions we want to be read
window.addEventListener('load',init,false);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
</head>
<body>
<div class="container">
<header>
<div class="heading"> Language Quiz </div>
<div class="heading2"> Something floating right </div>
</header>
<main>
<form class="questionForm" id="q1" data-question="1">
<h3>This is where the first question would go</h3>
<ul>
<li><input type="radio" name="q1" value="a" />Option A</li>
<li><input type="radio" name="q1" value="b" />Option B</li>
<li><input type="radio" name="q1" value="c" />Option C</li>
<li><input type="radio" name="q1" value="d" />Option D</li>
</ul>
<button id="submit">Submit</button>
</form>
<form class="questionForm" id="q2" data-question="2">
<h3>This is where the second question would go</h3>
<ul>
<li><input type="radio" name="q2" value="a" />Option A</li>
<li><input type="radio" name="q2" value="b" />Option B</li>
<li><input type="radio" name="q2" value="c" />Option C</li>
<li><input type="radio" name="q2" value="d" />Option D</li>
</ul>
<button id="submit">Submit</button>
</form>
<form class="questionForm" id="q3" data-question="3">
<h3>This is where the third question would go</h3>
<ul>
<li><input type="radio" name="q3" value="a" />Option A</li>
<li><input type="radio" name="q3" value="b" />Option B</li>
<li><input type="radio" name="q3" value="c" />Option C</li>
<li><input type="radio" name="q3" value="d" />Option D</li>
</ul>
<button id="submit">Submit</button>
</form>
<div id="results"></div>
<br/>
</main>
<footer>
<p> this is some stuff in the footer</p>
</footer>
</div><!--container-->Jede Idee, warum die Gäste nicht am Ende zeigen?
Score nicht in Ihrer Funktion definiert ist, fügen Sie eine 'var score = 0 'am Anfang – Mihai
Sie lösen keine Ihre' Prozess () 'Funktion überhaupt! Legen Sie es in den Click-Handler. – Tallerlei
Hallo Tallerlei - Ich habe versucht, einen Click-Handler hinzuzufügen, um die Prozessfunktion auszulösen, aber es hat immer noch nicht funktioniert. Könnten Sie bitte für mich klären? – talhawmalik