如何用HTML和JavaScript实现交互式决策问卷并导出结果

交互式决策问卷可以根据用户的选择动态展示后续问题，并在最后给出个性化结论。借助HTML搭建结构、JavaScript处理逻辑，我们就能不依赖任何框架实现一个可导出结果的轻量应用。

一、问卷的HTML结构

先用一组容器来装载题目，每一题作为一个区块，默认只显示第一题。我们使用<div>配合自定义属性记录题号与跳转关系。

<div id="quiz">
  <div class="question" data-step="1">
    <p>你更看重成本还是性能？</p>
    <button onclick="answer(1, 'cost')">成本</button>
    <button onclick="answer(1, 'perf')">性能</button>
  </div>
  <div class="question" data-step="2" data-from="cost" hidden>
    <p>预算大概多少？</p>
    <button onclick="answer(2, 'low')">较低</button>
    <button onclick="answer(2, 'mid')">中等</button>
  </div>
  <div class="question" data-step="2" data-from="perf" hidden>
    <p>需要多高的吞吐？</p>
    <button onclick="answer(2, 'high')">很高</button>
    <button onclick="answer(2, 'normal')">一般</button>
  </div>
</div>
<div id="result" hidden></div>
<button id="exportBtn" onclick="exportResult()" hidden>导出结果</button>

二、JavaScript控制逻辑

通过记录用户作答，隐藏当前题并展示下一题。当没有后续题时计算结论。

var answers = {};
function answer(step, value) {
  answers['q' + step] = value;
  // 隐藏当前步骤所有题
  document.querySelectorAll('.question[data-step="' + step + '"]').forEach(function(el) {
    el.hidden = true;
  });
  // 查找下一题：若存在来自上一步答案的题则显示，否则显示普通下一题
  var next = document.querySelector('.question[data-step="' + (step + 1) + '"][data-from="' + value + '"]');
  if (!next) {
    next = document.querySelector('.question[data-step="' + (step + 1) + '"]:not([data-from])');
  }
  if (next) {
    next.hidden = false;
  } else {
    showResult();
  }
}

function showResult() {
  var conclusion = '推荐基础版方案';
  if (answers.q1 === 'perf') {
    conclusion = '推荐高性能版方案';
  }
  document.getElementById('result').textContent = '结论：' + conclusion;
  document.getElementById('result').hidden = false;
  document.getElementById('exportBtn').hidden = false;
}

三、导出结果为JSON

把作答与结论打包成JSON，利用Blob和下载链接保存到本地。

function exportResult() {
  var data = {
    answers: answers,
    conclusion: document.getElementById('result').textContent
  };
  var blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  var url = URL.createObjectURL(blob);
  var a = document.createElement('a');
  a.href = url;
  a.download = 'quiz_result.json';
  a.click();
  URL.revokeObjectURL(url);
}

四、小结

以上代码演示了如何用纯HTML与JavaScript完成一个带分支逻辑的交互式决策问卷，并在结束时导出结果文件。你可以继续扩展题目数量、增加表单输入或把结论发到后端做进一步处理。

HTMLJavaScript决策问卷修改时间：2026-07-31 03:21:19