如何自定义Qualtrics滑块问题的显示文本？

一、修复滑块Tooltip显示对应自定义文本 #

原代码的问题是不管滑块选哪个刻度，都固定显示同一段文本，没有根据数值动态切换。下面是修改后的代码，能实现刻度数值到中文文本的对应显示：

Qualtrics.SurveyEngine.addOnload(function() {
    // 把刻度数值和要显示的中文文本对应起来，改文本直接改这里就行
    const valueToText = {
        "0": "强烈不同意",
        "25": "有点不同意",
        "50": "中立",
        "75": "有点同意",
        "100": "强烈同意"
    };

    // 更新Tooltip的核心函数
    function updateTT(element) {
        // 拿到当前滑块选中的数值
        const sliderValue = jQuery(element).find('.ResultsInput').val();
        // 匹配对应的文本，万一出问题默认显示"中立"
        const displayText = valueToText[sliderValue] || "中立";

        // 如果只有默认的数值Tooltip，就新增一个用来显示自定义文本
        if(jQuery(element).find('.sliderToolTipBox').length === 1) {
            jQuery(element).find('.sliderToolTipBox').parent().append('<div class="sliderToolTipBox"></div>');
        }

        // 藏起默认的数值Tooltip，把自定义文本放到新的Tooltip里
        jQuery(element).find('.sliderToolTipBox').eq(0).hide();
        jQuery(element).find('.sliderToolTipBox').eq(1).html(displayText);
    }

    // 滑块数值变了就更新Tooltip
    jQuery('.ResultsInput').on('change', function() {
        updateTT(jQuery(this));
    });

    // 拖动滑块的时候实时更新Tooltip，加个小延迟确保数值已经更新
    jQuery('.trackHolderRel').on('mousedown mouseup mousemove', function() {
        setTimeout(() => updateTT(jQuery(this)), 10);
    });

    // 页面加载完直接初始化Tooltip，避免一开始显示数字
    updateTT(jQuery('.trackHolderRel'));
});

代码关键点： #

• 用valueToText对象做数值和文本的映射，后期修改文本只需要改这个对象里的内容
• 绑定了更多鼠标事件，确保拖动滑块的过程中Tooltip也能跟着实时变化
• 页面初始化时直接调用更新函数，避免初始状态显示原始数值

二、解决左侧选项文本截断问题 #

通过自定义CSS调整文本容器的样式就能解决，步骤如下：

1. 打开Qualtrics问卷编辑器，进入外观设置 -> 高级 -> 自定义CSS
2. 粘贴以下代码：

/* 调整滑块左侧文本容器的宽度和边距，防止截断 */
.Skin .QuestionBody .Slider .labels li {
    width: auto;
    padding-right: 15px;
    white-space: nowrap; /* 强制文本不换行 */
}

/* 移动端适配，避免小屏幕下文本挤在一起 */
@media screen and (max-width: 768px) {
    .Skin .QuestionBody .Slider .labels li {
        padding-right: 8px;
        font-size: 14px;
    }
}

CSS说明： #

• width: auto让文本容器根据内容自动调整宽度，不会被固定宽度限制
• white-space: nowrap防止文本被强制换行截断
• 媒体查询针对移动端做了适配，优化小屏幕下的显示效果

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