{{ block title }}
    Reflection Questions
{{ endblock }}

{{ block content }}

<h4 style="border-bottom-style: solid; border-bottom-color: DarkBlue; border-bottom-width: 3px;">Question One</h4>
<p>
    In the table below different examples of transfers to the group account by Participants of Type A are listed.
<p>
<p>
    Please indicate for each size of the group account what decision
    {% if participant.type == "Citizen" %} by Participant B you {% endif %}
    {% if participant.type == "Dictator" %} you think Participants of Type A {% endif %}
    would consider as '<em>fair</em>'.
</p>
<p>
    To select this level, you can click on any point in the gray range.
    Then, a blue cursor appears which you can drag left or right on the slider.
    The selected effect is updated in the right column.
</p>
<table>
    <tr>
        <th class="header-cell">Points in Group Account:</th>
        <th class="header-cell">Fair Decision by Participant B:</th>
        <th class="header-cell">Selected Effect</th>
    </tr>
    <tr>
        <td>4 Points</td>
        <td>
            <div class="slider-container">
            <span class="slider-label">private account</span>
            <input type="range" name="avgcontr1" min="-4" max="10" oninput="updateDescription(this)" class="slider">
            <span class="slider-label">group account</span>
            </div>
        </td>
        <td><span id="selection1"></span></td>
    </tr>
    <tr>
        <td>8 Points</td>
        <td>
            <div class="slider-container">
            <span class="slider-label">private account</span>
            <input type="range" name="avgcontr2" min="-8" max="10" oninput="updateDescription(this)" class="slider">
            <span class="slider-label">group account</span>
            </div>
        </td>
        <td><span id="selection2"></span></td>
    </tr>
    <tr>
        <td>12 Points</td>
        <td>
            <div class="slider-container">
            <span class="slider-label">private account</span>
            <input type="range" name="avgcontr3" min="-12" max="10" oninput="updateDescription(this)" class="slider">
            <span class="slider-label">group account</span>
            </div>
        </td>
        <td><span id="selection3"></span></td>
    </tr>
    <tr>
        <td>16 Points</td>
        <td>
            <div class="slider-container">
            <span class="slider-label">private account</span>
            <input type="range" name="avgcontr4" min="-16" max="10" oninput="updateDescription(this)" class="slider">
            <span class="slider-label">group account</span>
            </div>
        </td>
        <td><span id="selection4"></span></td>
    </tr>
    <tr>
        <td>20 Points</td>
        <td>
            <div class="slider-container">
            <span class="slider-label">private account</span>
            <input type="range" name="avgcontr5" min="-20" max="10" oninput="updateDescription(this)" class="slider">
            <span class="slider-label">group account</span>
            </div>
        </td>
        <td><span id="selection5"></span></td>
    </tr>
    <tr>
        <td>24 Points</td>
        <td>
            <div class="slider-container">
            <span class="slider-label">private account</span>
            <input type="range" name="avgcontr6" min="-24" max="10" oninput="updateDescription(this)" class="slider">
            <span class="slider-label">group account</span>
            </div>
        </td>
        <td><span id="selection6"></span></td>
    </tr>
    <tr>
        <td>28 Points</td>
        <td>
            <div class="slider-container">
            <span class="slider-label">private account</span>
            <input type="range" name="avgcontr7" min="-28" max="10" oninput="updateDescription(this)" class="slider">
            <span class="slider-label">group account</span>
            </div>
        </td>
        <td><span id="selection7"></span></td>
    </tr>
    <tr>
        <td>32 Points</td>
        <td>
            <div class="slider-container">
            <span class="slider-label">private account</span>
            <input type="range" name="avgcontr8" min="-32" max="10" oninput="updateDescription(this)" class="slider">
            <span class="slider-label">group account</span>
            </div>
        </td>
        <td><span id="selection8"></span></td>
    </tr>
    <tr>
        <td>36 Points</td>
        <td>
            <div class="slider-container">
            <span class="slider-label">private account</span>
            <input type="range" name="avgcontr9" min="-36" max="10" oninput="updateDescription(this)" class="slider">
            <span class="slider-label">group account</span>
            </div>
        </td>
        <td><span id="selection9"></span></td>
    </tr>
    <tr>
        <td>40 Points</td>
        <td>
            <div class="slider-container">
            <span class="slider-label">private account</span>
            <input type="range" name="avgcontr10" min="-40" max="10" oninput="updateDescription(this)" class="slider">
            <span class="slider-label">group account</span>
            </div>
        </td>
        <td><span id="selection10"></span></td>
    </tr>
</table>
<br>
<h4 style="border-bottom-style: solid; border-bottom-color: DarkBlue; border-bottom-width: 3px;">Question Two</h4>

{% if participant.type == "Citizen" %}
<p>
    Which of the below factors influenced your decision to transfer Points to the group account the most:
</p>
{{ form.q2factors }}

{% elif participant.type == "Dictator" %}
<p>
    Please select the statement that most represents the motivation for your actions during the experiment.
</p>
{{ form.q2dicfactors }}
{% endif %}
<br>

{% if participant.type == "Dictator" %}
<h4 style="border-bottom-style: solid; border-bottom-color: DarkBlue; border-bottom-width: 3px;">Question Three</h4>
<p>
    Please shortly describe your strategy how you tried to achieve your objective in Question Two.
</p>
{{ form.q2dicstrategy }}
{% endif %}


<h4 style="border-bottom-style: solid; border-bottom-color: DarkBlue; border-bottom-width: 3px;">Question {% if participant.type == "Citizen" %} Three {% else %} Four {% endif %} </h4>
If you have any comments that you want to share with us, please write them in the field below.
<br>
{{ form.comments }}
<p>
{{ next_button }}
</p>

<style>

    {{ include 'general/slider_design.html'}}
    {{ include 'general/table_design.html'}}

    table {
        border-collapse: collapse;
        width: 100%;
    }

    .header-cell {
        background-color: #f2f2f2;
        border: 1px solid #dddddd; /* Add border for top line */
    }

    .block-cell {
        border: none; /* Delete border for empty cells which will be the top left cell */
    }

    .header-cell:nth-child(1),
    .header-cell:nth-child(3),
    td:nth-child(1),
    td:nth-child(3) {
        width: 15%; /* Adjust the width as needed for equal-sized columns */
        text-align: center;
    }
</style>

<script>
    let sliders = document.querySelectorAll('.slider');

    sliders.forEach(function (slider, index) {
        slider.addEventListener('input', function () {
            this.classList.add('thumb-visible');
            updateDescription(this, index + 1);
            enableNextButton();
        });
    });

    function updateDescription(input, index) {
        let inputValue = parseInt(input.value);
        document.getElementById('selection' + index).textContent = inputValue;
    }
</script>

{{ endblock }}