Program EQ-5D VAS Scale | XM Community
Solved

Program EQ-5D VAS Scale

  • 29 January 2019
  • 33 replies
  • 589 views
S
Badge
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.
icon

Best answer by w.patrick.gale 29 January 2019, 22:15

View original

33 replies

V
Badge +1

Thanks TomG you clearly know what your talking about.
Sadly no such luck, I couldn't spot " < > but I did remove " > < from the latter end of the Look and Feel Header code and it did not work. :( 
Essentially with your advice I tried running - this created visible code in the preview header or the questionnaire but no slider.


<link href="https://cdn.jsdelivr.net/npm/nouislider@14.6.3/distribute/nouislider.min.css"rel="stylesheet" type="text/css" /><script src="https://cdn.jsdelivr.net/combine/npm/nouislider@14,npm/wnumb@1/script>

I've tried to change the Look and Feel code several time using different formats 


and 

None of which worked at generating the slider...

TomG
Rank
Userlevel 7
Badge +27

Looks like you edited the header in Rich Text format, so some of the characters got replaced with html entities (

" < >
). You'll have to fix it. You should edit the header ONLY in source mode.

V
Badge +1

Hi
This thread is amazing & has been super helpful, but I am running into the same issues as several others and the solutions mentioned so far are not resolving it. I'm adapting the text slightly as want the vertical slider for a social ladder not the Euroqual measure but that shouldn't be an issue. Everything looks good except there is no slider!
Screenshot (5).pngCreated a question using Constant Sum, one statement, vertical.

Look and Feel> General> Header updated:

https://cdn.jsdelivr.net/npm/nouislider@14.6.3/distribute/nouislider.min.css"
 rel="stylesheet" />
<link href="
https://cdn.jsdelivr.net/npm/nouislider@14.6.3/distribute/nouislider.min.css"
 rel="stylesheet" type="text/css" /><script src="
https://cdn.jsdelivr.net/combine/npm/nouislider@14,npm/wnumb@1"></script>
 src="
">https://cdn.jsdelivr.net/combine/npm/nouislider@14.6.2,npm/wnumb@1.2.0">

No rouge AT all @
JavaScript updated

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)

});


HTML view updated:
Imagine that this scale pictures how society is set up.

At the top of the scale are the people who are best off – they have the most money, the highest amount of schooling, ant the jobs that bring the most respect.

At the bottom are people who are the worst off – they have the least money, little or no education, no job or jobs that no one wants or respects.

Now think about your family.
Please tell us where you think your family would be on this scale.


  
 
 
  
 
 
  
 
 


  		The best off you can imagine

  

  
The worst off you can imagine



I am totally lost its been hours, any help or advice much appreciated!😅

F
Badge +1

ahmedA Thanks a lot for coming back to my question. Perfect, it works so well now :)

A
Rank
Userlevel 7
Badge +21

Screenshot_20220324-073154__01.jpgDelete the  

F
Badge +1

Hey Guys - jeffreyohl & amartin123 I have just the same issue - have you figured out a solution jet? I`m at my wit's end.... Thanks a lot, I'm glad for any help or tips.

J
Badge +1

amartin123 Did you ever figure this out? I'm getting the same issue.

J
Rank
Badge +4

Please note that Euroqual now have a Qualtrics version available, so this coding probably won't be necessary, it will be in-built in the provided survey - At last/About Time!
https://euroqol.org/eq-5d-instruments/eq-5d-5l-available-modes-of-administration/self-complete-for-use-in-qualtrics/

K
Badge +1

https://community.qualtrics.com/XMcommunity/discussion/comment/38979#Comment_38979Or add ">https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.2.0/wNumb.min.js"> to use wNumb

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.pngAs well as this, the 100 is below the end of the slider:
Screenshot 2021-10-21 at 15.47.56.pngIs 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:





















  • Please indicate on the scale how your health is TODAY.


 The best health you can imagine




 
 
  The worst health you can imagine

Thank you in advance!

Nami
Rank
Badge +2

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


E

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

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!

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 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

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

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!

J
Rank
Badge +4

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

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

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!

A
Badge

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

tiz

I recently had to implement a vertical slider for one of our surveys, figured I'd share the steps here in case it's helpful to others. I used NoUiSlider for this. They have pretty good documentation and is very customizable.
It's actually a 3 step process:

  • 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



  • 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.

N

Hi TomG
I'm wondering if you could help me with this also?

TomG
Rank
Userlevel 7
Badge +27

LauraK - I replied via private message.

L

TomG are you able to help with my post above? Any help would be gratefully received.
Laura

Leave a Reply


Terms & Conditions