The html entities

(" < >)

Thanks for the advice Tom.
I can't spot " < > but I did remove " > < from the latter end of the Look and Feel Header code and it did not work.

I've tried to change the Look and Feel code several time using different formats


and

None of which worked at generating the slider...

https://community.qualtrics.com/XMcommunity/discussion/comment/45209#Comment_45209Now that you've got the header fixed, check the console for errors.

Thanks TomG between your help and some off line help I've got it working.
For anyone else who might like this here's the completed and working bits.
First: Choose Question Type: Constant Sum , 1 statement, vertical format. 

Second: Updated Look and feel> General

Third: Update JavaScript

Fourth: Update HTML

	The people who are the best off
	The people who are the worst off

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 dwn308 ,

So it should be vertical. Check the first step - Choose Question Type: Constant Sum , 1 statement, vertical format. See cropped screen grab below:

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?

Hi there LMeerts , I went through the steps provided by VFF and it is working for me in the attached QSF. If you import it into a blank survey, you should be all set.
MacArthur_Scale_of_Subjective_Social_Science.qsfhttps://www.qualtrics.com/support/survey-platform/survey-module/survey-tools/import-and-export-surveys/#ImportingASurvey

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

Tom_1842
Hi Tom--Sorry to be back, but I wonder if you might have any suggestions for me. I can get the survey to work when I initially import it. But when I add the questions to my existing survey, the slider stops showing up. Can you think of what I might be doing wrong?

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.

Tom_1842 Perfect! That fixed it. Thank you!

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?

https://community.qualtrics.com/XMcommunity/discussion/comment/51866#Comment_51866Tom_1842 If you're able to help, that'd be great.

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 That fixed it! Thank you so much!

Have a wonderful rest of your day!

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?

fatimaq I see what you mean. Try adding the below CSS to the Style section of the survey's Look & Feel:
.noUi-base {
top: -35px !important;
}

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!

@PygmieBonobo @christophermaf

I am attaching an updated QSF that has been updated in the following ways:

1. Created a new 10 rung ladder image and uploaded it to Imgur. The png file is also included in the attached zip file. This ladder will align with the vertical slider to more easily identify which rung of the ladder the respondent views themself in.
2. Updated the slider range to 1-10 instead of 0-10.
3. Made it so that rating displays with the same formatting as the "Total" does in Constant Sum (Gray background, red font) and hid the Total row.
4. Centered the vertical slider and ladder in the middle of the page

More on the MacArthur Scale of Subjective Social Status can be found here. More on noUiSlider can be found here.

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(enull, 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 Try adding the below to the question’s JavaScript. It disabled the Next Button until the noUi slider is clicked:

this.disableNextButton();
var that = this;
jQuery(".noUi-base").on("click", function() {
that.enableNextButton();
});

@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();
});

This was solved with a slider above, but you may find a different solution useful, using a heatmap. I’ll upload a qsf file here with a heatmap version of the question. It renders the screenshot below, and participants just click on the ladder to indicate their position. No javascript required. Hope someone finds it helpful!