{% block app_styles %}
<style>
    p, ul{
       font-size: 20px;
    }
    h1, h2, h3{
        text-align: center;
    }
    label {
        display: inline;
        padding: 0px 1em 0px 8px;
    }
</style>
{% endblock %}

{{ block content }}

<h3>Welcome</h3>

<p>
    <ul>
    <li style="color:darkred;">
        Please read and follow all the instructions carefully! You will be asked to answer comprehension questions about these instructions and you will not be able to proceed unless you answer all the questions correctly. It is important that you understand the instructions well since this can help you make better decisions and hence earn more money.
    </li>
    <li style="color:darkred;">
        You will be asked to answer comprehension questions about these instructions and you will not be able to proceed unless you answer all the questions correctly.
    </li>
    <li style="color:darkred;">
        It is important that you understand the instructions well since this can help you make better decisions and hence earn more money.
    </li>
</ul>
</p>

<div style="text-align: right">
    <button class="otree-btn-next btn btn-primary" type = "button" id="next1" onclick="next(1)">Next</button>
</div>

<br>
<div id="part2" style="display: none">
    <hr>
<h3>Overview</h3>

<p >
    <ul>
    <li>Most participants complete this study for <b>around half an hour</b>.
    </li>
    <li>
        Please start this study only if you have that much time <b>in a single session</b>.
    </li>
    <li>
        If you do not complete the study, we will not be able to pay you.
    </li>
</ul>
</p>
<div style="text-align: right">
    <button class="otree-btn-next btn btn-primary" type = "button" id="next2" onclick="next(2)">Next</button>
</div>
</div>
<div id="part3" style="display: none">
<p>
    <ul>
    <li>
        This study consists of three blocks with a total of 11 guessing tasks.
    </li>
    <li>
        Each of Blocks 1 and 2 consists of 5 tasks. Block 3 has 1 task.
    </li>
    <li>
        After you complete the study, you will receive a $5.00 base payment.
    </li>
    <li>
        In addition, the computer randomly selects one in two participants to receive an additional bonus payment based on your decisions.
    </li>
    <li>
        If you are selected, the computer will use the following Bonus Rule to determine whether you get the bonus.
    </li>
</ul>
</p>

<div style="text-align: right">
    <button class="otree-btn-next btn btn-primary" type = "button" id="next3" onclick="next(3)">Next</button>

</div>
</div>
<br>
<div id="part4" style="display: none">
<h3>Bonus Rule</h3>

<p>
    <ul>
    <li>
        The computer randomly selects one task to count for bonus.
    </li>
    <li>
        Your submitted guess  in that task will determine your chance of earning the $5.00 bonus.
    </li>
    <li>
        We designed the bonus rule to make sure that <b>you can secure the largest chance of winning the prize by reporting your best guess</b>.

    </li>
</ul>
</p>

<div style="text-align: right">
    <button class="otree-btn-next btn btn-primary" type = "button" id="next4" onclick="next(4)">Next</button>

</div>
</div>
<div id="part5" style="display: none">
<p>
    <ul>
    <li>
        Therefore, in each task, to maximize your chance of receiving the bonus, you should simply always submit your best guess.
    </li>
    <li>
        Because we only pay you based on a single guess of yours, there is no point for you to strategize across tasks.
    </li>
    <li>
        No need to rush. Take your time to process each part carefully.
    </li>
</ul>
</p>
<div style="text-align: right">
    <button class="otree-btn-next btn btn-primary" type = "button" id="next5" onclick="next(5)">Next</button>

</div>
</div>
<div id="part6" style="display: none">
    <hr>
    <h3>Check Your Understanding</h3>
    <p>
        Before you proceed, we need to ask you some questions to make sure you understand the instructions. You have to get all the questions correct to proceed.
    </p>
    <p>
        <b>Question 1</b><br>
        How is your bonus determined if you are selected?
        <br>
        <input type="radio" name="CQ1" value=1><label>There are 11 tasks in total, and my submitted guess in every one of them will get paid. Thus, I can strategize across tasks to hedge.
    </label><br>
        <input type="radio" name="CQ1" value=2><label>There are 11 tasks in total. The computer will randomly select one of them, and my bonus will depend on my submitted guess to this one task. Thus, there is no point for me in strategizing across tasks.</label><br>
    </p>

    <p>
        <b>Question 2</b><br>
        How do you maximize your chance of winning the $5 bonus in the task?
        <br>
        <input type="radio" name="CQ2" value=1><label>Randomly select a number to submit</label><br>
        <input type="radio" name="CQ2" value=2><label>Always submit 0</label><br>
        <input type="radio" name="CQ2" value=3><label>Always submit the number in the middle of the slider bar
    </label><br>
        <input type="radio" name="CQ2" value=4><label>Always submit the maximum number of the slider bar
    </label><br>
        <input type="radio" name="CQ2" value=5><label>Submit the best guess I can make
    </label><br>
    </p>
    <div style="text-align: right">
        <p><button class="otree-btn-next btn btn-primary" type = "button"  onclick="check_quiz()" >Check Answer</button></p>
    </div>
</div>
<div id="next_part" style="visibility:hidden; text-align: right">
    <button class="otree-btn-next btn btn-primary" type = "submit" >Next</button>
</div>

{{ endblock }}

{{block script}}
<script>
    function next(x){
        document.getElementById("next"+x).style.display = "none";
        document.getElementById("part"+(x+1)).style.display = "inline";
    }

    check_quiz = function(){
        var radio1 = document.querySelector('input[name="CQ1"]:checked');
        var radio2 = document.querySelector('input[name="CQ2"]:checked');
        if(radio1==null){
            alert("Please answer Question 1!");
        }else if(radio2==null){
            alert("Please answer Question 2!");
        }
        else{
            var answer1 = radio1.value;
            var answer2 = radio2.value;
            if (answer1!=2){
                alert("Please check your answer for Question 1!");
            }else if (answer2!=5){
                alert("Please check your answer for Question 2!");
            }else {
                alert("Your are correct!")
                document.getElementById("next_part").style.visibility="visible";
            }
        }
    }
</script>
{{endblock}}