Question

我有一个Java问答游戏，但是我有一个必须解决的问题。在进入下一个问题之前，我需要做出必要的回答，我真的不知道该如何做。

我从此来源获得了这段代码，但是我做了一些更改。 https://codepen.io/SitePoint/pen/GmPjjL

HTML：

 <div class="quiz-container">
      <div id="quiz"></div>
    </div>
    <button id="previous">Previous Question</button>
    <button id="next">Next Question</button>
    <button id="submit">Submit Quiz</button>
    <div id="results"></div>

JS：

(function() {
  const myQuestions = [
    {
      question: "Question 1",
      answers: {
        a: "answer a",
b: "answer b", 
      },
      correctAnswer: "a"
    },
      {
      question: "question 2",
      answers: {
      a: "answer a",
b: "answer b", 

      },
      correctAnswer: "a"
    }

  ];

  function buildQuiz() {
    const output = [];

    myQuestions.forEach((currentQuestion, questionNumber) => {
      const answers = [];

      for (letter in currentQuestion.answers) {
        answers.push(
          `<label>
             <input type="radio" name="question${questionNumber}" value="${letter}">
              ${letter} :
              ${currentQuestion.answers[letter]}
           </label>`
        );
      }

     output.push(
        `<div class="slide">
           <div class="question"> ${currentQuestion.question} </div>
           <div class="answers"> ${answers.join("")} </div>
         </div>`
      );
    });

    quizContainer.innerHTML = output.join("");
  }

  function showResults() {
    const answerContainers = quizContainer.querySelectorAll(".answers");

    let numCorrect = 0;

    myQuestions.forEach((currentQuestion, questionNumber) => {
      const answerContainer = answerContainers[questionNumber];
      const selector = `input[name=question${questionNumber}]:checked`;
      const userAnswer = (answerContainer.querySelector(selector) || {}).value;

      if (userAnswer === currentQuestion.correctAnswer) {
        numCorrect++;

        answerContainers[questionNumber].style.color = "#333333";
      } else {
        answerContainers[questionNumber].style.color = "#333333";
      }
    });

    var premio;
    if(numCorrect == 0)
    {
        premio = '<div><span style="color: red">RESULT 0</span></div>'; } 
      else if(numCorrect == 1) {        premio = '<div>RESULT 1</div>'; } 

    document.getElementById("quiz").style.display = "none";
    document.getElementById("previous").style.display = "none";
    document.getElementById("submit").style.display = "none";
    resultsContainer.innerHTML = `RESULT <span class="resultadonum">${numCorrect}</span>` + premio; //de ${myQuestions.length}//
  }

  function showSlide(n) {
    slides[currentSlide].classList.remove("active-slide");
    slides[n].classList.add("active-slide");
    currentSlide = n;

    if (currentSlide === 0) {
      previousButton.style.display = "none";
    } else {
      previousButton.style.display = "inline-block";
    }

    if (currentSlide === slides.length - 1) {
      nextButton.style.display = "none";
      submitButton.style.display = "inline-block";
    } else {
      nextButton.style.display = "inline-block";
      submitButton.style.display = "none";
    }
  }

  function showNextSlide() {
    showSlide(currentSlide + 1);
  }

  function showPreviousSlide() {
    showSlide(currentSlide - 1);
  }

  const quizContainer = document.getElementById("quiz");
  const resultsContainer = document.getElementById("results");
  const submitButton = document.getElementById("submit");

  buildQuiz();

  const previousButton = document.getElementById("previous");
  const nextButton = document.getElementById("next");
  const slides = document.querySelectorAll(".slide");
  let currentSlide = 0;

  showSlide(0);

  submitButton.addEventListener("click", showResults);
  previousButton.addEventListener("click", showPreviousSlide);
  nextButton.addEventListener("click", showNextSlide);
})();

Answer 1

您最好的选择是为按钮使用disabled属性。

将禁用者连接到检查用户是否输入了任何内容的功能。在第77行附近查看您的答案容器以获取相关代码，以检查用户是否输入了任何内容。

伪代码

function checkIfUserEnteredAnything(currentSlide){
    //Code to calculate how many questions total the user has answered.
    if(currentSlide === numQuestionsUserAnswered){
        return true}
    return false

然后，如果用户未输入任何内容，则将按钮设置为禁用。

nextButton.setAttribute('disabled',!checkIfUserEnteredAnything(currentSlide))

感叹号表示“ not”功能；如果您的函数返回true（用户已经输入了一个值），那么它将变为false －告诉下一个按钮不应禁用它。如果您的函数返回false，则表明用户尚未输入值，它将告诉该按钮被禁用。

Answer 2

总体思路
forEachQuestion
检查是否至少单击了一个单选按钮

如果为假
警报（必填）

JS测验中的必需输入

2 个答案: