advance external-html after a certain delay without any other triggers

[Quinlanptq]

I would like to present an external html page for a certain amount of time without having to wait for any other kind of input from the participant - is this possible and if so how?

Thanks in anticipation,
Philip.

[becky-gilbert]

Hi @Quinlanptq, I think there probably are a couple ways to do this, and I'm not sure which is best.

You could use the trial's on_start or on_load function to start a timer using setTimeout. The first setTimeout argument would be a function that ends the trial by calling jsPsych's finishTrial function, and the second argument would be your delay in ms.

on_load: function() {
  setTimeout(function() {
    jsPsych.finishTrial(); // call the finish trial function after 5 seconds
  }, 5000);
}

Keep in mind that, if it's possible for the trial to end any other way (e.g. participant's button or key press), then you'll want to make sure that you assign setTimeout to a variable and then clear the timeout at the end of the trial using clearTimeout.

One potential problem with this method is that the finishTrial function takes a data argument, which is an object containing the data to be stored for the trial. So if you use the function this way then I think you'll lose the data that's automatically collected for each trial. So instead of using the finishTrial function, you could put a hidden button on the external page, pass that button's ID as the value of the cont_btn parameter, use the setTimeout function to simulate a button click, which would end the trial. If your external page had a hidden button with the ID "hidden-button", then your jsPsych trial might look like this:

var trial = {
  type:'external-html',
  url: "external_page.html",
  cont_btn: "hidden-button",
  on_load: function() {
    setTimeout(function() {
      document.getElementById('hidden-button').click();
    }, 5000);
  }
};

Let us know if one of these solutions work. And I'd be interested to know if anyone else has other suggestions.

[Quinlanptq]

Thanks Becky - much appreciated.

I got into all manner of problems with this but having posted the query managed to hit on a similar solution last night.

My problem is that I want to be able to provide some textual description on the right of the page and a progress bar on the left. The progress bar drops down the page while they read the text and when it reaches the bottom the page is cleared for the next event.

I configured an external html page to do this and this is working now (I am still some way in fully understanding position of divs!). That page has js code on it that triggers the progress bar and also includes a delay for the click ...

var myB = document.getElementById("myBut");
setTimeout(function () {
            $(myB).click();
        }, localStorage.getItem("waiter")); 

myB is a hidden button (like you suggested). Using the localStorage command I can define how long the page is presented for on a trial by trial basis using the waiter variable.

My definition of the external-html var is ...

var first_page = {
type:'external-html',
url: big1_url,
execute_script: true,
cont_btn: 'myBut',
check_fn: check_item,
}

I am using the execute_script command to run the code on the external html page.

It seems to be working fine but as I say my knowledge of css and div positioning is still a little flakey.
With thanks
Philip.

[becky-gilbert]

Glad to hear you got it working!

My knowledge of CSS positioning is also pretty flakey. I hope to properly understand it at some point, but for now I often have to figure it out through lots of Googling and trial and error. Feel free to post more questions/code if there are any specific positioning issues we might be able to help with.

BTW, you could consider turning your external page into a jsPsych plugin. It wouldn't be too hard since you've already done the difficult work of setting up the page - it would be a matter of moving your existing code into the jsPsych plugin structure, creating some parameters, and replacing some values in your code with those parameter values. One advantage of this is that you wouldn't need to deal with the interaction between jsPsych and non-jsPsych elements/events.

[Quinlanptq]

Hi Becky
I took your advice and have nearly finished the plugin - is there somewhere I could post this as others might find it useful?
Best
Philip.

[becky-gilbert]

Great! Yes please do share it! Maybe you could post it as a new topic on the discussion forum, with a little description of what it does and link to the code (if on Github, otherwise maybe attach a file or copy/paste the code into the comment).

If it seems generally useful to others then another option is to submit a pull request to add the plugin to jsPsych. For this we'd appreciate not just the plugin code but also an HTML file with a minimal example, and ideally a markdown-formatted documentation file that lists the parameters and data collected by the plugin.

[Tongzhao9417]

This method is so genius! I used it in my experiment! I have a trial that involves card selection, where participants need to choose one card from several. In fact, besides the external HTML plugin, I didn't know which plugin could accomplish this task well (other plugins all have their own buttons or something that I don't need). But the problem with the external HTML plugin is that I couldn't make participants finish this trial by clicking on the cards. The hidden button method is simply fantastic! Hats off to Becky!