{% extends "global/Page.html" %}
{% load staticfiles otree %}
{% block title %}
The choice situation in part 1
{% 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;}

    #lowStack-mobile {display:none;}
    #highStack-mobile {display:none;}

    #lowStackB-mobile {display:none;}
    #highStackB-mobile {display:none;}

    .text-desktop{
        font-size:11pt;
    }

    @media screen and (max-width: 567px) {
        #portrait {display: block;}
        #landscape1{display:none;}
        #landscape2{display:none;}
        #lowStack {display:none;}
        #highStack {display:none;}
        #lowStack-mobile {display:none;}
        #highStack-mobile {display:none;}
    }
    @media screen and (min-width: 567px) and (max-width: 800px) {
        #portrait {display: none;}
        #landscape1 {display: block;}
        #landscape2 {display: block;}

        #lowStack-mobile {display:block;}
        #highStack-mobile {display:block;}
        #lowStackB-mobile {display:block;}
        #highStackB-mobile {display:block;}



        html{
            zoom:0.73;
        }






        .text-mobile{
            font-size:12px;
        }
        img{
            width:50%;
            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">
    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>
<!---------->
<!--version coinstack -->
<div class="card bg-light instructions text-mobile text-desktop">
<div id="landscape1" class="card-body">
    <div id="chunk1">
       <ul><br>
         <li>  In this part, you will face a total of <b> {{num_rounds}} decision rounds.</b></li><br>
     <li>   You will be asked to choose among different <b>distributions of points</b> between the <b>type 2 participants:</b><br>For simplicity, we will from now on label them <b><font color="mediumseagreen"> Participant 1</font></b> and  <b><font color="orange"> Participant 2</font></b>. </li><br>
      <li> You will have to choose between two options in every round: <b>Option A</b> or <b>Option B.</b> </li><br>
              <li> Your task is to choose the option you prefer. </li><br>
 <li> <b>Option A</b> is <b>the same</b> in all rounds. <b>Option B</b> <b>varies</b> between rounds. </li><br>


    </div>
    <div align="right"><input id="button1" type="button" class="btn btn-primary btn-large text-mobile" value="Continue" onclick="showNext();"></div>
    <br>



            <div id="chunk2" class="A">
                <table style="width:100%;text-align:justify; font-size: 10.5pt">
        <tr>
               <tr><center><img src="{% static 'Power/OptionAB.png' %}"> </tr></center>
                </table>


    </div>
     <div class="instructions-button" align="right"><input id="button2" type="button" class="btn btn-primary btn-large text-mobile" value="Continue" onclick="showNext2();"></div>
                &nbsp;<br>
                &nbsp;<br><br>


            <div id="chunk3" class="A">
               <b>REMARKS</b><ul><br>
      <li> <p><b><font color="mediumseagreen"> Participant 1</font></b> and  <b><font color="orange"> Participant 2</font></b>  always get 2.000 points in <b>Option A.</br> </li><br>
      <li> <font color="mediumseagreen"> Participant 1</font></b>  always gets 3.000 in <b>Option B</b>. The amount that <b><font color="orange"> Participant 2</font></b> gets in <b>Option B</b> varies from round to round. </li><br>


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

<!--- CONTROL QUESTIONS ----------------------------------------->
<div id="controlQuestions" style="visibility:hidden">
    <h2>Control Questions</h2>
<div class="card bg-light instructions text-mobile text-desktop">
<div id="landscape2" class="card-body">

    <input type="hidden" name="counterWrong_page1" id="counterWrong_page1" value="0">
    The following questions ensure that you have understood the instructions. Once you have answered all questions correctly, you will be directed to the next screen.<br><br>

<u>Note:</u> You have <b>three</b> tries to answer the questions correctly. After the third wrong answer you will not be able to finish the study and you will not receive any payment.
        <div class="rangeslider">
        <table class="rangeslider" style="width:100%;padding:15px" >
            <tr>
                <td valign="bottom" colspan="2"><b>Which of the following is correct?</b></td><br>
                <td colspan="2"><br><br><center>Wrong</center></td>
                <td colspan="2"><br><br><center>Correct</center></td>
            </tr>
            <br>
                <td colspan=6>If you choose Option A...</td><br>
            </tr>
                <tr height="50px">
                    <td width="2%"></td>
                    <td><i>Either <b><font color="mediumseagreen"> Participant 1</font></b> or  <b><font color="orange"> Participant 2</font></b> will get 2000 points.</i></td>
                    <td colspan="2"><center><input type="radio" name="ControlQuestion1" value="0"></center></td>
                    <td colspan="2"><center><input type="radio" name="ControlQuestion1" value="1"></center></td>
            </tr>
             <tr height="50px">
                    <td width="2%"></td>
                    <td><i>Both <b><font color="mediumseagreen"> Participant 1</font></b> and  <b><font color="orange"> Participant 2</font></b> will get 2000 points.</i></td>
                    <td colspan="2"><center><input type="radio" name="ControlQuestion2" value="0"></center></td>
                    <td colspan="2"><center><input type="radio" name="ControlQuestion2" value="1"></center></td>
            </tr>
                <td colspan=6></td>
            </tr>
                <td colspan=6>If you choose Option B...</td><br>
            </tr>
                <tr height="50px">
                    <td width="2%"></td>
                    <td><i> <b><font color="mediumseagreen"> Participant 1</font></b> always gets 3.000</font></b> points.</i></td>
                    <td colspan="2"><center><input type="radio" name="ControlQuestion3" value="0"></center></td>
                    <td colspan="2"><center><input type="radio" name="ControlQuestion3" value="1"></center></td>
            </tr>
             <tr height="50px">
                    <td width="2%"></td>
                    <td><i><b><font color="orange"> Participant 2</font></b> gets the same points in every round.</i></td>
                    <td colspan="2"><center><input type="radio" name="ControlQuestion4" value="0"></center></td>
                    <td colspan="2"><center><input type="radio" name="ControlQuestion4" value="1"></center></td>
            </tr>
            <!-- 0 means not true, 1 is true -->




        </table>

        <br><br><br>
        <p>
        </div>
    </div>
</div>
</div>
<br>
<div align="right"><input type="submit" onclick="return submitForm();" id="next" style="visibility:hidden" class="btn btn-primary btn-large text-mobile" value="Confirm my answers"></div>

<!-- tabswitches & focustime -->
<script src="{% static "Power/jquery-3.3.1.js" %}"></script>
<script src="{% static "Power/detect_tabswitch.js" %}"></script>
<input type="hidden" id="tab_desc_lotteries_part1" name="tab_desc_lotteries_part1" value="0">
<input type="hidden" id="focus_desc_lotteries_part1" name="focus_desc_lotteries_part1" value="0">
<input type="hidden" id="totaltime_desc_lotteries_part1" name="totaltime_desc_lotteries_part1" value="0">




<script type="text/javascript">

</script>
<script>


    document.getElementById("error_message").style.display = "none";
    var chunks=["chunk1","chunk2","chunk3"];
    var buttons=["button1","button2","understand","button3"];

   var index = 0;
    // makes a new chunk of instructions visible and hides the continue-button from the chunk before
    document.getElementById(chunks[index]).style.visibility = "visible";
    document.getElementById(buttons[index]).style.visibility = "visible";
    document.getElementById(chunks[index+1]).style.visibility = "hidden";
    document.getElementById(buttons[index+1]).style.visibility = "hidden";
    document.getElementById(chunks[index+2]).style.visibility = "hidden";
    document.getElementById(buttons[index+2]).style.visibility = "hidden";

    function showNext(){

        document.getElementById(chunks[index]).style.visibility = "visible";
        document.getElementById(buttons[index]).style.visibility = "hidden";
        document.getElementById(chunks[index+1]).style.visibility = "visible";
        document.getElementById(buttons[index+1]).style.visibility = "visible";
        document.getElementById(chunks[index+2]).style.visibility = "hidden";
        document.getElementById(buttons[index+2]).style.visibility = "hidden";

    }
    function showNext2(){
       document.getElementById(chunks[index]).style.visibility = "visible";
       document.getElementById(buttons[index]).style.visibility = "hidden";
       document.getElementById(chunks[index+1]).style.visibility = "visible";
       document.getElementById(buttons[index+1]).style.visibility = "hidden";
       document.getElementById(chunks[index+2]).style.visibility = "visible";
       document.getElementById(buttons[index+2]).style.visibility = "visible";
       document.getElementById(buttons[index+3]).style.visibility = "visible";

    }
  function goToControlQuestion(){
           if(document.getElementById("understand").checked){
            document.getElementById("controlQuestions").style.visibility = "visible";
            document.getElementById("next").style.visibility = "visible";
            window.scrollTo(0,1100);
        } else {
            document.getElementById("error_message").style.display = "block";
            window.scrollTo(0,0);
        }
    }
 // check answers of control questions
    var radio1 = document.getElementsByName('ControlQuestion1');
    var radio2 = document.getElementsByName('ControlQuestion2');
    var radio3 = document.getElementsByName('ControlQuestion3');
    var radio4 = document.getElementsByName('ControlQuestion4');
    var radios=[radio1,radio2,radio3,radio4];

    var counterWrong_page1=0;
    var check=0;

     // this function contains the information about the correct answers
    function checkRadios(){
        if(radios[0][0].checked){
            check=check+1;
        }
        if(radios[1][1].checked){
            check=check+1;
        }
        if(radios[2][1].checked){
            check=check+1;
        }
        if(radios[3][0].checked){
            check=check+1;
        }
       }
 // check answers and count how many times a wrong answer was given
    function submitForm() {
        var submit = false;
        check=0;
        checkRadios();
        if(check==4){
            submit=true;
            document.getElementById("counterWrong_page1").setAttribute('value', counterWrong_page1);
        }
        else{
            counterWrong_page1=counterWrong_page1+1;
            document.getElementById("error_message").style.display = "block";
            document.body.scrollTop = 0; // For Safari
            document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

            if(counterWrong_page1==1){
                document.getElementById("error_message").innerHTML="You did not answer every question correctly. This was your first try. You have two tries left.";
            } else if(counterWrong_page1==2){
                document.getElementById("error_message").innerHTML="You did not answer every question correctly. This was your second try. You have one try left.";

            } else if(counterWrong_page1==3){
                submit=true;
                radios[0][0].checked=true;
                radios[1][0].checked=true;
                radios[2][0].checked=true;
                radios[3][0].checked=true;
                document.getElementById("counterWrong_page1").setAttribute('value', counterWrong_page1);

            }
        }


        if(submit == true){
            if($tabswitches == 0){
                $time_total = (Date.now() - $start)/1000;
                $time_focus = $time_total;
            }
            document.getElementById("tab_desc_lotteries_part1").setAttribute('value', $tabswitches);
            document.getElementById("focus_desc_lotteries_part1").setAttribute('value', $time_focus);
            document.getElementById("totaltime_desc_lotteries_part1").setAttribute('value', $time_total);
        }

        return submit;
    }



</script>











{% endblock %}