使用 Qualtrics 中的 javascript 将可拖动条设置为自定义开始位置 [英] Set draggable bars to custom start position with javascript in Qualtrics

问题描述

在 Qualtrics 中，可以使用自定义起始位置"设置可拖动条的起始位置(即它们的宽度).这是通过在编辑调查时将条拖到所需宽度来完成的.但是，我正在寻找一种使用 JavaScript(或原型 JavaScript)将条形宽度设置为起始位置的方法.

这是我的尝试，首先(成功)尝试更改条形的颜色(在 qualtrics 和 jsfiddle 中)，然后(成功)尝试调整这些尝试以更改 jsfiddle 上的条形宽度；然后卡住了，因为在 jsfiddle 上有效的方法在 Qualtrics 上无效.

<小时>

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

但是，到目前为止，我无法将 setChoiceValue 应用于可拖动条或找到类似的等效项.

<小时>

更新 2:

Qualtrics Support(非常友好和平易近人)建议 setChoiceAnswerValue 可能是我正在寻找的.但是他们也解释说他们不能为 JavaScript 提供客户支持.我看了一下 更新版本API 文档 也列出了 setChoiceAnswerValue，但到目前为止还没有成功.

解决方案

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

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

In Qualtrics, it is possible to set the starting position of draggable bars (i.e., their width) with a "Custom Start Position". This is done by dragging the bars to the desired width while editing the survey. However, I am looking for a way to set the width of the bars to a start position with JavaScript (or Prototype JavaScript).

Here are my attempts, first (successfully) trying to change the color of the bars (in qualtrics and on jsfiddle), then (successfully) trying to adapt these attempts to change the bar widths on jsfiddle; and then getting stuck because what works on jsfiddle does not work on Qualtrics.

---

In Qualtrics, I can change the color of draggable sliders with the following Prototype JavaScript (adapted from 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";
    });
});

The result can be seen (and inspected) here. Inspecting the survey in the link indeed shows that the background-color was set to red: <div id="QID2~2~bar" class="bar" style="width: 103px; background-color: red;"></div>. A width argument is also present, meaning I should be able to modify the width with the following code (which indeed does work on jsfiddle when setting the library to prototype):

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

However, this code does not work on Qualtrics (when replacing $("test") with $(this.questionId) and including the code in Qualtrics addOnload function).

---

The following javascript also works on Qualtrics for changing bar colors (adapted from 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");
    }
});

With this code, I can also adjust the div width on jsfiddle:

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

However, again this has no effect in Qualtrics.

---

So, long story short: Is there a way to programmatically give the bars in Qualtrics a start position, e.g., by setting their width to 50% of the parent div?

---

Update:

After digging deeper into the Qualtrics Question API, I found setChoiceValue with which I can programmatically select multiple choice items. E.g.,

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

});

will select the 2nd radio-button by setting its value to true:

However, so far I was unable to either apply setChoiceValue to draggable bars or find a similar equivalent.

---

Update 2:

Qualtrics Support (who are very friendly and approachable) has suggested that setChoiceAnswerValue might be what I am looking for. However they also explained that they cannot provide customer support for JavaScript. I took a look at a more recent version of the API documentation which also lists setChoiceAnswerValue, but so far without success.

解决方案

I must have made a typo in my original code, as it turns out that what I had started with actually works:

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

这篇关于使用 Qualtrics 中的 javascript 将可拖动条设置为自定义开始位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！