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
