Include images in slider set with multiple labels

brad7280
brad7280 Chapel Hill, NC, USACommunity Member Qubie ✭

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...

... 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

Best Answer

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭
    Accepted Answer

    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 = '<div style="padding-bottom: 15px;display:block;position:relative">',
            enc_left = '<span style="left:0;position: absolute;">',
            enc_center = '</span><span style="left: 50%;position: absolute;">',
            enc_right = '</span><span style="right: 0%;position: absolute;">',
            enc_end = "</span></div>";
    
    
        let left_texts = [
                "&#128549; Completely Unpleasant(0)",
                "&#128549; Completely Tense(0)",
                "&#128549; Scared(0)",
            ],
            center_texts = ["Neutral(0)", "Neutral(0)", "Neutral(0)"],
            right_texts = [
                "Completely pleasant (100) &#128512; ",
                "Completely calm (100) &#128512;",
                "Not scared at all (100) &#128512;",
            ];
    
    
        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);
        }
    });
    

Answers

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    You could try using HTML emojis.

    And formatting your statements like this:

    <div style="padding-bottom: 15px;display:block;position:relative"> <span style="left:0;position: absolute;">&#128549; Completely Unpleasant(0)</span><span style="left: 50%;position: absolute;">Neutral(0)</span> <span style="right: 0%;position: absolute;"> Completely Pleasant(100)&#128512;</span></div>

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

  • brad7280
    brad7280 Chapel Hill, NC, USACommunity Member Qubie ✭

    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
    brad7280 Chapel Hill, NC, USACommunity Member Qubie ✭

    I was able to create this (below) using this code below "add on load":

    jQuery(".statement-container div").eq(0).append("<span style='float: right'>Completely pleasant (100)</span>");

    jQuery(".statement-container div").eq(1).append("<span style='float: right'>Completely calm (100)</span>");

    But I don't know how to get the emojis to be in the correct spot. Thanks again.

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    Change this jQuery(".statement-container div").eq(0).append("<span style='float: right'>Completely pleasant (100)</span>");  

    to

    jQuery(".statement-container div").eq(0).append("<span style='float: right'>Completely pleasant (100) &#128512; </span>");

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

  • brad7280
    brad7280 Chapel Hill, NC, USACommunity Member Qubie ✭

    Hmm, we're getting closer! The emojis are showing up but everything is bunched together on one side for some reason...

    I 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("<span style='float: right'>Completely pleasant (100) &#128512; </span>");

    jQuery(".statement-container div").eq(1).append("<span style='float: right'>Completely calm (100) &#128512;</span>");

    jQuery(".statement-container div").eq(2).append("<span style='float: right'>Not scared at all (100) &#128512;</span>");

    });


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

    <div style="padding-bottom: 15px;display:block;position:relative"> <span style="left:0;position: absolute;">&#128549; Completely unpleasant (0)</span><span style="left: 50%;position: absolute;">Neutral (50)</span> <span style="right: 0%;position: absolute;"> Completely pleasant (100)&#128512;</span></div>

    Any suggestions? Thanks so much for your help.

    Bradley

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    Can you share the survey link?

  • brad7280
    brad7280 Chapel Hill, NC, USACommunity Member Qubie ✭

    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.

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    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.

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    This is how it will look:


  • brad7280
    brad7280 Chapel Hill, NC, USACommunity Member Qubie ✭
  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    @brad7280 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
    brad7280 Chapel Hill, NC, USACommunity Member Qubie ✭

    @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.

  • brad7280
    brad7280 Chapel Hill, NC, USACommunity Member Qubie ✭

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