Hi all,

I am working on a survey that presents patients with a choice between two options, A and B. We want to ask participants the percent chance they would choose each option. The options are mutually exclusive and there are no other choices, so the percent chances of choosing each choice should add up to 100%. 

I would like to use one slider instead of using a constant sum question with two sliders to reduce friction as participants take the survey, and add dynamic text below the slider that shows probability of choosing option A (selected using the slider) and implied probability of choosing option B (100% minus the probability of choosing option A). I would also like to make sure that the dynamic text works in the “mobile-friendly” survey version. I currently have the code below, which works in non-mobile-friendly version but does not work for mobile-friendly. Is anyone able to advise how to make this work in the mobile-friendly version, or is there no way to do this? 

Thank you!

Qualtrics.SurveyEngine.addOnload(function()

{

    /*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function() {

    var that = this.questionId;

    var p = Math.round(jQuery("Mid='" + that + "~1~track']").width() / 100);

    

    // Initially hide the text

    jQuery("<p id='customid' style='width:100%; margin-bottom:10px; display:none;'>You said there is a <span id='currA'>0</span>% chance you would choose Option A. This means you would have a <span id='currB'>0</span>% chance of choosing Option B.</p>").insertAfter("div.ChoiceStructure");

    // Function to show the text

    function showText() {

        jQuery("#customid").show(); // Use jQuery's show() method

    }

    // Bind input changes to the slider

    jQuery(" id='" + that + "~1~result']").on('input propertychange change touchend', function() {

        var A = parseInt(jQuery(">id='" + that + "~1~result']").val());

        jQuery("#currA").text(A);

        

        // Calculate the chance for choosing Option B

        var B = 100 - A;

        jQuery("#currB").text(B);

        

        // Show the text only when the slider is interacted with

        if (A >= 0) {

            showText(); // Show the text on first interaction

        }

        console.log("Slider value: " + A); // Debug output

    });

});

Qualtrics.SurveyEngine.addOnUnload(function() {

    /* Place your JavaScript here to run when the page is unloaded */

});