Adapt presented stimulus according to respective monitor size

Janos

Hey there,

I am running a opensesame experiment via osweb. In said experiment, I am presenting a set of visual stimuli via the sketchpad functionality. Now, the size of those stimuli is important for the research results we'd like to infer. I would like that the size of these stimuli is invariant to the monitor size of the participants, i.e the stimuli should look the same regardless of ones monitor.

I know that a common way is to use a credit card to estimate the monitor size and adapt the stimulus size accordingly. However, I am a bit stuck on how to implement this in open sesame. Does anyone have an idea on how to go about this?

To clarify, we are presenting images with the size (64*64) pixels which are scaled with 0.2 and are presented in the center of the screen (

`draw image center=1 file="Image.png" scale=0.2 show_if=True x=-2 y=-2 z_index=0`

)

I appreciate any kind of help here.

Best wishes

Janos

Fab

Hi @Janos,

The credit card method is indeed a good way to ensure that your stimuli will have the same size on the screen of all your participants (another issue is how far ech participant will sit from the screen).

My recommendation would be to implement a loop with a high number of cycles, displaying a stimulus to be matched by the participant's credit card against the screen, asking them ech time to press a "+" or "-" key, using code (in Javascript using the inine_javascript object) to set the value of the scale factor into a variable, or to press the space bar if the size matches the credit card. If you make sure to set the sacle factor to your variable, the size of the stimulus will chang on the next iteration of the loop. You'd need to use the "break if" function of the loop to exit the loop when the participant has pressed the space bar.

Hope this helps,

Fabrice.

Janos

So I got to a point where I do have the code to calculate said metric. It is stored in the `prepare tab`

// Create a semi-transparent overlay to cover the entire screenvar overlay = document.createElement('div');

overlay.style.position = 'fixed';

overlay.style.top = '0';

overlay.style.left = '0';

overlay.style.width = '100%';

overlay.style.height = '100%';

overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';

overlay.style.zIndex = '1000'; // Make sure it's on top of everything

document.body.appendChild(overlay);

// HTML code to create a resizable box and button

var container = document.createElement('div');

container.innerHTML =

'<div id="resize-box" style="width: 100px; height: 60px; border: 2px solid black; resize: both; overflow: auto; background-color: white; padding: 10px; z-index: 1001;">' +

'Resize this box to match your credit card.' +

'</div>' +

'<button id="confirm-size" style="margin-top: 10px; z-index: 1001;">Confirm Size</button>';

container.style.position = 'fixed';

container.style.top = '50%';

container.style.left = '50%';

container.style.transform = 'translate(-50%, -50%)';

container.style.zIndex = '1001'; // Ensure this is above the overlay

overlay.appendChild(container);

// JavaScript to capture the dimensions when the participant confirms

