Recording responses with custom JS - noUiSlider | XM Community
Skip to main content
Solved

Recording responses with custom JS - noUiSlider

  • January 23, 2022
  • 2 replies
  • 190 views

Forum|alt.badge.img

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 :)

Best answer by TomG

Change addOnUnload to addOnPageSubmit and move the entire function inside the addOnload function so slider2 is defined.

View original

2 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • Answer
  • January 23, 2022

Change addOnUnload to addOnPageSubmit and move the entire function inside the addOnload function so slider2 is defined.


Forum|alt.badge.img
  • Author
  • 2 replies
  • January 24, 2022

Thanks, this did the job
Qualtrics.SurveyEngine.addOnload(function()
{


var slider2 = document.getElementById('slider2');


noUiSlider.create(slider2, {
    start: [0, 50,100],
    connect: true,
    pips: {
        mode: 'positions',
       // values: [10,36,72,90],
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
        }
      });






//~~~~~~~~~~~~~~~~~~ record response ~~~~~

var values ;

Qualtrics.SurveyEngine.addOnPageSubmit(function(){

    values = slider2.noUiSlider.get();
Qualtrics.SurveyEngine.setEmbeddedData('var', values.join("-"));


        });

});


Leave a Reply