如何为SurveyJS问卷添加多结局？完成页逻辑跳转求助

方案一：在线设计器可视化配置（无需代码） #

1. 配置触发逻辑规则

   • 打开SurveyJS在线设计器，进入「逻辑」面板，点击「添加规则」
   • 触发条件选择「表达式」，输入以下条件（替换成你实际的问题名称）：

     {q2} = 'No' or {q3} = 'No' or {q4} = 'No'
     

     （注：q2/q3/q4是你第2、3、4题的name属性值，可在问题设置面板查看）
   • 规则触发时机设置为「当调查完成时」

2. 设置自定义结束页内容

   • 在规则的「动作」下拉框选择「设置完成页面HTML」
   • 在弹出的输入框中粘贴你的自定义结束内容，比如：

     <div style="text-align:center; padding: 40px;">
       <h2>抱歉...感谢您</h2>
       <p>感谢您抽出时间参与问卷，我们暂无法为您提供后续服务</p>
     </div>
     

   • 保存规则即可。当用户满足条件提交问卷时，会自动显示该自定义内容，替代默认的completedHtml。

方案二：配置独立结束页并通过逻辑跳转 #

如果需要保留多个独立的结束页配置，可通过问卷JSON扩展实现：

1. 添加多结束页配置

   • 进入设计器的「JSON编辑器」，在根对象中添加completedHtmls数组：

     {
       "completedHtml": "<div style='text-align:center;'>感谢您的参与！</div>",
       "completedHtmls": [
         {
           "name": "denied",
           "html": "<div style='text-align:center; padding:40px;'><h2>抱歉...感谢您</h2><p>感谢您参与问卷</p></div>"
         }
       ],
       // 其他问卷配置...
     }
     

2. 绑定逻辑跳转

   • 回到「逻辑」面板，新建规则，条件同方案一
   • 动作选择「结束调查」，在右侧参数中设置completedHtmlId为denied（对应上面completedHtmls里的name值）
   • 保存后，满足条件时会直接跳转到该命名的结束页。

方案三：Web应用代码层面控制（适合需要自定义交互场景） #

如果你的Web应用需要更灵活的控制，可在集成代码中监听onComplete事件：

// 假设你的Survey实例是survey，容器ID为surveyContainer
survey.onComplete.add((sender, options) => {
  // 获取目标问题的答案
  const answers = sender.data;
  if (answers.q2 === 'No' || answers.q3 === 'No' || answers.q4 === 'No') {
    // 关闭默认结束页显示
    options.showCompletedPage = false;
    // 渲染自定义结束内容
    const container = document.getElementById('surveyContainer');
    container.innerHTML = `
      <div style="text-align:center; padding: 50px;">
        <h3>抱歉...感谢您</h3>
        <p>感谢您参与本次问卷，如有疑问可联系客服</p>
      </div>
    `;
  }
});

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