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!
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
Preview:
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 (2)
Q2. For the Set Embedded Data, how can I add the data for "You" and "receiver" labels like yours to the Field please?
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)
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
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:
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"
For 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?
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
Your ranges are different, so you can compare and include the values to report on it.
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.
Hope it helps!
Thank you Deepak, I tried again. The embedded data showed in the data file, but it's blank. Please see below:-
Thank 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
Here 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!
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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.