Divided Visual Field Paradigm - virtual-chinrest

[selinbekir]

Hi all!
First of all thanks A LOT for jsPsych and Cognition.run! It's been very helpful and useful.

I'm trying to implement a divided visual field paradigm where I display 3 elements on the screen:
left-aligned image, fixation cross at the center, right-aligned image.

I want to manipulate the distance from center to right and left based on the viewing distance and monitor sizes. I want to keep it at constant visual angle degree for every participant, based on their viewing distance and monitor sizes.

I have a separate css file where I defined .right-align and .left-align tags. And this is a very simplistic example of how I use my stimulus:

  var trial = {
    type: 'html-keyboard-response',
    stimulus: '<img class = "left-align" src="img/left-arrow.png">' +
            '<div style="color: red" class="center">+</div>' +
            '<img class = "right-align" src="img/rectangle.png">',
  };

When I use the virtual-chinrest plugin with resize_units, it seems to override my css file where I define right-align and left-align, and it seems to resize all my images and puts them at center. I'm not sure how to solve this issue and use virtual-chinrest plugin to just manipulate the left-align and right-align distances in my css file or whether there is another way to do this.

Thank you very much!

[becky-gilbert]

Hi @selinbekir, can you share the CSS for your left align, center, and right align classes please? Thanks!

[selinbekir]

Hi @becky-gilbert thank you very much for your response!
Here it is:
(though currently I am only able to manipulate images' distances from right and from left (100px) rather than from the center. I'm still trying to figure this out!) And then I was hoping to use virtual-chinrest plugin for resizing that distance in pixels based on degrees of visual angle per pixel. But if there is another way to do this, I'd be happy to use that! Thank you!

.center {
    display: inline-block;
    position: center;
    width: 300px;
    height: 200px;
    font-size:100px;
    color: black;
    padding: 10px;
    line-height: 200px;
    text-align: center;
}
.right-align {
    display: inline-block;
    position: absolute;
    right: 100px ;
    width: 200px;
    height: 200px;
    padding: 0px;
}
.left-align {
    display: inline-block;
    position: absolute;
    left: 100px ;
    width: 200px;
    height: 200px;
    padding: 0px;
}

[selinbekir]

Okay I actually figured this out! I used transform translate rather than left right in my CSS classes and now it works with virtual-chinrest resize!

.right-align {
    display: inline-block;
    position: absolute;
    width: 200px;
    height: 200px;
    padding-top: 5px;
    transform: translate(200px, 0px);
}

.left-align {
    display: inline-block;
    position: absolute;
    width: 200px;
    height: 200px;
    padding-top: 5px;
    transform: translate(-400px, 0px);
}

[becky-gilbert]

Thanks for sharing the solution!