javascript - 无法在 Javascript 测验中显示最终分数-6ren

javascript - 无法在 Javascript 测验中显示最终分数

转载作者：行者123 更新时间：2023-11-30 09:52:04

25

4

我是 Javascript 的初学者我想创建一个带有单选按钮的基本 javascript 测验应用程序。在测验结束时，我想要一 strip 有最终分数的提醒消息。我无法显示最终得分。这就是我编码的内容..HTML:

   var allQuestions = [{
    question: "Who is the Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer: 0
  },

  {
    question: "Who is the Prime Minister of India?",
    choices: ["Rahul Gandhi", "Arvind Kejrival", "Narendra Damodardas Modi"],
    correctAnswer: 2
  },

  {
    question: "Who is the Prime Minister of America?",
    choices: ["Donald Trump", "Barack Obama", "Hilary Clinton"],
    correctAnswer: 2
  }
];

var correctAnswers = 0;
$(document).ready(function() {
  var currentquestion = 0;

  $('#question').html(allQuestions[currentquestion].question);
  $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
  $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
  $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");

  $("#next").click(function() {
    if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
      correctAnswers++;
    };
    currentquestion++;
    if (currentquestion < allQuestions.length) {
      $('#question').html(allQuestions[currentquestion].question);
      $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
      $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
      $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");
      if (currentquestion == allQuestions.length - 1) {
        $('#next').html("Submit");
        $('#next').click(function() {
         /*If I comment out the following if statement, but retain correctAnswers++, I do get alert message,but the result is obviously wrong*/
          if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
            correctAnswers++;
          }
          alert(correctAnswers);
          //alert("Your Score is " + correctAnswers + " out of " + currentquestion + " and your percentage is " + (correctAnswers*100/currentquestion) + "%");
        });

      }

    };
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
  <div>
    <h3 id="question"></h3>
    <form id="form">
      <input type="radio" name="option" value="0" id="option0" checked>
      <label for='option0'>
        <br/>
      </label>
      <input type="radio" name="option" value="1" id="option1">
      <label for='option1'>
        <br/>
      </label>
      <input type="radio" name="option" value="2" id="option2">
      <label for='option2'>
        <br/>
      </label>
    </form>
  </div>
  <br/>
  <a href="#" id="next" class="button hvr-bounce-to-right">Next</a>

</body>

求助!这是 JSFiddle .

最佳答案

这里有一个工作演示。

var allQuestions = [{
    question: "Who is the Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer: 0
  },

  {
    question: "Who is the Prime Minister of India?",
    choices: ["Rahul Gandhi", "Arvind Kejrival", "Narendra Damodardas Modi"],
    correctAnswer: 2
  },

  {
    question: "Who is the Prime Minister of America?",
    choices: ["Donald Trump", "Barack Obama", "Hilary Clinton"],
    correctAnswer: 2
  }
];


$(document).ready(function() {
  var currentquestion = 0;
  var correctAnswers = 0;
  var done = false;

  $('#question').html(allQuestions[currentquestion].question);
  $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
  $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
  $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");

  $("#next").click(function() {
    if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
      correctAnswers++;
    };

    if (done) {
      alert(correctAnswers);
    } else {
      currentquestion++;
      if (currentquestion < allQuestions.length) {
        $('#question').html(allQuestions[currentquestion].question);
        $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
        $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
        $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");
        if (currentquestion == allQuestions.length - 1) {
          $('#next').html("Submit");
          done = true;
        }
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
  <div>
    <h3 id="question"></h3>
    <form id="form">
      <input type="radio" name="option" value="0" id="option0" checked>
      <label for='option0'>
        <br/>
      </label>
      <input type="radio" name="option" value="1" id="option1">
      <label for='option1'>
        <br/>
      </label>
      <input type="radio" name="option" value="2" id="option2">
      <label for='option2'>
        <br/>
      </label>
    </form>
  </div>
  <br/>
  <a href="#" id="next" class="button hvr-bounce-to-right">Next</a>

</body>

关于javascript - 无法在 Javascript 测验中显示最终分数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35943116/

25

4

0

文章推荐： java - 从java中的视频中提取图像

文章推荐： machine-learning - 具有零个或多个标签的多标签文本分类

文章推荐： java - 升级 Jackrabbit 1.3 到 Jackrabbit 2.1.1

JavaScript 测验
我知道这曾经是一个话题，但搜索后我找不到答案 - 也许我的问题太基本了。不过，我正在创建一个 html 测验 - 5 页，分数从一页到下一页，然后在最后评分。这是我正在尝试使用的代码，但它根本不起作
JavaScript 测验？
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
Php在单选按钮上显示随机记录[测验]
我正在做一个简单的 php 问答游戏。我将问题和答案存储在数据库中。我的 tblQuiz 的表结构是这样的: _id, question, answer1, answer2, answer3, cor
javascript - 测验，他们的答案错了吗？
我在考试中遇到了这个问题。以下不正确 javascript 代码的输出是什么？错误是什么？ num=0; if (num > 10); { num = num + 10; } alert(n
JavaScript 测验 Valadition
我在 JavaScript 中验证 4 个问题多项选择测验时似乎遇到了一些问题。现在，如果没有选择任何答案，则会弹出警报，但即使只选择了一个答案，警报也不会弹出。我正在将我的函数作为提交按钮的 onc
javascript - 允许单独的正确答案，测验
我正在尝试使用 JavaScript 构建一个问答游戏。测验答案存储在变量中，如下所示: var correctAnswer = $('#createCorrectAnswer').val(); 然
包含多个问题的 JavaScript 测验
下面我做了一个小测验，有 4 个问题，问题 2,3 和 4 被 CSS 隐藏了，但是你可以尝试从 CSS 中删除样式 (".pytja2, .pytja3, .pytja4 { display: no
Java 测验 - 正确时不接受用户输入
private void startGame() { System.out.println("Exercises must be completed as quickly as pos
Javascript 测验，因此当它达到完整的问题循环时就会停止
这听起来像是我之前问过的问题，但它只得到了部分回答。所以我想从我提出的问题开始。然后，一旦到达最后一个问题(#5)，它就会返回到第一个问题(#1)，当到达起始问题时，它将停止。我尝试在以下代码中执行此
C 测验错误发现
愚蠢的问题，但我的教授不回复电子邮件，所以我在这里问。我现在正在复习期末考试，并且正在复习期中考试来学习。现在，这真的很愚蠢，因为我两个月前就答对了这个问题。但对于我的一生来说，现在回想起来，我无法弄
Javascript 测验 - 如何计算多个选择元素中答案的分数？
我无法编写一个循环来计算我为我的 wordpress 网站创建的测验的分数。测验样式是“将 A 列中的项目与 B 列中的项目进行匹配”。 B 列项目使用选择元素来匹配 A 列中的相应项目。我能想到
javascript - 测验 - if 语句
为什么选择不正确单选选项时，if语句中的else仍然出现？ else 部分只应在未选择单选按钮时出现。真正的结果是下一个问题和可能的答案出现。这是 jsfiddle .我做错了什么？ function
javascript - 测验 - 计算单选按钮值
我正在尝试为西类牙语类(class)创建测验。我对 JavaScript 经验不多，但对 html 和 CSS 相当精通。我有一个问题，然后是三个带答案的单选按钮。有两个错误答案和一个正确答案。我总共
Python 测验 - 如何接受大多数正确答案
我正在编写一个允许用户设置个人测验的程序(如记事卡式系统)。参加测验时，用户会在每个问题上计时。虽然答案不会是多项选择，但它们将由用户输入。有没有一种方法可以让我充分接受那些不是他们第一次设置测验时
带有屏幕结果的 PHP 测验
我正在尝试根据找到的教程创建一个简单的测验。 http://css-tricks.com/building-a-simple-quiz/ 不幸的是，这让我无法自拔，答案可能非常简单。我让这个工作完美
sql - 有趣的 SQL 测验
最近我遇到了以下测验。想象一下我们有这张 table +--------+ | colors | +--------+ | red | | black | | white | | green
jquery - W3Schools jQuery 测验
这里的 W3Schools 网站上发布了一个 jQuery 测验... http://www.w3schools.com/quiztest/quiztest.asp?qtest=jQuery 问题#1
javascript - 带有错误行为的单选按钮的 jQuery 测验
我正在写一个简单的在线测验。有四个单选按钮作为选择。最初，脚本仅填充第一个问题的选项。之后，用户应该选择下一个并单击按钮。如果答案与正确的匹配，则总数递增。否则，将加载下一个问题。提交第 10 个问题
Haskell 测验 : a simple function
我不是 Haskell 程序员，但我对以下问题感到好奇。非正式函数规范: 令 MapProduct 为一个函数，它采用名为 F 的函数和多个列表。它返回一个列表，其中包含使用每个可能组合中每个列表中
javascript - 如何创建高级 html 测验
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 6 年前。 Improve this ques

首页

博学

6Ren·AI

商城

javascript - 无法在 Javascript 测验中显示最终分数