从“选择组等级”选择的选项中将新的等级顺序转发到“滑块”

时间:2018-08-07 23:59:09

标签: javascript slider survey qualtrics

我正在处理“选择”,“分组”和“排名”问题类型,在该类型中,我想以新的排名顺序继承所选的拖放选项,作为对以下滑块问题的答案选项。

我设法使用Qualtric的“前进”功能仅显示选定的选项,但保留了旧顺序,而不保留新的排名顺序。

在此 working example,如果将选项“ b”,“ a”和“ d”拖到PGR组框中,则滑块选项将仅显示“ a”,“ b”和“ d”,但在该选项中订购。如何获得滑块选项以按新顺序显示所选选项?

我正在尝试以下方法,但陷入了步骤2。

  1. 多重答案复选框->使用Qualtrics的功能将选定的选项结转至
  2. 等级排序->结转至
  3. 滑条,在这里我使用JavaScript将滑条标签替换为一组已排序的选定选项(根据2中分配的新排名顺序)。

第3步适用于我在JavaScript代码中声明的数组。

   var choicesObject = this.getQuestionInfo().Choices;
   //choices is the array of choiceids
   var choices = Object.keys(choicesObject);
   var Qno = choices.length;
   var test = ['this', 'is', 'rad'];

   for (var x = 0; x < Qno; x++) {
     var id = choices[x];
     //var y = id + 1;
     var qid = "QID12-" + id + "-label";
     document.getElementById(qid).innerHTML = test[x];
   }
// This works

但是,我还没有弄清楚如何在环境中将新的排名顺序和描述保存为数组,甚至保存为嵌入式数据。我尝试将其保存在2D数组中,并按等级排序,然后按照here的说明将其保存到嵌入式数据字段中。

这是我在排名问题之后空白页中的代码:

   // hide next button
      $('NextButton') && $('NextButton').hide();

      // store rank in first column, description in second column of array "choice"

      // le was saved as embedded data from Rank question to inform the current code how many choices to loop through

      var le = '${e://Field/gp1length}';
      var len = parseInt(le);

      var choiceArray = [];

      // create blank 2D array containing descriptions and rank orders
      for (var x = 0; x < len; x++) {
        choiceArray[x] = [];
        for (var y = 0; y < 2; y++) {
          choiceArray[x][y] = 0;
        }
      }

      // this does not work, the array contains NaNs
      for (var x = 0; x < len; x++) {
        var y = x + 1;
        var rank = "${q://QID11/ChoiceNumericEntryValue/x" + y + "}";
        var desc = "${q://QID11/ChoiceDescription/x" + y + "}";
        choiceArray[x][0] = parseInt(rank);
        choiceArray[x][1] = desc;
      }

      // attempt to sort array by rank order column
      choiceArray = choiceArray.sort(function(a, b) {
        return a[0] - b[0];
      });

      for (var x = 0; x < len; x++) {
        var y = x + 1;
        var name = "gp1r" + y;
        Qualtrics.SurveyEngine.setEmbeddedData(name, choiceArray[x][1]);
      }

      // advance to next screen
      this.clickNextButton();

但是通过将choiceValueschoice-ids串联来检索+在Qualtrics中不起作用。更重要的是,由于我使用的是结转功能,choice-ids是第一个多选问题的剩余内容,因此for循环策略不起作用,因为它们没有按顺序排列(即不是1,2,2, 3,4 ...)。

非常感谢您的帮助和建议!

2 个答案:

答案 0 :(得分:1)

您必须将排名传递到滑块问题的JavaScript中,并根据排名重新排列滑块的滑块容器。

根据已更新的问题进行更新:

您不需要中间页或嵌入式变量。没有它们将使您的响应数据保持干净。您可以将等级放入数组中,删除NaN,排序并重新排列滑块。 jQuery使这变得更容易。您的滑杆问题中只有一个脚本:

Qualtrics.SurveyEngine.addOnload(function() {
    var ranks = [
        {"choice":"xx1", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x1}")},
        {"choice":"xx2", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x2}")},
        {"choice":"xx3", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x3}")},
        {"choice":"xx4", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x4}")},
        {"choice":"xx5", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x5}")},
        {"choice":"xx6", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x6}")},
        {"choice":"xx7", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x7}")},
        {"choice":"xx8", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x8}")},
        {"choice":"xx9", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x9}")},
        {"choice":"xx10", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x10}")},
        {"choice":"xx11", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x11}")},
        {"choice":"xx12", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x12}")},
        {"choice":"xx13", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x13}")},
        {"choice":"xx14", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x14}")},
        {"choice":"xx15", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x15}")},
        {"choice":"xx16", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x16}")},
        {"choice":"xx17", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x17}")},
        {"choice":"xx18", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x18}")},
        {"choice":"xx19", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x19}")},
        {"choice":"xx20", "rank": parseInt("${q://QID68/ChoiceNumericEntryValue/x20}")}
    ];
    var tbody = jQuery("#"+this.questionId+" div.ChoiceStructure > table.sliderGrid > tbody");
    var cleanRanks = [];
    jQuery.each(ranks, function(index) { if(!isNaN(this["rank"])) cleanRanks.push(this); });    //remove NaNs
    cleanRanks.sort(function(a,b) { return a.rank - b.rank; }); //sort by rank
    jQuery.each(cleanRanks, function() {
        tbody.append(tbody.find("tr[choiceid="+this["choice"]+"]"));    //order sliders
    });
});

工作示例survey

更新2:

我已经更新了上面的代码,以更改从数组中删除NaN的操作。此外,将选择数量扩展到20。

答案 1 :(得分:0)

我设法解决了这一问题,没有中间页,也没有T.Gibbons建议的嵌入数据。这种方法与他的建议非常相似,但是没有jQuery和更丑陋的代码,因为我对JavaScript非常陌生。我只需要将以下脚本添加到滑块问题的JavaScript框中:

Qualtrics.SurveyEngine.addOnload(function() {
   var choicesObject = this.getQuestionInfo().Choices;
   //choices is the array of choiceids
   var choices = Object.keys(choicesObject);

   rankArray = [
     "${q://QID11/ChoiceNumericEntryValue/x1}",
     "${q://QID11/ChoiceNumericEntryValue/x2}",
     "${q://QID11/ChoiceNumericEntryValue/x3}",
     "${q://QID11/ChoiceNumericEntryValue/x4}",
     "${q://QID11/ChoiceNumericEntryValue/x5}"
   ];

var rankArray = rankArray.filter(function(n) {
 return n != ''
   });

descArray = [
     "${q://QID11/ChoiceDescription/x1}",
     "${q://QID11/ChoiceDescription/x2}",
     "${q://QID11/ChoiceDescription/x3}",
     "${q://QID11/ChoiceDescription/x4}",
     "${q://QID11/ChoiceDescription/x5}"
  ];

   var descArray = descArray.filter(function(n) {
     return n != ''
   });

   var all = [];

   for (var i = 0; i < descArray.length; i++) {
     all.push({
       'rankArray': rankArray[i],
       'descArray': descArray[i]
     });
   }

   all.sort(function(a, b) {
     return a.rankArray - b.rankArray;
   });

   rankArray = [];
   descArray = [];

   for (var i = 0; i < all.length; i++) {
     rankArray.push(all[i].rankArray);
     descArray.push(all[i].descArray);
   }

   for (var x = 0; x < descArray.length; x++) {
     var id = choices[x];
     var qid = "QID12-" + id + "-label";
     document.getElementById(qid).innerHTML = descArray[x];
   }
});