How can I save the final value of a slider to an embedded data field? | XM Community
Skip to main content
Hi all,



I have the following javascript to display an adjustable (via sliders) chart below. I'm trying to capture the final slider value of the red variable.



However, no matter where I put "Qualtrics.SurveyEngine.setEmbeddedData("R_LR_HR_10_50adjusted", finalposition)" it just saves the original position, or nothing at all in the output csv.



Any help would be very much appreciated!



Best,

Chris



Qualtrics.SurveyEngine.addOnload(function()

{



Chart.defaults.global = {

animation: true,

animationSteps: 60,

animationEasing: "easeOutQuart",

showScale: true,

scaleOverride: false,

scaleSteps: null,

scaleStepWidth: null,

scaleStartValue: null,

scaleLineColor: "rgba(0,0,0,.1)",

scaleLineWidth: 1,

scaleShowLabels: true,

scaleLabel: "<%=value%>",

scaleIntegersOnly: true,

scaleBeginAtZero: false,

scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

scaleFontSize: 12,

scaleFontStyle: "normal",

scaleFontColor: "#666",

responsive: false,

maintainAspectRatio: true,

showTooltips: true,

customTooltips: false,

tooltipEvents: ["mousemove", "touchstart", "touchmove"],

tooltipFillColor: "rgba(0,0,0,0.8)",

tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

tooltipFontSize: 14,

tooltipFontStyle: "normal",

tooltipFontColor: "#fff",

tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

tooltipTitleFontSize: 14,

tooltipTitleFontStyle: "bold",

tooltipTitleFontColor: "#fff",

tooltipYPadding: 6,

tooltipXPadding: 6,

tooltipCaretSize: 8,

tooltipCornerRadius: 6,

tooltipXOffset: 10,

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> %",

multiTooltipTemplate: "<%= value %>",

onAnimationProgress: function() {},

onAnimationComplete: function() {}

}

Chart.defaults.global.responsive = false;

Chart.types.Doughnut.extend({

name: "DoughnutTextInside",

showTooltip: function() {

this.chart.ctx.save();

Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);

this.chart.ctx.restore();

},

draw: function() {

Chart.types.Doughnut.prototype.draw.apply(this, arguments);



var width = this.chart.width,

height = this.chart.height;



var fontSize = (height / 140).toFixed(2);

this.chart.ctx.font = fontSize + "em Verdana";

this.chart.ctx.textBaseline = "middle";



var red = jQuery("#red").slider("value"),

blue = jQuery("#blue").slider("value");

var total = (red + blue)

var text = (red + blue + "%");

var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2);

var textY = height / 2;

if (total == 100) {

this.chart.ctx.fillStyle = '#00ff00',

jQuery("#NextButton").show();

}else{

this.chart.ctx.fillStyle = '#ff0000',

jQuery("#NextButton").hide();

}

this.chart.ctx.fillText(text, textX, textY);

}

});



var data = [{

value: 30,

color: "#729fcf",

highlight: "#5AD3D1",

label: "Global Bonds Funds"

}, {

value: 70,

color: "#F7464A",

highlight: "#FF5A5E",

label: "Global Stocks Funds"

}]



function hexFromRGB(r, g, b) {

var hex = [

r.toString(16),

g.toString(16),

b.toString(16)

];

jQuery.each(hex, function(nr, val) {

if (val.length === 1) {

hex[nr] = "0" + val;

}

});

return hex.join("").toUpperCase();

}



function refreshSwatch() {

var red = jQuery("#red").slider("option", "value"),

blue = jQuery("#blue").slider("option", "value");

if (red < 2) {

jQuery("#red").slider("option", "value", 2);

return false;

}

if (blue < 2) {

jQuery("#blue").slider("option", "value", 2);

return false;

}

myDoughnutChart.segments[0].value = blue;

myDoughnutChart.segments[1].value = red;

myDoughnutChart.update();

}

jQuery(function() {

jQuery("#red").slider({

orientation: "horizontal",

range: "min",

min: 0,

max: 100,

value: 70,

slide: refreshSwatch,

change: refreshSwatch

});

});

jQuery(function() {

jQuery("#blue").slider({

orientation: "horizontal",

range: "min",

min: 0,

max: 100,

value: 30,

slide: refreshSwatch,

change: refreshSwatch

});

});



var ctx = jQuery("#myChart").get(0).getContext("2d");

var myDoughnutChart = new Chart(ctx).DoughnutTextInside(data, {

responsive: false

});

jQuery(document).on('change',function(){

var finalposition=parseInt(jQuery("#red").slider("option", "value"));

});



Qualtrics.SurveyEngine.setEmbeddedData("R_LR_HR_10_50adjusted", finalposition)

});
@cjohnburke,



I think at below function you are creating new variable at each document change evenet and as final using that value out side of this function scope it will return nothing. So if you create finalposition as global variable i.e. define it outside the function like below it should work. Or you can move teh function setEmbeddedData with in on change function



var finalposition;

jQuery(document).on('change',function(){

finalposition=parseInt(jQuery("#red").slider("option", "value"));

});

Qualtrics.SurveyEngine.setEmbeddedData("R_LR_HR_10_50adjusted", finalposition)
Thank you so much, this solution worked.

Leave a Reply