I would really appreciate some help trouble-shooting a NoUISlider issue!
Below I have my code pasted. I know most of the UI-oriented functions work properly (visually, the sliders look fine & function okay), but I’m having trouble doing saving the slider data to embeddeddata outcomes.
If anyone can see where I’m going wrong, I’d appreciate it.
Note: the question in which these sliders are embedded uses carry-forward choices. IThere are only ever 6 answers (out of 7) visible, and I don’t include a slider for whatever answer selected on the previous Q (QID13). Embedded Data pos_1 to pos_7 are adjusted in a previous question to be =! NA based on one’s response (only 1 is ever = NA)
Code:
Qualtrics.SurveyEngine.addOnload(function() {
const quest = this;
const qc = quest.getQuestionContainer();
var ANSWER = "${q://QID13/SelectedChoicesRecode}";
var dis1 = "${e://Field/pos_1}";
var dis2 = "${e://Field/pos_2}";
var dis3 = "${e://Field/pos_3}";
var dis4 = "${e://Field/pos_4}";
var dis5 = "${e://Field/pos_5}";
var dis6 = "${e://Field/pos_6}";
var dis7 = "${e://Field/pos_7}";
//Hiding None option here
jQuery("#"+this.questionId+"-x3-label").each(function() {
var label = jQuery(this); // Correctly reference the label element
if (label.text().trim() === "None") { // Ensure there’s no extra whitespace
label.closest("span").hide(); // Hide the closest <span> element
}});
//Initializing 7 sliders here
if (ANSWER != "1" && dis1 != "NA") {
// Initialize Slider 1
var slider1 = document.getElementById('slider1');
noUiSlider.create(slider1, {
start: 0,
step: 20,
orientation: 'horizontal',
snap: true,
connect: 'lower',
range: {
'min': 0,
'20%': 20,
'40%': 40,
'60%': 60,
'80%': 80,
'max': 100
},
pips: {
mode: 'positions',
values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
stepped: true
}
});};
if (ANSWER != "2" && dis2 != "NA") {
// Initialize Slider 2
var slider2 = document.getElementById('slider2');
noUiSlider.create(slider2, {
start: 0,
step: 20,
orientation: 'horizontal',
snap: true,
connect: 'lower',
range: {
'min': 0,
'20%': 20,
'40%': 40,
'60%': 60,
'80%': 80,
'max': 100
},
pips: {
mode: 'positions',
values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
stepped: true
}
});};
if (ANSWER != "3" && dis3 != "NA") {
// Initialize Slider 3
var slider3 = document.getElementById('slider3');
noUiSlider.create(slider3, {
start: 0,
step: 20,
orientation: 'horizontal',
snap: true,
connect: 'lower',
range: {
'min': 0,
'20%': 20,
'40%': 40,
'60%': 60,
'80%': 80,
'max': 100
},
pips: {
mode: 'positions',
values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
stepped: true
}
});};
if (ANSWER != "4" && dis4 != "NA") {
// Initialize Slider 4
var slider4 = document.getElementById('slider4');
noUiSlider.create(slider4, {
start: 0,
step: 20,
orientation: 'horizontal',
snap: true,
connect: 'lower',
range: {
'min': 0,
'20%': 20,
'40%': 40,
'60%': 60,
'80%': 80,
'max': 100
},
pips: {
mode: 'positions',
values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
stepped: true
}
});};
if (ANSWER != "5" && dis5 != "NA") {
// Initialize Slider 5
var slider5 = document.getElementById('slider5');
noUiSlider.create(slider5, {
start: 0,
step: 20,
orientation: 'horizontal',
snap: true,
connect: 'lower',
range: {
'min': 0,
'20%': 20,
'40%': 40,
'60%': 60,
'80%': 80,
'max': 100
},
pips: {
mode: 'positions',
values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
stepped: true
}
});};
if (ANSWER != "6" && dis6 != "NA") {
// Initialize Slider 6
var slider6 = document.getElementById('slider6');
noUiSlider.create(slider6, {
start: 0,
step: 20,
orientation: 'horizontal',
snap: true,
connect: 'lower',
range: {
'min': 0,
'20%': 20,
'40%': 40,
'60%': 60,
'80%': 80,
'max': 100
},
pips: {
mode: 'positions',
values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
stepped: true
}
});};
if (ANSWER != "7" && dis7 != "NA") {
// Initialize Slider 7
var slider7 = document.getElementById('slider7');
noUiSlider.create(slider7, {
start: 0,
step: 20,
orientation: 'horizontal',
snap: true,
connect: 'lower',
range: {
'min': 0,
'20%': 20,
'40%': 40,
'60%': 60,
'80%': 80,
'max': 100
},
pips: {
mode: 'positions',
values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
stepped: true
}
});};
// below is the code to disable checkboxes after they've been checked
var s1 = jQuery("#"+this.questionId+" input[choiceid=x1]");
var s2 = jQuery("#"+this.questionId+" input[choiceid=x2]");
var s3 = jQuery("#"+this.questionId+" input[choiceid=x4]");
var s4 = jQuery("#"+this.questionId+" input[choiceid=x5]");
var s5 = jQuery("#"+this.questionId+" input[choiceid=x6]");
var s6 = jQuery("#"+this.questionId+" input[choiceid=x7]");
var s7 = jQuery("#"+this.questionId+" input[choiceid=x8]");
s1.click(function(){
s1.prop('checked',true)
s1.prop('disabled',true)
});
s2.click(function(){
s2.prop('checked',true)
s2.prop('disabled',true)
});
s3.click(function(){
s3.prop('checked',true)
s3.prop('disabled',true)
});
s4.click(function(){
s4.prop('checked',true)
s4.prop('disabled',true)
});
s5.click(function(){
s5.prop('checked',true)
s5.prop('disabled',true)
});
s6.click(function(){
s6.prop('checked',true)
s6.prop('disabled',true)
});
s7.click(function(){
s7.prop('checked',true)
s7.prop('disabled',true)
});
if (ANSWER == "1"){s1.prop('checked',true)};
if (ANSWER == "2"){s2.prop('checked',true)};
if (ANSWER == "3"){s3.prop('checked',true)};
if (ANSWER == "4"){s4.prop('checked',true)};
if (ANSWER == "5"){s5.prop('checked',true)};
if (ANSWER == "6"){s6.prop('checked',true)};
if (ANSWER == "7"){s7.prop('checked',true)};
// hides next button until all sliders have been completed.
this.hideNextButton();
const cbs = jQuery("#"+this.questionId+" input[type=checkbox]");
var that = this;
jQuery(cbs.on('change',function(){
const numSelected = cbs.filter(":checked").length;
if(numSelected < 6) { that.hideNextButton(); }
else {
if(numSelected > 5) that.showNextButton();
};
}));
Qualtrics.SurveyEngine.addOnPageSubmit(function() {
var values1
var values2
var values3
var values4
var values5
var values6
var values7
var values1 = slider1.noUiSlider.get();
var values2 = slider2.noUiSlider.get();
var values3 = slider3.noUiSlider.get();
var values4 = slider4.noUiSlider.get();
var values5 = slider5.noUiSlider.get();
var values6 = slider6.noUiSlider.get();
var values7 = slider7.noUiSlider.get();
Qualtrics.SurveyEngine.setEmbeddedData('bombm1', values1);
Qualtrics.SurveyEngine.setEmbeddedData('bombm2', values2);
Qualtrics.SurveyEngine.setEmbeddedData('bombm3', values3);
Qualtrics.SurveyEngine.setEmbeddedData('bombm4', values4);
Qualtrics.SurveyEngine.setEmbeddedData('bombm5', values5);
Qualtrics.SurveyEngine.setEmbeddedData('bombm6', values6);
Qualtrics.SurveyEngine.setEmbeddedData('bombm7', values7);
});
});
