{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    The Emoji Selection Task 
    Round {{r_num}}/{{ Constants.part_3_length }}
{% endblock %}

{% block content %}

<input type="hidden" id={{ submit_id|safe }} name={{ submit_name|safe }} value="a,"/>
<input type="hidden" id={{ time_id|safe }} name={{ time_name|safe }} value="b,"/>
<input type="hidden" id={{ mouse_id|safe }} name={{ mouse|safe }} value="c,"/>
<input type="hidden" id={{ mouse_time_id|safe }} name={{ mouse_time|safe }} value="d,"/>

 <div class="boxed", onmousemove="record_mouse(event, '{{mouse_id|safe}}', '{{mouse_time_id|safe}}')">

    <table  align="center" class="table_2">
    
                                   
    
        {% for row in my_list %}
            <tr align="center">
              
                            
                {% for smile, image_id, val_id, var_name in row %}
                    <td>
                        {% if smile == 1 %}
                            <input type="hidden" id={{val_id|safe}} name={{var_name|safe}} value=0 /> 
                            <img src="{% static "global/victory.png" %}" id={{image_id|safe}} onclick="change('{{image_id|safe}}', '{{val_id|safe}}', '{{ submit_id|safe }}', '{{ time_id|safe }}')" width=50% height=50% />
                        {% else %} 
                            <input type="hidden" id={{val_id|safe}} name={{var_name|safe}} value=0 /> 
                            <img src="{% static "global/crossed.png" %}" id={{image_id|safe}} onclick="change('{{image_id|safe}}', '{{val_id|safe}}', '{{ submit_id|safe }}', '{{ time_id|safe }}')" width=50% height=50%/>
                        {% endif %} 
                    </td>
                {% endfor %}
                        
               
                        
            </tr> 
            
        
        
        {% endfor %}
    </table>
   
 {% next_button %}   
</div>

{% endblock %}


{% block scripts %}

    
        <script type="text/javascript">
        
        function change(img_id, num_id, submit_id, time_id){
            var image=document.getElementById(img_id);
            var now = new Date()
            var ms = now.getMilliseconds()
            if (document.getElementById(num_id).value=="1"){
                image.style.width="50%"; 
                image.style.height="50%";
                document.getElementById(num_id).value="0";
                document.getElementById(submit_id).value+=-num_id+",";
                document.getElementById(time_id).value+=now.toString() + ms.toString() +",";

            }else{
                image.style.width="100%";
                image.style.height="100%";
                document.getElementById(num_id).value="1";
                document.getElementById(submit_id).value+=num_id+",";
                document.getElementById(time_id).value+=now.toString()+ ms.toString() +",";
            
            }
        
        
        }
    
    function record_mouse(e, mouse_id, mouse_time_id) {
      var x = e.clientX;
      var y = e.clientY;
      var coor = "(" + x + "," + y + ")";
      var now = new Date();
      var ms = now.getMilliseconds()
      document.getElementById(mouse_id).value += coor+",";
      document.getElementById(mouse_time_id).value += now.toString() + ms.toString() +",";
    }
    
  
    </script>
{% endblock %}

{% block styles %}
    <style>
 
        
        td {
          height:60px;
          width:60px
          
        }
        
        .table_2{
          border-collapse: separate;
          border-spacing: 2px 2px;
          width: 90%
          }
        
    </style>
    
    <style>
    .otree-timer {
            
            position: fixed;
            top:40%;
            left:50px;
            background:rgb(280, 280, 280);
            color:red;
            font-weight:bolder;
            text-align: center;
            font-size: 22px;
            border: 1px solid black;
            
        }

</style>
{% endblock %}