Search code examples
sliderqualtricscomputation

How do I display the output of a function of multiple qualtrics sliders in real time?


My colleague and I am designing a survey using Qualtrics. On one page respondents must move a series of sliders. We need to display the output of a function of the values of the sliders on the same page, ideally also in the form of another slider. All of this must be done while the respondent moves the sliders.

Concretely, suppose the following:

value of slider 1 = 30;
value of slider 2 = 10;
value of slider 3 = 0

Output to be displayed = 30 x 20 + 10 x 5 + 0 x 15 = 650

where the 20, 5 and 15 are just arbitrary constants in the background.

If the user were to move slider 1 to 31, the displayed output should automatically update in real time to 670.

Any tip on how this is done? We're newbies to qualtrics and completely inexperienced with Java, so we'd be very grateful to anyone willing to provide us with working code. Thanks!


Solution

  • An update on my question, and a clarification after a comment received. We were of course not asking for someone else to do our job. Just for a pointer in the right direction.

    Based on an answer to a different question, I've managed to put this javascript together. It works, which is encouraging.. Code follows.

    Qualtrics.SurveyEngine.addOnReady(function()
    {
        /*Place your JavaScript here to run when the page is fully displayed*/
    var that=this.questionId;
       jQuery("<p style='width:100%'><br><strong> Output <span id='OUT'>0</span></strong>").insertAfter("table.sliderGrid");
        jQuery(document).on('change', function(){
    
            var firstslider=parseInt(jQuery("[id='"+that+"~1~result']").val());
            var secondslider=parseInt(jQuery("[id='"+that+"~2~result']").val());
            var N=firstlider+secondslider*2;
            jQuery("#OUT").text(N);
        });