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



{{ block title }}
    {{ if r_num == 1}} Begin Script {{ else }} Part 1: Instructions {{ inst_num }}/3 {{ endif }} 
{{ endblock }}

{{ block content }}

<div class="boxed" id="boxed">
     {{ if r_num == 1}}
     
    <p class="intro">
        Thank you for participating in this experiment. 
        This study is in three parts.
    </p>  
    <ul class="intro">
        <li>You will be paid for a single part only, chosen at random.</li>
        <li>Note that every Part and every Round is independent of all the others. 
        So, you should treat each decision you make as if it were the only one 
        that mattered for payment. </li>
    </ul>
        
        
       
    <hr style="width:50%;margin-left:25%;">
    <p class="intro">
        Please click “Next” to read the instruction. 
        When you have finished reading the instructions, you will be asked 
        to complete <span style="font-weight: bold;">a short quiz</span> to ensure that you understand the 
        experiment and how participant earnings will be determined. 

    </p>
    {{ elif r_num == 2}}
        <p class="intro">
            The Part 1 consist of 6 rounds. 
        </p>
    
        <p class="intro">
        In this experiment, we will simulate a procedure to allocate students to schools. 
        The procedure, payment rules, and student allocation process are described below. 
            
        </p>
        
        <hr style="width:50%;margin-left:25%;">
        
        <p class="intro">
        </p>
        <ul class="intro">There are <span style="font-weight:bold;">3 students</span> 
            and <span style="font-weight:bold;">3 schools</span>.</ul>
        <ul class="intro">Each student can be matched with only one school.</ul>
        <ul class="intro">Each school can accept only one student.</ul>
        <ul class="intro">Schools are numbered as <span style="font-weight:bold;">A</span>, 
            <span style="font-weight:bold;">B</span> and <span style="font-weight:bold;">C</span>.</ul>
        <ul class="intro"><span style="font-weight:bold;">Your payoff</span> 
            If this part is randomly selected to count for payment in this study, 
            <u>only one</u> of the 6 rounds will be chosen to count for payment.
            The amount depends on the school slot you hold at the end of the experiment. For example if your payoff table is:</ul>
        
        <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>
                <th style="text-align: center">Your Payoff:</th>
                <th><span style="font-weight:bold;">$12</span></th>
                <th><span style="font-weight:bold;">$9</span></th>
                <th><span style="font-weight:bold;">$4</span></th>
            </tr>
        
        
        </table>            
        
        <ul class="intro_1">You will be paid <span style="font-weight:bold;">$12</span> if you hold a slot at school <span style="font-weight:bold;">A</span> at the end of the experiment.</ul>
        <ul class="intro_1">You will be paid <span style="font-weight:bold;">$9</span> if you hold a slot at school <span style="font-weight:bold;">B</span> at the end of the experiment.</ul>
        <ul class="intro_1">You will be paid <span style="font-weight:bold;">$4</span> if you hold a slot at school <span style="font-weight:bold;">C</span> at the end of the experiment.</ul>

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

        
       <p class="intro">
           <span style="font-weight:bold; color: red;">NOTE:</span> 
           different students might have different payoff tables. 
           That is, payoff by the school might be different for different students.
       </p> 
        
        
     {{ elif r_num == 3}}   
        <p class="intro"> 
            During the experiment, each participant first completes <span style="font-weight: bold;">the 
            Application Form</span> by listing schools in their order of preference. 
        </p>
        
        <hr style="width:50%;margin-left:25%;">

        
        <p class="intro">
        After all students have indicated their preferences, 
        the computer will follow <span style="font-weight: bold;">the allocation process</span>:
        
        <ul class="intro">
            <li>Each student's application is sent to their first choice school 
                listed in their Application Form. 
            </li>
            
            <li>If a school receives more than one application, it randomly retains
                one student and rejects the rest of the applications. 
            </li>
            
            <li>Whenever a student is rejected at a school, his/her application 
                is sent to the next highest ranked school in his/her reported list.
            </li>
            
            <li>Whenever a school receives new students' application, these applications 
                are considered together with the retained applications for that school. 
            </li>
            
            <li>If the total number of the retained and new applications exceeds one, 
                it randomly retains one student and rejects the rest of the applications.
            </li>
            
            <li>The allocation is finalized when each school has only one student 
                assigned to it.
            </li>
            
        </ul>






        
        
        </p>
    
    {{ elif r_num == 4 }}
    
    <div id="inst_text">
        <p class="intro">
            <span style="font-size: 24px; color: red; font-weight: bold;">Example: please watch 
            the following short video (no audio) about the allocation process.</span>
      
        </p>
    
        <hr style="width:50%;margin-left:25%;">
        
    </div>
        
    
    <button type="button" id="video_button" onclick="show_video();" class="otree-btn-next btn btn-primary">Watch The Short Video!</button>

        
    <div id="video" style="display:none">  
        <p align="center">
        <iframe width="800" height="450" src="https://www.youtube.com/embed/bJlXCOI9iqA?autoplay=1&mute=1&rel=0" frameborder="0" allowfullscreen></iframe>
        </p>

    </div>




        


    {{ endif }}
  

 
    
    
    <hr style="width:50%;margin-left:25%;">
  
 {{ if r_num == 4 }}
 <div id="button" style="display:none">   
 {{ next_button }}
 </div> 
 
 {{ else }}
   
 {{ next_button }}
 
 {{ endif }}
 
</div>

{{ endblock }}




{{ block styles }}
    <style>
 
        
        p.intro{
            font-size: 18px; 
            text-align: justify;
                
                }
        ul.intro{
            font-size: 18px; 
            text-align: justify;
                
                }
                
        ul.intro_1{
            font-size: 17px; 
            text-align: justify;
            margin: 5px;
            margin-left: 10%;
            
                
                }
        .intro li{
            margin: 10px;
            
        }
        
    </style>
    
    
   
{{ endblock }}


{{ block script}}

    <script>
    var button = document.getElementById("button");
    var video = document.getElementById("video");
    var video_button = document.getElementById("video_button");
    var inst_text = document.getElementById("inst_text");
    
    
      function show_video() {         
          video_button.style.display = "none";
          inst_text.style.display = "none";
          video.style.display = "block";
          setTimeout(function(){
             button.style.display = "block";
        }, 98000);
    
        }
    

  
    
    </script>


{{ endblock }}