Program EQ-5D VAS Scale | XM Community
Skip to main content
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.

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/

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

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.

Screenshot_20220324-073154__01.jpgDelete the  

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

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: d0,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 = valuesnhandle];

  });

  inputNumber.addEventListener('change', function () {

   vSlider.noUiSlider.set(Enull, 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!😅

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.

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

Leave a Reply


Terms & Conditions