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

{% block title %}
{{title | safe}}
{% endblock %}

{% block content %}
<style>
    #portrait {display: none;}
    #landscape {display: block;}
    img.image-desktop{
            width:100%;
            heigth:auto;
        }
    .text-desktop{
        font-size:11pt;
    }
    @media screen and (max-width: 567px) {
        #portrait {display: block;}
        #landscape{display:none;}
        html {
            zoom:0.7;
        }
        img.image-mobile{
            width: 20%;
            heigth: auto;
        }
    }
    @media screen and (min-width: 567px) and (max-width: 800px) {
        #portrait {display: none;}
        #landscape {display: block;}
        .text-mobile{
            font-size:12px;
        }

        html {
            zoom:0.7;
        }
        img.image-mobile {
            width: 100%;
            heigth: auto;
        }
    }
    .rangeslider {
    font-size:10pt;
    padding-bottom: 5em;
    }
    input[type="range"]{
        width:100%;
    }
    table.rangeslider td{
        border-bottom: 1px solid #ddd;
    }

</style>
<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>
<!-- Information for portrait viewers. They need to tilt to landscape-view in order to see the instructions -->
<div id="portrait" class="alert alert-danger">
    Please tilt your device to see the instructions.
</div>

<div id="landscape">
    <p align="right"><table style="width:100%"></table></p>
<div class="card bg-light instructions">
<div class="card-body" style="text-align:justify">
    <ul>
    <li> You will face <b>10 decision rounds</b>, where you decide to <b>choose yourself</b> or to <b>delegate</b>.<br><br>
        <li> The decision whether you choose yourself or delegate and let <b>participant type 3</b> choose has additional payoff consequences:<br>
        <ul>
            <li> <b>If you choose yourself</b>, you may either have to pay a <b>price</b> or you may receive a <b>bonus payment.</b><br>
            <li> <b>If you delegate</b>, there is no price or bonus.<br><br>
        </ul>
   <li> In the 10 rounds, <b>Options A</b> and <b>Option B</b> remain the same, while the <b>price</b> or <b>bonus</b> change between rounds.<br><br>

<li> The following picture illustrates the payoff consequences of your choice in a given decision situation:

    </ul>

    <br><br>

            <table width="100%">
                <tr>
                    <td colspan="2"><center ><img src="{% static 'Power/younegro.png' %}" style="width:80px"><br><b>You</b></center></td>
                </tr>
                <tr>
                    <td style="position:relative;left:100px;bottom:47.5px"><center><img src="{% static 'Power/arrowChoose.png' %}" style="width:40%"></center></td>
                    <td style="position:relative;right:100px;bottom:42.5px"><center><img src="{% static 'Power/arrowDelegate.png' %}" style="width:40%"></center></td>
                </tr>
                <tr>
                    <td style="position:relative;right:0px;bottom:50px"><center><img src="{% static 'Power/younegro.png' %}" style="width:80px"><br><b>You</b> choose an option yourself</center></td>
                    <td style="position:relative;left:0px;bottom:50px"><center ><img src="{% static 'Power/other.png' %}" style="width:80px"><br><b>Participant Type 3</b> chooses an option for you</center></td>
                </tr>
                <tr>
                    <td width="50%" style="position:relative; bottom:32.5px">
                        <center>
                            <b>Your Payoff:</b><br><br>
                        Your endowment of 2000 points <br><br>
                            <b>+ bonus</b> if there is a bonus in this situation<br>
                                or <br>
                             <b>- price</b> if there is a price in this situation<br>
                        </center>
                    </td>
                    <td width="50%" style="position:relative; bottom:80px">
                        <center>
                            <b>Your Payoff:</b><br><br>
                             Your endowment of 2000 points </center>
                    </td>
                </tr>
            </table>
    <br><br>
    <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 questions">
    </p>
