Qualtrics中的Javascript:引用选项的显示顺序

dm7nw8vv  于 2023-04-19  发布在  Java
关注(0)|答案(2)|浏览(113)

对于一个问题,我有4个选择(alpha、beta、gamma、delta),通过选择随机化以随机顺序显示。我希望在嵌入式数据字段中捕获这些选择的显示顺序,以便稍后在调查中使用(例如,研究显示选择的顺序如何影响回忆)。例如,如果选择按以下顺序显示
贝塔伽玛阿尔法德尔塔
我希望嵌入数据字段pos_beta = 1,pos_gamma = 2,pos_alpha=3和pos_delta=4。
如果它们被展示出来
γ-α-β-δ
我想要嵌入的数据字段pos_gamma = 1,pos_alpha = 2等
实现这一点最简单的方法?(另外,如果选择的关键字周围有随机文本-“blah blah gamma blah blah”等,答案是否足够通用以捕获?)
我想我必须使用以下版本循环每个选项:

jQuery("#"+this.questionId+" [type=radio]").each(function(i) {
}

在循环中,依次检查选项文本中是否包含“alpha”、“beta”等,然后将i赋给相应的嵌入数据字段。这种方法正确吗?如果正确,如何检查选项文本中是否包含特定的子字符串?
先谢谢你了!

vngu2lb8

vngu2lb81#

你可以这样做:

Qualtrics.SurveyEngine.addOnload(function() {
  var qobj = this;
  jQuery(this.questionContainer).find("[choiceid]").each(function(i) {
    var cid = jQuery(this).attr("choiceid");
    Qualtrics.SurveyEngine.setEmbeddedData("pos_"+qobj.getChoiceVariableName(cid),i+1);
  });
});

您可以通过使用“Recode Values”设置变量名来将变量名与显示的选项标签分离。

pdsfdshx

pdsfdshx2#

如果你想给<option>元素添加数据属性,基于它们在源数组中的原始位置,你可以使用indexOf来查找原始索引。

const clearOptions = (selectEl) => {
  while (selectEl.options.length > 0) selectEl.remove(0);
};

const shuffleArr = (arr) => {
  const res = [], copy = [...arr];
  while (copy.length > 0) {
    const index = Math.floor(Math.random() * copy.length);
    res.push(copy[index]);
    copy.splice(index, 1);
  }
  return res;
};

const positions = ['alpha', 'beta', 'gamma', 'delta'];

const populateSelect = (selectEl, choices) => {
  clearOptions(selectEl);
  const initialOption = new Option('-- Select an answer --', '');
  initialOption.disabled = true;
  initialOption.selected = true;
  selectEl.add(initialOption);
  shuffleArr(choices).forEach((choice, index) => {
    let
      answerIndex = choices.indexOf(choice),
      option = new Option(`${String.fromCharCode(index + 65)}) ${choice}`, choice);
    option.setAttribute(`data-pos-${positions[answerIndex]}`, index + 1);
    selectEl.add(option);
  });
};

const answerSelect = document.querySelector('select[name="answer"]');

const data = {
  choices: ['3.1415...', '2.7182...', '1.6180...', '6.2831...'],
  answer: '3.1415...'
};

const setup = () => {
  populateSelect(answerSelect, data.choices);
};

const submitAnswer = (e, form) => {
  e.preventDefault();
  const answer = form.elements.answer.value;
  console.log(answer === data.answer ? 'Correct!' : 'Incorrect');
  setup();
};

setup();
.as-console-wrapper { max-height: 3rem !important; }
<h1>Question 1</h1>
<p>What is the closest value to the constant PI?</p>
<form onsubmit="submitAnswer(event, this)" autocomplete="off">
  <select id="answer" name="answer" class="random" required></select>
  <button type="submit">Submit</button>
</form>

上面的代码将构造类似于下面的内容:

<form onsubmit="submitAnswer(event, this)" autocomplete="off">
  <select id="answer" name="answer" class="random" required="">
    <option value="" disabled="">-- Select an answer --</option>
    <option value="1.6180..." data-pos-gamma="1">A) 1.6180...</option>
    <option value="2.7182..." data-pos-beta="2">B) 2.7182...</option>
    <option value="3.1415..." data-pos-alpha="3">C) 3.1415...</option>
    <option value="6.2831..." data-pos-delta="4">D) 6.2831...</option>
  </select>
  <button type="submit">Submit</button>
</form>

相关问题