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

{% block title %}
    How the payoffs are chosen.
{% endblock %}

{% block content %}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0, user-scalable=1">

<style>
    td.A {
        visibility:hidden;
        width:50%;
        padding-right:60px;
    }
    td.B {
        visibility:hidden;
        width:50%;
        padding-right:60px;
        vertical-align:top;
    }
    #portrait {display: none;}
    #landscape1 {display: block;}
    #landscape2 {display: block;}
    .text-desktop{
        font-size:11pt;
    }

    @media screen and (max-width: 567px) {
        #portrait {display: block;}
        #landscape1{display:none;}
        #landscape2{display:none;}
    }
    @media screen and (min-width: 567px) and (max-width: 737px) {
        #portrait {display: none;}
        #landscape1 {display: block;}
        #landscape2 {display: block;}
        .text-mobile{
            font-size:12px;
        }
        img{
            width:80%;
            heigth:auto;
        }
    }


    .button {
        position: fixed;
        top: 50%;
        right: 00%;
        bottom: 47%;
        left: 700px;
        content: ' ';
  }
  .instructions-button {
    padding-top: 20px;
  }
  .rangeslider {
    font-size:10pt;
    padding-bottom: 5em;
}
input[type="range"]{
  width:100%;
}
table.rangeslider td{
    border-bottom: 1px solid #ddd;
}

</style>
<!-- Information for portrait viewers. They need to tilt to landscape-view in order to see the instructions -->
<div class="alert alert-danger" id="error_message" style="display:none">
    You have to tick the checkbox next to <i>I understood the instructions</i>  in order to proceed.
</div>
<div id="portrait" class="alert alert-danger">
    Please tilt your device to see the instructions.
</div>

<div class="card bg-light instructions">
<div class="card-body">
    <div id="chunk10">

   <ul>
       <li> You have answered the questions correctly. </li><br>


       <li>If you decided to <b>choose yourself</b> in this situation, you will be asked to select <b>Option A</b> or <b>Option B</b> at the end of part 2.<br><br>
       <li>The chosen Option will determine your payment from part 2 and the payments for<b><font color="#b7458d"> Participant 3</font></b> and <b><font color="#4d8ecd"> Participant 4</font></b>.<br><br>
       <li>If you decided <b>to delegate</b> in this situation, <b>the type 3 participant</b> will be asked to select Option A or Option B.<br><br>
       <li>The chosen Option will determine the payments for <b><font color="#b7458d"> Participant 3</font></b> and <b><font color="#4d8ecd"> Participant 4</font></b>.<br><br>
       <li> <u>Remember:</u> The <b>type 3</b> participant earns a <b>fixed base payment</b> that is independent of whether or not you delegate, independent of the selected round, and independent of the choices he or she makes on your behalf.<br><br>

        <li>You will be informed about his/her choice at the end of the study.<br><br>

    </div>
 <p align="right" style="position:relative;right:30px" id="confirm">
    <input type="checkbox" name="understand" id="understand" value="yes">&nbsp  I understood the instructions
        <br><br>
    <!--<input id="button9" onclick="goToControlQuestion();" type="button" class="btn btn-primary btn-large text-mobile" value="Continue to control question">-->
    <!--<input type="button" onclick="displayPreQuestion();" class="btn btn-primary btn-large text-mobile" value="Continue">-->
        <!--<div align="right"><button class="btn btn-primary btn-large">Continue</button></div>-->
    <div align="right"><input type="submit" onclick="return submitForm();" class="btn btn-primary btn-large" value="Continue"></inputbutton></div>
    </p>
</div>
</div>

<script src="{% static "Power/jquery-3.3.1.js" %}"></script>
<script src="{% static "Power/detect_tabswitch.js" %}"></script>
<input type="hidden" id="tab_desc_rlim_part2" name="tab_desc_rlim_part2" value="0">
<input type="hidden" id="focus_desc_rlim_part2" name="focus_desc_rlim_part2" value="0">
<input type="hidden" id="totaltime_desc_rlim_part2" name="totaltime_desc_rlim_part2" value="0">


<script>
document.getElementById("error_message").style.display = "none";
    function submitForm() {
        var submit = false;
        if(document.getElementById("understand").checked){
            submit=true;
        } else {
            document.getElementById("error_message").style.display = "block";
        }

        if($tabswitches == 0){
            $time_total = (Date.now() - $start)/1000;
            $time_focus = $time_total;
        }

        document.getElementById("tab_desc_rlim_part2").setAttribute('value', $tabswitches);
        document.getElementById("focus_desc_rlim_part2").setAttribute('value', $time_focus);
        document.getElementById("totaltime_desc_rlim_part2").setAttribute('value', $time_total);

        return submit;
    }
</script>








{% endblock %}