Hi all, Has anyone programmed the EQ-5D VAS scale in Qualtrics? I have web development experience so have been trying to take a slider bar and tweak it to look exactly like the scale, but currently I can't seem to get anywhere close. I also tried playing around with the Graphics sliders, but still no such look. EuroQol have very strict requirements so the VAS scale has to look exactly like the hard copy. Any help would be greatly appreciated.

Program EQ-5D VAS Scale

Userlevel 5

+13

w.patrick.gale
Level 3 ●●●
135 replies
5 years ago
29 January 2019
Answer

@srtcy Looking at online versions of EQ-5D such as those in RedCap (which are nothing special) you should be able to use the standard slider in Qualtrics from 0-100, enable the snap to grid and set the 'Show Value' to true. They are not going to care if it is a vertical or horizontal scale.

J

+4

JBrim
Level 1 ●
21 replies
3 years ago
30 April 2020

"They are not going to care if it is a vertical or horizontal scale."
er. they do care, unfortunately, They wanted to look at our graphics. Everything else is easy in Qualtrics - pity about this not be possible at the moment.
REDCAP can do a vertical slilder.. they are happy with that.

Userlevel 7

+27

TomG
Level 8 ●●●●●●●●
5545 replies
3 years ago
1 May 2020

It's possible. Use the JS library noUiSlider.

C

TomG
Hi Sir! Good day!
"It's possible. Use the JS library noUiSlider."
I am new to Qualtrics, may I ask on how to add JS library and what are the things I need to do, in order to replicate that scale example that you have given?
Thanks in advance

Userlevel 7

+27

TomG
Level 8 ●●●●●●●●
5545 replies
3 years ago
11 August 2020

https://www.qualtrics.com/community/discussion/comment/28929#Comment_28929Add the NoUiSlider style sheet and JS to your survey header

Add html and css to your question to display the slider

Add JS to your question to configure the slider and display and capture the slider value

C

Thanks Sir TomG !
The example that you made above, is it a Text / Graphic or a Slider question that you have override?
Currently I am testing it using a Text / Graphic, but if you are using a Slider or Graphic Slider, can you show some code snippet on how to override it?
Many thanks!

Userlevel 7

+27

TomG
Level 8 ●●●●●●●●
5545 replies
3 years ago
12 August 2020

Neither. Constant sum.

L

Thanks for all info so far. Still struggling here!
Can anyone help ...
1. Add the NoUiSlider style sheet and JS to your survey header
Re NoUiSlider style sheet - So here I just add following code to the Look and feel/header window :

Then, on the question itself, you'll have to add custom HTML code to get it to look right. I used a "Constant Sum" question with one choice and the horizontal orientation, but you can probably format it to be something else. Then went to edit the question text and added custom HTML. Rich Content Editor --> Source. Below is my custom HTML code. The only way I could get it to look OK was with a table.

EQ-5D VAS

	The best health you can imagine
Please click on the slider to indicate how your health is TODAY
	The worst health you can imagine

With that in place, you'll then have to add the custom Javascript code on the question itself to actually make the slider work inside the
```
addOnLoad
```
function. The first part sets up the slider itself, and the second part captures its output to the answer box of the question so that it gets recorded.

Qualtrics.SurveyEngine.addOnload(function() {
TouchList.prototype.each = Array.prototype.each;
TouchList.prototype._each = Array.prototype._each;
var verticalSlider = document.getElementById('uiSlider');
noUiSlider.create(verticalSlider, {
start: 0,
orientation: 'vertical',
tooltips: wNumb({decimals: 0}),
direction: 'rtl',
step: 1,
range: {
'min': 0,
'max': 100
},
});

var inputNumber = document.getElementById('QR~'+this.questionId+'~1');
verticalSlider.noUiSlider.on('update', function (values, handle) {
var value = values[handle];
inputNumber.value = Math.round(value);
});
inputNumber.addEventListener('change', function () {
verticalSlider.noUiSlider.set([null, this.value]);
});
inputNumber.setAttribute("readonly",true)
});
It doesn't look exactly like the EQ-5D VAS demo, but gets the key elements they ask for.

A

Hi tiz ,
Thanks so much for posting the JS! As someone who knows nothing about it, it has been extremely helpful.
Unfortunately, I'm still unable to get the Slider up and running. Just to be clear, once your insert the HTML code for the question itself, should you be able to see the slider? For me, I can't see the slider itself, but only the two tail statements at the top and bottom. I think this is where it's going wrong for me, even though I am copy and pasting your script. Any advice would be helpful!
Thank you!
Screenshot 2020-11-11 at 2.46.03 PM.png

J

Hi everyone! I am in the same place as Ahuti (above) and cannot seem to get the slider to work. Can anyone assist me with this? Thank you in advance!

B

Hi all
I have tried for a while now to implement the vertical slider. The above code helped a lot, but there are a few lines of code which cause the slider not to be displayed. Here is the solution I came up with:

Use question type "constant sum", one choice, vertical

Link to the noUISlider code; as tiz described it (see above):

You need to add the JS code for noUISlider to the header files. Go to Look and feel --> General --> Edit Header --> Click on the "Source" symbol then add the following 2 lines in. This will get you the CSS and JS for the noUISlider library:

The HTML for the question looks like this:

We would like to know how good or bad your health is TODAY. This scale is numbered from 0 to 100. 100 means the best health you can imagine. 0 means the worst health you can imagine. Please mark an X on the scale to indicate how your health is TODAY. Now, write the number you marked on the scale in the box below.	The best health you can imagine

	The worst health you can imagine

