个人中心
gpt4 book ai didi

javascript - Jquery 测验 - 评分功能

转载 作者：行者123 更新时间：2023-11-28 02:44:17 26 4
gpt4 key购买 nike

在我结束之前，我的示例测验似乎运行正常。测验的结尾没有显示分数，所以我假设我在处理答案时做错了。这是我现在得到的:

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

知道为什么分数不会在最后显示吗？

最佳答案

您创建了一个函数 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-->

关于javascript - Jquery 测验 - 评分功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42232138/

26 4 0
文章推荐： html - :before CSS keyword not supported on Firefox
文章推荐： html - 我想降低动画速度
文章推荐： HTML:宽
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com