oTree Forum >

Multiplayer Puzzle with Livepages

#1 by EyeKIT

I am trying to build a Drag'n Drop for an interactive multiplayer experiment, but I have a problem: locally everything works as planned, the server receives and sends the data. Hence, the dragged object can be dropped in a designated interactive area and remains at the position. 
But somehow the position of the object cannot be correctly transferred to the other clients' screens. Instead of displaying it at the correct coordinates within the shared interactive space within the screen, the img's are always displayed at a fixed place outside of this area. 

Is this functionality of somewhat of a multiplayer drag and drop puzzle game based on otree livepages even possible? Id like to have at least two players being able to synchronously monitor the changes made within the shared interactive area (illustration of the layout is attached to the post). Of course it will not be able to display the current position while dragging the objects, but a synchronization of the current game status (dropped objects in the interactive area) would be enough.

I really would appreciate if someone could show me an example or maybe recommend a library/framework that already has this functionality as I want t

P.S. Img's position is set to absolute.

#2 by gr0ssmann

This is more than possible. Could you possibly explain though why you don't use a <canvas>? (I'm assuming you don't because you mention "absolute position", i.e. something with CSS and so on.)

#3 by EyeKIT

Unfortunately my colleague who developed the code for the drag and drop live page will not be available until next week. So I will not be able to answer this question till then... - However, do you know any similar examples of free drag and drop multiplayer games in oTree, so that I could take a look at it?

Every game I found so far (i.e. the live demos) is static and does not include any "free form" of moving objects within an interactive area. I would really appreciate any information about how to possibly realize such a game as we already developed a novel game theoretical multiplayer tangram puzzle to measure cooperation, but need to digitalize it in oTree for lab experiments. 

Looking forward to your reply!

#4 by gr0ssmann (edited )

Sadly, I don't know any experiments like that.

I am however quite experienced with <canvas>, e.g. https://cdn.mg.sb/plot/ (a work in progress of mine of a neat <canvas> JavaScript plotting library)

I would definitely consider using that. CSS-based solutions are - by necessity - a little fiddly. The <canvas> API is extremely modern and powerful. In any case, you could also try debugging with the Web Developer: Ctrl+Shift+i. Perhaps that reveals the issue.

It's also easy to put an external image into a <canvas>, e.g. https://stackoverflow.com/a/6011402

#5 by EyeKIT

Thank you! That helps me a lot. I will definitely try it!

Write a reply

Set forum username