{% extends "global/Page.html" %}
{% load otree static %}
{% block title %}
        {% if result == 1 %}

        Quiz successful

        {% else %}

        Quiz failed

        {% endif %}

{% endblock %}

{% block content %}
<div id="main">
        <img src="{% static 'Quiz.PNG' %}"; align="center"/>

        {% if result == 1 %}

        <br>
        Congratulations, you successfully passed the quiz.
        <br><br>

        Before the game starts, we would like to ask you a question for which there is no right or wrong answer.
        It only depends on your own opinion.
        <br><br>

        <b>Question 1:</b>
        <br>
        In your own opinion - what should your team do?
        {% formfield player.prior_pref %}

        {% else %}

        <br>

        Your third attempt was also incorrect.
        <br><br>
        Please press "Next" to continue.

        {% endif %}

</div>

<br>

    {% next_button %}

{% if result == 1 %}
<br>
<div class="noteBoxes type4" style="display:flex; font-size: 14px">
	 <div>
		<b><u>Remember:</u></b>
        <ul>
        <li>There are <b>10 teams</b>. In each team, there is a player 1 and a player 2.</li>
        <li>Both players get the same bonus.</li>
        <li>Each team has to decide what happens with 1 token. <b>1 token = $1.</b></li>
        <ul>
        <li>The team can <b>take</b> the token from the shared account into the team's pocket.</li>
        <li>The team can <b>leave</b> the token in the shared account.</li>
        </ul>
        <li>After all teams have made their decision, all tokens that remain in the shared account
        are <b>multiplied by 4</b> and then distributed to all 10 teams in equal shares.</li>
        <li>Your bonus depends on what your team gets from the shared account plus the token your team might have pocketed.</li>
        </ul>

        <p><b>This is the dilemma: leaving the token in the shared account is best
        for everybody but taking the token increases the payoff for your own team
        at the expense of the other teams.</b></p>
	</div>
</div>

{% endif %}


<style>
    .otree-timer {
        display: none;
    }

        .noteBoxes
{
	border: 1px solid;
  	border-radius: 5px;
	padding: 10px;
	margin: 10px 0;
}

.type1
{
	border-color: #E76F51;
	background-color: rgba(231, 111, 81, 0.1);
}

.type2
{
	border-color: #2A9D8F;
	background-color: rgba(42, 157, 143, 0.1);
}

.type3
{
	border-color: #0096C7;
	background-color: rgba(0, 150, 199, 0.1);
}

.type4
{
	border-color: #D3D3D3;
	background-color: rgba(192, 192, 192, 0.1);
}

.picture
{
	width: 15px;
	padding-right: 10px;
}
</style>

<script>
    $(function () {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 20) {
                $('.otree-timer').show();
            }
        });
    });
</script>
{% endblock %}