Qualtrics骰子任务JS实现异常：预览/发布后功能失效且数据未记录

核心问题定位 #

单独预览问题正常，但区块预览、发布后失效，大概率是加载时机冲突、DOM元素重复、数据写入逻辑不兼容Qualtrics全局环境导致的，以下是针对性修复步骤：

1. 修正JS加载时机，适配Qualtrics全局渲染流程 #

单独预览问题时，JS直接绑定当前问题DOM，但区块/发布后页面是整体加载，你的代码可能在Qualtrics完成DOM渲染前就执行了。必须把所有逻辑包裹在Qualtrics官方提供的回调函数内：

Qualtrics.SurveyEngine.addOnReady(function() {
  // 替换为你当前区块的存储字段名
  const targetField = 'DiceResult_Block1'; 
  const diceImg = document.getElementById('dice-img-block1');
  const resultDisplay = document.getElementById('dice-result-block1');

  diceImg.addEventListener('click', function() {
    // 生成4-12的随机数
    const randomNum = Math.floor(Math.random() * 9) + 4;
    resultDisplay.textContent = `骰子结果：${randomNum}`;
    // 写入Qualtrics数据集
    Qualtrics.SurveyEngine.setEmbeddedData(targetField, randomNum);
  });
});

2. 避免DOM元素ID重复 #

两个区块的HTML元素如果用了相同ID（比如都叫dice-img），区块加载后只会识别第一个元素，导致第二个区块失效。给每个区块的元素加唯一标识：

<!-- 区块1的HTML -->
<img id="dice-img-block1" src="你的骰子图片URL" alt="点击掷骰子">
<div id="dice-result-block1"></div>

<!-- 区块2的HTML -->
<img id="dice-img-block2" src="你的骰子图片URL" alt="点击掷骰子">
<div id="dice-result-block2"></div>

对应JS里的选择器也要同步修改为对应ID。

3. 确认嵌入式数据字段配置正确 #

• 检查两个区块对应的存储字段名，必须和Qualtrics后台嵌入式数据中添加的字段完全一致（区分大小写）
• 确保字段已经添加到问卷的「流程」环节，否则发布后无法写入数据

4. 规避Qualtrics安全沙箱限制 #

发布后Qualtrics会禁用部分JS方法，避免使用document.write()、全局变量污染等写法，所有DOM操作都基于现有元素修改。如果需要调试，可在预览模式下添加：

// 仅预览时调试用，发布前移除
if (Qualtrics.SurveyEngine.isPreview()) {
  console.log('当前写入字段值：', Qualtrics.SurveyEngine.getEmbeddedData(targetField));
}

5. 处理区块异步加载问题 #

如果区块是异步加载的，addOnReady()可能仍早于区块DOM渲染，可加短延迟确保元素加载完成：

Qualtrics.SurveyEngine.addOnReady(function() {
  setTimeout(function() {
    // 你的骰子点击事件绑定代码
  }, 300);
});

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