Custom image replacing visual on Vertical Graphic Slider | XM Community
Skip to main content
Question

Custom image replacing visual on Vertical Graphic Slider

  • March 28, 2019
  • 2 replies
  • 83 views
T
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
G

2 replies

ana_velez
QPN Level 5 ●●●●●
Forum|alt.badge.img+27
  • ana_velez
  • QPN Level 5 ●●●●●
  • May 23, 2019
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; }
Ana Vl
JVV
Z
  • ZaraB
  • November 26, 2019
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!
Terms & ConditionsAccessibility statement