javascript - 根据正确答案生成分数

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

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

Answer 1

您只发布了 jQuery 部分，对于使用 jQuery 的问题回答类型的结果，您需要分 3 部分完成此任务。

1. 将问题列表应用到带有可选和正确答案的数组中
2. 为生成 html 创建一个循环
3. 收集正确答案的结果

请研究下面的代码，

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