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

{% block title %}
    Part 2
{% endblock %}

{% block content %}
    <div class="info_box">
        <div class="header">
            <p class="formatting_header">
                Information:
            </p>
        </div>
        <div class="content">
            <div style="margin: 25px">
                <p class="formatting_content">
                    Please, rate now how socially appropriate it is to put 0, 5, 10, 15, or 20 balls into the blue
                        bucket while placing the remaining balls into the yellow bucket.
                    Should you have any questions remaining, you can reopen any of the previous instructions by clicking
                        on the buttons below.
                </p>
                <hr/>
                <table width="100%">
                    <tr>
                        <td style="text-align: center; width: 75%;">To reopen the instructions of the task that you have to evaluate (page 1): </td>
                        <td><button type="button" class="btn btn-primary" onclick="document.getElementById('screen1')
                        .style.display='block'">Click here! </button></td>
                    </tr>
                    <tr>
                        <td style="text-align: center; width: 75%;">To reopen the instructions of your current task (page 2): </td>
                        <td><button type="button" class="btn btn-primary" onclick="document.getElementById('screen2')
                        .style.display='block'">Click here! </button></td>
                    </tr>
                    <tr>
                        <td style="text-align: center; width: 75%;">To reopen the instructions that detail you payment (page 3): </td>
                        <td><button type="button" class="btn btn-primary" onclick="document.getElementById('screen3')
                        .style.display='block'">Click here! </button></td>
                    </tr>
                    <tr>
                        <td style="text-align: center; width: 75%;">To reopen the instructions that describe your Matching Group (page 4): </td>
                        <td><button type="button" class="btn btn-primary" onclick="document.getElementById('screen4')
                        .style.display='block'">Click here! </button></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div class="task_box">
        <div style="margin: 25px">
            <div style="margin: 25px; text-align: center">
                <b>How socially appropriate is it ...</b>
            </div>
            <table width="95%">
                <tr>
                    <td width="75%">... to put 0 balls into the blue bucket and 20 balls into the yellow bucket: </td>
                    <td>{% formfield player.appropriateness_rating_0_blue label="" %}</td>
                </tr>

                <tr>
                    <td width="75%">... to put 5 balls into the blue bucket and 15 balls into the yellow bucket: </td>
                    <td>{% formfield player.appropriateness_rating_5_blue label="" %}</td>
                </tr>

                <tr>
                    <td width="75%">... to put 10 balls into the blue bucket and 10 balls into the yellow bucket:</td>
                    <td>{% formfield player.appropriateness_rating_10_blue label="" %}</td>
                </tr>

                <tr>
                    <td width="75%">... to put 15 balls into the blue bucket and 5 balls into the yellow bucket: </td>
                    <td>{% formfield player.appropriateness_rating_15_blue label="" %}</td>
                </tr>

                <tr>
                    <td width="75%">... to put 20 balls into the blue bucket and 0 balls into the yellow bucket: </td>
                    <td>{% formfield player.appropriateness_rating_20_blue label="" %}</td>
                </tr>
            </table>
        </div>
     </div>

    <div class="button_box">
        <br>
        <span style="margin-right: 10px"> Click on the "Continue" button to continue with the study! </span>
        <input class="btn btn-primary" type="submit" value="Continue"/>
        <br><br>
    </div>

    <div id="screen1" class="info_page">
        <div class="info_content">
            {% include Constants.RFT_Box %}
            <div class="button_box">
                <br>
                <span style="margin-right: 10px"> Click on the "return" button to return to your task! </span>
                <button type="button" class="btn btn-primary" onclick="document.getElementById('screen1').style
                .display='none'">return</button>
                <br><br>
            </div>
        </div>
    </div>

    <div id="screen2" class="info_page">
        <div class="info_content">
            {% include Constants.Rating_Box %}
            <div class="button_box">
                <br>
                <span style="margin-right: 10px"> Click on the "return" button to return to your task! </span>
                <button type="button" class="btn btn-primary" onclick="document.getElementById('screen2').style
                .display='none'">return</button>
                <br><br>
            </div>
        </div>
    </div>

    <div id="screen3" class="info_page">
        <div class="info_content">
            {% include Constants.Pay_Box %}
            <div class="button_box">
                <br>
                <span style="margin-right: 10px"> Click on the "return" button to return to your task! </span>
                <button type="button" class="btn btn-primary" onclick="document.getElementById('screen3').style
                .display='none'">return</button>
                <br><br>
            </div>
        </div>
    </div>

    <div id="screen4" class="info_page">
        <div class="info_content">
            {% include Constants.Match_Box %}
            <div class="button_box">
                <br>
                <span style="margin-right: 10px"> Click on the "return" button to return to your task! </span>
                <button type="button" class="btn btn-primary" onclick="document.getElementById('screen4').style
                .display='none'">return</button>
                <br><br>
            </div>
        </div>
    </div>

{% endblock %}