在Qualtrics中用JavaScript保留选中状态再次展示答案选项

你的问题出在直接将DOM元素存入嵌入式数据——Qualtrics嵌入式数据仅支持字符串类型，无法存储DOM对象，导致Q2调用时空白。以下是可落地的解决步骤：

1. 确认嵌入式数据配置 #

确保你已经在调查流程顶部创建了名为choice的嵌入式数据变量，这一步无需改动。

2. 重写Q1的提交代码（存储选项标识） #

打开Q1的「JavaScript」编辑面板，替换原有代码为：

Qualtrics.SurveyEngine.addOnPageSubmit(function(type) {
  if (type === 'next') {
    const selectedInput = this.questionContainer.querySelector('.q-checked input');
    if (selectedInput) {
      // 存储选项的编码值（如"1"、"2"，对应Q1的选项内置编码）
      Qualtrics.SurveyEngine.setEmbeddedData("choice", selectedInput.value);
    }
  }
});

这段代码会在用户点击下一页时，把选中选项的编码值存入choice变量，而非DOM元素。

3. 配置Q2并添加渲染代码 #

Q2需要创建和Q1完全相同布局的图片单选问题（选项顺序、图片、编码必须一致），然后添加以下JavaScript：

Qualtrics.SurveyEngine.addOnload(function() {
  const selectedChoice = "${e://Field/choice}";
  if (selectedChoice) {
    // 匹配对应选项的输入框
    const targetInput = this.questionContainer.querySelector(`input[value="${selectedChoice}"]`);
    if (targetInput) {
      // 标记选中状态
      targetInput.checked = true;
      const targetLabel = targetInput.closest('.q-radio');
      if (targetLabel) targetLabel.classList.add('q-checked');
    }
  }

  // 禁用所有选项，防止修改
  const allInputs = this.questionContainer.querySelectorAll('input[type="radio"]');
  allInputs.forEach(input => {
    input.disabled = true;
    input.closest('.q-radio').style.opacity = '0.8'; // 可选：添加禁用视觉效果
  });
});

这段代码会在Q2加载时，从choice变量读取选中选项编码，自动标记选中状态，并禁用所有选项无法修改，同时保留图片并排的布局。

测试验证 #

预览调查流程：在Q1选择图片选项后前进到Q2，确认选项布局和Q1一致，选中状态正确显示且无法修改。

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