Best answer by w.patrick.gale
View originalProgram EQ-5D VAS Scale
I recently had to implement a vertical slider for one of our surveys, figured I'd share the steps here in case it's helpful to others. I used NoUiSlider for this. They have pretty good documentation and is very customizable.
It's actually a 3 step process:
- You need to add the JS code for noUISlider to the header files. Go to Look and feel --> General --> Edit Header --> Click on the "Source" symbol then add the following 2 lines in. This will get you the CSS and JS for the noUISlider library
- Then, on the question itself, you'll have to add custom HTML code to get it to look right. I used a "Constant Sum" question with one choice and the horizontal orientation, but you can probably format it to be something else. Then went to edit the question text and added custom HTML. Rich Content Editor --> Source. Below is my custom HTML code. The only way I could get it to look OK was with a table.
EQ-5D VAS
The best health you can imagine | |
Please click on the slider to indicate how your health is TODAY | |
The worst health you can imagine |
- With that in place, you'll then have to add the custom Javascript code on the question itself to actually make the slider work inside the
addOnLoad
function. The first part sets up the slider itself, and the second part captures its output to the answer box of the question so that it gets recorded.
Qualtrics.SurveyEngine.addOnload(function() {
TouchList.prototype.each = Array.prototype.each;
TouchList.prototype._each = Array.prototype._each;
var verticalSlider = document.getElementById('uiSlider');
noUiSlider.create(verticalSlider, {
start: 0,
orientation: 'vertical',
tooltips: wNumb({decimals: 0}),
direction: 'rtl',
step: 1,
range: {
'min': 0,
'max': 100
},
});
var inputNumber = document.getElementById('QR~'+this.questionId+'~1');
verticalSlider.noUiSlider.on('update', function (values, handle) {
var value = values[handle];
inputNumber.value = Math.round(value);
});
inputNumber.addEventListener('change', function () {
verticalSlider.noUiSlider.set([null, this.value]);
});
inputNumber.setAttribute("readonly",true)
});
It doesn't look exactly like the EQ-5D VAS demo, but gets the key elements they ask for.
Hi all
I have tried for a while now to implement the vertical slider. The above code helped a lot, but there are a few lines of code which cause the slider not to be displayed. Here is the solution I came up with:
- Use question type "constant sum", one choice, vertical
- Link to the noUISlider code; as tiz described it (see above):
You need to add the JS code for noUISlider to the header files. Go to Look and feel --> General --> Edit Header --> Click on the "Source" symbol then add the following 2 lines in. This will get you the CSS and JS for the noUISlider library:
- The HTML for the question looks like this:
| The best health you can imagine |
The worst health you can imagine |
- Finally, there is some JavaScript that has to go with the question:
Qualtrics.SurveyEngine.addOnload(function() {
var vSlider = document.getElementById('uiSlider');
noUiSlider.create(vSlider, {
start: 50,
step: 1,
direction: 'rtl',
orientation: 'vertical',
range: {
min: 0,
max: 100
},
format: wNumb({
decimals: 0
}),
// Show a scale with the slider
pips: {
mode: 'positions',
values: [0,10,20,30,40,50,60,70, 80,90,100],
stepped: true,
}
});
var inputNumber = document.getElementById('QR~'+this.questionId+'~1');
vSlider.noUiSlider.on('update', function (values, handle) {
inputNumber.value = values[handle];
});
inputNumber.addEventListener('change', function () {
vSlider.noUiSlider.set([null, this.value]);
});
inputNumber.setAttribute('readonly',true)
});
ErinNP Sorry to hear that the slider is still not working for you.
You need to use "@" instead of "AT" in the header link. As in the code further up the page the link isn't displayed properly I tried to use this work-around, sorry if this wasn't clear.
amartin123 Did you ever figure this out? I'm getting the same issue.
Delete the
"They are not going to care if it is a vertical or horizontal scale."
er. they do care, unfortunately, They wanted to look at our graphics. Everything else is easy in Qualtrics - pity about this not be possible at the moment.
REDCAP can do a vertical slilder.. they are happy with that.
TomG
Hi Sir! Good day!
"It's possible. Use the JS library noUiSlider."
I am new to Qualtrics, may I ask on how to add JS library and what are the things I need to do, in order to replicate that scale example that you have given?
Thanks in advance
- https://www.qualtrics.com/community/discussion/comment/28929#Comment_28929Add the NoUiSlider style sheet and JS to your survey header
- Add html and css to your question to display the slider
- Add JS to your question to configure the slider and display and capture the slider value
Thanks Sir TomG !
The example that you made above, is it a Text / Graphic or a Slider question that you have override?
Currently I am testing it using a Text / Graphic, but if you are using a Slider or Graphic Slider, can you show some code snippet on how to override it?
Many thanks!
Thanks for all info so far. Still struggling here!
Can anyone help ...
1. Add the NoUiSlider style sheet and JS to your survey header
Re NoUiSlider style sheet - So here I just add following code to the Look and feel/header window :
2) I have listed the question I'm editing as Constant Sum, 1 Choice, Vertical.
3) Within the question I'm editing, under Rich Content Editor | Source, I have:
| The best health you can imagine |
The worst health you can imagine |
4) Under Add JavaScript for the question, I have:
Qualtrics.SurveyEngine.addOnload(function() {
var vSlider = document.getElementById('uiSlider');
noUiSlider.create(vSlider, {
start: 50,
step: 1,
direction: 'rtl',
orientation: 'vertical',
range: {
min: 0,
max: 100
},
format: wNumb({
decimals: 0
}),
// Show a scale with the slider
pips: {
mode: 'positions',
values: [0,10,20,30,40,50,60,70, 80,90,100],
stepped: true,
}
});
var inputNumber = document.getElementById('QR~'+this.questionId+'~1');
vSlider.noUiSlider.on('update', function (values, handle) {
inputNumber.value = values[handle];
});
inputNumber.addEventListener('change', function () {
vSlider.noUiSlider.set([null, this.value]);
});
inputNumber.setAttribute('readonly',true)
});
This is driving me nuts!
https://www.qualtrics.com/community/discussion/comment/34390#Comment_34390Hi ErinNP and others
Looking at your code (and mine above) I have noticed that the slider is named differently in HTML and Javascript. Please use in both places either "uiSliderX" as here:
var vSlider = document.getElementById('uiSlider');
This should hopefully solve your problem. Sorry for the typo!
bgk thanks for the reply! I tried changing the name of the slider in both locations and I'm still not seeing the slider appear. I'm wondering if the issue could be the link to the noUIslider code in the header? Any thoughts would be greatly appreciated!
bgk thanks for the reply! I tried changing the name of the slider in both locations and I'm still not seeing slider appear. I'm wondering if the issue could be the link to the noUIslider code in the header? Any thoughts would be greatly appreciated!
Great thread! I tried the code myself and it did not work. I found that removing the
formatfield fixes the issue. Just posting in case this info is useful.
format: wNumb({
decimals: 0
})
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.