Automize数组对象从数组数据库展示及答题交互实现技术咨询

我来帮你搞定这两个需求，直接上可落地的代码和说明👇

一、从数组数据库渲染展示答题对象 #

首先我们需要把DB里的10个答题对象渲染成页面上的可交互答题区域，这里用动态生成DOM的方式来实现，确保能适配DB里的任意数量题目：

// 你的答题数据库（示例包含2题，剩下8题按此格式补充）
const DB = [
  { 
    question: "JavaScript中，以下哪个是原始数据类型？", 
    answers: ["Object", "Array", "String", "Function"], 
    correctAnswer: "String" 
  },
  { 
    question: "CSS中，哪个属性用于设置元素的外边距？", 
    answers: ["padding", "margin", "border", "width"], 
    correctAnswer: "margin" 
  },
  // 继续添加剩下8个题目...
];

// 渲染题目到页面的函数
function renderQuizQuestions() {
  const quizContainer = $('.js-quizform-questions');
  quizContainer.empty(); // 清空容器避免重复渲染

  DB.forEach((quizItem, index) => {
    // 创建单个题目的容器
    const questionWrapper = $(`
      <div class="quiz-question" data-question-index="${index}">
        <h3>${index + 1}. ${quizItem.question}</h3>
        <div class="quiz-options"></div>
      </div>
    `);

    // 生成每个选项的单选按钮
    quizItem.answers.forEach(answer => {
      const optionElement = $(`
        <label class="quiz-option">
          <input type="radio" name="question-${index}" value="${answer}">
          <span>${answer}</span>
        </label>
      `);
      questionWrapper.find('.quiz-options').append(optionElement);
    });

    // 将题目添加到页面容器
    quizContainer.append(questionWrapper);
  });

  // 添加下一题按钮
  const nextBtn = $('<button class="js-button-next" type="button">下一题</button>');
  quizContainer.append(nextBtn);
}

// 页面加载完成后执行渲染
$(document).ready(() => {
  renderQuizQuestions();
});

二、完善feedbackPage函数：捕获并保存用户答案 #

接下来我们完成feedbackPage函数，实现单选答案的捕获、保存，以及答题流程的控制（分步答题+最终结果展示）：

// 存储用户所有答案的数组，索引对应DB中的题目顺序
const userAnswers = [];

function feedbackPage(){
  $('.js-quizform-questions').on('click', '.js-button-next', function(event){
    event.preventDefault();
    
    // 获取当前显示的题目索引
    const currentQuestionIdx = $('.quiz-question:visible').data('question-index');
    
    // 获取用户选中的答案
    const selectedAnswer = $(`input[name="question-${currentQuestionIdx}"]:checked`).val();
    
    // 校验：如果没选答案就提示
    if (!selectedAnswer) {
      alert('请先选择一个答案再继续哦！');
      return;
    }
    
    // 把答案存入数组
    userAnswers[currentQuestionIdx] = selectedAnswer;
    
    const totalQuestions = DB.length;
    // 判断是否是最后一题
    if (currentQuestionIdx < totalQuestions - 1) {
      // 切换到下一题：隐藏当前题，显示下一题
      $('.quiz-question').eq(currentQuestionIdx).hide();
      $('.quiz-question').eq(currentQuestionIdx + 1).show();
    } else {
      // 所有题目答完，计算得分并展示结果
      showQuizResult();
    }
  });
}

// 辅助函数：计算得分并展示结果
function showQuizResult() {
  let correctCount = 0;
  // 对比用户答案和正确答案
  userAnswers.forEach((answer, idx) => {
    if (answer === DB[idx].correctAnswer) {
      correctCount++;
    }
  });

  // 生成结果HTML并替换答题区域
  $('.js-quizform-questions').html(`
    <div class="quiz-result-card">
      <h2>答题结束！</h2>
      <p class="score-text">你的得分：${correctCount}/${DB.length}</p>
      <h3>答案详情：</h3>
      <ul class="answer-details">
        ${DB.map((item, idx) => `
          <li>
            <strong>题目${idx+1}：</strong>${item.question}
            <br>你的答案：<span class="${userAnswers[idx] === item.correctAnswer ? 'correct' : 'wrong'}">${userAnswers[idx]}</span>
            <br>正确答案：<span class="correct">${item.correctAnswer}</span>
          </li>
        `).join('')}
      </ul>
    </div>
  `);
}

// 页面初始化时执行
$(document).ready(() => {
  renderQuizQuestions();
  feedbackPage();
  // 默认只显示第一题，其余隐藏
  $('.quiz-question').hide().eq(0).show();
});

几个关键细节说明： #

• 精准捕获答案：通过name="question-${index}"给每个题目的单选按钮分组，确保不会跨题目选中答案。
• 答案持久化：用userAnswers数组按题目索引存储答案，后续对比正确答案非常方便。
• 流程控制：分步答题的逻辑清晰，最后自动计算得分并展示详细结果，用户体验更好。
• 校验提示：添加了未选答案的拦截提示，避免无效提交。

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