I've been trying to implement a custom range slider using noUiSlider.
The slider itself seems to be working fine, though I can't get it to record the responses.
I tried both updating a Constant sum field, as described here, and recording to an embedded variable.
I used the CSS source described in this comment with the following js:
Qualtrics.SurveyEngine.addOnload(function()
{
// create slider
var slider2 = document.getElementById('slider2');
noUiSlider.create(slider2, {
start: [0, 50,100],
connect: true,
pips: {
mode: 'positions',
values: [5,35,65,95],
labels:[1,2,3,4,5],
density: 4,
format: {
from: Number,
to: function(value) {
return (["Disagree","Slightly Disagree","Slightly Agree","Agree","e"][Math.round((value-12.5)/25)]) ;
},
},
},
range: {
'min': 0,
'max': 100
}
});
// an atempt at saving variables to constant sum field
// I tried this also with a single handled slider, and still failed
var inputNumber = document.getElementById('QR~'+this.questionId+'~1');
slider2.noUiSlider.on('update', function (values, handle) {
inputNumber.value = values[handle];
});
inputNumber.addEventListener('change', function () {
slider2.noUiSlider.set([null, this.value]);
});
inputNumber.setAttribute('readonly',true)
});
Qualtrics.SurveyEngine.addOnReady(function()
{ /*Place your JavaScript here to run when the page is fully displayed*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
// testing that the embedded variable update function works - it does
Qualtrics.SurveyEngine.setEmbeddedData('var', "test");
// trying to record the response to embedded variables
// all variables initialised in the survey flow before the current block
Qualtrics.SurveyEngine.setEmbeddedData('var1', slider2.get());
Qualtrics.SurveyEngine.setEmbeddedData('var2', slider2.get().join("-"));
I am quite lost as to this moment, and would be grateful for any help :)
Solved
Recording responses with custom JS - noUiSlider
Best answer by TomG
Change addOnUnload to addOnPageSubmit and move the entire function inside the addOnload function so slider2 is defined.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.