Question 50672 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript in Qualtrics: Referencing the displayed order of a choice

For a question, I have 4 choices (alpha, beta, gamma, delta) displayed in random order through choice randomization. I want the displayed order of these choices to be captured in embedded data fields, to be used later in the survey (to study how order in which choices are displayed affects recall, for example). For instance, if the choices were displayed in the order

beta gamma alpha delta

I want embedded data fields pos_beta = 1, pos_gamma = 2, pos_alpha=3 and pos_delta=4.

If they were displayed

gamma alpha beta delta

I want embedded data fields pos_gamma = 1, pos_alpha = 2, etc

Easiest way to implement this? (Also, could the answer be generic enough to capture if the choices had random text around the keywords – "blah blah gamma blah blah" etc?)

I guess I have to loop through each choice using some version of:

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

and within the loop check sequentially if "alpha", "beta" etc is contained in the choice text, and then assign i to the corresponding embedded data field. Is this approach correct, and if yes, how do I check if a specific substring is contained in the choice text?

Thanks in advance!

Tags:

2

Answers


  1. 0

    If you want to add data attributes to <option> elements, based on their original potion in the source array, you can use indexOf to find the original index.

    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>

    The following code above will construct something similar to below:

    <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>
    Login or Signup to reply.
  2. 0

    You can do this:

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

    You can decouple variable names from the displayed choice labels by setting them using ‘Recode Values’.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search