Run JavaScript Action

Overview

The Run JavaScript action allows you to program specific events and to read/set Labvanced variables, but also control objects, in your study by inputting custom JavaScript that will run as an action when triggered to occur.

The Run JavaScript Action in the Labvanced action menu.

When the above Run JavaScript action is selected, you will see an option for Execution Environment as well the code editor where the JavaScript code should be written (wherein some helpful instructions are located):

The JavaScript code editor in Labvanced.

Execution Environment Options

Here you can specify the nature of the JavaScript you are running, the options include:

  • Acorn Interpreter: Ideal for scenarios where only variable reading/writing is occurring.
  • Native JavaScript: Enables the execution of custom JavaScript for direct manipulation of the Document Object Model (DOM) within experiments, allowing for the editing of on-screen elements which is useful for integrating interactive JavaScript-based games and creating more dynamic content via JavaScript.

Utilizing Native JavaScript

When utilizing the Native JavaScript to control elements within the Document Object Model (DOM), one important factor for consideration is knowing what HTML node to attach, as well as to consider some style guides.

One easy ID to consider using is the background identifier and it makes it possible so that other Labvanced objects can still be on the frame as well, such as in the example below:

const container = document.getElementById('background');
container.appendChild(gameContainer);

In the examples outlined here, gameContainer is then the main container / div of the custom content and should take on an absolute position for which you need to then set the width and height:

const gameContainer = document.createElement('div');
gameContainer.style.position = 'absolute';
gameContainer.style.width = window.innerWidth +"px";
gameContainer.style.height = window.innerHeight +"px";

The results of such an approach can be seen here in this demo wherein we used the Native JavaScript option to implement the Pong Game in Labvanced: https://www.labvanced.com/page/library/75148

For any questions about general usability of the Run JavaScript action, please feel free to contact us via email or chat.