Qualtrics: Custom JavaScript ceases to work when importing questions to a new survey

Question

I have a Qualtrics survey containing a few questions with custom JavaScript (to enable a slider with two slider knobs). I can a) copy the survey as well as b) export the survey as a .qsf file and re-import it. In both cases, I get a new, working survey.

However, importing the survey questions to an existing survey using the "Import Questions From..." function does not work; the JavaScript fails to work in this case. Is there a way to import these questions to an existing survey while preserving the JavaScript?

The code used in the first (most relevant) question:

Qualtrics.SurveyEngine.addOnload(function()
{

    document.getElementById("QR~QID7").setAttribute("readonly", "readonly");
    document.getElementById("QR~QID8").setAttribute("readonly", "readonly");
    var surface;
    var cnst = 4;
    // Sets the sliders parameters and starting values
     $("#research-slider").slider({ id: "research-slider", min: 0, max: 10, range: true, value: [0, 10]});
     // variable to store in surface area when user has stopped sliding
     var surface, currentResponse;
     $("#research-slider").on("slideStop", function(slideEvt) {
         surface = slideEvt.value;
         document.getElementById("minimum").innerHTML  = surface[0];
         document.getElementById("maximum").innerHTML  = surface[1];
         document.getElementById("newValue").innerHTML  = (surface[1]- surface[0])/cnst ;
         document.getElementById("QR~QID7").value  = surface[0];
         document.getElementById("QR~QID8").value  = surface[1];
     });



     $('NextButton').onclick = function (event) {       
        // and now run the event that the normal next button is supposed to do
        Qualtrics.SurveyEngine.navClick(event, 'NextButton')
    }

})

T. Gibbons · Accepted Answer · 2016-11-29T17:16:36.110

Your JavaScript won't work when imported because you are using fixed QID codes (QID7 and QID8). The solution is to write your code to find the correct elements by walking the DOM. The easiest way is to use prototypejs instead of native JavaScript.

Assuming the min (QID7) and max (QID8) follow immediately after the question your code is attached to, then it would be something like:

var qid = this.questionId;
var min = $(qid).next('.QuestionOuter').down('.InputText');
var max = $(qid).next('.QuestionOuter',1).down('.InputText');
min.setAttribute("readonly", "readonly");
max.setAttribute("readonly", "readonly");
var surface;
var cnst = 4;
// Sets the sliders parameters and starting values
 $("#research-slider").slider({ id: "research-slider", min: 0, max: 10, range: true, value: [0, 10]});
 // variable to store in surface area when user has stopped sliding
 var surface, currentResponse;
 $("#research-slider").on("slideStop", function(slideEvt) {
     surface = slideEvt.value;
     $("minimum").innerHTML  = surface[0];
     $("maximum").innerHTML  = surface[1];
     $("newValue").innerHTML  = (surface[1]- surface[0])/cnst ;
     min.value  = surface[0];
     max.value  = surface[1];
 });

Thank you, this is indeed correct. I did not write the code myself, and so did not realise the question IDs were hard-coded. — simoncolumbus, Nov 29 '16 at 19:44

Qualtrics: Custom JavaScript ceases to work when importing questions to a new survey

1 Answers1