{% 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> At the end of the study, for each <b>type 1</b> participant,  <b>one of the 10 rounds</b> will be randomly selected to determine: </li><br>
       <ul>
     <li>   Your payment from part 2.<br><br>
       <li> The payments for <b><font color="#b7458d"> Participant 3</font></b> and <b><font color="#4d8ecd"> Participant 4</font></b>. </li><br>
       <li>  <b><font color="#b7458d"> Participant 3</font></b> and <b><font color="#4d8ecd"> Participant 4</font></b> <b> receive the payment with certainty.</b></ul><br><br>

   <li>   Thus, we will recruit a <b>type 3</b> participant as well as the two <b>type 2</b> participants,  <b><font color="#b7458d"> Participant 3</font></b> and <b><font color="#4d8ecd"> Participant 4</font></b>, with <b>certainty</b>.</ul><br><br>

<div align="right"><input id="button2" type="submit" onclick="return submitForm();" class="btn btn-primary btn-large" value="Continue"></inputbutton></div>
        <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>-->
    </p>
</div>
</div>

<script src="{% static "Power/jquery-3.3.1.js" %}"></script>
<script src="{% static "Power/detect_tabswitch.js" %}"></script>



<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;
        }


        return submit;
    }
</script>








{% endblock %}