Include images in slider set with multiple labels | XM Community
Solved

Include images in slider set with multiple labels

brad7280
Badge +1

Hi all,
I've been trying to make a series of bipolar sliders with images included on either end and am trying to figure out the best approach. I originally just had different questions with a slider in each question (see below). However...
Screenshot 2021-04-28 171557.png... This created a lot of empty space between the sliders such that you had to keep scrolling back up to the top to look at the picture again. So I'm trying to figure out whether I can have my three sliders in a single slider question to make this slider set more compact. I tried the solution given here (https://www.qualtrics.com/community/discussion/15246/problem-with-slider-with-text-on-both-ends-and-randomization#latest), which I was able to make work. However, I wasn't sure how to insert the link and correct size for my smiley faces into the custom javascript.
Alternatively, if someone has suggestions for keeping what I currently have (three different slider questions) but just making everything more compact, I would love to hear your thoughts.
Thanks for your help,
Bradley

icon

Best answer by ahmedA 4 May 2021, 19:51

View original

14 replies

A
Rank
Userlevel 7
Badge +21

You could try using HTML emojis.
And formatting your statements like this:

 😥 Completely Unpleasant(0)Neutral(0)  Completely Pleasant(100)😀

This should all be in one line. If you want line breaks, use


brad7280
Badge +1

Hi ahmedA ,
Thanks for your help. Where do I put this code? It didn't work in the Javascript editor. Sorry, I'm new to this!

brad7280
Badge +1

I was able to create this (below) using this code below "add on load":
jQuery(".statement-container div").eq(0).append("Completely pleasant (100)");
jQuery(".statement-container div").eq(1).append("Completely calm (100)");
Screenshot 2021-04-29 094307.pngBut I don't know how to get the emojis to be in the correct spot. Thanks again.

A
Rank
Userlevel 7
Badge +21

Change this 

jQuery(".statement-container div").eq(0).append("Completely pleasant (100)");  

to
 jQuery(".statement-container div").eq(0).append("Completely pleasant (100) 😀 ");

You need to put the code I shared as the statement. Where it says, click to add statement 1 etc.

brad7280
Badge +1

Hmm, we're getting closer! The emojis are showing up but everything is bunched together on one side for some reason...
Screenshot 2021-04-30 120058.pngScreenshot 2021-04-30 120024.pngI am using the following code for the Javascript editor:
/*Place your JavaScript here to run when the page loads*/
jQuery(".statement-container div").eq(0).append("Completely pleasant (100) 😀 ");
jQuery(".statement-container div").eq(1).append("Completely calm (100) 😀");
jQuery(".statement-container div").eq(2).append("Not scared at all (100) 😀");
});

And the following code I am adding to each "choice" statement, with the labels changed for each choice:

😥 Completely unpleasant (0)Neutral (50) Completely pleasant (100)😀

Any suggestions? Thanks so much for your help.
Bradley

A
Rank
Userlevel 7
Badge +21

Can you share the survey link?

brad7280
Badge +1

Sure thing, see here: https://ncsu.qualtrics.com/jfe/form/SV_77MMoGmcsmGwP1s
It's a bit jumbled as I'm trying to sort out the best way to ask these questions but you can see what the goal is. Thanks again.

A
Rank
Userlevel 7
Badge +21

I will need the preview link...the one with the jumbled code.
This is the published link, so it doesn't have the changes in progress.
Click on preview and share the link of the tab that opens up.

A
Rank
Userlevel 7
Badge +21

This is how it will look:
image.png

brad7280
Badge +1

Ah, ok great - here is that link. https://ncsu.qualtrics.com/jfe/preview/SV_77MMoGmcsmGwP1s?Q_CHL=preview&Q_SurveyVersionID=current

A
Rank
Userlevel 7
Badge +21

https://www.qualtrics.com/community/discussion/comment/37015#Comment_37015brad7280 The survey link you have shared still contains your old code. Please paste the code which jumbles up the labels.
As you can see from my screenshot, I don't see them as jumbled. So I need to see why is it happening for you, if you are pasting the same code.

brad7280
Badge +1

ahmedA whoops, sorry now it should work: https://ncsu.qualtrics.com/jfe/preview/SV_77MMoGmcsmGwP1s?Q_CHL=preview&Q_SurveyVersionID=current

Thanks so much for your help here.

A
Rank
Userlevel 7
Badge +21

The problem was that you were using JS along with the code that I provided. Hence, things were getting messed up. You can either delete your exising JS and just use the code above, or use this JS (which you can adjust easily):
Qualtrics.SurveyEngine.addOnload(function () {
    let enc_start = '',
        enc_left = '',
        enc_center = '',
        enc_right = '',
        enc_end = "

";


    let left_texts = [
            "😥 Completely Unpleasant(0)",
            "😥 Completely Tense(0)",
            "😥 Scared(0)",
        ],
        center_texts = ["Neutral(0)", "Neutral(0)", "Neutral(0)"],
        right_texts = [
            "Completely pleasant (100) 😀 ",
            "Completely calm (100) 😀",
            "Not scared at all (100) 😀",
        ];


    for (let i = 0; i < 3; i++) {
        let final_html =
            enc_start +
            enc_left +
            left_texts[i] +
            enc_center +
            center_texts[i] +
            enc_right +
            right_texts[i] +
            enc_end;
        jQuery(".statement-container").eq(i).html(final_html);
    }
});

brad7280
Badge +1

ahmedA perfect! That code worked for me. You are a total life saver thank you so much!!!!!

Leave a Reply


Terms & Conditions