{{ 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_t1/P_1_inst_example_discrete_game.html" }}
              
            {{ else }}
                {{ include "pooling_t1/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 == 1 }}
    {{ if r_num == 2 }}       
        <p class="matching">
        Colleges E, F, G, H, I and J have been pooled together. If you choose to 
        spend 0 tokens on study books you will enter an enrollment lottery where 
        you will have an equal chance of ultimately enrolling in any one of the 
        colleges that are pooled together. Your enrollment bonus will then equal 
        the enrollment bonus of the college you were randomly assigned to enroll in. 
        That is, if you spend 0 tokens, you will receive an enrollment bonus of 
        42 or 35 or 30 or 24 or 16 or 3 tokens, each with an equal chance (for 
        your information, on average this equals 25 tokens).
        </p>
    {{ endif }}


{{ elif 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 you will enter an enrollment lottery where 
        you will have an equal chance of ultimately enrolling in any one of the 
        colleges that are pooled together. Your enrollment bonus will then equal 
        the enrollment bonus of the college you were randomly assigned to enroll in. 
        That is, if you spend 0 tokens, you will receive an enrollment bonus of 
        42 or 35 or 30 or 24 or 16 or 3 tokens, each with an equal chance 
        (for your information, on average this equals 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;">
                        <td rowspan="6"><input class="form-check-input" type="radio" id="id_effort-4" name="effort" value="4" onclick="show()"></td>
                        <td>E</td>
                        <td rowspan="6"><span style="font-size:14px;"><b>Enrollment lottery</b><BR>
                                            Equal chances of enrolling in:<BR> 
                                            College E with a bonus of {{ payoff_vec.4 }} tokens<BR> 
                                            College F with a bonus of {{ payoff_vec.5 }} tokens<BR>
                                            College G with a bonus of {{ payoff_vec.6 }} tokens<BR>
                                            College H with a bonus of {{ payoff_vec.7 }} tokens<BR>
                                            College I with a bonus of {{ payoff_vec.8 }} tokens<BR>
                                            College J with a bonus of {{ payoff_vec.9 }} tokens  
                                            </span>                        
                        </td>
                        <td>{{ cost.4}}</td>
                    </tr>
                    <tr style="background-color:lightgrey;">
                        <td>F</td>
                        <td>{{ cost.5}}</td>
                    </tr>
                    <tr style="background-color:lightgrey;">
                        <td>G</td>
                        <td>{{ cost.6}}</td>
                    </tr>
                    <tr style="background-color:lightgrey;">
                        <td>H</td>
                        <td>{{ cost.7}}</td>
                    </tr>
                    <tr style="background-color:lightgrey;">
                        <td>I</td>
                        <td>{{ cost.8}}</td>
                    </tr>
                    <tr style="background-color:lightgrey;">
                        <td>J</td>
                        <td>{{ cost.9}}</td>
                    </tr>
                {{ else }}
                    <tr>
                        <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>
                    <tr>
                        <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>
                    <tr>
                        <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>
                    <tr>
                        <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>
                    <tr>
                        <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>
                    <tr>
                        <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>
                {{ endif }}


                          
        
        </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 r_num = {{ r_num|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){
            if(r_num==2 && rate_value>=4){
                document.getElementById("payoffval").innerHTML = "If you keep this selection and this round is chosen for payment your Additional Payment will be determined by the Enrollment Lottery. <BR>It has an equal chance of being " + net_payoff[4] + " or " + net_payoff[5] + " or " + net_payoff[6] + " or " + net_payoff[7] + " or " + net_payoff[8] + " or " + net_payoff[9] +" tokens <BR>(For your information, on average your additional payment would be 125 tokens).";
            }else{
                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 }}