<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Mensa-Abend Telepräsenz</title> <style> div.meerschweinchen { max-width: 600px; margin: auto; text-align: center; } div.arena { height: 400px; width: 600px; background-image: url("https://p.0au.de/3d62ea7/foo.png"); border: none; text-align: center; position: relative } div.arena p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } </style> <script type=text/javascript src="{{url_for('static', filename='jquery-3.5.1.min.js') }}"></script> </head> <body> <h1 style="text-align: center">Welcome to Mensa-Abend digital</h1> <div style="text-align: center"> <p>Click anywhere to control the robots in our hackerspace. You can see them in the Zoom video.<br> <br> Please let us know about your study background. </p> </div> <div class="meerschweinchen"> <div class=arena style="font-size: large;"> </div> <form method="post"> <p>Choose your robot:</p> <div> <input type="radio" id="r11" name="robot_id" value="11"> <label for="r11">Robot 11</label> </div> <div> <input type="radio" id="r12" name="robot_id" value="12"> <label for="r12">Robot 12</label> </div> <div> <input type="radio" id="r13" name="robot_id" value="13"> <label for="r13">Robot 13</label> </div> <div> <input type="radio" id="r14" name="robot_id" value="14"> <label for="r14">Robot 14</label> </div> </form> </div> </body> <script> function fireThis(e) { var parentOffset = $(this).parent().offset(); var x = e.pageX - parentOffset.left; var y = e.pageY - parentOffset.top; var robot = document.querySelector('input[name = "robot_id"]:checked').value; $.post( "/", { 'x': x, 'y': y , 'robot': robot} ); } $('.arena').on('mousedown', fireThis); function callRandom() { var array = document.getElementsByName('robot_id'); array[{{ oldest_control }}].checked = true; } callRandom(); </script> </html>