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

{% block title %}
    Part 2 Round {{ r_num }}/9
{% endblock %}

{% block content %}

<div class="boxed">
     
        
<p class="title">Please, select your prefered option!</p>
        

<table class="table_1" >
    
    

  
     <tr>
    
               
                
                <td style="vertical-align:middle;" id="first_col_id" onclick="change_background('0', '{{choices.0.0|safe}}')">
                    
                    <p align="center" style="text-align:center; vertical-align:middle;"><b>{{choices.0.1}}</b></p>
                    
                    
                </td>
                
                <td style="text-align:center; vertical-align:middle;" ><h4>VS</h4></td>
                
                <td id="second_col_id" onclick="change_background('1', '{{choices.1.0|safe}}')">
                    
                    
                    <p align="center" style="text-align:center; vertical-align:middle;"><b>{{choices.1.1}}</b></p>
                    
                    
                    
                </td>
                
                
             
    </tr> 
    
    
    
    <input type="hidden" id="p1_num_id"  name="lottery"/>
 



    </table>


<hr style="width:50%;">

   <button type="button" id="myBtn" onclick="check_valid()"  class="otree-btn-next btn btn-primary">Confirm My Choice</button>

    
</div>

    
    

  

 
    


{% endblock %}



{% block scripts %}

        <script type="text/javascript">
        function check_valid(){
            var answ = document.getElementById("p1_num_id");
            
            
            
           
            if( answ.value == ""){
                alert("Please, select your prefered option");
                
                }
                
            else{
                document.querySelector("form").submit();
            }
            }
            
            
            
                
        </script>
    
 
     <script type="text/javascript">
        
       function change_background(first_second, fixed_var){
           var answ = document.getElementById("p1_num_id");
           if (first_second == 0){
          
                 
            if (answ.value == "" || answ.value != fixed_var){
                document.getElementById("first_col_id").style.background="rgb(120,120,120)";
                document.getElementById("second_col_id").style.background="rgb(220,220,220)";
                document.getElementById("p1_num_id").value=fixed_var;
                    
        
        
                }
              else if(answ.value == fixed_var){
             
                 document.getElementById("first_col_id").style.background="rgb(220,220,220)";
                 
                 document.getElementById("p1_num_id").value="";
                   
              
              } 
              }
            else if (first_second == 1){
          
                 
            if (answ.value == "" || answ.value != fixed_var){
                document.getElementById("first_col_id").style.background="rgb(220,220,220)";
                document.getElementById("second_col_id").style.background="rgb(120,120,120)";
                document.getElementById("p1_num_id").value=fixed_var;
                    
        
        
                }
              else if(answ.value == fixed_var){
             
                 document.getElementById("second_col_id").style.background="rgb(220,220,220)";
                 
                 document.getElementById("p1_num_id").value="";
                   
              
              } 
              } 
            }   
    </script>

 
 
     
{% endblock %}



{% block styles %}
    <style>
 
        
        p.title{
            font-size: 24px; 
            
            font-weight: bold;
            text-align: center;
                
                }
        
    </style>
{% endblock %}