如何增加问题数和得分数



我正在制作一个测验应用程序,我试图每次进入下一个问题时都会增加问题编号并得分。当他们得到对或错时,还要回馈一些供稿。任何提示都将不胜感激。编码的新事物,并真正试图弄清楚这一切

let currentQuestion = 0;
let score = 1;
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>
     <div id="errorMessage">
     </div>
     <div id="feed">
      </div>
    </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();
        }
    }
      else {
        document.getElementById("errorMessage").innerHTML = "Please 
select an answer!";
    }
  });
 }

renderQuestion();

如果您想每次移动下一个问题时都会增加分数,那么最简单的方法是添加此问题:

score++;

里面:

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

在此块内:

if (hasAnswer) {
        if (currentQuestion === questions.length - 1) {
            document.getElementById("quiz").innerHTML = `Your score is 
   ${score}`;
        }
        else {
            currentQuestion++;
            score++;
            renderQuestion();
        }
    }
      else {
        document.getElementById("errorMessage").innerHTML = "Please 
select an answer!";
    }

希望这会有所帮助!

最新更新