Moving texts and shapes using canvas functions

Hi everyone,

I am trying to create a small animation as a feedback for participants using moving rectangles and texts. Basically, I am designing a mouse-tracking experiment with 2 clickable options (let's call them A & B. These two options are colored squares with centered text indicating money values and their positions are counterbalanced left-right). Depending on whether they click on option A or B, the money is either for the participants alone or to be split between the participants and a virtual partner. The mouse-tracking part of the experiment is fully functional so far.

To illustrate whether the money is for them alone or to be split, I would like to present two rectangles at the bottom left & right of the screen, indicating 'personal gains' & 'partner's gains' respectively.

When participants click on the response 'A', I want the button to 'fall' into the participants' gain box.
When participants click on the response 'B', I want the button to 'fall' first into the participants' gain box and then into the partner's gain box.
Ideally, the button would disappear when the gains have been distributed.

So far so good, I manage to animate the shapes and texts but:

i) I'm struggling to place the text at the center of the shape. It is centered at the #initial screen# but for some reasons, starts from above the rectangle when the animation starts. I'm assuming I did something wrong with the coordinates list at the start but cannot figure out what.

ii) I cannot really decide where to place a canvas.clear() (and which one to clear) so that the buttons disappear after the gains are distributed.

iii) For now, I was thinking to have 4 inlines with modified versions of this script to give feedbacks for the 4 types of trials that I have (Trial 'A' or 'B' and clicked button on the left or the right) with a Run if statement. Is it the most optimal thing to do ? If not, in which direction should I look ?

I started from the code presented here.

It looks as follows (this would be an example of a feedback when the left button is clicked and the gains must be shared):

cv = canvas()
cv1 = canvas()
cv2 = canvas()

value = var.moneyvalue #value indicated by the response
currency = 'HUF'
text = ("%s %s"%(value,currency))

# starting position
x1,y1 = -352,-256
x2,y2 = -352,-256
points = [[x1,y1],[x2,y2]]

#Text position
a1,b1 = -288,-192
a2,b2 = -288,-192


# initial screen # Text is well positioned here
for x,y in points:
    cv.rect(x,y,128,128, fill=True, color= var.responsecolor)
    cv.text(text,True,a1,b1,font_family ='sans',font_size = 40)
    cv.show()

# prepare first moving square #Text moves here
for x,y in points[:2]:
    cv1.rect(x,y,128,128, fill=True, color= var.responsecolor)
    cv1.text(text,True,a1,b1,font_family ='sans',font_size = 40)

# set a speed
speed = 3
# let first square move
for i in range(30):# range represents the distance that is covered on the screen
    cv2.copy(cv1)
    x1,y1 = x1+speed*i,y1+speed*i
    a1,b1 = a1+speed*i,a1+speed*i
    cv2.rect(x1,y1,128,128, fill=True, color= var.responsecolor)
    cv2.text(text,True,a1,b1,font_family ='sans',font_size = 40)
    cv2.show()
    cv2.clear()
    self.sleep(50)

points = [[x1,y1],[x2,y2]]
# prepare 2nd moving square
for x,y in points[:2]:
    cv1.rect(x,y,128,128, fill=True, color= var.responsecolor)
    cv1.text(text,True,a2,b2,font_family ='sans',font_size = 40)

# let second square move
# set a speed 
speed = 3
for i in range(30):# range represents the distance that is covered on the screen
    cv2.copy(cv1)
    x2,y2 = x2+speed*i,y2+speed*i
    a2,b2 = a2+speed*i,a2+speed*i
    cv2.rect(x2,y2,128,128, fill=True, color= var.responsecolor)
    cv2.text(text,True,a2,b2,font_family ='sans',font_size = 40)
    cv2.show()
    cv2.clear()
    self.sleep(50)

Thanks in advance for any comments, help, suggestions, I tried to make this as clear as possible