Javascript 如何创建在不同页面上有不同问题的测验？

我想在每一页的末尾创建一个小测验。我有一个用JavaScript编写的测验，但我希望不同的问题出现在不同的页面上。简单地说，如果我在不同的页面上，我希望constmyquestions改变。我怎样才能做到这一点

我已经尝试过使用if语句，但是我无法实现我想要的。任何帮助都将不胜感激

这是测验的JS代码

(function() {

  const myQuestions = [
    {
      question: "question 1?",
      answers: {
        a: "one",
        b: "two",
        c: "three"
      },
      correctAnswer: "c"
    },
    {
      question: "question 2?",
      answers: {
        a: "one",
        b: "two",
        c: "three"
      },
      correctAnswer: "c"
    },
    {
      question: "question 3?",
      answers: {
        a: "one",
        b: "two",
        c: "three"
        d: "four"
      },
      correctAnswer: "d"
    }
  ];



  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="slide">
           <div class="question"> ${currentQuestion.question} </div>
           <div class="answers"> ${answers.join("")} </div>
         </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}`;
  }

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

  // display quiz right away
  buildQuiz();

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

  showSlide(0);

  // on submit, show results
  submitButton.addEventListener("click", showResults);
  previousButton.addEventListener("click", showPreviousSlide);
  nextButton.addEventListener("click", showNextSlide);
})();

（函数（）{
常量myQuestions=[
{
问题：“问题1？”，
答复:{
a:“一个”，
b:“两个”，
c:“三个”
},
正确答案：“c”
},
{
问题：“问题2？”，
答复:{
a:“一个”，
b:“两个”，
c:“三个”
},
正确答案：“c”
},
{
问题：“问题3？”，
答复:{
a:“一个”，
b:“两个”，
c:“三个”
d:“四个”
},
正确答案：“d”
}
];
函数buildquick（）{
//我们需要一个地方来存储HTML输出
常量输出=[]；
//对于每个问题。。。
myQuestions.forEach（（当前问题，问题编号）=>{
//我们将要存储答案选择列表
常量answers=[]；
//对于每个可用的答案。。。
for（当前问题中的字母。答案）{
//…添加一个HTML单选按钮
回答，推(
`
${letter}：
${currentQuestion.answers[字母]}
`
);
}
//将此问题及其答案添加到输出中
输出推送(
`
${currentQuestion.question}
${answers.join（“”}
`
);
});
//最后，将我们的输出列表合并成一个HTML字符串，并将其放在页面上
quizContainer.innerHTML=output.join（“”）；
}
函数showResults（）{
//从我们的测验中收集答案
const answerContainers=quizContainer.queryselectoral（“.answers”）；
//跟踪用户的答案
设numCorrect=0；
//对于每个问题。。。
myQuestions.forEach（（当前问题，问题编号）=>{
//查找选定答案
const answerContainer=answerContainers[问题编号]；
常量选择器=`input[name=question${questionNumber}]：选中`；
const userAnswer=（answerContainer.querySelector（选择器）| |{}）.value；
//如果答案是正确的
如果（userAnswer==currentQuestion.correctAnswer）{
//增加正确答案的数量
numCorrect++；
//把答案涂成绿色
answerContainers[questionNumber].style.color=“浅绿色”；
}否则{
//如果答案是错的或是空白的
//把答案涂成红色
回答容器[questionNumber].style.color=“红色”；
}
});
//显示总数中正确答案的数量
resultcontainer.innerHTML=`${myQuestions.length}中的${numCorrect}`；
}
功能演示幻灯片（n）{
幻灯片[currentSlide].classList.remove（“活动幻灯片”）；
幻灯片[n]。类列表。添加（“活动幻灯片”）；
当前滑动=n；
如果（当前幻灯片===0）{
previousButton.style.display=“无”；
}否则{
previousButton.style.display=“内联块”；
}
如果（currentSlide==slides.length-1）{
nextButton.style.display=“无”；
submitButton.style.display=“内联块”；
}否则{
nextButton.style.display=“内联块”；
submitButton.style.display=“无”；
}
}
函数showNextSlide（）{
放映幻灯片（当前幻灯片+1）；
}
函数showPreviousSlide（）{
放映幻灯片（当前幻灯片-1）；
}
const quizContainer=document.getElementById（“测验”）；
const resultcontainer=document.getElementById（“结果”）；
const submitButton=document.getElementById（“提交”）；
//立即显示测验
buildquick（）；
const previousButton=document.getElementById（“上一个”）；
const nextButton=document.getElementById（“下一步”）；
const slides=document.queryselectoral（“.slide”）；
设currentSlide=0；
幻灯片（0）；
//提交时，显示结果
submitButton.addEventListener（“单击”，显示结果）；
previousButton.addEventListener（“单击”，显示PreviousSlide）；
addEventListener（“单击”，showNextSlide）；
})();

里程可能会有所不同，这取决于您想做什么。只要使用javascript，您就可以在每次调用函数时将

windows.location.pathname

传递给函数，并选择与所需路径相关的适当问题对象

if (windows.location.pathname).includes('page1') {
  let currentQuestion = myQuestions[0]
} 
//...rest of the logic

---

当然，这需要在每个页面上都有相同的代码。谢谢你的澄清。我有一个关于includes（）的问题。我应该在那里传递什么来区分每一页？我是否应该输入页面的名称？另外，你能给我举个例子说明如何用所有问题和答案初始化myQuestions[0]吗？非常感谢您的帮助，非常感谢！include将只包含您的页面名称

window.location.pathname

将收回域后的所有内容，因此

localhost:8080/page/1

变为

page/1

。因此，无论您如何区分每一页，您都希望在includestanks中包含这些内容！但是，如何使用所有这些信息初始化我的问题[0]？const myQuestions=[{问题：“问题1？”，答案：{a:“一”，b:“二”，c:“三”}，正确答案：{问题：“问题2？”，答案：{a:“一”，b:“二”，c:“三”}，正确答案：{问题：“问题3？”，回答：{a:“1”，b:“2”，c:“3”d:“4”}，正确答案：“d”}]；JavaScript在网页上使用时，只针对该网页运行。将其应用于多个物理页面可能没有多大意义