如何使用JavaScript或其他方案为Qualtrics调查问卷的多个滑块添加相同标签

前置操作 #

进入对应滑块题目的编辑页，点击「问题行为」→「自定义JavaScript」，清空默认生成的全部代码，替换为下方代码即可。

可用代码 #

Qualtrics.SurveyEngine.addOnReady(function()
{
    // 自定义左右标签文本，可按需修改
    const labelLeft = "No more than usual (1)";
    const labelRight = "Much more than usual (100)";
    // 适配Qualtrics默认滑块选择器
    const sliderItems = document.querySelectorAll(".QuestionBody .Slider .SliderItem");

    // 动态注入标签样式，可根据主题调整数值
    const style = document.createElement('style');
    style.textContent = `
        .slider-custom-label {
            font-size: 14px;
            color: #333;
            width: 40%;
            display: inline-block;
            margin: 4px 0;
        }
        .slider-custom-label.left {
            text-align: left;
        }
        .slider-custom-label.right {
            text-align: right;
            float: right;
        }
    `;
    document.head.appendChild(style);

    // 为每个滑块添加标签
    sliderItems.forEach(item => {
        const labelContainer = document.createElement("div");
        labelContainer.innerHTML = `
            <span class="slider-custom-label left">${labelLeft}</span>
            <span class="slider-custom-label right">${labelRight}</span>
        `;
        // 标签插入到滑块轨道上方
        item.insertBefore(labelContainer, item.querySelector(".track"));
    });
});

效果验证说明 #

• 保存代码后预览问卷，每个滑块上方都会显示对应的左右标签，向下滚动时每个滑块的标签都可见。
• 若标签样式和当前问卷主题不匹配，可直接修改代码内style.textContent中的样式参数即可，不需要调整逻辑代码。
• 标签文本可直接修改labelLeft和labelRight变量的取值，支持多语言切换。

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