{{ extends 'global/Page.html' }}
{{ block title }}Your Input: Assignment Probabilities{{ endblock }}

{{ block content }}

<style>
.indented { margin-left: 2.5em; }

.hint-toggle-btn {
    display: block;
    margin: 24px auto 0 auto;
    padding: 10px 24px;
    background-color: #e0e0e0;
    color: #333;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
}
.hint-toggle-btn:hover {
    background-color: #d0d0d0;
}

.hint-box {
    display: none;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 16px 24px;
    margin: 16px auto;
    max-width: 760px;
}
</style>

<p>Your reported assignment probabilities will affect your payoffs.</p>
<p>We use a payment rule that gives you either <b>{{ C.BDM_PAY }} points</b> or nothing, depending on your reported assignment probabilities and all other travelers' choices.</p>
<p>The rule is designed so that you maximize your chance of getting 50 points when you report your best guess for each island.</p>
<p>Understanding the mechanics of the payment rule will not help you make reports, but if you'd like an explanation of the rule, you may click below.</p>

<button type="button" class="hint-toggle-btn" id="hint-toggle-btn">Technical Details about Assignment Probability Payoffs</button>

<div class="hint-box" id="hint-box">
    <p>After your submission, we will randomly select one island.</p>
    <p>We will call your reported assignment probability at this island <b><i>p</i></b>.</p>
    <p>We will then simulate the assignment process, modifying your list so that the selected island is first. All other travelers' lists and priority scores will remain unchanged.</p>
    <p>After the simulation, we will compute your score, which we will call <b><i>S</i></b>:</p>
    <p class="indented">If you were sent to the selected island, your score will be <b><i>S = (1 &#x2013; p)&#xB2;</i></b>.</p>
    <p class="indented">If you were not sent to the selected island, your score will be <b><i>S = (p)&#xB2;</i></b>.</p>
    <p>Finally, we will draw a random number <b><i>R</i></b> between 0 and 1.</p>
    <p class="indented"><b>{{ C.BDM_PAY }} points</b> will be added to your payoff if your score is less than this number, <b><i>S &lt; R</i></b>.</p>
</div>

<input type="hidden" name="saw_ap_hint" id="saw-ap-hint-input" value="False">

<p></p>
{{ next_button }}

<script>
document.addEventListener('DOMContentLoaded', function() {
    var btn       = document.getElementById('hint-toggle-btn');
    var box       = document.getElementById('hint-box');
    var hintInput = document.getElementById('saw-ap-hint-input');
    var isOpen    = false;

    btn.addEventListener('click', function() {
        isOpen = !isOpen;
        box.style.display = isOpen ? 'block' : 'none';
        hintInput.value = 'True';
    });
});
</script>

{{ endblock }}