Change default start position of custom slider | XM Community
Skip to main content
Solved

Change default start position of custom slider

  • September 26, 2020
  • 4 replies
  • 701 views
brad7280
Forum|alt.badge.img+4

Hi,
I am using the graphic slider with the "smiley face" option (though, I used some custom code so the smileys are slightly different, see photos attached). Right now, the default position of the slider is in the center position. I would like it to be at the bottom position (i.e., I want people to see the smiling face when they see the question rather than the somewhat upset face).
In the normal slider there is an option you can click for a custom start position, but not with the graphic slider from what I can see. Is there some code I can write so that the slider starts in a custom position (at the bottom)?
Thank you,
Bradley
emoji photo2.JPGemoji photo.JPG

Best answer by TomG

'init' should be a number (e.g., "1"), not a url. Here is a more efficient approach:
Qualtrics.SurveyEngine.addOnReady(function() {
var imgs = [ //list of graphic urls
"https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_5vjllrLOlc1oFtH",
"https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_abXP7xumZW0LMQ5",
"https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_bdXIB07j1v0N3mJ",
"https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_4UAfkFtRClsDSFT",
"https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_8941uMZP0xpe1yB"
];
var init = "1"; //initial graphic to show

var qid = this.questionId;
var q = jQuery("#"+qid);
q.find(".SSImage>.SSImage").each(function(i) { //update graphics
this.style.background = "url("+imgs[i]+") no-repeat";
});
if(q.find('.SSTrack.activated').length == 0) { //not already set (support prev button)
q.find('.handle').css("top","100px"); //initialize slider
q.find(".SSImage>.SSImage:visible").hide(); //hide default graphic
jQuery(("#Image_QR~"+qid+"@"+init).replace(/(~|@)/g,"\\\\$1")).show(); //show init graphic
}
});

4 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • September 27, 2020

See: https://gist.github.com/marketinview/37766e9e0f2f9d434845d327f1ece188

brad7280
Forum|alt.badge.img+4
  • brad7280
  • Author
  • September 27, 2020

Thanks for the response TomG. However, this doesn't seem to be working for me (maybe something in my existing code is affecting things?). See my full code here:
https://gist.github.com/bradleyallf/74e38e53b22b4c9ea32578b157319e30
I'm quite new to this so thanks a lot for your help,
Bradley

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • Answer
  • September 28, 2020

'init' should be a number (e.g., "1"), not a url. Here is a more efficient approach:
Qualtrics.SurveyEngine.addOnReady(function() {
var imgs = [ //list of graphic urls
"https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_5vjllrLOlc1oFtH",
"https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_abXP7xumZW0LMQ5",
"https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_bdXIB07j1v0N3mJ",
"https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_4UAfkFtRClsDSFT",
"https://ncsu.ca1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_8941uMZP0xpe1yB"
];
var init = "1"; //initial graphic to show

var qid = this.questionId;
var q = jQuery("#"+qid);
q.find(".SSImage>.SSImage").each(function(i) { //update graphics
this.style.background = "url("+imgs[i]+") no-repeat";
});
if(q.find('.SSTrack.activated').length == 0) { //not already set (support prev button)
q.find('.handle').css("top","100px"); //initialize slider
q.find(".SSImage>.SSImage:visible").hide(); //hide default graphic
jQuery(("#Image_QR~"+qid+"@"+init).replace(/(~|@)/g,"\\\\$1")).show(); //show init graphic
}
});

    brad7280
    Forum|alt.badge.img+4
    • brad7280
    • Author
    • October 9, 2020

    Oh my gosh, TomG this worked absolutely perfectly. Thank you so much! It is now behaving exactly as I want it to. And my code looks much more efficient now too, thank you for rearranging it as you did. This made my day!

    Terms & ConditionsAccessibility statement