1

I want to use either a slider question or a draggable bar chart in Qualtrics to present to respondents how they answered in former questions. More specifically, I compute a value out of then answers with weighting, and want the slider or bar to be positioned at this value. Notably, as each respondent has a value (stored in an embedded data field), the position will thereby be individual for each respondent. Piping only works for text fields, as far as I understood the support page.

Based on this question/answer I came to the following code for the bar graph:

Qualtrics.SurveyEngine.addOnload(function()
{
   var result = "${q://Field/result}";
   var qwidth = $('QID1936~1~track').offsetWidth;
   var resrec = ((qwidth*result)/100);
   $('QID1936').select('.bar').each(function(name, index) {
            name.setStyle({ width: resrec +"px"});
   });
});

Basically, I get the result for each respondent out of the embedded data, get the width of the full bar graph, compute the ratio that should be colored based on the result, and update the position of the bar graph (following the mentioned answer).

Funny enough, everything works when done in the console. Also, the embedded data is correctly loaded, qwidth as well. Two problems arise: it seems resrec could be computed wrongly, as a console.log() spits out 0 instead of the correct value. I assumed this could be somehow as a variable is not recognized as number, but several tries with Number() or 0+var did not change how this works in Qualtrics. In the console, it works just fine. Also, no update of the bar (or slider with similar code) happens, neither with the correct value nor with the 0 that is produced by Qualtrics.

I search for two things: either a solution to the Javascript problem as described, basically how I can update the bar or slider with embedded data. Or another solution how to directly get embedded data into one of those two question formats as a starting value for each respondent individually.

Thanks for your help or ideas!

Community
  • 1
  • 1
cdermont
  • 138
  • 1
  • 8

3 Answers3

0

Try this:

Qualtrics.SurveyEngine.addOnload(function()
{
    var qid = this.questionId;
    var result = parseFloat("${e://Field/result}");
    var qwidth = $(qid+'~1~track').offsetWidth;
    var resrec = ((qwidth*result)/100);
    $(qid).select('.bar').each(function(name, index) {
        name.style.width = resrec + "px";
    });
});

Notes:

  1. It is best not to use a hardcoded QID
  2. In a pipe use e: to refer to an embedded variable. q: is for questions.
  3. Use parseFloat to convert the string to a number
  4. No need to use setStyle if you are only setting one value
T. Gibbons
  • 4,919
  • 2
  • 15
  • 32
  • Thanks for the enhancement - the notes are valuable and make a neater code. The `parseFloat()` seems to help with getting the correct value. However, the last part, updating the width, still has no effect on the bar graph upon loading the question/site, only when inputted directly in the console. It seems the problem is definitely not the code itself, but how Qualtrics processes the Javascript when loading the page? This seems strange. – cdermont May 03 '17 at 18:05
  • Under look and feel turn off page transition. This should always be set to 'None' when you are using JavaScript. – T. Gibbons May 03 '17 at 19:09
  • BTW, it works fine on my Qualtrics account in both SE and JFE, with or without transition turned on: https://marketinview.qualtrics.com/jfe5/preview/SV_2tx4RmGqPAsBWIt?Q_CHL=preview – T. Gibbons May 03 '17 at 19:21
  • Transition is off, I thought it might be based on the Theme, but also with other themes, the same applies. I also redid the question just to make sure there is nothing I might have changed from the standards. I see it works for you, however not for me: https://eu.qualtrics.com/jfe7/preview/SV_3kiqbGGD4tbi7D7?Q_CHL=preview – cdermont May 03 '17 at 20:10
  • As your solution is obviously working and the answer to the Javascript-part of my question, I marked it as accepted. Still, the differences are strange and I wouldn't see what doesn't work, but then I'm not a Javascript expert... – cdermont May 03 '17 at 20:15
  • I looked at the code in your survey. Change the question type from Constant Sum to Slider. That is the difference. – T. Gibbons May 04 '17 at 00:45
  • Well, this makes the trick. Seems the questions are somehow different. Thanks for looking into this even more! – cdermont May 06 '17 at 01:27
0

One solution proposed by Qualtrics support: when you use bars and/or sliders, piped values are actually possible.

The trick is to have the value of the bar/slider shown (a thing we do not use in the whole survey elsewhere). Then, you can access over the Advanced Question Options > Add Default Choices the blue arrow for piping text behind the value. Through this, the value is individually set to either embedded data or another answer.

Note, however, to tick "Show value" before accessing the default choices, else you will only be able to drag around the bar and set it for all simultaneously.

cdermont
  • 138
  • 1
  • 8
0

Here is a solution using the Qualtrics Question API method setChoiceValue that does not require you to compute the ratio and update the length of the bars manually.

Below is an example code for the result of ten respondents saved in embedded data from previous questions.

Qualtrics.SurveyEngine.addOnload(function()
{
  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 one respondent:

Qualtrics.SurveyEngine.addOnload(function()
{
var value = "${e://Field/r1}";
this.setChoiceValue(1, value);
});
ssum-berkeley
  • 110
  • 7