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

{% block title %}
    How the payoffs for <b><font color="mediumseagreen"> Participant 1</font></b> and <b><font color="orange"> Participant 2</font></b> 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> At the end of the study,  <b>one of the {{num_rounds}} rounds  will be randomly selected for payment</b>. </li><br>
     <li>   The option you have chosen in this round determines the points for <b><font color="mediumseagreen"> Participant 1</font></b> and <b><font color="orange"> Participant 2</font></b>.</li><br>
     <li>   Please click <i>Continue</i> to proceed to the choice situations.
    </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_understand" name="tab_understand" value="0">
<input type="hidden" id="focus_understand" name="focus_understand" value="0">
<input type="hidden" id="totaltime_understand" name="totaltime_understand" 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_understand").setAttribute('value', $tabswitches);
        document.getElementById("focus_understand").setAttribute('value', $time_focus);
        document.getElementById("totaltime_understand").setAttribute('value', $time_total);

        return submit;
    }
</script>








{% endblock %}