{{ block title }}
Questionnaire
{{ endblock }}

{{ block content }}

<style>

.section {
    margin-bottom: 35px;
}

.section h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.question-box {
    border-left: 3px solid #e0e0e0;
    padding-left: 15px;
    margin-top: 5px;
}

.question-text {
    font-size: 16px;
    margin-bottom: 10px;
}

.options {
    margin-top: 10px;
}

.options label {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
}

</style>


<div class="section">

<div class="question-box">

<p class="question-text">
1. You switched your robot {{ switch_count }} out of 5 times. Thinking about these 5 decisions, what best describes your reasoning?
</p>

<p class="question-text">
Select all that apply.
</p>

<input type="hidden" name="switch_reasons" id="id_switch_reasons" value="{{ player.field_maybe_none('switch_reasons') or '' }}">

<div class="options">
    <label>
        <input type="checkbox" class="switch-reason-checkbox" value="1">
        1. I believed I was mostly getting good-quality robot assistants.
    </label>

    <label>
        <input type="checkbox" class="switch-reason-checkbox" value="2">
        2. I believed I was mostly getting bad-quality robot assistants.
    </label>

    <label>
        <input type="checkbox" class="switch-reason-checkbox" value="3">
        3. I was uncertain about the robots I got and wanted to explore alternatives.
    </label>

    <label>
        <input type="checkbox" class="switch-reason-checkbox" value="4">
        4. I did not want to change my robot unless I had a strong reason to do so.
    </label>

    <label>
        <input type="checkbox" class="switch-reason-checkbox" value="5">
        5. I am not sure / I decided without a clear reason.
    </label>

    <label>
        <input type="checkbox" class="switch-reason-checkbox" value="6">
        6. Other (please specify):
    </label>
</div>

{{ formfield_errors 'switch_reasons' }}

{{ formfield 'switch_reason_other_text' label="" }}


<div class="options">
{{ formfield 'most_important_switch_reason' label="2. Which of the selected reasons was the most important?" }}
</div>

</div>
</div>

<hr>


<div class="section">

<div class="question-box">

<p class="question-text">
3. You can choose between the following two options:
</p>

<p class="question-text">
Option A: A lottery that pays 10 pence with 50% probability and 0 pence with 50% probability.
</p>

<p class="question-text">
Option B: A guaranteed payment of 5 pence.
</p>


<div class="options">
{{ formfield 'risk_preference' label="Which option do you choose?" }}
</div>

<p class="question-text">
4. Suppose you have the lottery from Option A. What is the minimum amount you would be willing to sell the lottery
    for?
</p>

{{ formfield 'risk_CE' label="Please enter a number between 0 and 10 pence." }}

</div>
</div>


<hr>


<div class="section">


<div class="question-box">

<p class="question-text">
5. You can choose between the following two options:
</p>

<p class="question-text">
Option A: An urn contains 50 red balls and 50 blue balls.
    You receive 10 pence if a randomly drawn ball is red and 0 pence if it is blue.
</p>

<p class="question-text">
Option B: An urn contains 100 red or blue balls in an unknown proportion.
    You receive 10 pence if a randomly drawn ball is red and 0 pence if it is blue.
</p>


<div class="options">
{{ formfield 'ambiguity_preference' label="Which option do you choose?" }}
</div>

    <p class="question-text">
6. What value of X makes you indifferent between Option A and Option B?
</p>

<p class="question-text">
Option A: An urn contains X red balls and (100 − X) blue balls.
    You receive 10 pence if a randomly drawn ball is red and 0 pence if it is blue.
</p>

<p class="question-text">
Option B: An urn contains 100 balls of red and blue in an unknown proportion.
    You receive 10 pence if a randomly drawn ball is red and 0 pence if it is blue.
</p>


<p class="question-text">

    {{ formfield 'ambiguity_prob' label="Please enter a number between 0 and 100." }}
</p>

</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const hiddenInput = document.getElementById('id_switch_reasons');
    const checkboxes = document.querySelectorAll('.switch-reason-checkbox');

    const existing = (hiddenInput.value || '')
        .split(',')
        .map(x => x.trim())
        .filter(x => x);

    checkboxes.forEach(cb => {
        if (existing.includes(cb.value)) {
            cb.checked = true;
        }

        cb.addEventListener('change', function () {
            const selected = Array.from(checkboxes)
                .filter(x => x.checked)
                .map(x => x.value);
            hiddenInput.value = selected.join(',');
        });
    });
});
</script>

{{ next_button }}

{{ endblock }}