程序员经验分享-hwhale

JavaScript 测验在提出所有问题之前结束

2024-05-17

我现在正在学习 JavaScript，并且正在创建一个测验。我的测验运行正常，控制台中没有任何错误，但它会跳过问题，有时会在回答所有问题之前结束测验。即使给出正确答案，也会减少时间。

我不太确定为什么它会这样做，因为在我看来它的编码是正确的。鉴于我在这里寻求帮助，这显然是不正确的。如果有人可以帮助我调整代码以使其正常运行，我将非常感激！

var quizButton = document.querySelector("#quiz-button")
var timer = 75
var quizTimer = document.querySelector("#quiz-timer")
var questionIndex = 0
var score = 0
var questionBoxElement = document.querySelector('#question-box')

var questions = [
  // add questions here!!
  // question 1
  {
    questionText: "This is question 1",
    options: ["a. answer", "b. correct", "c. answer", "d. answer"],
    answer: "b. correct"
  },
  // question 2 
  {
    questionText: "this is question 2",
    options: ["a. correct", "b. answer", "c. answer", "d. answer"],
    answer: "a. correct"
  },
  // question 3
  {
    questionText: "This is question 3",
    options: ["a. answer", "b. answer", "c. answer", "d. correct"],
    answer: "d. correct"
  },
  // question 4 
  {
    questionText: "this is question 4",
    options: ["a. answer", "b. answer", "c. correct", "d. answer"],
    answer: "c. correct"
  },
  // question 5
  {
    questionText: "this is question 5",
    options: ["a. answer", "b. answer", "c. correct", "d. answer"],
    answer: "c. correct"
  }
];

var answerBtn0 = document.querySelector("#option0");
var answerBtn1 = document.querySelector("#option1");
var answerBtn2 = document.querySelector("#option2");
var answerBtn3 = document.querySelector("#option3");

var answers = [answerBtn0, answerBtn1, answerBtn2, answerBtn3]

// display questions
function displayQuestion() {
  let question = questions[questionIndex];
  let answerOptions = question.options;

  let questionEl = document.querySelector("#question");
  questionEl.textContent = question.questionText;



  for (var i = 0; i < answerOptions.length; i++) {
    let answerChoices = answerOptions[i];

    let answerBtn = answers[i];

    answerBtn.textContent = answerChoices;

  }




  document.querySelector("#answer-buttons").addEventListener("click", checkAnswer);


  // check for correct answer

  function correctAnswer(answerBtn) {
    return answerBtn.textContent === question.answer;
  }

  // checkif answeris correct
  function checkAnswer(event) {
    let answerBtn = event.target;
    // correct answer 
    if (correctAnswer(answerBtn)) {
      score = score + 20;
    }
    // incorrect answer 
    else {
      if (timer > 10) {
        timer = timer - 10;
      } else {
        timer = 0;
        endQuiz();
      }
    }

    questionIndex++;

    // if no more questions, end quiz
    if (questionIndex < questions.length) {
      displayQuestion();
    } else {
      endQuiz();
    }
  }


  function endQuiz() {
    let finalScore = document.querySelector("#scores")
    finalScore.textContent = "You scored " + score + "! Great Job!";
  }










}
// timer countdown
function countdown() {
  var timeLeft = setInterval(() => {

    if (timer >= 0 || questionIndex < 5) {
      quizTimer.textContent = timer + " seconds left";
      timer--;
      //questionIndex ++;

    } else {
      clearInterval(timeLeft);

      // call game over function
    }
  }, 1000);
}


//Start function
function startQuiz() {
  var startQuizIntro = document.querySelector(".start-quiz-intro")
  startQuizIntro.setAttribute("class", "hide")

  questionBoxElement.classList.remove("hide")

  console.log(questionBoxElement);
  // reset timer and score
  userScore = 0;

  countdown();
  displayQuestion();
}

// One Line to call one function
quizButton.addEventListener("click", startQuiz);
<div id="quiz-timer"></div>

<header class="start-quiz-intro">
  <div class="quiz">
    <h2>Coding Quiz</h2>
  </div>

  <div class="center-button">
    <p class="start"> Press Button To Start The Quiz</p>
    <button id="quiz-button">Start</button>
  </div>
</header>

<div class="hero">
  <div id="question-box" class="hide">
    <h2 id="question"></h2>
    <div id="answer-buttons" class="btn-grid">
      <button id="option0" class="btn"></button>
      <button id="option1" class="btn"></button>
      <button id="option2" class="btn"></button>
      <button id="option3" class="btn"></button>
    </div>
    <h3 id="scores"></h3>
  </div>
</div>

<footer>
  Thanks for playing my game - Reid
</footer>

几个问题

  1. I区分大小写
  2. 您多次添加事件监听器 - 通过将函数移到 displayQuestion 之外来修复
var quizButton = document.querySelector("#quiz-button")
var timer = 75
var quizTimer = document.querySelector("#quiz-timer")
var questionIndex = 0
var score = 0
var questionBoxElement = document.querySelector('#question-box')

// check for correct answer

