如何修改代码在Qualtrics中记录QID与星级评分响应数据

核心问题排查 #

修改后的代码存在3个关键错误：

1. DOM选择器不匹配：你修改后的JS里用了#QID1 span和QID1_ratingInput，但原HTML里星级容器的ID是starRating，隐藏输入框ID是ratingInput，没有QID1前缀，导致无法获取元素。
2. Qualtrics API使用前提缺失：setChoiceValue方法要求QID1必须是单选/多选选择题类型（不能是文本输入题），且每个选项的内部编码对应1-5的数值，否则无法设置选项值。
3. 未触发Qualtrics数据同步事件：仅设置选项值后，需要通知Qualtrics更新响应数据，否则不会被记录。

调整后的完整代码 #

HTML代码（无需修改，确保放在QID1的自定义HTML区域） #

<div class="form-group">
    <label for="rating">Rate Our Service:</label>
    <div class="stars" id="starRating">
        <span data-value="1">★</span>
        <span data-value="2">★</span>
        <span data-value="3">★</span>
        <span data-value="4">★</span>
        <span data-value="5">★</span>
    </div>
    <input type="hidden" id="ratingInput" name="rating" required>
</div>

CSS代码（无需修改） #

.stars span {
    font-size: 32px;
    color: gray;
    cursor: pointer;
    transition: color 0.2s;
}
.stars span.selected {
    color: gold;
}

调整后的JavaScript代码 #

Qualtrics.SurveyEngine.addOnload(function() {
    // 获取当前问题（无需手动指定QID1，当前上下文就是QID1）
    const currentQuestion = this;
    // 正确获取星级元素和隐藏输入框
    const stars = document.querySelectorAll('#starRating span');
    const ratingInput = document.getElementById('ratingInput');

    stars.forEach(star => {
        star.addEventListener('click', function () {
            const ratingValue = this.getAttribute('data-value');
            ratingInput.value = ratingValue;

            // 更新星级选中样式
            stars.forEach(s => s.classList.remove('selected'));
            for (let i = 0; i < ratingValue; i++) {
                stars[i].classList.add('selected');
            }

            // 关键：设置Qualtrics选项值，确保QID1是选择题，选项编码对应1-5
            currentQuestion.setChoiceValue(ratingValue, true);
            // 触发数据同步，强制Qualtrics记录响应
            currentQuestion.questionclick();
        });
    });
});

额外注意事项 #

• 确认QID1的问题类型：必须是单选选择题，且每个选项的“Recode Value”（重新编码值）设置为1、2、3、4、5（对应星级的data-value）。
• 如果QID1是文本输入题，不能用setChoiceValue，需要改用setTextValue方法：currentQuestion.setTextValue(ratingValue);
• 确保自定义HTML是直接嵌入在QID1问题的“HTML View”中，而不是作为独立的块，这样Qualtrics才会关联该问题的响应数据。

参考讨论线索 #

• Qualtrics自定义问题数据提交：核心是利用SurveyEngine的API同步数据，常见错误包括选择器不匹配、问题类型不兼容、未触发数据更新事件。
• 自定义UI与Qualtrics数据绑定：需要将自定义交互的结果映射到Qualtrics原生问题的字段，而非仅依赖自定义表单元素，因为Qualtrics只会提交原生问题容器内的有效字段。

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