2
我的示例测验似乎工作正常，直到我到最后。测验结束时不显示分数，所以我假设我在处理答案时做了错误处理。这里是我有现在：jquery测验 - 得分函数
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-->任何想法，为什么比分会不会在最后说明了什么？
分数在你的函数没有定义，添加一个'VAR得分= 0'之初 – Mihai
你不会触发你的'过程（ ）'功能！ 将它放入点击处理程序。 – Tallerlei
嗨Tallerlei - 我试图添加一个点击处理程序来触发处理函数，但它仍然无法正常工作。你能为我澄清吗？ – talhawmalik