Qualtrics动态滑块开发求助：基于嵌入式数据配置滑块参数

需求梳理 #

• 用单个滑块组件覆盖16个问题，通过嵌入式数据动态配置最小值、最大值
• 最大值固定为1、10、100、177四选一，必须保证滑块有100个可选值，对应小数位数分别为2位、1位、0位、0位
• Qualtrics原生不支持动态修改滑块参数，只能通过JavaScript实现自定义配置

实现代码 #

直接将以下代码粘贴到滑块问题的JavaScript编辑器中（替换默认代码）：

Qualtrics.SurveyEngine.addOnload(function() {
    // 1. 获取嵌入式数据中的最大值配置，替换为你的实际字段名
    const maxVal = parseInt(Qualtrics.SurveyEngine.getEmbeddedData("SliderMax"));
    // 如需动态设置最小值，将下方0改为从嵌入式数据获取即可
    const minVal = 0;
    let stepVal;
    let decimalPlaces;

    // 2. 根据最大值匹配步长与小数位数
    switch(maxVal) {
        case 1:
            stepVal = 0.01;
            decimalPlaces = 2;
            break;
        case 10:
            stepVal = 0.1;
            decimalPlaces = 1;
            break;
        case 100:
        case 177:
            stepVal = 1;
            decimalPlaces = 0;
            break;
        default:
            // 兜底配置，防止嵌入式数据异常
            stepVal = 1;
            decimalPlaces = 0;
    }

    // 3. 定位滑块DOM元素与数值显示元素
    const slider = this.questionContainer.querySelector(".InputText[type='range']");
    const displayValue = this.questionContainer.querySelector(".SliderContainer .SliderValue");

    // 4. 修改滑块核心参数
    slider.min = minVal;
    slider.max = maxVal;
    slider.step = stepVal;

    // 5. 同步Qualtrics内部配置，避免提交数据异常
    this.question.setChoiceValue(1, maxVal);
    this.question.setChoiceValue(2, minVal);

    // 6. 格式化显示数值
    const formatNumber = (num) => num.toFixed(decimalPlaces);
    // 初始化显示默认值
    displayValue.textContent = formatNumber(minVal);

    // 滑块拖动时实时更新显示值
    slider.addEventListener("input", function() {
        displayValue.textContent = formatNumber(parseFloat(this.value));
    });

    // 7. 同步隐藏输入框的存储值格式
    const hiddenInput = this.questionContainer.querySelector(".InputText[type='hidden']");
    slider.addEventListener("change", function() {
        hiddenInput.value = formatNumber(parseFloat(this.value));
    });
});

关键说明 #

• 配置获取：SliderMax是你在Survey Flow中定义的嵌入式数据字段名，记得替换为自己的字段
• 步长逻辑：100个可选值意味着从最小值到最大值有99个间隔，计算出的步长刚好匹配对应小数位数要求
• DOM同步：同时修改滑块原生属性与Qualtrics内部配置，避免前端显示与后端存储数据不一致
• 异常兜底：如果嵌入式数据未正确赋值，会自动启用默认的步长1、0位小数配置

注意事项 #

• 嵌入式数据需提前在Survey Flow中设置，确保进入滑块问题前已完成赋值
• 滑块问题的默认配置可随意设置，JavaScript会完全覆盖原有参数
• 测试时需覆盖四个最大值场景，验证滑块刻度、显示值、提交数据均正常

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