利用JavaScript写能遍历显示考试试题的页面

首先，需要准备一个包含考试试题的数据结构。假设我们有以下试题数据：

const questions = [
  {
    question: "1 + 1 = ?",
    options: ["1", "2", "3", "4"],
    answer: 1
  },
  {
    question: "2 + 2 = ?",
    options: ["3", "4", "5", "6"],
    answer: 1
  },
  // ...
];

其中每个试题包括一个问题描述、若干选项以及正确答案的索引。

然后，我们可以使用JavaScript动态生成HTML页面来展示考试试题。例如，我们可以使用以下代码来展示第一道试题：

const currentQuestion = 0; // 当前展示的试题索引

const questionContainer = document.createElement("div");

// 展示问题描述
const questionTitle = document.createElement("h3");
questionTitle.textContent = questions[currentQuestion].question;
questionContainer.appendChild(questionTitle);

// 展示选项列表
const optionsList = document.createElement("ul");
for (let i = 0; i < questions[currentQuestion].options.length; i++) {
  const option = document.createElement("li");
  option.textContent = questions[currentQuestion].options[i];
  optionsList.appendChild(option);
}
questionContainer.appendChild(optionsList);

// 将试题容器添加到页面中
document.body.appendChild(questionContainer);

以上代码将生成一个包含问题描述和选项列表的HTML元素，并添加到页面中。

接下来，我们可以添加一些交互逻辑，例如添加点击事件处理程序来记录用户选择的答案，并在用户回答完所有问题后显示得分。

const currentQuestion = 0;
let userAnswers = []; // 记录用户选择的答案

const questionContainer = document.createElement("div");

// 展示问题描述
const questionTitle = document.createElement("h3");
questionTitle.textContent = questions[currentQuestion].question;
questionContainer.appendChild(questionTitle);

// 展示选项列表
const optionsList = document.createElement("ul");
for (let i = 0; i < questions[currentQuestion].options.length; i++) {
  const option = document.createElement("li");
  option.textContent = questions[currentQuestion].options[i];
  option.dataset.index = i; // 为选项添加数据属性，用于记录该选项的索引
  option.addEventListener("click", () => {
    // 用户点击选项时记录答案
    userAnswers[currentQuestion] = parseInt(option.dataset.index);
    showNextQuestion();
  });
  optionsList.appendChild(option);
}
questionContainer.appendChild(optionsList);

// 将试题容器添加到页面中
document.body.appendChild(questionContainer);

function showNextQuestion() {
  // 判断是否回答完所有问题
  if (userAnswers.length === questions.length) {
    // 计算得分并展示
    const score = calculateScore(userAnswers);
    const scoreContainer = document.createElement("div");
    const scoreTitle = document.createElement("h3");
    scoreTitle.textContent = `您的得分是 ${score} 分`;
    scoreContainer.appendChild(scoreTitle);
    document.body.appendChild(scoreContainer);
  } else {
    // 展示下一道试题
    const nextQuestionIndex = userAnswers.length;
    const nextQuestionContainer = document.createElement("div");
    const nextQuestionTitle = document.createElement("h3");
    nextQuestionTitle.textContent = questions[nextQuestionIndex].question;
    nextQuestionContainer.appendChild(nextQuestionTitle);
    const nextOptionsList = document.createElement("ul");
    for (let i = 0; i < questions[nextQuestionIndex].options.length; i++) {
      const option = document.createElement("li");
      option.textContent = questions[nextQuestionIndex].options[i];
      option.dataset.index = i;
      option.addEventListener("click", () => {
        userAnswers[nextQuestionIndex] = parseInt(option.dataset.index);
        showNextQuestion();
      });
      nextOptionsList.appendChild(option);
    }
    nextQuestionContainer.appendChild(nextOptionsList);
    questionContainer.replaceWith(nextQuestionContainer);
  }
}

function calculateScore(userAnswers) {
  let score = 0;
  for (let i = 0; i < questions.length; i++) {
    if (userAnswers[i] === questions[i].answer) {
      score++;
    }
  }
  return score;
}

以上代码将为每个选项添加一个点击事件处理程序，当用户选择该选项时记录答案，并展示下一道试题。当所有试题都回答完毕后，将计算得分并展示在页面上。

综上所述，以上代码可以用来生成一个可以遍历显示考试试题的页面。不过需要注意的是，由于考试试题的复杂性和多样性，实际实现时可能需要根据具体需求进行适当的修改和扩展。