Question

这对我来说很奇怪。我目前正在使用js / jquery创建一个多项选择测验，并且发现如果我输入的问题长度超过105个字符，该脚本将无法运行并且无法单击任何按钮。

例如，使用我提供的代码，它将可以正常运行，并且我可以进行多项选择测验。但是，将问题更改为超过105个字符的问题将使问题中断。

例如，如果我更改了

“多项选择q1”

到

“进程'PopularScreenSavers.exe'正在用户笔记本电脑的后台运行。这可能是一个例子吗？”（我想提一个问题）

根本停止了我的脚本的运行。

下面包括当前的js以及相关html正文的摘录。一切都很好...除了我想问一个更长的问题时。

任何帮助将不胜感激。

CODE

(function() {
  const myQuestions = [
    {
      question: "The process ‘PopularScreenSavers.exe’ is running in the background of a user's laptop. What could this be an example of? ",
      answers:
      {
        a: "a",
        b: "b",
        c: "c",
        d: "d"
      },
      correctAnswer: "a"
    },
    {
    question: "Multiple choice q1",
    answers:
    {
      a: "",
      b: "",
      c: "",
      d: ""
    }
  
}];

  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 = "#009A44";
        answerContainers[questionNumber].style.fontWeight = "900";
      }
      else
      {
        answerContainers[questionNumber].style.color = "#DA291C";
        answerContainers[questionNumber].style.fontWeight = "900";
      }
    });
    resultsContainer.innerHTML = `${numCorrect} out of ${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);
})();

<head>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<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运行，但不能在Chrome中运行-应该对此表示歉意。

jsfiddle

这些小提琴应该显示我遇到的问题：

工作-https://jsfiddle.net/3m5afcuo/

不起作用（仅对字符串进行了更改）-https://jsfiddle.net/su3hptdq/

jQuery在105个字母后崩溃

CODE

jsfiddle

0 个答案: