PROBLEM with slider with text on both ends and randomization. | XM Community
Skip to main content

Hello. I am creating a slider question with multiple options. I would like to slider's attribute to be bipolar and to be listed on the left and right end of the slider, as shown in the attached image. This works fine using the custom JS code shown below.
without randomization.jpg

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery(".statement-container div").eq(0).append("Comfortable");
jQuery(".statement-container div").eq(1).append("Interesting");
jQuery(".statement-container div").eq(2).append("Relaxing");
jQuery(".statement-container div").eq(3).append("Welcoming");
jQuery(".statement-container div").eq(4).append("Practical");
jQuery(".statement-container div").eq(5).append("Original");

});

However, I also need to randomize the presentation order of the slides. When I randomize it, the left hand word order is randomized, but the right word remains in the same position. Hence, the pairs of words of each slider are now mismatched. See below:

with randomization.jpg
I do understand why this is happening, but don't really know how to fix it in this environment. Any help would be greatly appreciated.
Thank you!

Use this JS:
Qualtrics.SurveyEngine.addOnload(function () {
    let text_pairs = {
        // Fill up the values here in the format "text-left": "text-right",
        // Have all the slider values in this format
        "stressing": "relaxing",
        
    };

    Object.keys(text_pairs).forEach((label) => {
        jQuery(".statement-container div:contains(" + label + ")").append(
            "" + text_pairs+label] + ""
        );
    });
});


I think I solved the issue:
Qualtrics.SurveyEngine.addOnload(function()
{
var label = document.getElementById(this.questionId+"-"+i+"-label");
var txt = label.textContent;
label.innerHTML += ""+txt+"";
})

This seems to be doing what I wanted. I just hope it will not somehow mess the responses.

https://www.qualtrics.com/community/discussion/comment/35682#Comment_35682Thank you, Ahmed. I was working on this issue when you posted your reply, and it seems I solved it following a different approach. Do you have a sense for what solution is best?

I can't say, because it depends upon how you've set up the question HTML. From the screenshots you shared in your OP, your solution would only repeat the text on the right side. So, there must be something in the question HTML that's getting the job done.

Oh my god I'm truly stupid. I was so focused on having the ability to correctly detect the word displayed on the left hand that once I was able to do that, I thought I had found the solution. I actually still needed to implement a conditional comparison where "if (txt == "standard")... and so on. Anyway, I think I'll use your solution as it is much more elegant. Thank you very much!

I just thought of a much simpler solution. Use edit multiple and keep your options in the following format:

Uncomfortable Comfortable

No JS required.

you are the GOAT. Thanks!

https://community.qualtrics.com/XMcommunity/discussion/comment/35682#Comment_35682Hello! I'm struggling with a really similar issue (see my question here: https://community.qualtrics.com/XMcommunity/discussion/comment/45579#Comment_45579). This solution seems like it is really close to what I need given that the html trick is not working for me. Any updates on how to implement this? Thank you!

Hi there! I’m working on exactly the same set up and used your JS code to fix it. Its working fine, but the two dimensions are next to each other, instead of being spread across the slider. Its the same when using the edit multiple option. Can someone help me figure out who to move the second value to the right of the slider?

 

Leave a Reply


Terms & Conditions