Customising the image on a graphic slider | XM Community
Solved

Customising the image on a graphic slider

  • 20 December 2018
  • 17 replies
  • 347 views

Userlevel 1
Badge +1
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
icon

Best answer by TomG 21 December 2018, 14:11

View original

17 replies

Userlevel 7
Badge +11
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.
Userlevel 7
Badge +27
@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";
```
Userlevel 7
Badge +11
@TomG That's awesome to be wrong about. Thanks so much!
Badge +2
> @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";
Badge +1
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!!
Userlevel 7
Badge +27
> @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.)
Badge +1
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?
Userlevel 7
Badge +27
> @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.
Badge +1

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?
screengrb.JPG
Thanks all,
Bradley

Badge +2

https://www.qualtrics.com/community/discussion/comment/25932#Comment_25932Just 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.

Badge +1

https://www.qualtrics.com/community/discussion/comment/26141#Comment_26141Hi 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:

Pastiebin.com


embed :: 5ede7267c2ba6


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

Badge +2

Customizable_Graphic_Slider.qsfbrad7280 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:




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




Badge +1

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

Badge +2

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?

Badge +2

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)

Badge +2

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

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!

Leave a Reply