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



{{ block title }}
    Application Form {{ r_num }}/6
{{ endblock }}

{{ block content }}

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


        <p class="matching"><span style="font-weight:bold;">Your payoff</span> 
            amount depends on the school slot you hold at the end of the experiment:
            
        </p>
        
        <table class="table_2">
            <tr>
                <th style="text-align: center">School:</th>
                <th><span style="font-weight:bold;">A</span></th>
                <th><span style="font-weight:bold;">B</span></th>
                <th><span style="font-weight:bold;">C</span></th>
            </tr>
            <tr style="outline: solid">
                <th style="text-align: center">Your Payoff:</th>
                <th><span style="font-weight:bold;">${{ your_payoffs.0 }}</span></th>
                <th><span style="font-weight:bold;">${{ your_payoffs.1 }}</span></th>
                <th><span style="font-weight:bold;">${{ your_payoffs.2 }}</span></th>
            </tr>
            <tr>
                <th style="text-align: center">Other Student 1's Payoff:</th>
                <th><span style="font-weight:bold;">${{ others_payoff_1.0 }}</span></th>
                <th><span style="font-weight:bold;">${{ others_payoff_1.1 }}</span></th>
                <th><span style="font-weight:bold;">${{ others_payoff_1.2 }}</span></th>
            </tr>
            <tr>
                <th style="text-align: center">Other Student 2's Payoff:</th>
                <th style="text-align: center"><span style="font-weight:bold;">${{ others_payoff_2.0 }}</span></th>
                <th style="text-align: center"><span style="font-weight:bold;">${{ others_payoff_2.1 }}</span></th>
                <th style="text-align: center"><span style="font-weight:bold;">${{ others_payoff_2.2 }}</span></th>
            </tr>
        
        
        </table>  


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

        
        <p class="matching">
            Please fill out your application form:
        </p> 
        
        
        <table class="table_3">
            
            <tr>
                <th>1st Choice:</th>
                <th>
                    <select class="form-select" id="id_school_1" name="school_1">
                        <option value="0">--------</option>
                        
                        <option value="3">School C</option>
                        
                        <option value="1">School A</option>
                        
                        <option value="2">School B</option>
                        
                    </select>
                
                </th>
            </tr>
            <tr>
                <th>2nd Choice:</th>
                <th>
                    <select class="form-select" id="id_school_2" name="school_2">
                        <option value="0">--------</option>
                        
                        <option value="1">School A</option>
                        
                        <option value="2">School B</option>
                        
                        <option value="3">School C</option>
                        
                    </select>
                </th>
            </tr>
            <tr>
                <th>3rd Choice:</th>
                <th>
                    <select class="form-select" id="id_school_3" name="school_3">
                        <option value="0">--------</option>
                        
                        <option value="2">School B</option>
                        
                        <option value="3">School C</option>
                        
                        <option value="1">School A</option>
                        
                    </select>
                </th>
            </tr>
        
        
        </table> 
    
    


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

   
   <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;
  
  width:50%;
  
  
  background:transparent;
  margin-left: auto; 
  margin-right: auto;
  font-size: 18px; 
  border: 1px solid black;
  padding: 15px;
  border-radius: 15px;
  
  
  
  }

         
    
    </style>       
    
   
{{ endblock }}


{{ block script}}

    <script>
    
    function check_valid(){
            var school_1 = document.getElementById("id_school_1");
            var school_2 = document.getElementById("id_school_2")
            var school_3 = document.getElementById("id_school_3")
            
            
            if( school_1.value == 0 || school_2.value == 0 || school_3.value == 0){
                alert("Please select schools for each choice.");    
            
                }
           
           
            else if( school_1.value == school_2.value && school_2.value == school_3.value){
                alert("You can not list the same school 3 times.");
                
                }
            else if (school_1.value == school_2.value || school_1.value == school_3.value || school_2.value == school_3.value){
            alert("You can not list the same school 2 times.");
            }
            
            else{
                document.querySelector("form").submit();
            }
            }
            

    </script>


{{ endblock }}