Slide that automatically takes previous value | XM Community
Skip to main content

I have the following setting, where in the same page there is a first 2-slider question (Q41 in the example below) and a further slide below (Q67). When going through the survey, the respondent decides on the desired values for the first two sliders.

 

I would like the second slider to always take the value 10 - (sum of previous sliders).

 

 

now, here is where i’m stuck. I can relatively easily add text below the two sliders that show my desired algebraic sum, using the following code:

Qualtrics.SurveyEngine.addOnReady(function()
{
var qid = this.questionId;

    jQuery("<p>You are realising savings for your firm of: <span id='tot'>10</span>.</p>")
        .insertAfter("div.ChoiceStructure");

     function updateTotal() {
        var $inputs = jQuery("#" + qid + " input.ResultsInput");
        var A = parseInt($inputs.eq(0).val(), 10) || 0;
        var B = parseInt($inputs.eq(1).val(), 10) || 0;
        var tot = 10 - (A + 😎 || 0;
        jQuery("#tot").text(tot);
    }

     jQuery("#" + qid + " input.ResultsInput")
        .on("input change", updateTotal);

     updateTotal();
});

 

which leads to the following:

but i cannot do that across questions.

 

Is that even possible? I'm kind of stuck. Any comment welcome!

Ok figured it out finally. If someone is interested, this is how I did it.

 

    var destContainer = jQuery("#" + this.questionId).closest(".QuestionOuter");
    var prevContainer = destContainer.prevAll(".QuestionOuter").first();         // immediately prior question
    var qid     = prevContainer.attr("id");
    var that = this;
    var $inputs = jQuery("#" + qid + " input.ResultsInput");
    var $destInput = jQuery("#" + this.questionId   + " input.ResultsInput").eq(0);

    //why do you need this? I don't know. But you do. Trust me. Cannot find any other way to get the dest slider 'read' a previous variable...
    jQuery("body").append(
      "<span hidden id='tot'>10</span>"
    );
    
     function updateTotal() {
        var A = parseInt($inputs.eq(0).val(), 10) || 0; // || 0 to avoid NaN and that kind of stuff.
        var B = parseInt($inputs.eq(1).val(), 10) || 0;
        var tot = 10 - (A + 😎 || 0;
        jQuery("#tot").text(tot);
        this.setChoiceValue(1,tot) || 10;
    }

    jQuery("#" + qid + " input.ResultsInput")
        .on("input change", updateTotal);
    
    function syncSlider() {
        var tot = parseInt(jQuery("#tot").text(), 10) || 0;
        that.setChoiceValue(1, tot);
        $input.val(tot).trigger("input");
    }

    // watch changes to <span id="tot">:
    var totNode = document.getElementById("tot");
    if (totNode) {
        new MutationObserver(syncSlider)
            .observe(totNode, { childList: true, characterData: true, subtree: true });
    }

    //this does the bounce-back thingy if the user tries to change the dest slider
    $destInput.on("input change", function() {
        setTimeout(syncAll, 0);
    });
    
    updateTotal();
    syncSlider();

 

Leave a Reply


Terms & Conditions