MacArthur Scale of Subjective Social Status on Qualtrics

The html entities

(" < >)

I am also trying to create a MacArthur Subjective Status item, and this post was immensely helpful. However, we have found that a number of our participants experience trouble using the slider, or being a bit confused by it (for context, these are children and adolescents). I am wondering if you or anyone else have some thoughts or advice on replacing the slider with vertically listed radio buttons (same 10 responses as the slider) within the java script you provided?

Hi there. I am a total newbie and don't understand how to insert the text and code you've provided. I can add in the HTML, but of course, the slider isn't there with it. Does anyone have time to help me understand how follow the steps correctly?

Tom_1842 Thanks! Worked for me! I just needed the import step to understand how to do it.

Hi LMeerts , for the Slider to work, all the steps mentioned by VFF must be in place, including the Slider question format, the JavaScript hidden in the Header, the Question JavaScript, and the Question HTML.
Copying the question into a different survey won't bring over the JavaScript hidden in the Header, so it is likely you still need to add that bit to your survey to get it to work. In the survey that you imported where it was working, head over to the Look & Feel -> General and copy the code in the Header field over to the Header field in your survey.

Thank you everyone, I am using this and its really helpful.
However I ran into a problem. I want to have two different questions and the problem is that the second question doesn't show the scale where as the first does.
When I preview the question itself, the scale shows but when I preview the whole survey, the second question doesn't show a scale.

Can somebody help?

Hi fatimaq , if both of your questions are on the same page, I think what is happening is that your 2nd question is trying to reference the id/slider of the first question and is running into errors. If you update the JavaScript and HTML of each question so that they are referencing unique things, you should be able to include multiple sliders on a page.
So in the HTML, the "id" of the 1st question becomes "uiSlider1" and in the question's JavaScript, vSlider becomes vSlider1 and inputNumber becomes inputNumber1. For the 2nd question, the "id" in the HTML becomes "uiSlider2" and in the question's JavaScript, vSlider becomes vSlider2 and inputNumber becomes inputNumber2. Working for me in the attached QSF.
MacArthur_Scale_of_Subjective_Social_Science_x2.qsf

Tom_1842 one more, since you are so good at it!
The silder and the scale are off by 1 for me. So when the slider is at 0, its actually a position below the 0 on the scale. Is there a way so that the slider is at the exact position as of the scale?

Hi Tom, thanks for putting this together. I’m keen to use the file you provided, however the file can’t be downloaded any longer. Any chance you could re-upload it if you still have a copy? Thanks for your time!

Thanks to everyone who has contributed to this thread. The default setting on the ladder is 5. but I don’t want participants to just click the next button each trial (and not interact with the ladder). I have been trying unsuccessfully to disable the next button until the participant has moved the ladder. The first example of my JavaScript seems to manage the disabling of the next button, but then I lose the recorded response on the slider. The second example of my Javascript has the slider working but the next button not disabling. I need to find a way to integrate them. Any help would be amazing!

###########Next button working, slider not working:

Qualtrics.SurveyEngine.addOnload(function() {

    // Functions to disable/enable Next button

    function disableNextButton() {

        var nextButton = jQuery('#NextButton');

        nextButton.prop('disabled', true);

    }

    function enableNextButton() {

        var nextButton = jQuery('#NextButton');

        nextButton.prop('disabled', false);

    }

    // Your existing slider initialization code

    var vSlider1 = document.getElementById('uiSlider1');

    noUiSlider.create(vSlider1, {

        start: 5,

        step: 1,

        direction: 'rtl',

        orientation: 'vertical',

        range: {

            min: 0,

            max: 10

        },

        format: wNumb({

            decimals: 0

        }),

        pips: {

            mode: 'steps',

            stepped: true,

            density: 10,

        }

    });

    var inputNumber1 = document.getElementById('QR~' + this.questionId + '~1');

    vSlider1.noUiSlider.on('change', function (values, handle) {

        // Enable the Next button when the slider is changed

        enableNextButton();

    });

    inputNumber1.addEventListener('change', function () {

        vSlider1.noUiSlider.set([null, this.value]);

    });

    // Initial state: Disable Next button

    disableNextButton();

    inputNumber1.setAttribute('readonly', true);

});

Qualtrics.SurveyEngine.addOnReady(function() {

    var that = this;

    var q = jQuery("#"+this.questionId);

    var clicked = "no";

    this.hideNextButton();

    q.find("#uiSlider1 .noUi-handle").on("mousedown touchstart", function() {

        clicked = "yes";

    });

    jQuery("#Wrapper").on("mouseup touchend", function() {

        if(clicked == "yes") {

            that.showNextButton();

        }

    });

});

####################Slider working, next button not working:

Qualtrics.SurveyEngine.addOnload(function() {

    // Your existing slider initialization code

    var vSlider1 = document.getElementById('uiSlider1');

    noUiSlider.create(vSlider1, {

        start: 5,

        step: 1,

        direction: 'rtl',

        orientation: 'vertical',

        range: {

            min: 0,

            max: 10

        },

        format: wNumb({

            decimals: 0

        }),

        pips: {

            mode: 'steps',

            stepped: true,

            density: 10,

        }

    });

    var inputNumber1 = document.getElementById('QR~' + this.questionId + '~1');

vSlider1.noUiSlider.on('update', function (values, handle) {

        // Update the inputNumber1 value during sliding

        inputNumber1.value = values[handle];

// Show or hide the Next button based on slider movement with a delay

        setTimeout(function() {

            if (sliderMoved()) {

                showNextButton();

            } else {

                hideNextButton();

            }

        }, 100); // Adjust the delay time as needed

    });

    vSlider1.noUiSlider.on('change', function (values, handle) {

        // Record the response value when the slider is changed

        var responseValue = parseInt(values[handle]); // Assuming the value is an integer

        Qualtrics.SurveyEngine.setEmbeddedData('SliderResponse', responseValue);

    });

 inputNumber1.addEventListener('change', function () {

        // Set the slider value when the input number changes

        vSlider1.noUiSlider.set([null, this.value]);

    });

    inputNumber1.setAttribute('readonly', true);

    // Function to hide/show Next button

    function hideNextButton() {

        var nextButton = jQuery('#NextButton');

        nextButton.hide();

    }

    function showNextButton() {

        var nextButton = jQuery('#NextButton');

        nextButton.show();

    }

    // Function to check if the slider is moved

    function sliderMoved() {

        // Implement your logic to determine if the slider is moved

        // For simplicity, we assume that if the slider value is not the initial value, it is moved.

        return vSlider1.noUiSlider.get() !== vSlider1.noUiSlider.options.start;

    }

    // Initial state: Hide Next button

    hideNextButton();

});

@socog2888199 The below is working better for me. It enables whenever the noUi slider is interacted with:

this.disableNextButton();
var that = this;
jQuery(".noUi-base, .noUi-touch-area, .noUi-handle").on("touchstart mousedown", function() {
that.enableNextButton();
});