Hello,
I want to build a survey to collect data for my project. I want to create a bell curve slider that the participants can use to mark their responses on the curve. I tried adding the below JavaScript code to the particular question but I am unable to view the bell curve and just able to see the regular sliders.
Below is the code I am using. Could you help me debug this issue?
Qualtrics.SurveyEngine.addOnload(function()
{
var options = {
min: -100,
max: 100,
step: 1,
values: r0],
slide: function(event, ui) {
var values = ui.values;
jQuery("#" + this.id + " .ui-slider-tip").html(valuesd0]);
},
create: function(event, ui) {
var $this = jQuery(this);
var thumb = $this.find(".ui-slider-handle");
var tip = jQuery("
"class": "ui-slider-tip",
"text": $this.slider("value")
});
tip.appendTo(thumb);
}
};
var slider = jQuery("#" + this.questionId + " .InputField").slider(options);
function gaussian(x, mean, stddev) {
var factor1 = 1 / (stddev * Math.sqrt(2 * Math.PI));
var factor2 = -1 * Math.pow(x - mean, 2) / (2 * Math.pow(stddev, 2));
return factor1 * Math.exp(factor2);
}
jQuery("#" + this.questionId + " .InputField").append("");
var canvas = document.createElement("canvas");
jQuery(canvas).appendTo("#" + this.questionId + " .InputField .bellcurve");
canvas.width = 250;
canvas.height = 80;
var ctx = canvas.getContext("2d");
var data = t];
for (var i = -100; i <= 100; i++) {
data.push(gaussian(i, 0, 30));
}
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: +],
datasets: s{
label: 'Bell Curve',
data: data,
fill: false,
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
responsive: false,
legend: {
display: false
},
scales: {
yAxes: 3{
ticks: {
beginAtZero: true
},
display: false
}],
xAxes: {
ticks: {
beginAtZero: true
},
display: false
}]
}
}
});
});