在 Qualtrics 中使用 javascript 将可拖动栏设置为自定义开始位置

Question

在 Qualtrics 中，可以使用 "Custom Start Position" 设置可拖动栏的起始位置（即它们的宽度）。这是通过在编辑调查时将条形图拖动到所需的宽度来完成的。 但是，我正在寻找一种方法来使用 JavaScript（或原型 JavaScript）将条形宽度设置为起始位置。

这是我的尝试，首先（成功地）尝试更改条形图的颜色（在 qualtrics 和 jsfiddle 中），然后（成功地）尝试调整这些尝试以更改 jsfiddle 上的条形图宽度；然后卡住了，因为在 jsfiddle 上有效的方法在 Qualtrics 上不起作用。

在 Qualtrics 中，我可以使用以下原型 JavaScript（改编自 this answer）更改可拖动滑块的颜色：

Qualtrics.SurveyEngine.addOnload(function()
{
   //change the color of all bars to red for testing
    $(this.questionId).select('.bar').each(function(name, index) {
        name.style.backgroundColor = "red";
    });
});

可以看到（并检查）结果here。检查 link 中的调查确实表明 background-color 已设置为红色： <div id="QID2~2~bar" class="bar" style="width: 103px; background-color: red;"></div>。宽度参数也存在，这意味着我应该能够使用以下代码修改宽度（当将库设置为原型时，它确实适用于 jsfiddle）：

$("test").select('.bar').each(function(name, index) {
        name.setStyle({ width: '40px'});
});

但是，此代码不适用于 Qualtrics（将 $("test") 替换为 $(this.questionId) 并将代码包含在 Qualtrics addOnload 函数中）。

以下 javascript 也适用于 Qualtrics 以更改条形颜色（改编自 this answer）：

Qualtrics.SurveyEngine.addOnload(function()
{
    //change the color of all bars to red for testing
    var bar = document.querySelectorAll('.bar');
    for (var i=0; i < bar.length; i++) {
        bar[i].setAttribute("style", "background-color:red");
    }
});

使用这段代码，我还可以调整 jsfiddle 上的 div 宽度：

var bar = document.querySelectorAll('.bar');
for (var i=0; i < bar.length; i++) {
 bar[i].setAttribute("style", "width:40px");
}

但是，这在 Qualtrics 中同样没有效果。

所以，长话短说：有没有办法以编程方式为 Qualtrics 中的条形图提供起始位置，例如，将它们的宽度设置为父元素的 50% div？

更新：

深入研究 Qualtrics Question API 后，我发现 setChoiceValue 我可以通过编程方式 select 多项选择项。例如，

Qualtrics.SurveyEngine.addOnload(function()
{
    this.setChoiceValue(2,true); 

});

将 select 第二个单选按钮的值设置为 true:

但是，到目前为止，我无法将 setChoiceValue 应用于可拖动栏或找到类似的等价物。

更新 2：

Qualtrics 支持（他们非常友好和平易近人）建议 setChoiceAnswerValue 可能是我正在寻找的。但是，他们还解释说，他们无法为 JavaScript 提供客户支持。我看了一下 more recent version of the API documentation，其中也列出了 setChoiceAnswerValue，但到目前为止没有成功。

Answer 1

我一定是在我的原始代码中打错了字，因为事实证明我开始使用的确实有效：

Qualtrics.SurveyEngine.addOnload(function()
{
            $(this.questionId).select('.bar').each(function(name, index) {
            name.setStyle({ width: '50px'});
            });
});

Answer 2

这是使用 setChoiceValue 方法设置可拖动条的自定义起始位置的解决方案，如 Qualtrics Question API 中所述。

下面是一个包含 10 个柱状图的问题的示例代码，使用了之前问题中的嵌入数据。

var embedded = ["${e://Field/r1}", "${e://Field/r2}", 
"${e://Field/r3}", "${e://Field/r4}", "${e://Field/r5}", 
"${e://Field/r6}", "${e://Field/r7}", "${e://Field/r8}", 
"${e://Field/r9}", "${e://Field/r10}"];

for (var i = 0; i < 11; i++) {
  var index = i + 1;
  var choiceInput = embedded[i];

this.setChoiceValue(index, choiceInput);
}

设置一柱的自定义值：

Qualtrics.SurveyEngine.addOnload(function()
{
  this.setChoiceValue(2, "80");
});

在 Qualtrics 中使用 javascript 将可拖动栏设置为自定义开始位置

Set draggable bars to custom start position with javascript in Qualtrics

javascript

prototypejs

qualtrics