Valued displayed above and below a slider for Social Value Orientation | XM Community
Skip to main content

Dear All,
I would like to use Qualtrics for the Social Value Orientation task. Does anyone know if it is feasible to use Qualtrics for this task, where different values are displayed above and below the slider (pls see the attached image)?
And I would appreciate it if someone could share the custom code/solution with me!
Thank you!
image.png

Faye0929
You can create the view but you would not be able to record it unless you include a branch logic with a total sum in slider.
You can create the view with this code inJS
Qualtrics.SurveyEngine.addOnReady(function()
{

/*Place your JavaScript here to run when the page is fully displayed*/
var target= document.getElementById(this.questionId).querySelectorAll("ul.numbers")[0].children;

var qty = target.length;

for (let i = 0; i < qty; i++) {

target[i].innerText="85";
}
const last = Array.from(
  document.getElementsByClassName('slider-container')
).pop();


jQuery("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div.labels-container").clone(true).prop('id','newnum').insertAfter(last);

document.getElementById("newnum").querySelector("ul.numbers").childrenn0].innerText="85";
document.getElementById("newnum").querySelector("ul.numbers").childrenn1].innerText="76"
document.getElementById("newnum").querySelector("ul.numbers").childrenn2].innerText="68"
document.getElementById("newnum").querySelector("ul.numbers").childrenn3].innerText="59"
document.getElementById("newnum").querySelector("ul.numbers").childrenn4].innerText="50"
document.getElementById("newnum").querySelector("ul.numbers").childrenn5].innerText="41"
document.getElementById("newnum").querySelector("ul.numbers").childrenn6].innerText="33"
document.getElementById("newnum").querySelector("ul.numbers").childrenn7].innerText="24"
document.getElementById("newnum").querySelector("ul.numbers").childrenn8].innerText="15"

});


Include the below in Custom CSS
.JFEScope .Slider .HBAR .BarContainer .sliderToolTipBox, .JFEScope .Slider .HSLIDER .BarContainer .sliderToolTipBox {
  
    display: none;
}
.JFEScope .Skin .Slider .HBAR .q-slider .statement-container div, .JFEScope .Skin .Slider .HSLIDER .q-slider .statement-container div {
    padding-bottom: 0px;
}
In the question label you can just add a space bar to remove it.
Within survey flow include it a range for example as below and after the question block
image.pngPreview:
image.png
Hope it helps!


Dear Deepak,
Thank you so much for your help! I tried the codes on Qualtrics, and I would appreciate it if you could help me again with the following questions.
Q1. The label displayed above the slider actually has different values (see image 1), and sorry for the confusion earlier. I tried to edit the code (see image 2), but it didn't work. Do you know how to so it correctly please?

Image (1)
image.pngImage (2)
image.png
Q2. For the Set Embedded Data, how can I add the data for "You" and "receiver" labels like yours to the Field please?

image.pngQ3. Can I only allow participants to move the handle to the 9 values available on the slider (same as the Likert scale, so there will be only 9 options available on the scale)
Q4. Is it possible to show the labels (You receive & Other receives) next to the upper and lower sliders please?

I am sorry to come back with so many questions. Thank you for your help!
Faye


Faye0929

Q1. The label displayed above the slider actually has different values (see image 1), and sorry for the confusion earlier. I tried to edit the code (see image 2), but it didn't work. Do you know how to so it correctly please? - You can use the below code but now don't include a space rather write You receive and your question should look like as below image.

