How can I save the final value of a slider to an embedded data field?

Question

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) });

YASH1T · Accepted Answer

@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 functionvar finalposition;jQuery(document).on('change',function(){finalposition=parseInt(jQuery("#red").slider("option", "value"));});Qualtrics.SurveyEngine.setEmbeddedData("R_LR_HR_10_50adjusted", finalposition)

cjohnburke · Answer

Thank you so much, this solution worked.

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded