jsPsych Study with Abort Button

trig · June 2020

Hi all,

I want to add a Cancel button to my jsPsych study. When using the methods described here, it works fine. However, I would like to use the jatos.addAbortButton() function to reduce the code (it also looks nicer and prompts the do you really want to quit question). I have tried numerous ways to include it in the jsPsych study, but none of it seems to work.

Can someone give advice on where/how to use jatos.addAbortButton() in a jsPsych study?

Thanks in advance!

kri · June 2020

Hi,

You can basically put this jatos.addAbortButton() anywhere where code is executed. So right next to where you call jatos.onLoad should do fine.

jatos.addAbortButton();

jatos.onLoad(function() {
  jsPsych.init( {
    // ...
  });
});

Best,

Kristian

trig · June 2020

Strange -- I tried to do exactly that (for starters, I just added this to the go/nogo example from the JATOS example studies), but I don't see any abort button (neither in my local JATOS or if I export it to an online instance of it). Any ideas of what I might be missing?

jatos.addAbortButton();


/* start the experiment */
jatos.onLoad(function () {
     jsPsych.init({
          timeline: timeline,			
	  on_finish: function() {
          var resultJson = jsPsych.data.get().json();
                jatos.submitResultData(resultJson, jatos.startNextComponent);
            }
    });

Thanks,

Tobias

kri · June 2020

Hi Tobias,

You seem to be right. I just tried the jatos.addAbortButton with jsPsych and it was not added. Somehow jsPsych seems to prevent adding of new elements to the DOM. Weird. I have to have a closer look at this.

Best,

Kristian

trig · June 2020

I also tried adding it using the on_load command for separate elements of the jspsych study but this also did not work, for instance:

var welcome = {
        type: "html-keyboard-response",
        on_load: jatos.addAbortButton(),
	stimulus: "Welcome to the experiment. Press any key to begin."
    };
    timeline.push(welcome);

(just wanted to let you know in case this helps)

kri · June 2020

It actually helped :). Just not the on_load but the on_trial_start callback function. But this is not the only thing - I had to change jatos.js a bit this will only be part of the next release 3.5.5. (should come out in a couple days). The problem with jsPsych is that each trial seems to clear the whole body element. That means that the abort button has to be added each trial anew.

But then you can get an abort button in jsPsych with something like this:

jsPsych.init({
            timeline: timeline,
            on_trial_start: jatos.addAbortButton,
            ...

Best,

Kristian

trig · June 2020

Hi Kristian,

somehow missed your response but this looks perfect! Looking forward to the new release (and not having to manually implement an abort button in every timeline element :)

Cheers,

Tobias

kri · June 2020

Hi Tobias,

yes, I miss messages here too although I'm subscribed. Sometimes I just don't get the email. Luckily this happens seldom.

Release will come out in a couple days. We are still testing. There are a couple other jatos.js changes and changes in jatos.js are always delicate.

Best,

Kristian

trig · July 2020

Hi Kristian,

I just downloaded the latest version of JATOS and tried again with the addAbortButton command, but can't get it to work for some reason. I've seen that there has been a commit on Github which seems to implement that change -- is it just not embedded within the downloadable version of Jatos yet? I am just wondering whether I am missing something / doing something wrong.

Best,

Tobias

kri · July 2020

Hi Tobias,

I just tried and it worked with my jsPsych study. Maybe there is something in jsPsych that I don't really understand. I put this block in my code:

  jatos.onLoad(function() {
    jsPsych.init({
      timeline: timeline,
      on_trial_start: jatos.addAbortButton,
      on_finish: function() {
        /* Changed for JATOS: submit result data to JATOS and start next component */
        var resultJson = JSON.stringify(jsPsych.data.getData());
        jatos.submitResultData(resultJson, jatos.startNextComponent);
      }
    });
  });

Best,

Kristian

trig · July 2020

Hi Kristian,

ah, I see. I did not add the on_trial_start command but now it works fine. Thanks a lot!

Tobias

kri · July 2020

Nice!

penguin · March 2021

Hi,

thanks for your contributions to this topic. I am also using jspsych and I would like to implement a combination of the jatos.abortStudy-function and the jatos.startLastComponent function. The idea is, that participants should see a button where they can finish the study but nevertheless they should be able to see the information for how they can claim their reimbursement which is embedded in the last component. How can this be achieved?

Thanks in advance,

Anne

elisa · March 2021

Hi Anne,

Right now there is no proper way to do that with the abortStudy function. What you could do instead is overwrite your result data with an empty string '[]', and jump to the last component. Something like this:

jatos.startLastComponent("[]", "participant aborted the study");

penguin · March 2021

Hi Elisa,

thanks for your answer. I have difficulties implementing the code you suggested and hope that you can help.

I can either implement the AbortButton as suggested above

timeline: timeline,
      on_trial_start: jatos.addAbortButton,
      on_finish: function() {

Then I see a cancel button in the lower right corner and when clicking on it the study finishes. When I put your line of code instead the component stops immediately. However, I would like to have something like a button to click on so that participants can decide whether they want to leave the study early. Where would I have to put your code so that I can let participants choose whether they want to continue or whether they want to leave?

kri · March 2021

Hi Anne!

This is more of a jsPsych/JavaScript problem and not a JATOS one. But anyway, you could just take jatos.js' code for addAbortButton and change it a bit so it does a go-to-last-component:

var myAbortButton = function (config) {
   var buttonText = (config && typeof config.text == "string") ?
         config.text : "Cancel";
   var confirm = (config && typeof config.confirm == "boolean") ?
         config.confirm : true;
   var confirmText = (config && typeof config.confirmText == "string") ?
         config.confirmText : "Do you really want to cancel this study?";
   var tooltip = (config && typeof config.tooltip == "string") ?
         config.tooltip : "Cancels this study and deletes all already submitted data";
   var msg = (config && typeof config.msg == "string") ?
         config.msg : "Worker decided to abort";
   var style = 'color:black;' +
         'font-family:Sans-Serif;' +
         'font-size:20px;' +
         'letter-spacing:2px;' +
         'position:fixed;' +
         'margin:2em 0 0 2em;' +
         'bottom:1em;' +
         'right:1em;' +
         'opacity:0.6;' +
         'z-index:100;' +
         'cursor:pointer;' +
         'text-shadow:-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;';
   if (config && typeof config.style == "string") style += ";" + config.style;

   var text = document.createTextNode(buttonText);
   var buttonDiv = document.createElement('div');
   buttonDiv.appendChild(text);
   buttonDiv.style.cssText = style;
   buttonDiv.setAttribute("title", tooltip);
   buttonDiv.addEventListener("click", function () {
      if (!confirm || window.confirm(confirmText)) {
         // jatos.abortStudy(msg);
         jatos.startLastComponent();
      }
   });

   document.body.appendChild(buttonDiv);
};

Then you can add this code in jsPsych, e.g.:

  jatos.onLoad(function() {
    jsPsych.init({
      timeline: timeline,
      on_trial_start: myAbortButton,
      on_finish: function() {
        /* Changed for JATOS: submit result data to JATOS and start next component */
        var resultJson = JSON.stringify(jsPsych.data.getData());
        jatos.submitResultData(resultJson, jatos.startNextComponent);
      }
    });
  });

I didn't try this code but I'm pretty confident that it can work this way ;)

Best,

Kristian

penguin · March 2021

Hello Kristian,

thanks for your detailed response. I wanted to implement it but have a very stupid question now: where will I find the jatos.js-file? I assumed it would be in my local jatos installation but did not succeed to find it there and also didn't find information on this in the JATOS documentation.

I was assuming the jatos library would be stored in a similar way as the jspsych files but even searching for jatos.js in all folders on my computer didn't reveal it to me. Therefore, I would be really happy if you could clearify where I can actually make changes to jatos.js

Thanks!

Anne

kri · March 2021

Hi Anne,

you don't add this code to jatos.js - you add it to your normal JavaScript where you do the jsPsych stuff. Just put it somewhere. And don't forget to add the 'on_trial_start: myAbortButton' to your jsPsych.init.

Best,

Kristian

penguin · March 2021

Great, now it is working. Thanks a lot!

Best,

Anne

Howdy, Stranger!

Categories

jsPsych Study with Abort Button

Comments

Howdy, Stranger!

Quick Links

Categories

jsPsych Study with Abort Button

Comments