Finally, there is some JavaScript that has to go with the question:

Qualtrics.SurveyEngine.addOnload(function() {
   var vSlider = document.getElementById('uiSlider');
   noUiSlider.create(vSlider, {
      start: 50,
      step: 1,
      direction: 'rtl',
      orientation: 'vertical',
      range: {
         min: 0,
         max: 100
      },
      format: wNumb({
        decimals: 0
      }),
       // Show a scale with the slider
       pips: {
           mode: 'positions',
           values: [0,10,20,30,40,50,60,70, 80,90,100],
           stepped: true,
       }
   });

   var inputNumber = document.getElementById('QR~'+this.questionId+'~1');
   vSlider.noUiSlider.on('update', function (values, handle) {
       inputNumber.value = values[handle];
   });
   inputNumber.addEventListener('change', function () {
      vSlider.noUiSlider.set([null, this.value]);
   });
   inputNumber.setAttribute('readonly',true)
});

J

+4

JBrim
Level 1 ●
21 replies
3 years ago
20 January 2021

Hi tiz bgk LauraK CTRSean Trevail GuinevereM JLow
the above latest on this post may be on interest to you - glad to say we've got it working thanks to bgk !
BW
JB

E

Hi everyone!
I'm still having some trouble getting the slider itself to appear. I've listed what I have so far - any advice would be appreciated!

1) Under Look and Feel | General | Edit Header | Source, I have:

2) I have listed the question I'm editing as Constant Sum, 1 Choice, Vertical.

3) Within the question I'm editing, under Rich Content Editor | Source, I have:

We would like to know how good or bad your health is TODAY. This scale is numbered from 0 to 100. 100 means the best health you can imagine. 0 means the worst health you can imagine. Please mark an X on the scale to indicate how your health is TODAY. Now, write the number you marked on the scale in the box below.	The best health you can imagine

	The worst health you can imagine

4) Under Add JavaScript for the question, I have:
Qualtrics.SurveyEngine.addOnload(function() {
   var vSlider = document.getElementById('uiSlider');
   noUiSlider.create(vSlider, {
      start: 50,
      step: 1,
      direction: 'rtl',
      orientation: 'vertical',
      range: {
         min: 0,
         max: 100
      },
      format: wNumb({
        decimals: 0
      }),
       // Show a scale with the slider
       pips: {
           mode: 'positions',
           values: [0,10,20,30,40,50,60,70, 80,90,100],
           stepped: true,
       }
   });

   var inputNumber = document.getElementById('QR~'+this.questionId+'~1');
   vSlider.noUiSlider.on('update', function (values, handle) {
       inputNumber.value = values[handle];
   });
   inputNumber.addEventListener('change', function () {
      vSlider.noUiSlider.set([null, this.value]);
   });
   inputNumber.setAttribute('readonly',true)
});

This is driving me nuts!

B

https://www.qualtrics.com/community/discussion/comment/34390#Comment_34390Hi ErinNP and others
Looking at your code (and mine above) I have noticed that the slider is named differently in HTML and Javascript. Please use in both places either "uiSliderX" as here:

or just "uiSlider" as here:
var vSlider = document.getElementById('uiSlider');
This should hopefully solve your problem. Sorry for the typo!

E

bgk thanks for the reply! I tried changing the name of the slider in both locations and I'm still not seeing the slider appear. I'm wondering if the issue could be the link to the noUIslider code in the header? Any thoughts would be greatly appreciated!

B

ErinNP Sorry to hear that the slider is still not working for you.
You need to use "@" instead of "AT" in the header link. As in the code further up the page the link isn't displayed properly I tried to use this work-around, sorry if this wasn't clear.

E

bgk thanks for the reply! I tried changing the name of the slider in both locations and I'm still not seeing slider appear. I'm wondering if the issue could be the link to the noUIslider code in the header? Any thoughts would be greatly appreciated!

E

bgk that was the problem! Good catch. Thank you so much for your help - the slider works now!

+2

Nami
Level 1 ●
10 replies
2 years ago
12 July 2021

Great thread! I tried the code myself and it did not work. I found that removing the

format

field fixes the issue. Just posting in case this info is useful.
format: wNumb({
decimals: 0
})

A

Hi,
I was wondering if anyone could help me, I'm having some difficulty with the slider.
For some reason my slider starts below the slider itself, so that the '0' value is way below the beginning of the slider.
Screenshot 2021-10-21 at 15.47.48.png As well as this, the 100 is below the end of the slider:
Is anyone able to help me?
Here's my code!
Javascript:
Qualtrics.SurveyEngine.addOnload(function()
{ TouchList.prototype.each = Array.prototype.each;
TouchList.prototype._each = Array.prototype._each;
var verticalSlider = document.getElementById('uiSlider');
noUiSlider.create(verticalSlider, {
start: 50,
orientation: 'vertical',
tooltips: wNumb({decimals: 0}),
direction: 'rtl',
step: 1,
range: {
'min': 0,
'max': 100
},
});
noUiSlider.create(pipsRangeVertical, {
range: range_all_sliders,
start: 0,
orientation: 'vertical',
pips: {
mode: 'range',
density: 3
}
});
var inputNumber = document.getElementById('QR~'+this.questionId+'~1');
verticalSlider.noUiSlider.on('update', function (values, handle) {
var value = values[handle];
start: 0,
inputNumber.value = Math.round(value);
});
inputNumber.addEventListener('change', function () {
verticalSlider.noUiSlider.set([null, this.value]);
});
inputNumber.setAttribute("readonly",true)
});
HTML: