Question

我的样本测验似乎工作正常，直到我结束。测验结束时没有显示分数，所以我假设我在处理答案时做错了。这就是我现在所拥有的：

＆＃13;

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);

＆＃13;

<!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-->

＆＃13;

知道为什么分数最终没有显示出来？

Answer 1

您创建了一个函数process()，但您从未调用它。您需要在希望它运行时调用它。（您已经监控了点击事件。）

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(){
    process('q1');
    $('.questionForm').hide();
    $('#q2').fadeIn(300);
      return false;
  });
  
  $('#q2 #submit').click(function(){
    process('q2');
    $('.questionForm').hide();
    $('#q3').fadeIn(300);
      return false;
  });
  
  $('#q3 #submit').click(function(){
    process('q3');
    $('.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-->

Jquery测验 - 评分功能

1 个答案: