Hi! I just made a customizable graphic scale for my colleague, and I thought this would be relevant to your question. This code is inspired by a previous answer elsewhere.



Below is my javascript code. This code swaps the image in the question (as identified by `id=myImage`) to one of the images in the `images_list`, according to the slider position. You can specify the id of the image by going to the HTML view (`<img id="myImage"...`). The example code below is for a 20-point slider scale (thus there are 20 URLs for the images). You can change the list of images to whatever images that you want to present.



I'm attaching the survey export file here in case you wanted to test it.



Also, here's the link to the preview of the survey:

https://delaware.ca1.qualtrics.com/jfe/preview/SV_1BKq3RmzPGMivZz?Q_SurveyVersionID=current&Q_CHL=preview







```

Qualtrics.SurveyEngine.addOnReady(function() {

/*Place your JavaScript here to run when the page is fully displayed*/

// Assign the image on the HTML based on the image id. #myImage should correspond wi the `id=` parameter.

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() {

// get the current position of the slider and assign it to `answer`

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

// print out the answer to the browser console

console.log(answer) ;

// Create the list of Images 1-20 -- in order of presentation. Can be expanded or reduced according to the length of the slider question.

var images_list = [

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_5oouIw9FgfnoiSF',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_aWA2x3zyS2TaaGx',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_a3R7CIH2DHPPqeh',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_8FTOxSME6iDZRxX',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_6lNk2FPWPLXv3Kd',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_6Rmu4HrjwOeJ3p3',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_6g9oh30cGHhlRad',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_6ExHEbrliFeuTlj',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_6z252skkoJB9K2V',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_896IyANxjAtPGpD',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_8BN6R1dItgKBy5v',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_3Q4KBWXp3oVrG0R',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_3VPLj8iNSoq6K2N',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_dcoodxyI3iKCNsp',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_9NCfYgjNTyjAPB3',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_865ASxQmfQnZ9Rj',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_9pkcXUgUIUxmfWJ',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_0JHXUo96cUW0rMF',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_bjspYBSSOA9Enlj',

'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_4Z5Fy7D1zjqad5X',

]

// Swap the image according to the slider answer, so that the slider position 1 corresponds with the first image (zero indexed).

img[0].src = images_list[answer - 1]



});





});

```

In this example survey, the default image is 600x600 white square. You can change that to any default image of your choice via Rich Content Editor or by changing the image URL in the `src=` argument in the HTML view, as in the example below.



In the HTML View:

```

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



```

*Note that the `src` argument can be any picture that will be the initial image. In this example, I set up a white blank image with 600 x 600.







Hope this is helpful!

-Nami



Updated: 2020-04-02 - additional comments & HTML codes

---

Looks like I forgot to attach the qualtrics export file in the previous comment. I'm attaching the file here.

---

Hi Nami,, I think the example listed is for the slider not the graphic slider. Has anyone had any success altering a graphic slider? I need to increase the side and change the image of the graphic slide. And possibly add text.

---

> @Yolanda_B said:

> Hi Nami,, I think the example listed is for the slider not the graphic slider. Has anyone had any success altering a graphic slider? I need to increase the side and change the image of the graphic slide. And possibly add text.



I see! Just a note that you can swap the images in the `images_list ` to any images, providing the same function as the graphics slider. For example, you can swap the images in the `images_list` to the bigger images etc.

---

Is there a way to
a) get the slider to be above the image?
b) have the slider start at a random image, and the default image be whatever the initial value at the slider is? That is, if the initial position of the slider is at 2, the image of the "2" is display immediately when the question loads. If you refresh, and the slider starts at 11, then it displays the image of the "11" immediately etc.?
Your help above has been extremely helpful in my own survey!

---

nbasavap I think this slider setup may achieve your specifications.
Solution So Far
I first created a slider question, followed by a Descriptive Text Question.
In the slider question, I put the following JS code:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
// Function to generate a random number between two numbers, inclusive
function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1) ) + min;
};
var first_image_index = getRndInteger(0, 20) /// adjust this value according to the length of the slider question
// set the slider choice to the randomly selected value. The first slider is choiceID = 1
        this.setChoiceValue(choiceId = 1, value = first_image_index);
});

In the Descriptive Text question, I used the following JS code:
(Again, swap the QID, and the images to match your survey)
Qualtrics.SurveyEngine.addOnload(function() {
  /*Place your JavaScript here to run when the page loads*/

  // Get Images
  var img = jQuery("#presentedImage");
  currentQID = 'QID4' // Specify the question ID of the slider
  // Images 1-20 -- in order below
  var images_list = g
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_5oouIw9FgfnoiSF',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_aWA2x3zyS2TaaGx',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_a3R7CIH2DHPPqeh',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_8FTOxSME6iDZRxX',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_6lNk2FPWPLXv3Kd',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_6Rmu4HrjwOeJ3p3',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_6g9oh30cGHhlRad',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_6ExHEbrliFeuTlj',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_6z252skkoJB9K2V',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_896IyANxjAtPGpD',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_8BN6R1dItgKBy5v',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_3Q4KBWXp3oVrG0R',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_3VPLj8iNSoq6K2N',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_dcoodxyI3iKCNsp',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_9NCfYgjNTyjAPB3',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_865ASxQmfQnZ9Rj',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_9pkcXUgUIUxmfWJ',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_0JHXUo96cUW0rMF',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_bjspYBSSOA9Enlj',
      'https://delaware.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_4Z5Fy7D1zjqad5X',
    ]

  // Function to change the image when the slider is changed
  // Reference: https://www.qualtrics.com/community/discussion/5963/dynamic-accessing-slider-value
  jQuery("inputctype = hidden]").change(function() {
    var answer = parseInt(jQuery("#" + currentQID + " input.ResultsInput").eq(0).val());
    console.log(answer)
    // Swap image according to the slider answer (zero indexed, thus -1)
    img�0].src = images_listranswer - 1]
  });

});
In the Descriptive Text question, don't forget to put the HTML code so that the JS will know where to look for the image (

#presentedImage

):


A Potential Issue
So far this is what I was able to figure out. One potential issue is that once in a while, I get a blank screen for the presented image. I could not figure out why—looking for help here.

---

Hi,
I am also trying to create a slider with smilies at either end (one happy, one sad) and I have had ago using the information above but it was like reading a foreign language (I am very new here). I have attached the questionnaire I am trying to recreate in Qualtrics and would be hugely grateful for any support.
Best wishes,
Hattie

---