Inducing Javascript in my qualtrics project | XM Community
Skip to main content

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

Be the first to reply!

Leave a Reply