如何实现quiz-container div从姓名输入页跳转至单题测验页面

你需要通过JS监听表单提交事件、动态替换quiz-container容器内的内容来实现阶段切换，完整可运行的JS代码如下：

// 替换原有全局name变量，避免和浏览器内置window.name属性冲突
let userName = "";
const quizQuestion = {
  question: "巴西人说以下哪种语言？",
  alternatives: {
    1: "巴西葡萄牙语",
    2: "西班牙语"
  },
  correctAnswer: "1"
};

// 提前获取需要操作的DOM元素
const nameForm = document.getElementById("name");
const quizContainer = document.querySelector(".quiz-container");
const quizSubmitBtn = document.getElementById("submit_2");
// 初始状态隐藏测验提交按钮
quizSubmitBtn.style.display = "none";

// 监听姓名提交表单事件
nameForm.addEventListener("submit", (e) => {
  // 阻止表单默认提交导致的页面刷新
  e.preventDefault();
  const nameInput = document.getElementById("name-text");
  userName = nameInput.value.trim();
  // 基础校验：姓名不能为空
  if (!userName) {
    alert("请输入有效姓名");
    return;
  }
  // 清空容器原有内容，拼接测验题目HTML
  let quizContent = `<p>${quizQuestion.question}</p><div class="answers">`;
  // 遍历选项生成单选按钮
  for (const [optionId, optionText] of Object.entries(quizQuestion.alternatives)) {
    quizContent += `
      <label>
        <input type="radio" name="quizOption" value="${optionId}">
        ${optionText}
      </label>
    `;
  }
  quizContent += `</div>`;
  // 将生成的测验内容插入容器
  quizContainer.innerHTML = quizContent;
  // 显示测验提交按钮
  quizSubmitBtn.style.display = "block";
});

// 监听测验答案提交事件
quizSubmitBtn.addEventListener("click", () => {
  const selectedOption = document.querySelector('input[name="quizOption"]:checked');
  // 校验是否选中选项
  if (!selectedOption) {
    alert("请先选择答案");
    return;
  }
  // 判题并给出反馈
  if (selectedOption.value === quizQuestion.correctAnswer) {
    quizContainer.innerHTML = `<p>恭喜 ${userName}，回答正确！</p>`;
  } else {
    quizContainer.innerHTML = `<p>很遗憾 ${userName}，回答错误，正确答案是巴西葡萄牙语。</p>`;
  }
  // 隐藏提交按钮避免重复提交
  quizSubmitBtn.style.display = "none";
});

实现说明 #

• 所有操作都复用了原有的quiz-container容器，没有新增额外的外层容器
• 单选按钮通过遍历你定义的alternatives对象动态生成，后续修改选项不需要调整HTML结构
• 初始状态隐藏测验用的第二个提交按钮，只有进入测验阶段才显示，符合交互逻辑
• 已经包含基础的空输入、未选选项校验逻辑

内容的提问来源于stack exchange，提问作者Rafaelle Duarte