fix duplicate body tags

[jodeleeuw]

jsPsych adds a to the DOM if one doesn't exist and the display_element is not set. But Chrome, and maybe other browsers, automatically adds a when the document finishes loading. This causes duplicate tags. Can we get Chrome to recognize that a tag has been added via the script?

[jodeleeuw]

too much of a hassle with no clear solution. instead, just use a body tag!

[bjoluc]

Stumbled upon this one too. It also happens when jsPsych.init() is called from a script within the head tag, as the body is not set by then. The clear solution for all of these situations would be wrapping the internals of core.init into window.onload = function () { ... }. I validated that this works with a few of my projects, but the change fails 31 test suites which do not mimic browser behavior accordingly.

@jodeleeuw Are you still interested in working on this? I can offer my help in this case.

Edit:
Found the problem with my suggestion: It didn't work when document.readyState was complete already, or if any other script used window.onload.
The proper way to do this is

core.init = function (options) {
  function init() {
    // ...
  }
  if (document.readyState === "complete") {
    init();
  } else {
    window.addEventListener("load", init);
  }
}

This way, the tests pass as well.
@jodeleeuw Would you accept a PR?

[bjoluc]

@jodeleeuw Are you willing to get this fixed? If so, I'm glad to do a PR.

[jodeleeuw]

Yes! Sorry I dropped the ball on this. Getting this into 6.2 would be great.

[becky-gilbert]

@bjoluc thanks very much for the fix, and sorry about the delay getting to this. You mentioned that you have some tests that cover this - do you have any written in Jest that could be added to jspsych/tests? If not then Josh or I can do it 👍

[bjoluc]

@becky-gilbert Thanks, I added two test cases for my change now (init.test.js)!