{{ block title }}{{ endblock }}

{{ block style }}
<style>
    p {
        text-align:justify
    }
</style>
{{ endblock }}

{% block content %}
<h2 style="text-align: center">Understanding questions</h2>

<ol>
    <li>
        <b>How many rounds will be paid?</b><br>
        <form>
            <input type="radio" name="q1" value="a"> All rounds<br>
            <input type="radio" name="q1" value="b"> Four randomly selected rounds
        </form>
    </li>
    <li>
        <b>The manager broke the law. What happens?</b><br>
        <form>
            <input type="radio" name="q2" value="a"> Firm output gets doubled, members of the public do not lose earnings<br>
            <input type="radio" name="q2" value="b"> Firm output gets doubled, members of the public lose earnings<br>
            <input type="radio" name="q2" value="c"> Firm output does not get doubled, members of the public do not lose earnings<br>
            <input type="radio" name="q2" value="d"> Firm output does not get doubled, members of the public lose earnings<br>
        </form>
    </li>
    <li>
        <b>The manager did not break the law. They solved less than {{C.MINIMUM_CORRECT}} multiplication questions correctly. What happens?</b><br>
        <form>
            <input type="radio" name="q3" value="a"> Firm output gets doubled, members of the public do not lose earnings<br>
            <input type="radio" name="q3" value="b"> Firm output gets doubled, members of the public lose earnings<br>
            <input type="radio" name="q3" value="c"> Firm output does not get doubled, members of the public do not lose earnings<br>
            <input type="radio" name="q3" value="d"> Firm output does not get doubled, members of the public lose earnings<br>
        </form>
    </li>
    <li>
        <b>The manager did not break the law. They solved more than {{C.MINIMUM_CORRECT}} multiplication questions correctly. What happens?</b><br>
        <form>
            <input type="radio" name="q4" value="a"> Firm output gets doubled, members of the public do not lose earnings<br>
            <input type="radio" name="q4" value="b"> Firm output gets doubled, members of the public lose earnings<br>
            <input type="radio" name="q4" value="c"> Firm output does not get doubled, members of the public do not lose earnings<br>
            <input type="radio" name="q4" value="d"> Firm output does not get doubled, members of the public lose earnings<br>
        </form>
    </li>
    <li>
        <b>The selected employee blew the whistle. The manager broke the law. What happens?</b><br>
        <form>
            <input type="radio" name="q5" value="a"> Employee loses points, manager loses points <br>
            <input type="radio" name="q5" value="b"> Employee does not lose points, manager loses points <br>
            <input type="radio" name="q5" value="c"> Employee loses points, manager does not lose points <br>
            <input type="radio" name="q5" value="d"> Employee does not lose points, manager does not lose points <br>
        </form>
    </li>
    <li>
        <b>The selected employee blew the whistle. The manager did not break the law. What happens?</b><br>
        <form>
            <input type="radio" name="q6" value="a"> Employee loses points, manager loses points <br>
            <input type="radio" name="q6" value="b"> Employee does not lose points, manager loses points <br>
            <input type="radio" name="q6" value="c"> Employee loses points, manager does not lose points <br>
            <input type="radio" name="q6" value="d"> Employee does not lose points, manager does not lose points <br>
        </form>
    </li>
</ol>

<p>
    Click the "Check" button below to check your answers.
    You can only proceed to the next page if all answers are correct.
    Please raise your hand if you are facing any difficulties.
</p>
<center>

<button id="check" type="button" class="otree-btn-next btn btn-primary" onclick="Check()">Check</button>

<p id="message"></p>

<button id='next' class="otree-btn-next btn btn-primary" style="visibility:hidden" >Next</button>
</center>

{% endblock %}

{% block scripts %}

<script>
function Check() {
    var q1 = document.querySelector('input[name="q1"]:checked').value;
    var q2 = document.querySelector('input[name="q2"]:checked').value;
    var q3 = document.querySelector('input[name="q3"]:checked').value;
    var q4 = document.querySelector('input[name="q4"]:checked').value;
    var q5 = document.querySelector('input[name="q5"]:checked').value;
    var q6 = document.querySelector('input[name="q6"]:checked').value;

    if ((q1 != 'b') || (q2 != 'b') || (q3 != 'c') || (q4 != 'a') || (q5 != 'a') || (q6 != 'd'))
        { text = 'At least one answer is wrong!'; }
    else {
        text = 'All answers are correct!';
    }

    if (text == 'All answers are correct!') {
        document.getElementById('next').style.visibility = 'visible'; }
    else {
        document.getElementById('next').style.visibility = 'hidden';
    }

    document.getElementById('message').innerHTML = text;
}
</script>

{% endblock %}