Custom image replacing visual on Vertical Graphic Slider | XM Community
Skip to main content
I am looking to use a graphic slider to ask participants where they think they stand on a ladder relative to their community members. On Qualtrics, there are only 'Horizontal Bars', 'Disks', and 'Building Blocks' as the image options. I want to replace the visual with a custom image of mine (a ladder). Is it possible to change the graphics with styling or java, if so has anyone done it and can they share their code? Please see below the image for reference

!





Thanks,



T
Hi @tomthlee



We have done it with a hearth in a 5 points scale. Maybe you can use the code as a guide to make yours with the ladder



.JFEScope .SS .Smile.SS1 {

background: url(https://qpartnerdev.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_5nd9DT1bItecYXr) no-repeat;

background-size: contain;

}



.JFEScope .SS .Smile.SS2 {

background: url(https://qpartnerdev.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_ewWG3kU3gtwDjbn) no-repeat;

background-size: contain;

}

.JFEScope .SS .Smile.SS3 {

background: url(https://qpartnerdev.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_a8DaiS6oJaR0cSx) no-repeat;

background-size: contain;

}

.JFEScope .SS .Smile.SS4 {

background: url(https://qpartnerdev.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_0uLqyeRwhzAj8kR) no-repeat;

background-size: contain;

}

.JFEScope .SS .Smile.SS5 {

background: url(https://qpartnerdev.co1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_3QxA0eZxZa1SPxb) no-repeat;

background-size: contain;

}
Hi @ana_velez_voce



Many thanks for your suggestion and the code. I'm trying to use it myself but when I go to insert your code I can't find the right spot in the JavaScript for the question (which looks like this):



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



});



Qualtrics.SurveyEngine.addOnUnload(function()

{

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



});



I've tried inserting your code in a couple of places but keep getting various error messages. Can you advise on how to insert the code?



Many thanks!

Leave a Reply


Terms & Conditions