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

{% block title %}
    INSTRUCTIONS / 2: GETTING ADVICE
{% endblock %}

{% block content %}
<p>
    Before you make your assessment, you can consult an expert.<br/><br/>

    The expert you consult might be informed about the ball drawn by the computer. If he knows the color, he will
    report it to you. If he does not know the color, he will simply report to you his preferred color.<br/><br/>

    There are {{ Constants.total }} <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span> experts and {{ Constants.total }}
    <span style="color: red;"><b>{{ Constants.colour2 }}</b></span>
    experts. You choose whether you want to hear from a {{ Constants.colour1 }} expert or a {{ Constants.colour2 }}
    expert. If you choose a {{ Constants.colour1 }} expert, the computer randomly picks one
    {{ Constants.colour1 }} expert to advise you.
    If you choose to hear from a {{ Constants.colour2 }} expert, the computer randomly picks one
    {{ Constants.colour2 }} expert.<br/><br/>

    {% if player.treatment == 'T1' or player.treatment == 'T4' %}

        <p>If you get advice from a <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span> expert:</p>

        <table class="table">
            <tr>
                <td><img src="{% static 'information_acquisition/BlueExpert.png' %}"/></td>
                <td>
                    <ul>
                        <li><b><span style="color: red;"><u>5 out of 10</u></span></b> <span style="color: blue;"><b>BLUE</b></span>
                            experts are informed about the ball </li>
                        <li>If the ball is BLUE:
                            <ul>
                                <li>An informed BLUE expert says “The ball is BLUE”</li>
                                <li>An uninformed BLUE expert says “The ball is BLUE”</li>
                             </ul>
                        </li>

                        <li>If the ball is RED:
                            <ul>
                                <li>An informed BLUE expert says “The ball is RED”</li>
                                <li>An uninformed BLUE expert says “The ball is BLUE”</li>
                            </ul>
                        </li>

                    </ul>
                </td>
            </tr>
        </table>

        <p>
        If you get advice from a <span style="color: red;"><b>{{ Constants.colour2 }}</b></span> expert:</p>

        <table class="table">
            <tr>
                <td><img src="{% static 'information_acquisition/RedExpert.png' %}"/></td>
                <td>
                    <ul>
                        <li><b><span style="color: red;"><u>5 out of 10</u></span></b> <span style="color: red;"><b>RED</b></span>
                            experts are informed about the ball </li>
            <li>If the ball is BLUE:
                    <ul>
                        <li>An informed RED expert says “The ball is BLUE”</li>
                        <li>An uninformed RED expert says “The ball is RED”</li>
                    </ul>
            </li>

            <li>If the ball is RED:
                    <ul>
                        <li>An informed RED expert says “The ball is RED”</li>
                        <li>An uninformed RED expert says “The ball is RED”</li>
                    </ul>
            </li>

        </ul>
                </td>
            </tr>
        </table>

    {% endif %}


    {% if player.treatment == 'T2' or player.treatment == 'T5' %}

        <p>If you get advice from a <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span> expert:</p>

        <table class="table">
            <tr>
                <td><img src="{% static 'information_acquisition/BlueExpert.png' %}"/></td>
                <td>
                    <ul>
                        <li><b><span style="color: red;"><u>3 out of 10</u></span></b> <span style="color: blue;"><b>BLUE</b></span>
                            experts are informed about the ball </li>
                        <li>If the ball is BLUE:
                            <ul>
                                <li>An informed BLUE expert says “The ball is BLUE”</li>
                                <li>An uninformed BLUE expert says “The ball is BLUE”</li>
                             </ul>
                        </li>

                        <li>If the ball is RED:
                            <ul>
                                <li>An informed BLUE expert says “The ball is RED”</li>
                                <li>An uninformed BLUE expert says “The ball is BLUE”</li>
                            </ul>
                        </li>

                    </ul>
                </td>
            </tr>
        </table>


        <p>
        If you get advice from a <span style="color: red;"><b>{{ Constants.colour2 }}</b></span> expert:</p>

        <table class="table">
            <tr>
                <td><img src="{% static 'information_acquisition/RedExpert.png' %}"/></td>
                <td>
                    <ul>
                        <li><b><span style="color: red;"><u>7 out of 10</u></span></b> <span style="color: red;"><b>RED</b></span>
                            experts are informed about the ball </li>
                        <li>If the ball is BLUE:
                            <ul>
                                <li>An informed RED expert says “The ball is BLUE”</li>
                                <li>An uninformed RED expert says “The ball is RED”</li>
                            </ul>
                        </li>

                        <li>If the ball is RED:
                            <ul>
                                <li>An informed RED expert says “The ball is RED”</li>
                                <li>An uninformed RED expert says “The ball is RED”</li>
                            </ul>
                        </li>
                    </ul>
                </td>
            </tr>
        </table>

    {% endif %}

</p>


    <p>Before proceeding to the next page, please answer the comprehension question below:<br/><br/>

    <b>If a <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span> expert says "The ball is <span style="color: red;"><b>{{ Constants.colour2 }}</b></span>", which of the following is true?</b></p>

    <table class="table">
    <tr>
        <td><input type='radio' name='feedback2' value='answer1' required></td><th>You know for sure that the ball is <span style="color: blue;"><b>BLUE</b></span></th>
    </tr>
    <tr>

        <td><input type='radio' name='feedback2' value='answer2' required></td><th>You know for sure that the ball is <span style="color: red;"><b>RED</b></span></th>

    </tr>
        <tr>
        <td><input type='radio' name='feedback2' value='answer3' required></td><th>The ball is more likely to be <span style="color: red;"><b>RED</b></span> but you do not know this for sure.</th>
        </tr>
          <tr>
        <td><input type='radio' name='feedback2' value='answer4' required></td><th>The ball is more likely to be <span style="color: blue;"><b>BLUE</b></span> but you do not know this for sure.</th>
        </tr>
    </table>

    <p>
        <input class="btn btn-primary btn-large btn-primary next-button" type="submit" value="Next"/>
    </p>

{% endblock %}

{% block styles %}
    <style type="text/css">
        img {
            display: block;
            margin: auto;
            width: 200px;
            height: auto;
        }
        p {
            text-align: justify;
            font-size: 1.3vw;
        }
          ul {
            text-align: justify;
            font-size: 1.3vw;
        }
        li {
                padding-bottom: 0.35vw;
        }

        th, td {
            text-align: left;
            font-size: 1.3vw;
            font-weight: 400;
        }
    </style>
{% endblock %}


{% block scripts %}
   <script type="text/javascript">

    var showButton = document.getElementsByClassName("btn btn-primary btn-large btn-primary next-button")[0];
    var counter = 5;
    var newElement = document.createElement("p");
    newElement.innerHTML = "Please spend <u>at least</u> " + counter + " seconds on this page. Read the instructions carefully! :-) ";
    var interval;

    showButton.parentNode.replaceChild(newElement, showButton);

    interval = setInterval(function() {
        counter--;
        if(counter < 0) {
            newElement.parentNode.replaceChild(showButton, newElement);
            clearInterval(interval);
        } else {
            newElement.innerHTML = "Please spend <u>at least</u> " + counter + " seconds on this page. Read the instructions carefully! :-) ";
        }
    }, 1000);

    </script>

{% endblock %}