{{ extends "global/Page.html" }}



{{ block title }}
    Application Form
{{ endblock }}

{{ block content }}




<div class="boxed" id="boxed">

<button type="button" class="button_inst_open" onclick="openForm()">Instructions</button>

<div class="form-popup" id="myForm">
    <div class="boxed">
        <div style="text-align: center">
            <button type="button" class="button_inst_close" onclick="closeForm()">Close</button>
        </div>
            {{ if r_num == 1}}
            
                {{ include "pooling_baseline/P_1_inst_example_discrete_game.html" }}
              
            {{ else }}
                {{ include "pooling_baseline/P_1_inst_example_pooling_game.html" }}
                
            {{ endif }}
            
         <div style="text-align: center">
            <button type="button" class="button_inst_close" onclick="closeForm()">Close</button>
        </div>
        
    </div>
</div>





        <p class="matching" style="text-align: center;"><span style="font-weight:bold;">Round {{ round_number }}: please make a selection </span> 
          
        </p>
        
<hr style="width:50%;margin-left:25%;">  

{{ if round_number == 2}}  

    {{ if r_num == 1 }}  
        <p class="matching">
        Each college now has its own test score requirement and enrollment bonus.
        <p>
    {{ elif r_num == 2 }}       
        <p class="matching">
        Colleges E, F, G, H, I and J have now been pooled together. 
        If you choose to spend 0 tokens on study books your enrollment bonus will be 25 tokens.
        </p>
    {{ endif }}
    
    <hr style="width:50%;margin-left:25%;">
{{ endif }}







        
        
        
        <table class="table_3">
                <th>
                    <th>College</th>
                    <th>Bonus if you Enroll</th>
                    <th>Cost of Virtual Study Books to Meet the Test Score Requirements</th>
                </th>
            
                <tr>
                    <td><input class="form-check-input" type="radio" id="id_effort-0" name="effort" value="0" onclick="show()"></td>
                    <td>A</td>
                    <td>{{ payoff_vec.0 }}</td>
                    <td>{{ cost.0}}</td>

                </tr>
                <tr>
                    <td><input class="form-check-input" type="radio" id="id_effort-1" name="effort" value="1" onclick="show()"></td>
                    <td>B</td>
                    <td>{{ payoff_vec.1 }}</td>
                    <td>{{ cost.1}}</td>
                </tr>
                <tr>
                    <td><input class="form-check-input" type="radio" id="id_effort-2" name="effort" value="2" onclick="show()"></td>
                    <td>C</td>
                    <td>{{ payoff_vec.2 }}</td>
                    <td>{{ cost.2}}</td>
                </tr>
                <tr>
                    <td><input class="form-check-input" type="radio" id="id_effort-3" name="effort" value="3" onclick="show()"></td>
                    <td>D</td>
                    <td>{{ payoff_vec.3 }}</td>
                    <td>{{ cost.3}}</td>
                </tr>
                {{ if r_num == 2 }}
                    <tr style="background-color:lightgrey;">
                {{ else }}
                    <tr>
                {{ endif }}
                    <td><input class="form-check-input" type="radio" id="id_effort-4" name="effort" value="4" onclick="show()"></td>
                    <td>E</td>
                    <td>{{ payoff_vec.4 }}</td>
                    <td>{{ cost.4}}</td>
                </tr>
                {{ if r_num == 2 }}
                    <tr style="background-color:lightgrey;">
                {{ else }}
                    <tr>
                {{ endif }}
                    <td><input class="form-check-input" type="radio" id="id_effort-5" name="effort" value="5" onclick="show()"></td>
                    <td>F</td>
                    <td>{{ payoff_vec.5 }}</td>
                    <td>{{ cost.5}}</td>
                </tr>
                {{ if r_num == 2 }}
                    <tr style="background-color:lightgrey;">
                {{ else }}
                    <tr>
                {{ endif }}
                    <td><input class="form-check-input" type="radio" id="id_effort-6" name="effort" value="6" onclick="show()"></td>
                    <td>G</td>
                    <td>{{ payoff_vec.6 }}</td>
                    <td>{{ cost.6}}</td>
                </tr>
                {{ if r_num == 2 }}
                    <tr style="background-color:lightgrey;">
                {{ else }}
                    <tr>
                {{ endif }}
                    <td><input class="form-check-input" type="radio" id="id_effort-7" name="effort" value="7" onclick="show()"></td>
                    <td>H</td>
                    <td>{{ payoff_vec.7 }}</td>
                    <td>{{ cost.7}}</td>
                </tr>
                {{ if r_num == 2 }}
                    <tr style="background-color:lightgrey;">
                {{ else }}
                    <tr>
                {{ endif }}
                    <td><input class="form-check-input" type="radio" id="id_effort-8" name="effort" value="8" onclick="show()"></td>
                    <td>I</td>
                    <td>{{ payoff_vec.8 }}</td>
                    <td>{{ cost.8}}</td>
                </tr>
                {{ if r_num == 2 }}
                    <tr style="background-color:lightgrey;">
                {{ else }}
                    <tr>
                {{ endif }}
                    <td><input class="form-check-input" type="radio" id="id_effort-9" name="effort" value="9" onclick="show()"></td>
                    <td>J</td>
                    <td>{{ payoff_vec.9 }}</td>
                    <td>{{ cost.9}}</td>
                </tr>
            
        
        </table> 
        

    
    


