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

{% block title %}
    FEEDBACK / 2
{% endblock %}

{% block content %}

    {% if player.feedback2 == 'answer1' %}
        <p>
            <span style="color: red;"><b>Incorrect! </b></span><br><br>
            A BLUE expert says “The ball is RED” only if he is informed and the ball is, in fact, RED. In all other
            cases, he says “The ball is BLUE”. <br/><br/>

            This means that, if you get advise from a BLUE expert, and he says
            "The ball is RED", then you know for sure that the ball is RED. Remember that not all BLUE experts are informed (only
            {% if player.treatment == 'T1' or player.treatment == 'T4' %}
                5 out of 10).
            {% endif %}
            {% if player.treatment == 'T2' or player.treatment == 'T5' %}
                3 out of 10).
            {% endif %}

            <br/><br/>

            Similarly, a RED expert says “The ball is BLUE” only if he is informed and the ball is, in fact, BLUE.
            In all other cases, he says “The ball is RED”. <br/><br/>

            This means that, if you get advise from a RED expert, and
            he says "The ball is BLUE", then you know for sure that the ball is BLUE. Remember that not all RED experts are informed (only
            {% if player.treatment == 'T1' or player.treatment == 'T4' %}
                5 out of 10).
            {% endif %}
            {% if player.treatment == 'T2' or player.treatment == 'T5' %}
                7 out of 10).
            {% endif %}

        </p>
    {% endif %}

    {% if player.feedback2 == 'answer2' %}
        <p>
            <span style="color: green;"><b>Correct! </b></span><br><br>
            A BLUE expert says “The ball is RED” only if he is informed and the ball is, in fact, RED. In all other
            cases, he says “The ball is BLUE”. <br/><br/>

            This means that, if you get advise from a BLUE expert, and he says
            "The ball is RED", then you know for sure that the ball is RED. Remember that not all BLUE experts are informed (only
            {% if player.treatment == 'T1' or player.treatment == 'T4' %}
                5 out of 10).
            {% endif %}
            {% if player.treatment == 'T2' or player.treatment == 'T5' %}
                3 out of 10).
            {% endif %}

            <br/><br/>

            Similarly, a RED expert says “The ball is BLUE” only if he is informed and the ball is, in fact, BLUE.
            In all other cases, he says “The ball is RED”. <br/><br/>

            This means that, if you get advise from a RED expert, and
            he says "The ball is BLUE", then you know for sure that the ball is BLUE. Remember that not all RED experts are informed (only
            {% if player.treatment == 'T1' or player.treatment == 'T4' %}
                5 out of 10).
            {% endif %}
            {% if player.treatment == 'T2' or player.treatment == 'T5' %}
                7 out of 10).
            {% endif %}

        </p>
    {% endif %}

    {% if player.feedback2 == 'answer3' %}
        <p>
            <span style="color: red;"><b>Incorrect! </b></span><br><br>
            A BLUE expert says “The ball is RED” only if he is informed and the ball is, in fact, RED. In all other
            cases, he says “The ball is BLUE”. <br/><br/>

            This means that, if you get advise from a BLUE expert, and he says
            "The ball is RED", then you know for sure that the ball is RED. Remember that not all BLUE experts are informed (only
            {% if player.treatment == 'T1' or player.treatment == 'T4' %}
                5 out of 10).
            {% endif %}
            {% if player.treatment == 'T2' or player.treatment == 'T5' %}
                3 out of 10).
            {% endif %}

            <br/><br/>

            Similarly, a RED expert says “The ball is BLUE” only if he is informed and the ball is, in fact, BLUE.
            In all other cases, he says “The ball is RED”. <br/><br/>

            This means that, if you get advise from a RED expert, and
            he says "The ball is BLUE", then you know for sure that the ball is BLUE. Remember that not all RED experts are informed (only
            {% if player.treatment == 'T1' or player.treatment == 'T4' %}
                5 out of 10).
            {% endif %}
            {% if player.treatment == 'T2' or player.treatment == 'T5' %}
                7 out of 10).
            {% endif %}

        </p>
    {% endif %}

    {% if player.feedback2 == 'answer4' %}
        <p>
            <span style="color: red;"><b>Incorrect! </b></span><br><br>
            A BLUE expert says “The ball is RED” only if he is informed and the ball is, in fact, RED. In all other
            cases, he says “The ball is BLUE”. <br/><br/>

            This means that, if you get advise from a BLUE expert, and he says
            "The ball is RED", then you know for sure that the ball is RED. Remember that not all BLUE experts are informed (only
            {% if player.treatment == 'T1' or player.treatment == 'T4' %}
                5 out of 10).
            {% endif %}
            {% if player.treatment == 'T2' or player.treatment == 'T5' %}
                3 out of 10).
            {% endif %}

            <br/><br/>

            Similarly, a RED expert says “The ball is BLUE” only if he is informed and the ball is, in fact, BLUE.
            In all other cases, he says “The ball is RED”. <br/><br/>

            This means that, if you get advise from a RED expert, and
            he says "The ball is BLUE", then you know for sure that the ball is BLUE. Remember that not all RED experts are informed (only
            {% if player.treatment == 'T1' or player.treatment == 'T4' %}
                5 out of 10).
            {% endif %}
            {% if player.treatment == 'T2' or player.treatment == 'T5' %}
                7 out of 10).
            {% endif %}

        </p>
    {% endif %}

    <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: center;
            font-size: 1.3vw;
        }


    </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 wait for " + counter + " seconds before moving to the next page. Read 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 %}