Program EQ-5D VAS Scale

srtcy
srtcy Manchester, UKCommunity Member, Qualtrics Brand Admin Qubie ✭
edited July 19 in Custom Code

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.

Best Answers

  • w.patrick.gale
    w.patrick.gale Community Member Guru ✭✭
    Accepted 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.

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭
    Accepted Answer

    It's possible. Use the JS library noUiSlider.


«1

Answers

  • JBrim
    JBrim Cambridge of the non-massachusetts varietyCommunity Member Qubie ✭

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

  • crazyarc10
    crazyarc10 NetherlandsCommunity Member, Qualtrics Brand Admin Qubie ✭

    @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

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭
    1. Add the NoUiSlider style sheet and JS to your survey header
    2. Add html and css to your question to display the slider
    3. Add JS to your question to configure the slider and display and capture the slider value
  • crazyarc10
    crazyarc10 NetherlandsCommunity Member, Qualtrics Brand Admin Qubie ✭

    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!

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭

    Neither. Constant sum.

  • LauraK
    LauraK OxfordshireCommunity Member, Qualtrics Brand Admin Qubie ✭

    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 : <link href=https://cdn.jsdelivr.net/npm/[email protected]/distribute/nouislider.min.css” rel=”stylesheet”/><script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/[email protected]">

    Do I need to add JS as well or does above string include this?

    I see JS library nouislider below - where does that come in?

    // <div id="slider"></div>

    var slider = document.getElementById('slider');


    noUiSlider.create(slider, {

       start: [20, 80],

       connect: true,

       range: {

           'min': 0,

           'max': 100


    2.      Add html and css to your question to display the slider

    So here I choose constant sum question style and add html and css to your question to display the slider(??)


    Sorry, getting a lost!

    Thanks

    Laura

  • LauraK
    LauraK OxfordshireCommunity Member, Qualtrics Brand Admin Qubie ✭

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

    Laura

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭

    @LauraK - I replied via private message.

  • nraus
    nraus AustraliaCommunity Member, Qualtrics Brand Admin Qubie ✭

    Hi @TomG

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

  • tiz
    tiz Community Member - Trial User Qubie ✭
    edited October 2020

    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
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/distribute/nouislider.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/[email protected]"></script>
    
    • 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.
    <style type="text/css">.Skin .QuestionOuter { padding-bottom: 0px; padding-top: 20px; }
    #uiSlider { height: 100%; }
    </style>
    <p style="text-align: center;"><strong>EQ-5D VAS</strong></p>
    <table margin-top="10px">
    	<tbody>
    		<tr height="62px">
    			<td>&nbsp;</td>
    			<td class="scale-label">The best health you can imagine</td>
    		</tr>
    		<tr>
    			<td style="padding-right: 10px" width="65%">Please click on the slider to indicate how your health is TODAY</td>
    			<td height="300px" width="45%">
    			<div id="uiSlider">&nbsp;</div>
    			</td>
    		</tr>
    		<tr height="62px">
    			<td>&nbsp;</td>
    			<td class="scale-label">The worst health you can imagine</td>
    		</tr>
    	</tbody>
    </table>
    
    • 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.

  • Ahuti
    Ahuti Community Member Qubie ✭
    edited November 2020

    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!


  • JLow
    JLow Community Member Qubie ✭

    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!

  • bgk
    bgk Community Member - Trial User Qubie ✭

    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:

    <link href="https://cdn.jsdelivr.net/npm/nouisliderAT14.6.3/distribute/nouislider.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/combine/npm/nouisliderAT14,npm/wnumbAT1"></script>
    


    • The HTML for the question looks like this:
    <table style="width:100%">
     <tbody>
      <tr>
       <td rowspan="3" style="padding-right:10px; width:65%; vertical-align: top;">
       <ul>
        <li>We would like to know how good or bad your health is TODAY.</li>
        <li>This scale is numbered from 0 to 100.&nbsp;</li>
        <li>100 means the best health you can imagine.<br />
        0 means the worst health you can imagine.</li>
        <li>Please mark an X on the scale to indicate how your health is TODAY.</li>
        <li>Now, write the number you marked on the scale in the box below.</li>
       </ul>
       </td>
       <td style="padding-bottom: 10px;"><small>The best health you can imagine</small></td>
      </tr>
      <tr>
       <td style="padding-left:30px;">
       <div id="uiSliderX" style="height:500px;"></div>
       </td>
      </tr>
      <tr>
       <td style="padding-top: 10px;"><small>The worst health you can imagine</small></td>
      </tr>
     </tbody>
    </table>
    


    • 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)
    });
    
  • JBrim
    JBrim Cambridge of the non-massachusetts varietyCommunity Member Qubie ✭

    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

  • ErinNP
    ErinNP Fredericksburg, VACommunity Member Qubie ✭

    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:

    <link href="https://cdn.jsdelivr.net/npm/nouisliderAT14.6.3/distribute/nouislider.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/combine/npm/nouisliderAT14,npm/wnumbAT1"></script>
    


    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:

    <table style="width:100%">
     <tbody>
      <tr>
       <td rowspan="3" style="padding-right:10px; width:65%; vertical-align: top;">
       <ul>
        <li>We would like to know how good or bad your health is TODAY.</li>
        <li>This scale is numbered from 0 to 100.&nbsp;</li>
        <li>100 means the best health you can imagine.<br />
        0 means the worst health you can imagine.</li>
        <li>Please mark an X on the scale to indicate how your health is TODAY.</li>
        <li>Now, write the number you marked on the scale in the box below.</li>
       </ul>
       </td>
       <td style="padding-bottom: 10px;"><small>The best health you can imagine</small></td>
      </tr>
      <tr>
       <td style="padding-left:30px;">
       <div id="uiSliderX" style="height:500px;"></div>
       </td>
      </tr>
      <tr>
       <td style="padding-top: 10px;"><small>The worst health you can imagine</small></td>
      </tr>
     </tbody>
    </table>
    


    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!

  • bgk
    bgk Community Member - Trial User Qubie ✭

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

    <div id="uiSliderX" ...
    

    or just "uiSlider" as here:

    var vSlider = document.getElementById('uiSlider');
    

    This should hopefully solve your problem. Sorry for the typo!

  • ErinNP
    ErinNP Fredericksburg, VACommunity Member Qubie ✭

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

  • bgk
    bgk Community Member - Trial User Qubie ✭

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