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

{% block title %}
    Welcome to the experiment!
{% endblock %}

{% block content %}
<link rel="stylesheet" href='{{ static "style/global_style.css"}}'>


  <h3 style="text-align: left">Instruction 1/3</h3>

</div>
<hr>

<p>
    <ul>
    <li style="color:darkred;">
        Please read and follow all the instructions carefully!
    </li>
    <li style="color:darkred;">
        There will be comprehension checks. If you fail those, you will not be able to participate in the study.

    </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>
    <li style="color:darkred;">
        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="next1" onclick="next(1)">Next</button>
</div>

<br>
<div id="part2" style="display: none">
    <hr>
<h3>Overview</h3>
<p>
    <ul>
    <li>
        This study consists of 32 rounds.
    </li>
    <li>
        After you complete the study, you will receive a $5 base payment.
    </li>
    <li>
        In addition, your answer in each round could determine the likelihood that you will earn the additional bonus of $10.
           </li>
    <li>
        In each round, to <b>maximize your chance</b> of receiving the bonus, you should <b>simply always submit your best answer</b>.
    </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 = "submit" >Next Page</button>

</div>
</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 }}