Overlaying images with the jspsych reconstruction plugin

[danieladigiammarino]

I'm trying to create an experiment in which the participant has to manipulate the length of a line on top of a ponzo illusion image but I'm having difficulty overlaying the line images with the ponzo illusion. Currently I can only get all three images presented at once, and when I press the keys to adjust the size, all three images move either up or down the screen. Ideally I'd only have one line image that the participant can adjust while the ponzo illusion and the other line remain constant.

Is there a way to 1. present multiple images using the reconstruction plugin but only make 1 image adjustable and 2. overlay all those images?

This is what this portion of my script looks like so far:

Any help would be greatly appreciated. I've only just started coding a couple months ago.

[jodeleeuw]

Hi @danieladigiammarino,

Which of the lines do you want to adjust? Can you share a screenshot of what this looks like using your current code with the various images identified?

[danieladigiammarino]

Hi @jodeleeuw,

Here is an image of what I'm able to run at the moment:

Ideally I'd like to have both of the vertical lines on top of the ponzo illusion image (one on each front facing surface) and have the right line stay in place while the left is adjusted by the participant for some trials, while the left line stays in place and the right is adjusted for others. The ponzo image should stay fixed in one place throughout all the trials.

Is there any way I can do so using the reconstruction plugin?

Thank you in advance!

[jodeleeuw]

You can do this by creating a set of HTML elements where only the one element is changing in response to the parameter from the reconstruction plugin. The key concepts here are related to CSS positioning, which you'll need to use to get things aligned as you want. Here's a rough example, which hopefully can serve as a starting point:

var sample_function = function(stim_parameter){
	var size = 50 + Math.floor(stim_parameter * 250);
	var html = `
		<div style="position: relative; width: 800px; height: 400px;">
			<img src="img/PonzoBigRightClose.bmp" style="width:800px; height: 400px; position: absolute; z-index: 0">
			<div id="left-line" style="width:10px; height: 100px; background-color: black; position: absolute; left: 200px; top: 200px; transform: translateY(-50%); z-index: 1;"></div>
			<div id="right-line" style="width:10px; height: ${size}px; background-color: black; position: absolute; left: 600px; top: 200px; transform: translateY(-50%); z-index: 1;"></div>
		</div>
	`
}

I didn't test this out, but I think it'll mostly work!

[danieladigiammarino]

This works perfectly! I see what I would have to do now going forward. Thank you so much for taking the time to help, I appreciate it immensely!