Survey doesn't continue after JavaScript | XM Community
Skip to main content

Hello everyone,
I have a student working on her thesis who is collecting data using an Implicit Association Test (IAT) she designed and built using the materials provided by Project Implicit. This is a JavaScript task that presents people with stimuli and measures reaction times. The IAT itself runs fine when we preview the survey, but moving on to the rest of the survey isn't working. The last screen of the JavaScript says "Press spacebar to proceed" and when I do so the script task seems to go away but it does not proceed to the next question and the "next" button typically in the lower right corner is gone. I don't know JavaScript coding so I don't know if it's something wrong with the script or if I have something set up incorrectly in Qualtrics.
The JavaScript used for the Qualtrics question is:
Qualtrics.SurveyEngine.addOnload(function () {
  // hide question and next button
  var container = this.getQuestionContainer();
  container.querySelector('.Inner').style.display = 'none';
  this.hideNextButton();

  // load MinnoJS from the CDN (you probably don't need to change this)
  var scriptTag = document.createElement('script');
    scriptTag.src = 'https://cdn.jsdelivr.net/gh/minnojs/minno-quest@0.3/dist/pi-minno.js';
  scriptTag.onload = onLoad;
  scriptTag.onreadystatechange = onLoad;
  container.appendChild(scriptTag);

  // create the root element for Minno
  var canvas = document.createElement('div');
  container.appendChild(canvas);

  // function to proceed to next question
  var proceed = this.clickNextButton.bind(this);

  // This function gets activated only after MinnoJS is loaded
  function onLoad() {
    // Run your study (just set the correct URL)
        minnoJS(canvas, 'https://cdn.jsdelivr.net/gh/mjleaumont/IAT/script/define.js');

    // MinnoJS doesn't know about Qualtrics, we pass a function to inject the results into the question
    // For some reason `piGlobal` isn't available so we attach it to `minnoJS`
    minnoJS.logger = function (value) {
      var el = container.querySelector('textarea');
      el.value = value;
    }

    // At the end of the study let MinnoJS proceed to the next question
    // We need to wait a few miliseconds for Qualtrics to register the value that we entered
    minnoJS.onEnd = function () { setTimeout(proceed, 100); }
  }
});

Here's a screenshot of how the question is set up (I also have other questions in a different block after this just in case that matters):
image.png
Can anyone tell what I'm doing wrong?
TIA,
Ian

Can you post a qsf of the survey? When I did a similar IAT, I had the IAT question (text entry with multiple lines) in a block of its own. Your code looks good otherwise.


Hi TSAcc,
Here is the qsf file. I don't have everything in the survey yet as we wanted to get this part up and running first. I did try moving the IAT to it's own block and got the same error. Thank you!
Mental_Health_Awareness_Among_Genetic_Counselors.qsf


You're code isn't configured properly, something about a missing URL. That's why the study isn't ending and the next button is not being clicked. I don't have experience in working with project implicit's IAT, however you can look at PyshJS (https://www.jspsych.org/plugins/jspsych-iat-html/) which can be easily integrated into Qualtrics.


Thank you @ahmedA, I will have my student look at this!


ianmacfarlane The code worked well with a different study URL. Recreate the https://cdn.jsdelivr.net/gh/mjleaumont/IAT/script/define.js file, the rest of your code works. Another way to do IATs with Qualtrics is to use the IATgen interface. You can customize your study and it will generate a qsf for Qualtrics.


TSAcc Thank you, I will keep that in mind for future work!


Hi everyone,
I am experiencing the exact same problem. I used the same setup and everything is working fine, except it does not navigate to the next question in the study.
If I check it says it misses a logger url, but I am not sure what that even means.
fault end qualtrics 2.png
I can't work with iatgen or the https://www.jspsych.org/7.0/plugins/iat-html/index.html, beacuse I need to have the instructions in a different language, meaning I need to be able to have acces to the full code.

I really hope someone can help me with this problem.

Thanks a lot

Sophie

Btw: this is the javascript in qualtrics

Qualtrics.SurveyEngine.addOnload(function () {
  // hide question and next button
  var container = this.getQuestionContainer();
  container.querySelector('.Inner').style.display = 'none';
  this.hideNextButton();

  // load MinnoJS from the CDN (you probably don't need to change this)
  var scriptTag = document.createElement('script');
    scriptTag.src = 'https://cdn.jsdelivr.net/gh/minnojs/minno-quest@0.3/dist/pi-minno.js';
  scriptTag.onload = onLoad;
  scriptTag.onreadystatechange = onLoad;
  container.appendChild(scriptTag);

  // create the root element for Minno
  var canvas = document.createElement('div');
  container.appendChild(canvas);

  // function to proceed to next question
  var proceed = this.clickNextButton.bind(this);

  // This function gets activated only after MinnoJS is loaded
  function onLoad() {
    // Run your study (just set the correct URL)
        minnoJS(canvas, 'https://sophievandijck.github.io/IATtestversie/zonderattrib.js');

    // MinnoJS doesn't know about Qualtrics, we pass a function to inject the results into the question
    // For some reason `piGlobal` isn't available so we attach it to `minnoJS`
    minnoJS.logger = function (value) {
      var el = container.querySelector('textarea');
      el.value = value;
    }

    // At the end of the study let MinnoJS proceed to the next question
    // We need to wait a few miliseconds for Qualtrics to register the value that we entered
    minnoJS.onEnd = function () { setTimeout(proceed, 100); }
  }
});


Leave a Reply