Qualtrics.SurveyEngine.addOnReady(function()
{

/*Place your JavaScript here to run when the page is fully displayed*/
var target= document.getElementById(this.questionId).querySelectorAll("ul.numbers")[0].children;

target[0].innerText="85";
target[1].innerText="87";
target[2].innerText="89";
target[3].innerText="91";
target[4].innerText="93";
target[5].innerText="94";
target[6].innerText="96";
target[7].innerText="98";
target[8].innerText="100";

const last = Array.from(
  document.getElementsByClassName('slider-container')
).pop();

jQuery("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div.labels-container").clone(true).prop('id','newnum').insertAfter(last);

const last1 = Array.from(
  document.getElementsByClassName('slider-container')
).pop();

jQuery("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div > div.statement-container").clone(true).prop('id','new').insertAfter(last);

document.getElementById("new").querySelector("label").innerText="Other receives"
document.getElementById("newnum").querySelector("ul.numbers").childrene0].innerText="85";
document.getElementById("newnum").querySelector("ul.numbers").childrene1].innerText="76";
document.getElementById("newnum").querySelector("ul.numbers").childrene2].innerText="68";
document.getElementById("newnum").querySelector("ul.numbers").childrene3].innerText="59";
document.getElementById("newnum").querySelector("ul.numbers").childrene4].innerText="50";
document.getElementById("newnum").querySelector("ul.numbers").childrene5].innerText="41";
document.getElementById("newnum").querySelector("ul.numbers").childrene6].innerText="33";
document.getElementById("newnum").querySelector("ul.numbers").childrene7].innerText="24";
document.getElementById("newnum").querySelector("ul.numbers").childrene8].innerText="15";

});
For the Set Embedded Data, how can I add the data for "You" and "receiver" labels like yours to the Field please?

You can just click on the field added and edit it. I don't think of a reason why it should not work
.Q3. Can I only allow participants to move the handle to the 9 values available on the slider (same as the Likert scale, so there will be only 9 options available on the scale)

Well it would be difficult to as then it totally disrupts the slider functionality. Hence would not recommend it.
Q4. Is it possible to show the labels (You receive & Other receives) next to the upper and lower sliders please?- The above code should do the job. Your question would look like:

image.pngimage.png
Include the below additional CSS as well.
.Skin .Slider .HBAR .horizontalbar td.BarOuter, .Skin .Slider .HSLIDER .horizontalbar td.BarOuter {
    vertical-align: middle;
    padding-bottom: 0px;
}
Hope it helps!


Dear Deepak,
I managed to change the view! Thank you!
But I couldn't record the response, unsure where the problem arose. I put the following scripts at "Look and Feel" -> "Style" -> "Custom CSS"
image.pngFor the Embedded data, I manually added "Your Receive" and "Other Receive" to the new fields, then "set a value now" to 85 and 100, respectively (I am not sure which value I should add, so I put the minimum and maximum values of the upper slide to the fields.
Or could you share your project with me, so I can have a look?
image.png
For your answer to point (3), thank you for letting me know. I agree with you. I may consider the possibility of using a Likert table and adding the values below the scale.

Many thanks for your help.
Faye


https://community.qualtrics.com/XMcommunity/discussion/comment/51492#Comment_51492To record the response what we have done is we replaced the values visually. But on the backend it's still going from 0 to 100.
So if you break it evenly in 9 parts it will be like
image.pngYour ranges are different, so you can compare and include the values to report on it.
image.png
Hence you need to use this and hardcode the related values to it. So your survey flow would look like this. You need to do this for all 9 ranges.
image.pngHope it helps!


Thank you Deepak, I tried again. The embedded data showed in the data file, but it's blank. Please see below:-

image.pngThank you
Faye


https://community.qualtrics.com/XMcommunity/discussion/comment/51503#Comment_51503Can you post a screenshot of your survey flow of what you configured. Faye0929


Qualtrics1.JPGQualtrics2.JPGHere are screenshots of the flow. Many thanks!


Faye0929
Sorry but your image is not clear also I'm assuming the default question block has the slider question right?


Dear Deepak,
Yes, the default question has the slider question. I have attached the screencaps of the first 2 ranges here. Many thanks for your help!
test.pngtest2.png


https://community.qualtrics.com/XMcommunity/discussion/comment/51979#Comment_51979Faye0929 You need to keep the embedded data You and other same for every branch. It seems inconsistent and will affect data.


Leave a Reply