Aligned text and mouse contain method

Builder
1

If this template helps then use it. If not then just delete and start from scratch.

OS: Catalina 10.15.7
PsychoPy version: 2020.2.5
Standard Standalone? Yes
What are you trying to achieve?:
I am trying to make a multiple choice task. I have three options for each question, they should be aligned to the left, one below the other and they should change opacity as the mouse component hovers over.

The problem I have is that, as soon as I align the three options to either side, the method “.contains” doesn’t work because it registers when the mouse is over a text box instead over the actual text (and the text seems to be outside the box). Is there any way to prevent this from happening? I know that the text box containing the text stimuli widens when I align the text to the side, but there should be a way to wrap or shrink the text box around the text. Otherwise, there is no way hover can work except if the options are centred which doesn’t work for me since it looks messy.

mouse1
mouse11570×801 16.5 KB

2

Splitting them into individual Textboxes is definitely the way to go for this! You can align them on the left by setting the anchor property - this sets the point within the textbox which is “anchored” to the position value. e.g. if position is (0,0) and the anchor is center, then the middle of the box will be at the exact center of the screen, but if the anchor is bottom-left, then the bottom left corner will be at the center of the screen

3

Thanks for your reply. The thing is no matter what I do with the anchor property, the only way the function “contains” work is when I hover over the original position and this is set at the Position[x,y] - far away from the text stimuli. I tried the following combinations and none worked (hover area is still in the position (0,0) and stimuli options are impossible to align). Even if I don’t use “alignText” without which it’s impossible to align text stimuli to either side, the hover still doesn’t work (e.g.option c).

  1. alignText=‘right’ + anchorHoriz=‘left’
  2. alignText=‘left’ + anchorHoriz=‘right’
  3. alignText=‘center’ + anchorHoriz=‘right’

Here’s the code and a screenshoot. ![Screenshot 2020-11-19 at 12.42.36|690x388, 50%]

option1.alignText='right'
option2.alignText='left'
option3.alignText='center'

option1.anchorHoriz='left'
option2.anchorHoriz='right'
option3.anchorHoriz='right'

Untitled 2
Untitled 21900×937 11.1 KB