ExampleCognitionWorkaround

• Take-home examples
• Download examples
• Browser-based examples
• Other examples

Other example reports ( tutorials / technical issues / workarounds )

• Workaround for Cognition.run Development Limitations
• Telephone- and Web-Administered Tests of Hearing Loss
• Testing Music Perception Through Microsoft Teams

Workaround for Cognition.run Development Limitations

Limitations

• The Cognition.run editor does not expose the underlying HTML but only one JavaScript file of a task.
• The editor allows a developer to upload external JavaScript or CSS files, but once uploaded these files become read-only.
• Because the underlying HTML does not recognize JavaScript modules none of the JavaScript files may contain any import declarations.

Why does this matter?

The limitations above make it difficult for a project containing multiple JavaScript modules to be hosted on Cognition.

Workaround

Using the following code copied from this stackoverflow answer (under "Dynamic Script Loading") you can dynamically create a script element that loads a JavaScript module.

    // https://stackoverflow.com/a/950146
    function loadScript(url, callback) {

      // Adding the script tag to the head as suggested before
      var head = document.head;
      var script = document.createElement('script');
      script.type = 'module';
      script.src = url;

      // Then bind the event to the callback function.
      // There are several events for cross browser compatibility.

      script.onreadystatechange = callback;
      script.onload = callback;

      // Fire the loading
      head.appendChild(script);
    }

To use this technique in a Cognition task simply copy the function listed above to the editor and invoke it passing the URL of your source file.

    loadScript(
      "https://cdn.jsdelivr.net/gh/BoysTownorg/simon-game-js@2.4.0/jspsych/main/colored-circles.js", 
      function () {}
    );

If your JavaScript files are on GitHub you can use jsDelivr to load your files (see this answer).

In order to load jsPsych the primary script must mention the plugins used. This can be achieved by simply inserting comments in the editor such as the following.

// html-keyboard-response