如何修改HTML/JS表单多输入实现测验题切换跳转与答案保存

核心实现思路 #

• 统一管理基础数据与状态：提前把所有题目、选项、正确答案整理成结构化数组，同时声明两个全局状态：currentQuestion 存储当前展示的题目索引，userAnswers 存储用户所有已选答案（键为题目索引，值为选中的选项值），这是实现答案自动保存的核心。
• 调整HTML结构：移除硬编码的单题内容，预留题目动态渲染容器，新增上一题/下一题按钮、题号按钮组的导航区域。
• 封装核心交互函数：封装renderQuestion函数负责根据当前题目索引渲染对应题目内容，渲染时自动读取userAnswers的存储值，自动选中用户之前选过的选项；封装goToQuestion函数处理题目切换逻辑，切换前先将当前题的用户选择存入userAnswers，再更新当前题目索引后重新渲染题目。
• 边界处理：第一题时禁用上一题按钮，最后一题时可将下一题按钮切换为提交按钮，避免索引越界。

完整可运行示例代码 #

HTML部分 #

<!-- 题目渲染容器 -->
<div id="question-container"></div>

<!-- 题号导航区 -->
<div id="q-nav" style="margin: 15px 0;"></div>

<!-- 上下题导航区 -->
<div style="margin: 15px 0;">
  <button id="prev-btn">上一题</button>
  <button id="next-btn">下一题</button>
  <button id="submit-btn" style="display: none;">提交答案</button>
</div>

JS部分 #

// 题目基础数据，可自行扩展更多题目
const quizData = [
  {
    question: "题目1：以下选项中正确的是？",
    options: ["选项A内容", "选项B内容", "选项C内容", "选项D内容"],
    correct: "b"
  },
  {
    question: "题目2：以下选项中正确的是？",
    options: ["选项A内容", "选项B内容", "选项C内容", "选项D内容"],
    correct: "a"
  }
]

// 全局状态
let currentQuestion = 0
const userAnswers = {}

// DOM元素缓存
const qContainer = document.getElementById('question-container')
const qNav = document.getElementById('q-nav')
const prevBtn = document.getElementById('prev-btn')
const nextBtn = document.getElementById('next-btn')
const submitBtn = document.getElementById('submit-btn')

// 初始化：渲染题号导航 + 第一题
init()
function init() {
  // 渲染题号按钮
  for(let i=0; i<quizData.length; i++) {
    const btn = document.createElement('button')
    btn.innerText = i+1
    btn.style.margin = '0 5px'
    btn.onclick = () => goToQuestion(i)
    qNav.appendChild(btn)
  }
  renderQuestion()
}

// 渲染当前题目
function renderQuestion() {
  const q = quizData[currentQuestion]
  // 生成题目HTML
  let html = `
    <h3>${q.question}</h3>
    <form name="quiz">
  `
  const options = ['a','b','c','d']
  options.forEach((opt, idx) => {
    // 检查是否有已存答案，有则自动勾选
    const checked = userAnswers[currentQuestion] === opt ? 'checked' : ''
    html += `
      <label>
        <input type="radio" name="currentQ" value="${opt}" ${checked}>
        ${q.options[idx]}
      </label><br>
    `
  })
  html += `</form>`
  qContainer.innerHTML = html

  // 更新导航按钮状态
  prevBtn.disabled = currentQuestion === 0
  if(currentQuestion === quizData.length -1) {
    nextBtn.style.display = 'none'
    submitBtn.style.display = 'inline-block'
  } else {
    nextBtn.style.display = 'inline-block'
    submitBtn.style.display = 'none'
  }
  // 更新题号按钮激活状态
  Array.from(qNav.children).forEach((btn, idx) => {
    btn.style.backgroundColor = idx === currentQuestion ? '#eee' : '#fff'
  })
}

// 切换到指定题目
function goToQuestion(targetIndex) {
  // 先保存当前题的答案
  const selected = document.forms['quiz']['currentQ'].value
  if(selected) userAnswers[currentQuestion] = selected
  // 切换到目标题
  currentQuestion = targetIndex
  renderQuestion()
}

// 上一题按钮绑定
prevBtn.onclick = () => {
  if(currentQuestion > 0) goToQuestion(currentQuestion -1)
}

// 下一题按钮绑定
nextBtn.onclick = () => {
  if(currentQuestion < quizData.length -1) goToQuestion(currentQuestion +1)
}

// 提交答案逻辑
submitBtn.onclick = () => {
  // 先保存最后一题的答案
  const selected = document.forms['quiz']['currentQ'].value
  if(selected) userAnswers[currentQuestion] = selected
  // 判分
  let score = 0
  quizData.forEach((q, idx) => {
    if(userAnswers[idx] === q.correct) score++
  })
  console.log(`答对${score}题，总分${score}/${quizData.length}`)
}

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