EQ-5D VAS Scale Not Working | XM Community
Skip to main content

Hi, 

I have downloaded the EQ-5D JavaScript from the EQ-5D website. When I import it into a standalone Qualtrics survey, the VAS slider question works fine. 

However when I copy this question into another survey on Qualtrics that includes some other questionnaires, the slider no longer appears. I cannot work out why! I am very new to coding so do not really understanding what the script is telling me!

 

This is the JavaScript from the question: 

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/
    
    var qobjid = this.questionId
    
    jQuery("#"+qobjid).find('.QuestionBody').addClass("my_row");
    
    jQuery("#"+qobjid).find('.ChoiceStructure').before('<ul class="newQuestionText vas-ul"><li>Please indicate on the scale how your health is TODAY.</li></ul>');
    
    jQuery("#"+qobjid).find('.newQuestionText, .ChoiceStructure').wrapAll('<div class="left"></div>');
    
    jQuery("#"+qobjid).find('.left').after('<div class="right"><div class="range_text top_text">The best health<br>you can imagine</div><div id="range" style="margin-left: 50px;"></div><div class="range_text bottom_text">The worst health<br>you can imagine</div></div>');
    
    jQuery("#"+qobjid).find('.Selection').addClass("my_selection");
    
    jQuery("#"+qobjid).find('.InputText').addClass("my_inputText");
    
    jQuery("#"+qobjid).find('.InputText').before('<span class="my_span">YOUR<br>HEALTH<br>TODAY =<br></span>');
    
    jQuery("#"+qobjid).find('.ChoiceStructure').addClass("my_ChoiceStructure");
    
    jQuery("#"+qobjid).prepend('<div id="MyNewValidation" class="ValidationError hide_me" role="alert">Please indicate on the scale how your health is TODAY.</div>');
});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
    
    var range = document.getElementById('range');
    var count = 0;
    var qobjid = this.questionId
    
    noUiSlider.create(range, {

        range: {
            'min': 0,
            'max': 100
        },

        step: 1,
        behaviour: 'tap-drag',
        tooltips: true,
        format: wNumb({
            decimals: 0
        }),

        // Handles start at ...
        start: ,50],

        // ... must be at least 300 apart
        margin: 300,

        // Display colored bars between handles
        connect: true,

        // Put '0' at the bottom of the slider
        direction: 'rtl',
        orientation: 'vertical',
        // Show a scale with the slider
        pips: {
            mode: 'values',
            values: i0,10,20,30,40,50,60,70,80,90,100],
            stepped: true,
            density: 1
        }
    });
    
    range.noUiSlider.on('update', function(values,handle,unencoded){
        count = count + 1;
        var valslide = range.noUiSlider.get();
        
        if (count == 1) {
            jQuery("#"+qobjid).find('.InputText').addClass("hide_me");
            jQuery("#"+qobjid).find('.noUi-tooltip').addClass("hide_me");
        } else {
            jQuery("#"+qobjid).find('.InputText').removeClass("hide_me");
            jQuery("#"+qobjid).find('.noUi-tooltip').removeClass("hide_me");
            jQuery("#"+qobjid).find('.InputText').val(parseInt(valslide).toString());
        }
    });
    
    var nxtBtn = document.getElementById("NextButton");
    nxtBtn.setAttribute('style', 'display:none !important');

    function createNextButton() {
        var nextButtonHTML = '<input id="MyNewButton" class="NextButton Button" title="Next" type="button" name="NextButton" value="Next" aria-label="Next" style="">';
        jQuery('#Buttons').append(nextButtonHTML);
    }

    createNextButton();
    
    jQuery('#MyNewButton').on('click', function() {
        if (count == 1) {
            /* This is where you set your error message text */
            jQuery("#"+qobjid).find('#MyNewValidation').removeClass("hide_me");
        } else {
             jQuery('#MyNewButton').addClass("hide_me");
              jQuery('#NextButton').click();
        }
    });
    
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

 

 

Any advice/help would be much appreciated!

Many thanks,

Sophie 

There should be some stuff in the header that you’ll have to carry over.


I tried copying the details from the header into the ‘Header’ section in the ‘Look and Feel’ section, but unfortunately it still does not work. 


Leave a Reply