Solved
How can I save the final value of a slider to an embedded data field?
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)
});
Best answer by YASH1T
@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)
+6@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)
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.