How can I create a personalized graphic slider Question with JavaScript?

Martina_Vacondio2019Martina_Vacondio2019 Klagenfurt Community Member Qubie ✭

How can I create a personalized graphic slider Question with JavaScript?

Hi, I am looking to implement a specific slider based on specific graphics fundamental for my manipulation. They are not complicated, they should be a line that increase linearly and a line that increase logarithmically. The support told me that at this time, it’s not possible to use my own graphics with the Slider Question or Graphic Slider Question on the survey platform without using custom JavaScript code. But they told me that here someone could help me with that code. If anyone would be that kind to help me I can send more material to make the question more comprehensible.

Thanks for taking some time to read this.

Martina

Answers

  • NamiNami Community Member Qubie ✭

    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*/
      // 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 1-20 -- in order below
        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 image according to answer (zero indexed, thus -1)
        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.

    Hope this is helpful!
    -Nami

  • NamiNami Community Member Qubie ✭

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

  • Yolanda_BYolanda_B LondonCommunity Member Qubie ✭

    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.

  • NamiNami Community Member Qubie ✭

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

Sign In to Comment