Creating a graphic visual analogue scale | XM Community
Question

Creating a graphic visual analogue scale

  • 30 September 2020
  • 1 reply
  • 530 views

Hi, I am new to Qualtrics and am using the platform for my thesis research. I want to create four visual analogue scales with a smiley/ sad face at either end as the scale. I have attached a picture of the questionnaire I am trying to recreate in Qualtrics. I have read through other posts however they talk about using Java Script and I have no idea what I am doing. I cannot express how grateful I would be for some support!
Best wishes, Hattie

VAS scale.png


1 reply

Userlevel 7
Badge +27

Hi there, if you still need, I was able to adapt the code in this thread to put sliders in place that look like what you are going for. First, create a Constant Sum question type and setting the answer type to Sliders. 
Then, set the number of statements to 1. Once configured, the question can be copied to add additional statements. 
Use the Rich Content Editor to set the left side of the slider with a picture and some text. In my example, I set the image height and width to 80. The right side of the slider will be set and styled with JavaScript.
When the left side is all set, add the below to the question's JavaScript in the OnReady section, adding in the URL for the Frown face picture and updating the text.
var image = new Image(); 
image.style = "width: 80px; height: 80px;";
image.src = "YOURURL"; 

var qid = this.questionId;
var end1 = document.getElementById(qid+'~1~result');
var cont1 = document.getElementById(qid+'~1~ResultsTd');
var left1 = document.getElementById(qid+'-1-label');
var left1width = left1.offsetWidth;

jQuery(cont1).css({"text-align":"left"});
jQuery(end1).before(image);
jQuery(end1).after("
Very afraid");
jQuery(end1).css({"display":"none"});

if (jQuery(window).width() > 480) {
jQuery(cont1).css({"min-width":"120px"});
}

if (jQuery(window).width() <= 480) {
jQuery(cont1).css({"font-size":"14px","min-width":"2em","width":left1width});
jQuery(image).css({"width":left1width});
jQuery(" .Skin .HSLIDER .horizontalbar").css({"padding-right":"0px"});
jQuery(" .Skin .HBAR .horizontalbar").css({"padding-right":"0px"});
}
SliderLabels1.png

Leave a Reply