Set draggable bars to custom start position with j

Question

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.

Answer 1

Here is a solution for setting the custom start positions for draggable bars using the setChoiceValue method as documented in the Qualtrics Question API.

Below is an example code for a question with 10 bars using embedded data from previous questions.

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);
}

For setting the custom value of one bar:

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

Answer 2

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'});
            });
});