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

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

{% block content %}

<div class="boxed">
     {% if r_num == 1%}
     
        <p class="intro">
            Thank you for participating in this experiment. 
            An experimenter is on standby at this time to answer 
            any questions you have. If you need assistance at any 
            time during the experiment, please send an email to 
            the experimenter Xiaohong Wang: 
            <span style="color:blue; font-weight: bold;"> xiw131@pitt.edu </span>
        </p>    
        <hr style="width:50%;">
        <p class="intro">
            Please click “Next” to read the instruction. 
            When you have finished the instruction, you will be asked 
            to complete a short quiz to ensure that you understand the 
            experiment and how participant earnings will be determined. 

        </p>
    {% elif r_num == 2%}
        <p class="intro">
        All participants will be randomly divided into 2 roles: 
        <span style="color: red; font-weight: bold;">Player A</span> and 
        <span style="color: red; font-weight: bold;">Player B</span>. 

            
        </p>
        
        <hr style="width:50%;">
        <p class="intro">
        <span style="color: red; font-weight: bold;">Player As</span> 
        have a 50% chance of winning and a 50% chance of losing. 
        <span style="color: red; font-weight: bold;">Player Bs</span> 
        can change <span style="color: red; font-weight: bold;">Player As'</span>  
        winning chances by selecting a specific emoji.
            
        </p>
        
        <hr style="width:50%;">
        <p class="intro">
        Monetary values are assigned when you win or lose depending on a lottery. There are two possible lotteries:
        </p>
        <ul class="intro"><span style="font-weight:bold;">Lottery 1:</span> Player A gets <span style="color:green">${{ low_win }} in case of a 
        Win</span> and <span style="color:purple">${{ low_lose }} in case of a Loss</span>.</ul>
        <ul class="intro"><span style="font-weight:bold;">Lottery 2:</span> Player A gets <span style="color:green">${{ high_win }} in case of a 
        Win</span> and <span style="color:purple">${{ high_lose }} in case of a Loss</span>.</ul>
        
        
        
     {% elif r_num == 3%}   
        <p class="intro"> 
        <span style="color: red; font-weight: bold;">Player Bs</span> 
        have <span style="font-weight: bold;">60 seconds</span> to select peace signs among 100 emojis. There are 50 
        <img src="{% static "global/victory.png" %}" width=30pts height=30pts /> (<span style="font-weight: bold;">peace signs</span>) 
        and 50 <img src="{% static "global/crossed.png" %}" width=30pts height=30pts /> (<span style="font-weight: bold;">fingers crossed signs</span>) 
        in each grid. Each selected <span style="font-weight: bold;">peace sign increases</span> the chances of winning by 0.5 percentage points. 
        Each selected <span style="font-weight: bold;">fingers crossed sign decreases</span> the chances of winning by 0.5 percentage points. 
        The winning chances will be from 25% (selecting all fingers crossed signs) to 75% (selecting all peace signs).
        </p>
        
        <p class="intro">
        <span style="color: blue; font-weight: bold;">EXAMPLE:</span> 
        if <span style="color: red; font-weight: bold;">Player B</span> 
        selected 49 peace signs and 3 fingers crossed signs, 
        Player A has a 73% (50+(49-3)*0.5) chance of winning and 
        a 27% (100-73) chance of losing. 
        </p>
        
                
        <p class="intro">
        <span style="color: red; font-weight: bold;">Player As</span> will have 
        an option to allocate the final outcome between herself/himself and
        <span style="color: red; font-weight: bold;">Player Bs</span>.
        </p>
    
    {% elif r_num == 4 %}
        <p class="intro" style="text-align: center; font-weight: bold;">
            {% if strike == 0 %} {% else %} <span style="color: blue; font-weight: bold;">Please recall:</span> {% endif %}
            You are randomly assigned to be <span style="color: red; font-weight: bold;">Player A</span>.
        </p>
        
        
            
        
            <p class="intro">
                You will play 6 rounds of the game. 
                In each round, you will be randomly rematched with a Player 
                B who has completed the emoji selection task. 
                The computer will run a lottery with probabilities determined 
                by the result of Player B’s emoji selection task. 
            </p>
            <hr style="width:50%;">
            <p class="intro">    
                You will play {{ case_count_2 }} rounds of <span style="font-weight: bold;">Lottery 1</span> 
                (<span style="color:green">Win - you get ${{ low_win }}</span> 
                or <span style="color:purple">Lose - you get ${{ low_lose }}</span>),
                and {{ case_count_3 }} rounds of <span style="font-weight: bold;">Lottery 2</span> 
                (<span style="color:green">Win - you get ${{ high_win }}</span> 
                or <span style="color:purple">Lose - you get ${{ high_lose }}</span>) in a random order.
            {% if treatment == "C" %}
                You will be shown which lottery you played and the outcome.
            {% elif treatment == "T1" %}
                You will be shown which lottery you played and the outcome,
                and by how much player B changed the winning probability.
            {% elif treatment == "T2" %}
                You will be shown which lottery you played and the outcome,
                and by how much player B changed your winning probability. 
                You will also watch a short video on how Player B worked to 
                change your winning probability. 
            {% endif %}    
                You then have an opportunity to share your earnings with Player B.
            </p>
         
            
        </p>
        <hr style="width:50%;">
        <p class="intro">
        One of the 6 rounds will be randomly selected to determine your earning. 
        Your final payment will be the money you decide to keep for yourself in that round, 
         $1 show-up fee and a payment of $1 after you complete the tasks and the post-game questionnaire.
        </p>
        
        <hr style="width:50%;">     
        <p class="intro">    
             

        Please read these instructions carefully. 
        The game will start after you correctly complete a short 
        comprehension quiz. 
        
        </p>
        <hr style="width:50%;">
        <p class="intro">   
        If you <span style="color: blue; font-weight: bold;">DO NOT</span> 
        answer all questions correctly after 
        <span style="color: blue; font-weight: bold;">two tries</span>, 
        you will be excluded from the experiment.

         
        </p>
    










        


    {% endif %}
  

 
    
    
    <hr style="width:50%;">
    
 {% next_button %}
    
</div>

{% endblock %}




{% block styles %}
    <style>
 
        
        p.intro{
            font-size: 18px; 
            text-align: justify;
                
                }
        ul.intro{
            font-size: 18px; 
            text-align: justify;
                
                }
        
    </style>
{% endblock %}