function correctAnswer(answerBtn, question) {
  return answerBtn.textContent === question.answer;
}

// checkif answeris correct
function checkAnswer(event) {
  let answerBtn = event.target;
  // correct answer 
  let question = questions[questionIndex];
  if (correctAnswer(answerBtn, question)) {
    score = score + 20;
  }
  // incorrect answer 
  else {
    if (timer > 10) {
      timer = timer - 10;
    } else {
      timer = 0;
      endQuiz();
    }
  }
  questionIndex++;
  // if no more questions, end quiz
  if (questionIndex < questions.length) {
    displayQuestion();
  } else {
    endQuiz();
  }
}

function endQuiz() {
  let finalScore = document.querySelector("#scores")
  finalScore.textContent = "You scored " + score + "! Great Job!";
}
var questions = [
  // add questions here!!
  // question 1
  {
    questionText: "This is question 1",
    options: ["a. answer", "b. correct", "c. answer", "d. answer"],
    answer: "b. correct"
  },
  // question 2 
  {
    questionText: "this is question 2",
    options: ["a. correct", "b. answer", "c. answer", "d. answer"],
    answer: "a. correct"
  },
  // question 3
  {
    questionText: "This is question 3",
    options: ["a. answer", "b. answer", "c. answer", "d. correct"],
    answer: "d. correct"
  },
  // question 4 
  {
    questionText: "this is question 4",
    options: ["a. answer", "b. answer", "c. correct", "d. answer"],
    answer: "c. correct"
  },
  // question 5
  {
    questionText: "this is question 5",
    options: ["a. answer", "b. answer", "c. correct", "d. answer"],
    answer: "c. correct"
  }
];

var answerBtn0 = document.querySelector("#option0");
var answerBtn1 = document.querySelector("#option1");
var answerBtn2 = document.querySelector("#option2");
var answerBtn3 = document.querySelector("#option3");

var answers = [answerBtn0, answerBtn1, answerBtn2, answerBtn3]

// display questions
function displayQuestion() {
  console.log(questionIndex)
  let question = questions[questionIndex];
  let answerOptions = question.options;

  let questionEl = document.querySelector("#question");
  questionEl.textContent = question.questionText;
  for (var i = 0; i < answerOptions.length; i++) {
    let answerChoices = answerOptions[i];
    let answerBtn = answers[i];
    answerBtn.textContent = answerChoices;
  }
}
// timer countdown
function countdown() {
  var timeLeft = setInterval(() => {

    if (timer >= 0 || questionIndex < 5) {
      quizTimer.textContent = timer + " seconds left";
      timer--;
      //questionIndex ++;
    } else {
      clearInterval(timeLeft);
      // call game over function
    }
  }, 1000);
}

//Start function
function startQuiz() {
  var startQuizIntro = document.querySelector(".start-quiz-intro")
  startQuizIntro.setAttribute("class", "hide")

  questionBoxElement.classList.remove("hide")

  console.log(questionBoxElement);
  // reset timer and score
  userScore = 0;
  countdown();
  displayQuestion();
}

// One Line to call one function
quizButton.addEventListener("click", startQuiz);
document.querySelector("#answer-buttons").addEventListener("click", checkAnswer);
<div id="quiz-timer"></div>

<header class="start-quiz-intro">
  <div class="quiz">
    <h2>Coding Quiz</h2>
  </div>

  <div class="center-button">
    <p class="start"> Press Button To Start The Quiz</p>
    <button id="quiz-button">Start</button>
  </div>
</header>

<div class="hero">
  <div id="question-box" class="hide">
    <h2 id="question"></h2>
    <div id="answer-buttons" class="btn-grid">
      <button id="option0" class="btn"></button>
      <button id="option1" class="btn"></button>
      <button id="option2" class="btn"></button>
      <button id="option3" class="btn"></button>
    </div>
    <h3 id="scores"></h3>
  </div>
</div>

<footer>
  Thanks for playing my game - Reid
</footer>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

function

JavaScript 测验在提出所有问题之前结束 的相关文章

