One unique tool for broadening the experimental possibilities of PsychoPy is adding an iFrame. Consider an iFrame a window that is displayed on top of your main PsychoPy experiment window. This can allow for the presentation of objects that are not PsychoJS objects (for example, the Image and Video components are coded as imageStim and movieStim objects from the PsychoJS library, and are displayed on a PsychoJS window). The unique way PsychoPy displays content means that, if you have JS code that directly references your displayed component as its original filetype, you will need to present that content differently for that code to work.

The example included in this case is used for Event Segmentation. If you would like to get the current time stamp of the video when participants press a button, the only way you can do that in PsychoPy itself is to set a clock to start running at the same time as the video, and then get the current time on that clock whenever the button is pressed. This can become a problem if the video and internal clock are ever not in sync (in an online experiment where there could be lag, for example). A more direct method of getting the current video time is by using the JS code video.currentTime (where video the variable you assign the id tag of the video to). However, this requires the video be presented in HTML. Enter iFrames.

Both the event segmentation and mouse-contingent display methods described on this site include the use of an iFrame. To see an example of iFrames in action, and if you would like a template to base your own iFrame implementation on, check out this “Demo Embed” example on Pavlovia here. To setup an iFrame, you will need to add some code into a couple tabs of your custom code component.

Make sure your Code Type is set to JS!

In “Begin Experiment,” copy and paste:

// Exposes PsychoJS's addData for use in HTML pages
window.addData = function(key, value) {
    psychoJS.experiment.addData(key, value);
}
// Exposes PsychoJS's nextentry
window.nextEntry = function() {
    psychoJS.experiment.nextEntry();
}

// Adds an iframe on top of the PsychoJS canvas. Use src to specify an HTML page
window.startHTML = (src) => {
  $('body').append('<iframe id="iframe" src="' + src +'" style="width: 100%; height: 100%; position:absolute;z-index:1;top:0;left:0;border:0;"></iframe>');    
  window.finishedHTML = false;
};

// Removes the iframe again
window.finishHTML = () => {
  $('#iframe').remove();
  window.finishedHTML = true;
};

In “Begin Routine,” copy and paste:

window.startHTML('yourFolderName/index.html');

Where “yourFolderName” is the name of the folder you put the iFrame index file in.

In “Each Frame,” copy and paste:

continueRoutine =! window.finishedHTML;

This provides the basic functionality to open an iFrame in your routine, send data back to the experiment from the iFrame, and close the iFrame (in a condition you can set later). The rest of what you will need is in the index.html file for the iFrame itself. I will go through two example files in the “Mouse Contingent Display Overlay” and “Video for Event Segmentation” sections of this site.