<hr style="width:50%;margin-left:25%;">

        <div id="payoff" style="display: none;">
        
        <p class="matching" style="color:red;" id="payoffval">
        </p>
        
        <hr style="width:50%;margin-left:25%;">
        
        </div>

   

   <button type="button" onclick="check_valid()"  class="otree-btn-next btn btn-primary">Submit</button>
 

</div>


{{ endblock }}




{{ block styles }}
    <style>
 
        
        p.matching{
            font-size: 18px; 
            text-align: justify;
                
                }
                


        
    </style>
    
    

<style>
 

  .table_3{
  
    
  border-collapse: separate;
  
  
  
  background:transparent;
  margin-left: auto; 
  margin-right: auto;
  font-size: 18px; 
  border: 1px solid black;
  padding: 15px;
  border-radius: 15px;
  
  
  
  }
  .table_3 td {
      text-align: center;
    }
    .table_3 th {
          text-align: center;
          width:30%
          
        }
    .table_3 th:first-child {
          text-align: center;
          width: 10%;
        }
    .table_3 tr:nth-child(even) {
        background-color: #f2f2f2;
        }

         
    
    </style>     
    
<style>

.form-popup {
  display: none;
  position: fixed;
  top: 0;
  width: 35%;
  right: 15px;
  z-index: 9;
  height:500px;
  overflow:auto;
  border:4px double #cccccc;
}

</style>  

    <style>
      button.button_inst_open {
        display: inline-block;
        background-color: green;
        border-radius: 10px;
        border: 4px double #cccccc;
        color: #eeeeee;
        text-align: center;
        font-weight: bold;
        transition: all 0.5s;
        cursor: pointer;
        
      }
    </style>
    
    <style>
      button.button_inst_close {
        display: inline-block;
        background-color: red;
        border-radius: 10px;
        border: 4px double #cccccc;
        color: #eeeeee;
        text-align: center;
        font-weight: bold;
        transition: all 0.5s;
        cursor: pointer;
        margin: auto
        
      }
    </style>
    
   
{{ endblock }}

{{ block script}}


    <script>

    
    
    
    function show(){
    var rates = document.getElementsByName("effort");
    var net_payoff = {{ net_payoff|safe }};
    var valid_investment = {{ valid_investment|safe }};
    var rate_value;
    for(var i = 0; i < rates.length; i++){
        if(rates[i].checked){
            rate_value = rates[i].value;
        }
    }
        document.getElementById("payoff").style.display = "block"
        if(valid_investment[rate_value]>=0){
        document.getElementById("payoffval").innerHTML = "If you keep this selection and this round is chosen for payment your Additional Payment will be " + net_payoff[rate_value] +".";
        }else{
        document.getElementById("payoffval").innerHTML = "This college is too expensive (the cost exceeds your 100-Token endowment).";
        }
        
    }
    
    </script>
    
    <script>
   
    function openForm() {
      document.getElementById("myForm").style.display = "block";
    }
    
    function closeForm() {
      document.getElementById("myForm").style.display = "none";
    }
   
    </script>
    
    
    <script>
    
    function check_valid(){
            var rates = document.getElementsByName("effort");
            var net_payoff = {{ net_payoff|safe }};
            var valid_investment = {{ valid_investment|safe }};
            var rate_value;
            
            for(var i = 0; i < rates.length; i++){
                if(rates[i].checked){
                    rate_value = rates[i].value;
                }
            }
                
                if(valid_investment[rate_value]>=0){
                document.querySelector("form").submit();
                }else{
                alert("This college is too expenceve and it's cost exceeds your 100-Token endowement. Please select other college.")
                }
                
            }
                    
            
            

    </script>
    


{{ endblock }}