Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

Customising the image on a graphic slider

markw
markw ukCommunity Member Qubie ✭
edited June 2020 in Custom Code

I am looking to pilot a survey study and want to test the graphical slider (smile), the graphics for the neutral and positive conditions are great, but the negative ones are super angry rather than just sad. Is it possible to change the graphics with styling or java, if so has anyone done it and can they share their code?

Thanks in adv.

M

Tagged:

Best Answers

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭
    Accepted Answer

    @markw & @jpardicusick,

    Yes, you can replace images in a graphical slider using JS. For example, to replace first image:

    var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage');
    imgs[0].style.background = "url(https://image_url_goes_here) no-repeat";
    
  • Nami
    Nami Delaware, USACommunity Member Qubie ✭
    edited June 2020 Accepted Answer

    @brad7280 Here's what I came up so far

    I used the following JS:

    Qualtrics.SurveyEngine.addOnload(function() {
      /*Place your JavaScript here to run when the page loads*/
    
    
    });
    
    
    Qualtrics.SurveyEngine.addOnReady(function() {
      /*Place your JavaScript here to run when the page is fully displayed*/
      
     //////////////////////////////////////// for brad7280	
     // Get Image
      var img = jQuery("#myImage");
      currentQID = this.questionId
        // Function to look for track changes in slider
      // code inspired by https://www.qualtrics.com/community/discussion/5963/dynamic-accessing-slider-value
      jQuery("input[type = hidden]").change(function() {
        var answer = parseInt(jQuery("#" + currentQID + " input.ResultsInput").eq(0).val());
        console.log(answer)
        // Images in order below
        var images_list = [
          'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_8941uMZP0xpe1yB',
          'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_4UAfkFtRClsDSFT',
          'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_bdXIB07j1v0N3mJ',
          'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_abXP7xumZW0LMQ5',
          'https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_5vjllrLOlc1oFtH',
        ]
        // Swap image according to answer (zero indexed, thus -1)
        img[0].src = images_list[answer - 1]
      });
    });
    
    
    Qualtrics.SurveyEngine.addOnUnload(function() {
      /*Place your JavaScript here to run when the page is unloaded*/
    
    
    });
    

    In HTML I had the following below. Note that you can change the image size there:

    <div style="text-align: center;">
    <img id="myImage" src="https://delaware.ca1.qualtrics.com/CP/Graphic.php?IM=IM_6A7HiDixcZL6MXH" style="width: 600px; height: 600px;" />
    </div>
    

    Attached on this post is the .qsf export from Qualtrics. You can import the file and look for a block called "For brad7280".

Answers

  • JenCX
    JenCX Broomfield, COCommunity Member, XM Advocate, XMPN Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭

    I would LOVE this but when I contacted support a few months ago about the same topic, they said it's not possible to change.

  • JenCX
    JenCX Broomfield, COCommunity Member, XM Advocate, XMPN Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭

    @TomG That's awesome to be wrong about. Thanks so much!

  • Nami
    Nami Delaware, USACommunity Member Qubie ✭

    @TomG said:
    @markw & @jpardicusick,

    Yes, you can replace images in a graphical slider using JS. For example, to replace first image:

    var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage');
    imgs[0].style.background = "url(https://image_url_goes_here) no-repeat";
    

    Thanks for the answer! I think there was a typo in this answer (the single quote at the end of the first line should be a double quote). Below worked for me:

    var imgs = jQuery("#"+this.questionId+" div.SSImage > div.SSImage");
    imgs[0].style.background = "url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) no-repeat";
    
  • Pyper
    Pyper NYCCommunity Member Qubie ✭

    This is great! Can you use an image stored on your computer rather than a URL?
    And how do you change all images, rather than just first?
    thank you!!

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭

    @Pyper said:
    This is great! Can you use an image stored on your computer rather than a URL?

    No, the images have to be web based. You can upload them to your Qualtrics library.

    And how do you change all images, rather than just first?

    Change the imgs index (imgs[0], imgs[1], etc.)

  • Pyper
    Pyper NYCCommunity Member Qubie ✭

    that worked, thank you!
    Last issue I'm having now is the sizing of the image. The page only displays the corner - is there somewhere to see sizing needs of the image?

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭

    @Pyper said:
    that worked, thank you!
    Last issue I'm having now is the sizing of the image. The page only displays the corner - is there somewhere to see sizing needs of the image?

    Use the browser's inspect feature to find the size of the containing div and size your image to match.

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

    This is a SUPER helpful thread, thanks all so much. My issue is now the size of the images I need are constrained by the small size of the containing div for the default slider options (see attached image). Is there a way to increase the size capacity of the "containers" (I may not be saying this right) to accommodate for a custom graphic slider that has larger images? Essentially, I'm modifying the smiley-face graphic slider, which has a pretty small image size of 130x130 (but I believe it is even so the largest graphic slider available). Additionally, the images I want to use are more rectangular than square, which makes them appear even smaller.

    Is there a way to increase the image size?


    Thanks all,

    Bradley

  • Nami
    Nami Delaware, USACommunity Member Qubie ✭

    Just my 2 cents: you could use a normal slider scale and present an image in HTML to present images of any size. This post may be relevant for you.

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

    Hi Nami!

    Thanks so much. I actually looked at this post before posting my reply but, being a total beginner with this, I wasn't sure how to copy the code that you wrote out. Specifically, I wasn't sure what in the code I am supposed to keep as is and what I need to personalize for my own purposes. Right now, my code for using the graphic slider option to change the graphics looks like this:

    Would you be willing to show me how to take this code and use it in the way you outlined in that other post to use the normal slider scale, instead of the graphic slider?

    Thank you so, so much for your help.

    Bradley

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

    This is so helpful, thank you so much @Nami !!! You are the best.

  • paca
    paca NSW, AustraliaCommunity Member Qubie ✭

    @Nami Thank you for the super helpful code. I was able to get it working but the images only work for the first choice/statment of the slider question- if I want to add another statement/question the images will no longer move with the slider. What am I doing wrong?

  • Nami
    Nami Delaware, USACommunity Member Qubie ✭

    @paca To change which slider is responsible for manipulating the image, change the number inside eq() in the following line:

       var answer = parseInt(jQuery("#" + currentQID + " input.ResultsInput").eq(0).val());
    

    Currently, it is eq(0) and it refers to the first slider of the question. If you put eq(1) it is going to refer to the second slider of the question (note that this is zero-indexed---the first position is 0)

    If you have multiple images that you want to manipulate, you could copy the question. In this case, all questions will have one slider per question.

    If you want to present multiple images in one question with multiple sliders, you will need to (a) change the HTML so that your images have unique id's (e.g., myImage1, myImage2) and (b) change the JS so that different sliders (eq(0), eq(1)) can manipulate the respective images in HTML (e.g., myImage1, myImage2)

  • paca
    paca NSW, AustraliaCommunity Member Qubie ✭

    @Nami Thank you! Very much appreciated. I will give it a go :)

  • CDelivett
    CDelivett Birmingham, EnglandCommunity Member Qubie ✭

    @Nami Thank you so much for your incredibly helpful thread! I'm attempting to create a task whereby people can essentially pick their preferred portion size of a variety of different foods. The code you've provided works perfectly if all of the sliders are on separate pages, but if I put them all on the same page it stops working. I've changed the HTML so that each image has a unique ID, and changed the JS 'eq' values for each question, but it still doesn't seem to be working. If it helps, I have six sliders on the same page, each representing a different food. I created the first slider using your code, before copying the question and changing the image/ items in the image list. Hoping you can help!