Question

for (i = 0; i < myQuestions[5].answers.length; i++) {
  $('<li><input type="radio" name="rbtnCount" value =' + i + '>' + myQuestions[5].answers[i] + "</li>").appendTo(".rogue")
}
$(".rogue").on("change", function () {
  var selected = $('input[name=rbtnCount]:checked').val();
  console.log(selected)
  console.log(myQuestions[5].correctAnswer)
  if (selected == myQuestions[5].correctAnswer) {
    alert("its right!!!")
  } else {
    alert("better luck on nextone!!")
  }
})
  /// print score based on correct and incorrect
$(".corr").append(correctAnswer);

我不知道在最后一行代码之后要去哪里才能根据正确答案生成分数。 Havent找到了任何可以帮助解决此问题的方法，它可能是简单的代码，我只是无法找到它。通过编码训练营。所以我对此很陌生。谢谢

Answer 1

您仅发布了jQuery部分，对于使用jQuery的结果的答案类型，您需要在3部分中完成此任务。

将问题列表应用于具有可选且正确答案的数组中
创建循环以生成html
收集正确答案的结果

请研究以下代码，

(function() {
  function buildQuiz() {
    // we'll need a place to store the HTML output
    const output = [];

    // for each question...
    myQuestions.forEach((currentQuestion, questionNumber) => {
      // we'll want to store the list of answer choices
      const answers = [];

      // and for each available answer...
      for (letter in currentQuestion.answers) {
        // ...add an HTML radio button
        answers.push(
          `<label>
            <input type="radio" name="question${questionNumber}" value="${letter}">
            ${letter} :
            ${currentQuestion.answers[letter]}
          </label>`
        );
      }

      // add this question and its answers to the output
      output.push(
        `<div class="question"> ${currentQuestion.question} </div>
        <div class="answers"> ${answers.join("")} </div>`
      );
    });

    // finally combine our output list into one string of HTML and put it on the page
    quizContainer.innerHTML = output.join("");
  }

  function showResults() {
    // gather answer containers from our quiz
    const answerContainers = quizContainer.querySelectorAll(".answers");

    // keep track of user's answers
    let numCorrect = 0;

    // for each question...
    myQuestions.forEach((currentQuestion, questionNumber) => {
      // find selected answer
      const answerContainer = answerContainers[questionNumber];
      const selector = `input[name=question${questionNumber}]:checked`;
      const userAnswer = (answerContainer.querySelector(selector) || {}).value;

      // if answer is correct
      if (userAnswer === currentQuestion.correctAnswer) {
        // add to the number of correct answers
        numCorrect++;

        // color the answers green
        answerContainers[questionNumber].style.color = "lightgreen";
      } else {
        // if answer is wrong or blank
        // color the answers red
        answerContainers[questionNumber].style.color = "red";
      }
    });

    // show number of correct answers out of total
    resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`;
  }

  const quizContainer = document.getElementById("quiz");
  const resultsContainer = document.getElementById("results");
  const submitButton = document.getElementById("submit");
  const myQuestions = [
    {
      question: "What is national game of India?",
      answers: {
        a: "Cricket",
        b: "Hokey",
        c: "Golf"
      },
      correctAnswer: "b"
    },
    {
      question: "What is national bird of India?",
      answers: {
        a: "Peacock",
        b: "Pigeon",
        c: "Sparrow"
      },
      correctAnswer: "a"
    },
    {
      question: "What is national language of India?",
      answers: {
        a: "English",
        b: "Hindi",
        c: "Gujarati",
        d: "French"
      },
      correctAnswer: "b"
    }
  ];

  // display quiz right away
  buildQuiz();

  // on submit, show results
  submitButton.addEventListener("click", showResults);
})();

.question{
    font-weight: 600;
}
.answers {
  margin-bottom: 20px;
}
.answers label{
  display: block;
}
#submit{
    font-size: 20px;
    background-color: #14bde1;
    color: #fff;
    border-radius: 15px;
    padding:10px 30px;
    cursor: pointer;
    margin-bottom: 20px;
    border:0;
}
#submit:hover{
    background-color: #38a;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="quiz"></div>
<button id="submit">Get Result</button>
<div id="results"></div>

Answer 2

您正在尝试跟踪正确答案。因此，您将需要一个变量来跟踪它。首先初始化一个零值的变量（因为最初它们有0个正确答案），并在用户每次给出正确答案时将其递增。

类似的东西：

let score = 0;
if (selected == myQuestions[5].correctAnswer) {
    alert("its right!!!")
    score++ //this will increase score by 1 each time
  } else {
    alert("better luck on nextone!!")
  }

这只是一个片段说明。您可能想在文件中函数上方定义得分变量。

编辑：还有一件事。当用户完成测验/测试后，您可能会希望将分数重新设置为0。

根据正确答案生成分数

2 个答案: