Question

我正在制作一个测验应用程序，第一个问题加载后，我似乎无法弄清楚如何加载下一个问题。然后当他们正确或错误时如何评分。任何帮助将不胜感激。

let questions = [
 {
  question : "how many stages are in the tour de france?",
   options : [
     {
    option : "2"
    },
    { 
    option : "10"
    },
    {
    option : "15"
    },
    { 
      option : "21"
     }
  ],
  answer : "D"
 },
  {
  question : "how many guys are on each team?",
  options : [
    {
     option :"9"
     },
    { 
    option : "10"
    },
    {
    option : "8"
    },
    { 
    option : "7"
    }
  ],
  answer : "A"
 },
 {
   question : "how many times did Lance Armstrong win the tour?",
  options : [
   {
    option :"7"
     },
   { 
      option : "4"
    },
    {
      option : "2"
    },
    { 
      option : "9"
    }
  ],
  answer : "A"
},
{
   question : "who won in 2018?",
  options : [
    {
      option :"Garrent Thomas"
    },
    { 
      option : "Chris Froome"
    },
    {
      option : "Peter Sagan"
     },
    { 
      option : "Taylor Phinney"
    }
   ],
  answer : "A"
  },
 {
    question : "what team won the tour in 2017",
  options : [
    {
    option :"Movistar"
  },
  { 
    option : "Bora"
  },
  {
    option : "sky"
  },
  { 
    option : "dropac"
  }
  ],
   answer : "c"
 },

];

 let currentQuestion =0;

 let score = 0;






/* $('input[name=option]:checked').val() */


function renderQuestion(){

    return `
      <fieldset>
    <legend> ${questions[currentQuestion].question} </legend>
    <input type="radio" name="option" 
    value="A">${questions[currentQuestion].options[0].option}<br>
    <input type="radio" name="option" 
    value="B">${questions[currentQuestion].options[1].option}<br>
    <input type="radio" name="option" 
    value="C">${questions[currentQuestion].options[2].option}<br>
    <input type="radio" name="option" 
    value="D">${questions[currentQuestion].options[3].option}<br>
    <button type="submit" class="submitAnswer"> Submit answer </button>
   </fieldset>

   `;
    }





  function startQuiz(){
    $('.quizAppForm').on('click', '.startQuiz', function(event){
     event.preventDefault();

    $('.quizAppForm').html(renderQuestion);
  });

}



function init(){
 startQuiz();
 renderQuestion();


 $(init);

我被困在这几天上，这真让我发疯。我是编码新手。感谢您的帮助。

Answer 1

您可以将此字符串转换为对象数组，并在每一步中都可以检索当前对象的信息

Answer 2

由于每次定义内容时都会有一个答案，因此可以将renderQuestion函数更改为此：

function renderQuestion() {

    document.getElementById("quiz").innerHTML =
    `
    <fieldset>
    <legend> ${questions[currentQuestion].question} </legend>
    <input type="radio" name="option" 
    value="A">${questions[currentQuestion].options[0].option}<br>
    <input type="radio" name="option" 
    value="B">${questions[currentQuestion].options[1].option}<br>
    <input type="radio" name="option" 
    value="C">${questions[currentQuestion].options[2].option}<br>
    <input type="radio" name="option" 
    value="D">${questions[currentQuestion].options[3].option}<br>
    <button id="button" class="submitAnswer"> Submit answer </button>
    </fieldset>
   `;

    document.getElementById("button").addEventListener("click", function(event) {

        event.preventDefault();

        let hasAnswer = false;

        for (let el of document.querySelectorAll("input")) {

            if (el.checked) {

                hasAnswer = true;

                if (el.value === questions[currentQuestion].answer) {

                    score++;
                }
            }
        }

        if (hasAnswer) {

            if (currentQuestion === questions.length - 1) {

                document.getElementById("quiz").innerHTML = `Your score is ${score}`;
            }

            else {
                currentQuestion++;
                renderQuestion();
            }
        }
    });
}

并在每次有人单击按钮时检查有效答案。由于为每个问题创建了一个新按钮，因此必须在每个渲染器上注册事件侦听器。或者，您可以渲染一次按钮，然后在每次回答后仅回答问题和选项，并一次定义侦听器。希望这会有所帮助。

正在工作的小提琴：http://jsfiddle.net/869ponrf/

制作问题应用程序并需要帮助呈现问题

2 个答案: