| Reference | Downloads | Github

Change opacity of image when hover mouse over

Description of the problem:

I am trying to create a rating scale from 0-10 and when participants hover over the numbers, the border around the number would change colour. I have done this by layering two images (normal and highlighted borders) on top of each other and changing the opacity using the .contains function

this works perfectly offline

but when I synced the experiment online, the code doesn’t seem to work. Is it because the code is written in python rather than jscode?

Hi @Tatsumi, yes you need to translate the code in your code component from Python to JavaScript manually. In the future, this will be automated, but for now it is manual. To do this. change your code type in the code component to “Both”, so you see Python on the left and JS on the right. For the JS, you want:

if (orangeZero.contains(mouse))  {
  orangeZero.opacity = 1;
} else {
  orangeZero.opacity = 0;
// etc

Thank you @dvdbridges! It works now. However, previously, the rating scores would be recorded but now it doesn’t so I thought it is because it is not in jscode. I tried changing it myself by looking at other codes and came up with this

but I got this error instead.

I am not sure what is the correct function is but I have also tried the mouse.click_name and gotten the same error.

Ah yes, instead you have to use:

if (one.contains(mouse) && mouse.getPressed()[0] === 1) {
  psychoJS.experiment.addData('ratingScore', '1')

So this is what I have done, and to test if it works, I duplicated this current routine and made the appropriate changes to the codes in a new one like so

when I run it through pavlova, this is the output

So in the two routines, the first number (first routine) I selected was 7 and the second number (second routine) I selected was 2. According to the output, my selection in the first routine was recorded but the ratingScore was not. And for the second routine, my selection and ratingScore was recorded but it shares the same row as my first routine.

The two routines are probably in the same loop?.. so they get saved on the same row in the conditions file. At the end of each loop iteration, all the variables get saved into a new row in the conditions file. You only have one rating, because your second rating has overwritten the first rating with the same column name. You should get two entries if you change “ratingScore” column name in the second routines code component.

Yes changing the ratingScore column has fixed the overwritten rating. Thanks again for your help!

Hi, @dvbridges. I tried integrating this rating scale with my experiment and I got this error

if orangeOne.contains(mouse_2):
AttributeError: ‘int’ object has no attribute ‘contains’

Since it has previously worked before, I am not sure where to start looking for errors. If it helps, here is my flow and components

Not sure what is happening here without seeing the task, but the error suggests that orangeOne is now a number (int) rather than an image. Perhaps orangeOne has been overwritten?