随机推荐

  • 在另一个模块中使用自定义 gradle 插件模块

    我正在开发一个自定义插件 我希望能够在稍后阶段将其部署到存储库 因此我为其创建了一个独立的模块 在对其进行任何正式的 TDD 之前 我想手动进行某些探索性测试 因此 我创建了一个使用给定插件的演示模块 到目前为止 我发现执行此操作的唯一方法

  • std::map 和二叉搜索树

    我读过 std map 是使用二叉搜索树数据结构实现的 BST 是一种顺序数据结构 类似于数组中的元素 它将元素存储在 BST 节点中并按其顺序维护元素 例如如果元素小于节点 则将其存储在节点的左侧 如果元素大于节点 则将其存储在节点的右侧

  • 安装后如何使用 npm 包 (chart.js)？

    我正在制作一个练习 Laravel 站点 并且我已经通过 npm install 安装了 Chart js 这是一个愚蠢的问题 但现在我如何从这里使用它 或通过 npm 安装的任何东西 这些文件安装在节点模块文件夹中 我应该在页眉中使用标签

  • @Autowire注释的问题（空）

    我在验证器类中自动连接的两个服务有问题 这些服务工作正常 因为在我的控制器中是自动连接的 我有一个 applicationContext xml 文件和 MyApp servlet xml 文件 我的基础包是 es unican meteo

  • 扩展位置绝对div超出溢出隐藏div

    我已经好几个月没有做过CSS了 所以我可能会错过一些简单的东西 但无论解决方案是什么 我都无法弄清楚 所以问题就在这里 这是我的代码的简化版本 div style height 100 width 200px div style margi

  • 如何避免 ArrayIndexOutOfBoundsException 或 IndexOutOfBoundsException？ [复制]

    这个问题在这里已经有答案了 如果你的问题是我得到了java lang ArrayIndexOutOfBoundsException在我的代码中 我不明白为什么会发生这种情况 这意味着什么以及如何避免它 这应该是最全面的典范 https me

  • Azure 服务总线主题请求与消息

    I need help interpreting these graphs 它有 0 订阅 这是否意味着该主题没有任何内容 查看消息图表 在过去 30 天内 没有收到或读取来自此主题的消息 如果没有向该主题写入 读取任何内容 为什么会有 3

  • Python：我不明白 sum() 的完整用法

    当然 我明白你使用 sum 与几个数字 然后它总结所有 但我正在查看它的文档 我发现了这一点 sum iterable start 第二个参数 start 的作用是什么 这太尴尬了 但我似乎无法通过谷歌找到任何示例 并且对于尝试学习该语言的

  • 红宝石接球和效率

    catch在 Ruby 中意味着跳出深度嵌套的代码 在 Java 中 例如用Java也可以达到同样的效果try catch用于处理异常 但它被认为是糟糕的解决方案 而且效率非常低 在 Ruby 中 我们有处理异常的方法begin raise

  • 如何更改自动完成中的结果过滤器？

    我不想进行字面匹配 而是想通过正则表达式选择结果 我可以覆盖自动完成的默认行为来完成此任务还是需要替代结构 有一个内置的方法可以做到这一点 只需提供一个函数source http jqueryui com demos autocomplet

  • 淘汰赛绑定，每个都可进行自定义

    我这里有一个情况 用于淘汰每个带有定制的绑定 这是我的代码 div div table tbody tr td td td td tr tbody table div div

  • Excels COUNTIFS 函数中的数组作为条件，混合 AND 和 OR [重复]

    这个问题在这里已经有答案了 我已经在谷歌上搜索了一段时间 但似乎无法让它发挥作用 我使用 Excel 2010 希望混合使用 AND 和 OR 运算符来计算行数 我想做的是这样的 COUNTIFS A A string1 B B strin

  • TextBox 焦点的 WinForms 事件？

    我想添加一个偶数TextBox当它有焦点时 我知道我可以用一个简单的方法来做到这一点textbox1 Focus并检查布尔值 但我不想那样做 我想这样做 this tGID Focus new System EventHandler thi

  • npm install -g expo-cli 失败并显示“EPERM：不允许操作，取消链接 '...\adb.exe'

    我在运行时收到错误 npm install g expo cli 我尝试以管理员身份重新安装节点模块 但出现相同的错误 环境 Windows 10 节点版本 10 15 3 NPM版本 6 9 0 我预计安装会发生 但出现了这样的错误 np

  • Java：如何为山区时间创建 TimeZone 对象？

    必须不禁用夏令时 嗯 在这个清单 http en wikipedia org wiki List of tz database time zones在 zoneinfo 时区名称中 有很多声称是 山地时间 找到最适合您想要的那个 然后使用它

  • 在 Rust 中，太大的位移是否是未定义的行为？

    当您运行此代码时 allow exceeding bitshifts fn main const NUMBER u64 0b 10101010 fn print shift i u32 println b NUMBER gt gt i pr

  • “不等于”的 F# 语法是什么？

    在 C 代码中 它会是这样的 if c 0 some code 那么在 F 中呢 From MSDN 有关 F 算术运算符的页面 http msdn microsoft com en us library dd469493 aspx 看起来

  • 使用 Conda 更新特定模块会删除大量软件包

    我最近开始使用 Anaconda Python 发行版 因为它提供了许多开箱即用的数据分析库 使用 conda 创建环境和安装软件包也轻而易举 但是当我想更新 Python 本身或任何其他模块时 我遇到了一些严重的问题 我事先被告知我的很多

  • ToggleClass 动画 jQuery？

    我的网站上有一个部分 当用户单击时我希望它展开 我正在使用 jQuerytoggleClass为了这 expandable function e e preventDefault this closest article toggleCla

  • JavaScript 测验在提出所有问题之前结束

    我现在正在学习 JavaScript 并且正在创建一个测验 我的测验运行正常 控制台中没有任何错误 但它会跳过问题 有时会在回答所有问题之前结束测验 即使给出正确答案 也会减少时间 我不太确定为什么它会这样做 因为在我看来它的编码是正确的

热门标签