</div>
</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" id="counterWrong" value="0">
    The following questions ensure that you have understood the instructions. Once you have answered the questions correctly, you will be directed to the next screen.<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.

    <br><br>
                <div class="rangeslider">
                <table class="rangeslider" style="width:100%;padding:15px" >
                        <tr>
                        <td valign="bottom"><b>Is it correct that...?</b></td>
                        <td><br><br><center>Wrong</center></td>
                        <td><br><br><center>Correct</center></td>
                    </tr>

                    <tr height="40px">
                        <td style="padding: 0px 20px"><i><b><font color="#b7458d"> Participant 3</font></b> and <b><font color="#4d8ecd"> Participant 4</font></b> receive the payment with certainty in the selected round.</i></td>
                            <td><center><input type="radio" name="ControlQuestion1" value="0"></center></td>
                            <td><center><input type="radio" name="ControlQuestion1" value="1"></center></td>
                    </tr>

                                            <tr>
                        <td valign="bottom"><b>Is it correct that...?</b></td>
                        <td><br><br><center>Wrong</center></td>
                        <td><br><br><center>Correct</center></td>
                    </tr>
                            <tr height="40px">
                            <td style="padding: 0px 20px"><i>The price for choosing an option is the same in all situations. </i></td>
                            <td><center><input type="radio" name="ControlQuestion2" value="0"></center></td>
                            <td><center><input type="radio" name="ControlQuestion2" value="1"></center></td>
                    </tr>
                    <tr height="40px">
                        <td style="padding: 0px 20px"><i>There can be either a price or a bonus payment associated with choosing an option yourself.</i></td>
                            <td><center><input type="radio" name="ControlQuestion3" value="0"></center></td>
                            <td><center><input type="radio" name="ControlQuestion3" value="1"></center></td>
                    </tr>
                    <tr><td><br><br><br>
                    <i>Please choose the correct answer:</i></td> </tr>
                    <tr height="70px">
                    <td valign="bottom" colspan="3"><b>Consider a situation in which there is a bonus of 100 points when you choose yourself. If you choose to let the participant type 3 to choose an option, then your payoff will be...</b></td>
                    </tr>
                            <tr height="40px">
                            <td colspan="2" style="padding: 0px 20px"><i>Your initial endowment: 2000 points.</i></td>
                            <td><center><input type="radio" name="ControlQuestion4" value="0"></center></td>
                    </tr>
                    <tr height="40px">
                        <td colspan="2"style="padding: 0px 20px"><i>Your initial endowment plus the bonus: 2100 points.</i></td>
                            <td><center><input type="radio" name="ControlQuestion4" value="1"></center></td>
                    </tr>
                    <tr height="70px">
                    <td valign="bottom" colspan="3"><b>Consider a situation in which you have to pay a price of 200 if you choose yourself. If you decide to choose an option yourself, then your payoff will be ... </b></td>
                    </tr>
                            <tr height="40px">
                            <td colspan="2" style="padding: 0px 20px"><i>Your initial endowment: 2000 points. </i></td>
                            <td><center><input type="radio" name="ControlQuestion5" value="0"></center></td>
                    </tr>
                    <tr height="40px">
                        <td colspan="2"style="padding: 0px 20px"><i>Your initial endowment minus the price: 1800 points.</i></td>
                            <td><center><input type="radio" name="ControlQuestion5" value="1"></center></td>
                    </tr>
                </table>
                <br><br>

        <br><br><br>
        <p>
        </div>
    </div>
</div>
</div>
<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_choice_part2" name="tab_desc_choice_part2" value="0">
<input type="hidden" id="focus_desc_choice_part2" name="focus_desc_choice_part2" value="0">
<input type="hidden" id="totaltime_desc_choice_part2" name="totaltime_desc_choice_part2" value="0">

<script>
    document.getElementById("error_message").style.display = "none";
    var chunks=["chunk2","chunk3","chunk4","chunk5","chunk5_both","chunk6","chunk7","chunk8","chunk9"];
    var buttons=["button1","button2","button3","button4","button5","button5_both","button6","button7","button8"];

    var index = 0;

    function showNext(){
        document.getElementById(chunks[index]).style.visibility = "visible";
        index = index + 1;
        document.getElementById(buttons[index-1]).style.visibility = "hidden";

        // make "next"-button visible to continue
        if(index == buttons.length){
            document.getElementById("confirm").style.visibility = "visible";
        }

    }

    function goToControlQuestion(){
           if(document.getElementById("understand").checked){
            document.getElementById("controlQuestions").style.visibility = "visible";
            document.getElementById("next").style.visibility = "visible";
        } 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 radio5 = document.getElementsByName('ControlQuestion5');
    var radios=[radio1,radio2,radio3,radio4,radio5];

    var counterWrong=0;
    var check=0;

    // this function contains the information about the correct answers
    function checkRadios(){
        if(radios[0][1].checked){
            check=check+1;
        }
        if(radios[1][0].checked){
            check=check+1;
        }
        if(radios[2][1].checked){
            check=check+1;
        }
        if(radios[3][0].checked){
            check=check+1;
        }
        if(radios[4][1].checked){
            check=check+1;

       }
}
    // this function checks the answers
    function submitForm() {
        var submit = false;
        check=0;
        checkRadios();
        if(check==5){
            submit=true;
            document.getElementById("counterWrong").setAttribute('value', counterWrong);
            if($tabswitches == 0){
                    $time_total = (Date.now() - $start)/1000;
                    $time_focus = $time_total;
                }

                document.getElementById("tab_desc_choice_part2").setAttribute('value', $tabswitches);
                document.getElementById("focus_desc_choice_part2").setAttribute('value', $time_focus);
                document.getElementById("totaltime_desc_choice_part2").setAttribute('value', $time_total);
        }
        else{
            counterWrong=counterWrong+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==1){
                document.getElementById("error_message").innerHTML="You did not answer the questions correctly. This was your first try. You have two tries left.";
            } else if(counterWrong==2){
                document.getElementById("error_message").innerHTML="You did not answer the questions correctly. This was your second try. You have one try left.";

            } else if(counterWrong==3){
                submit=true;
                radios[0][0].checked=true;
                radios[1][0].checked=true;
                radios[2][0].checked=true;
                radios[3][0].checked=true;
                radios[4][0].checked=true;
                document.getElementById("counterWrong").setAttribute('value', counterWrong);
                if($tabswitches == 0){
                    $time_total = (Date.now() - $start)/1000;
                    $time_focus = $time_total;
                }

                document.getElementById("tab_desc_choice_part2").setAttribute('value', $tabswitches);
                document.getElementById("focus_desc_choice_part2").setAttribute('value', $time_focus);
                document.getElementById("totaltime_desc_choice_part2").setAttribute('value', $time_total);

            }
        }
        return submit;
    }
</script>

    </div>
{% endblock %}