如何调整Qualtrics Pick, Group, and Rank组框高度？需保留拖拽功能

我刚好处理过类似的Qualtrics定制需求，给你几个精准的解决方案，完美适配你的20个条目拖拽排序场景：

方案1：用CSS强制缩短组框高度（仅容纳单个条目） #

Qualtrics的PGR题型组框默认有大量内边距和预留高度，我们可以通过自定义CSS直接修改它的尺寸：

1. 打开你的Qualtrics问卷，进入目标PGR题目的问题编辑界面
2. 点击右上角的「齿轮图标」→ 选择「Add JavaScript」
3. 在弹出的代码编辑器里，把下面的代码粘贴进去（注意要放在Qualtrics.SurveyEngine.addOnload()函数内部）：

Qualtrics.SurveyEngine.addOnload(function() {
    // 定位所有PGR题型的组框容器
    const groupBoxes = document.querySelectorAll('.PGRGroup');
    groupBoxes.forEach(box => {
        // 设置高度为刚好容纳单个选项，可根据你的字体大小微调数值
        box.style.maxHeight = "40px";
        box.style.minHeight = "40px";
        // 移除多余内边距
        box.style.padding = "5px 8px";
        // 确保拖拽时视觉反馈正常
        box.style.border = "1px solid #ccc";
    });
});

或者你也可以把这段CSS直接加到问卷的全局样式里（「Look & Feel」→「Style」→「Custom CSS」），这样所有PGR题目都会生效：

.PGRGroup {
    max-height: 40px !important;
    min-height: 40px !important;
    padding: 5px 8px !important;
    border: 1px solid #ccc !important;
}

提示：如果你的选项文本较长，可适当把40px调整到50px，确保文本不会换行溢出。

方案2：添加拖拽时自动滚动功能 #

默认Qualtrics的PGR拖拽不会触发屏幕自动滚动，我们可以用JavaScript监听拖拽事件，实现边缘滚动：

同样在目标题目的「Add JavaScript」里添加这段代码：

Qualtrics.SurveyEngine.addOnload(function() {
    const scrollSpeed = 5; // 滚动速度，可按需调整
    let scrollInterval;

    // 监听拖拽开始事件
    document.addEventListener('dragstart', function(e) {
        // 当拖拽元素靠近屏幕边缘时触发滚动
        scrollInterval = setInterval(() => {
            const viewportTop = window.scrollY;
            const viewportBottom = viewportTop + window.innerHeight;
            const dragElementTop = e.target.getBoundingClientRect().top + viewportTop;
            const dragElementBottom = dragElementTop + e.target.offsetHeight;

            // 靠近顶部，向上滚动
            if (dragElementTop < viewportTop + 100) {
                window.scrollBy(0, -scrollSpeed);
            }
            // 靠近底部，向下滚动
            if (dragElementBottom > viewportBottom - 100) {
                window.scrollBy(0, scrollSpeed);
            }
        }, 20);
    });

    // 拖拽结束时停止滚动
    document.addEventListener('dragend', function() {
        clearInterval(scrollInterval);
    });
});

这段代码会在用户拖拽条目时，自动检测元素位置，当靠近屏幕上下边缘100px时触发滚动，受访者不用手动滚动就能完成20个条目的排序。

备选方案：自定义拖拽排序组件（如果PGR限制太多） #

如果PGR题型的定制还是无法满足需求，你可以用Qualtrics的「Text/Graphic」题目，结合自定义HTML和SortableJS实现完全可控的拖拽排序：

1. 在「Text/Graphic」题目里插入自定义HTML，比如：

<div id="sortable-list">
    <div class="sort-item">条目1</div>
    <div class="sort-item">条目2</div>
    <!-- 剩下18个条目依次添加 -->
</div>

2. 在题目JS里引入SortableJS并初始化：

Qualtrics.SurveyEngine.addOnload(function() {
    // 引入SortableJS
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js';
    script.onload = function() {
        // 初始化拖拽排序
        Sortable.create(document.getElementById('sortable-list'), {
            animation: 150,
            onEnd: function(evt) {
                // 获取排序后的顺序，存储到Qualtrics隐藏字段
                const sortedItems = Array.from(document.querySelectorAll('.sort-item')).map(item => item.textContent);
                Qualtrics.SurveyEngine.setEmbeddedData('sortedOrder', sortedItems.join(','));
            }
        });
        // 自动滚动功能SortableJS自带，无需额外代码
    };
    document.head.appendChild(script);
});

这种方式完全自定义样式和交互，不过需要你自己处理数据存储到Qualtrics的逻辑，适合对定制化要求极高的场景。

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