document.getElementById('confirm-size').onclick = function() {

var boxWidth = document.getElementById('resize-box').offsetWidth;

var boxHeight = document.getElementById('resize-box').offsetHeight;

var knownCreditCardWidth = 85.6; // in mm

// Calculate pixel per mm ratio

var pixelToMMRatio = knownCreditCardWidth / boxWidth;

// Store the ratio for later use

window.scalingFactor = pixelToMMRatio;

// Calculated earlier

vars.participantScalingFactor = window.scalingFactor;

console.log("Participant Scaling Factor (pixels per mm):", participantScalingFactor);

console.log("Scaling Factor (pixels per mm):", window.scalingFactor);

// should be the same value if code correct

var originalScale = 0.2; // scaling factor I use

var yourScalingFactor = 0.23452054794520547; /* scaling factor of my credit card bascially

// Participant's calculated scaling factor from the resized credit card

// Calculate the adjusted scaling factor

var adjustedScalingFactor = (originalScale / yourScalingFactor) * participantScalingFactor;

// Store for sketchpad

vars.adjustedScalingFactor = adjustedScalingFactor;

console.log("Original Scale:", originalScale);

console.log("Your Scaling Factor:", yourScalingFactor);

console.log("Adjusted Scaling Factor:", vars.adjustedScalingFactor);

// end statement

document.body.removeChild(overlay);

With a mixture of google, chatgpt and myself. So this actually helps me to get a meaningfull number that could be set for each participant, so the stimulus are scaled to the same size that have been on mine.

BUT:

When I implement this in to the sketchpad syntax

`draw image center=1 file="Image.png" scale=vars.adjustedScalingFactor show_if=True x=-2 y=-2 z_index=0`

the presented output is just a blank space. Any idea why that is?

I tried numerous things at this point (scale=vars.adjustedScalingFactor,scale=[vars.adjustedScalingFactor],scale=adjustedScalingFactor (etc.)

I also tried to set a exp.variable = adjustedScalingFactor

and use scale=exp.variable or scale=variable or scale=adjustedScalingFactor, but this does not work at all.

I appreciate any help.

Best

Janos

Janos

@Fab

Hi Fab,

just saw your reply. Thanks for the advice! However, I would for now really like to just use value I calculate in the java inline script to scale the image in the sketchpad item... I am really out of ideas. Do you know a way ? Im doubting if this is even possible at this moment.

Fab

Hi @Janos,

If you'd like to program the whole procedure in Javascript, it may be possible but a lot more complicated than the method I suggested. I assume you have your reasons to want to do it that way instead of using Open Sesame's existing tools. It's a Javascript issue, though.

Best,

Fabrice.

Janos

@Fab

Hi and thanks for your reply!:)

While I understand your approach, I am afraid that I would have the same issue, right? Because if I would follow your approach, that means I would also calculate a variable within a inline javascript that I would use to update the scale of a sketchpad item, is that correct? Or am I not thinking something through here?

Because my reasoning would be to use a loop with a set of repetitions and represent a sketchpad item each time which is updated through the keyboard response given in a inline javascript. And if this inline javascript stores the scaling factor, then I am lost on how to use said scaling factor from the javascript in a sketchpad item.

To be more specific: I dont understand the part where I have a variable in my inline javascript (for example

vars.scaling = adjustedScalingFactor)

and how to use this specific variable to update the scaling factor in a sketchpad. Again, if this deviates from your approach, I would appreciate on how I could use the open sesame functionality to overcome this.

If I missed something, please let me know. Its not very obvious for me on how to solve this :)

Janos

So for some reason I cannot edit my latest post, but I have one more thing to add that may simplify the whole discussion.

As mentioned before I do have the code to resize the credit card and get the correct scaling factor. One idea of mine was to print this value to the participant screen, let the participant type this value into a form_text_input and then using the response variable from this to scale the image, so scale = [response].

This gives me a blank screen aswell and im wondering if there is a way to change the scale integer of a sketchpad dynamically i.e by using a response variable? Sorry again, im not really finding any information on this online.

Fab

Hi @Janos,

I'm not sure I understand what the issue you're refering to is. You can use code in the inline_javascript to set your scale variable bsaed on the participant's response and simply use that variable to set the scale of your image from the sktechpad's script.

So, for example, if this is the code to draw your image on the sketchpad:

draw image center=1 file="card.png" scale=1 show_if=True x=0 y=0 z_index=0

and let's assume that your scaling variable is called myscalingvariable, you'd just have to change this code to:

draw image center=1 file="card.png" scale={myscalingvariable} show_if=True x=0 y=0 z_index=0

The next time the sketchpad is drawn (that is, in the next trial), the image will be scaled ot the value you set.

The method is actually quite simple and can be implemented in just a few minutes (see my example attached). Hopefully taht should clarify things for you. You'll see that there is no need for complex Javascript coding.

Credit card size method.osexp

Best,

Fabrice.

Janos

@Fab

The method you are using is the same one I tried but since it is not working for me there must be something off.

I am logging the variables to the windows console aswell and thus I see that they are actually being calculated and logged but when I plug them in the same way you are doing I just get a blank screen and nothing else. I dont really understand this.

I use the code I pasted above. Maybe something is off because im using html elements, I dont know. Maybe the approach you suggested is easier and I will try to implement it, I assumed because my javascript can not be linked with the sketchpad this must be true for different cases as well.

I just dont understand why the calculations I do work but cannot be set to the scale.

And I dont understand why I cannot even use the user input variable to set the scale. I thought that this would be the easiest case really.

But thanks for trying to help!

Fab

@Janos,

If you check my example you'll see how it is implemented: the task i sent you is working. It is not the same method you used (at least in your original post you seemd to be using javascript code within some HTML code).

If you'd like to program it all with HTML/Javascript, you can try, though I think it is a lot easier and simple to use the method I described.

best,

Fabrice.

Janos

@Fab

Once again, thank you so much! I do feel that your method is far less complicated then mine and looks more elegant for sure. However at first I encountered the same issue as before, it only has been resolved by adding a second loop with sequence after adjusting the scaling factor. Only then I was able to actually call and use the scaling variable for my stimulus set without throwing an error or it simply printing a blank screen.

Im not sure why that has happened at all but im just glad it works now. We will actually just stick with your method since its easier to run and also easier to understand for people in the lab dont work that much with javascript.

So thank you a lot for your help, this was really nice of you.