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

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

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

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

'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
}
});

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!

Leave a Reply


Terms & Conditions