I'm pretty new to html/CSS/JS, but I need to create a widget which fills in three forms simultaneously based on where a user clicks on an equilateral triangle. The value of each form should be the perpendicular distance from its side to the click, up to a maximum of 100 (e.g. clicking a vertex would enter 100 for the form on the opposite side, and both other forms would be 0) - see example image below:
Clicking on the star (which is 28 units away from the base, 22 units away from the left side, and 62 units away from the right side) would enter 28 in form 1, 22 in form 2, and 62 in form 3.
I also would need there to be some text underneath the image that tells the user what their click represents so they can adjust it as needed, and it should not be filled in until the user leaves the page.
I'm using oTree, a Django-based app for running economics experiments.
Cheers!
