2
私のサンプルクイズは、私が終わるまでうまくいくようです。クイズの終わりにはスコアが表示されないので、回答の処理に何か問題があったと仮定しています。ここで私は今持っているものです：Jquery Quiz - 採点機能
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-->スコアが最後に表示されませんなぜ任意のアイデア？
スコアは、あなたの関数で定義されていない、（あなたがあなたの 'プロセスを誘発しない初め – Mihai
で0 '=' VARスコアを追加します） '関数はまったく機能しません。 クリックハンドラに配置します。 – Tallerlei
こんにちはTallerlei - プロセス機能を起動するためのクリックハンドラを追加しようとしましたが、それでも機能しませんでした。あなたは私のために明確にできますか？ – talhawmalik