Creating multiple custom graphic sliders on the same page

CDelivettCDelivett Birmingham, EnglandCommunity Member Qubie ✭

Creating multiple custom graphic sliders on the same page

Hello,

Complete newbie to coding in JS, so I'm hoping someone can help. I'm trying to create a set of custom graphic sliders so that people can effectively choose their preferred portion of a variety of different foods. I found this incredibly helpful script posted by @Nami, however I am experiencing difficulties with getting more than one slider to appear on the same page. The script is as follows:

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*/
  	
 // Get Image
  var img_apple = jQuery("#myImage1");
    // Function to look for track changes in slider
  jQuery("input[type = hidden]").change(function() {
    var answer_apple = parseInt(jQuery("#QID1 input.ResultsInput").eq(0).val());
    console.log(answer_apple)
    // Images in order below
    var images_list_apple = [
	// Image URL's go here
    ]
    // Swap image according to answer (zero indexed, thus -1)
    img_apple[0].src = images_list_apple[answer_apple - 1]
  });
});

Qualtrics.SurveyEngine.addOnUnload(function() {
  /*Place your JavaScript here to run when the page is unloaded*/

});

Then for the second slider I have changed "#myimage1", the variable names, and changed the "QID" (changing the .eq() value, as previously suggested broke the entire script!). I can get all of the sliders to appear on one page, however upon clicking the first slider it loses the default image for the remaining sliders:

The sliders still function correctly and load the appropriate images, but I need that image to remain on-screen. Any suggestions? Hoping someone here can help.

Many thanks in advance,

Chris

Best Answer

  • CDelivettCDelivett Birmingham, EnglandCommunity Member Qubie ✭
    Accepted Answer

    I managed to fix this by introducing an 'If' statement after the image list, as follows:

    	if (answer_apple == answer_apple)
    		{
        // Swap image according to answer (zero indexed, thus -1)
    		img_apple[0].src = images_list_apple[answer_apple - 1]
    	}
    

    All of the sliders now appear correctly on the same page. The issue was that whenever I clicked on a slider the remaining sliders all returned a "NaN" result, and so they were unable to load an image.

    Hope this helps!

    Chris

Sign In to Comment