{{ extends 'global/IntroPage.html' }}
{{ block title }}Reminder: Your Input{{ endblock }}

{{ block page_body }}

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

.detail-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}
.detail-btn {
    padding: 10px 22px;
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #bbb;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
}
.detail-btn:hover { background-color: #e0e0e0; }

/* Modal overlay */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 16px;
    overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: #fff;
    border-radius: 8px;
    padding: 28px 32px;
    max-width: 680px;
    width: 100%;
    position: relative;
}
.modal-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 16px;
}
.modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #666;
    line-height: 1;
}
.modal-close:hover { color: #000; }

/* Hint toggle (reused from Intro33) */
.hint-toggle-btn {
    display: block;
    margin: 20px auto 0 auto;
    padding: 10px 24px;
    background-color: #e0e0e0;
    color: #333;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
}
.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 0 auto;
}

.island-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-weight: bold; font-size: 13px;
}
.island-unknown {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background-color: #333; color: white;
    font-weight: bold; font-size: 14px;
}
.rank-table {
    border-collapse: collapse;
    margin: 10px auto;
}
.rank-table th,
.rank-table td {
    border: 1px solid #dddddd;
    padding: 4px 8px;
    text-align: center;
}
.rank-table th { font-weight: bold; }
</style>

<p>You will complete <b>three tasks</b> each round:</p>
<p class="indented">a <b>Ranking</b> task,</p>
<p class="indented">an <b>Expected Payoff</b> task, and </p>
<p class="indented">an <b>Assignment Probabilities</b> task.</p>

<p>Click any task below to review how it works.</p>

<div class="detail-buttons">
    <button type="button" class="detail-btn" onclick="openModal('modal-ranking', this)">Ranking Task</button>
    <button type="button" class="detail-btn" onclick="openModal('modal-ep', this)">Expected Payoff Task</button>
    <button type="button" class="detail-btn" onclick="openModal('modal-ap', this)">Assignment Probabilities Task</button>
</div>

<!-- ── Modal 1: Ranking ── -->
<div class="modal-overlay" id="modal-ranking">
    <div class="modal-box">
        <button type="button" class="modal-close" onclick="closeModal('modal-ranking')" aria-label="Close">&times;</button>
        <div class="modal-title">Ranking Task</div>
        <p>All travelers, including you, submit an <b>island ranking.</b></p>
        <p><b>Your rankings determine the order in which "applications" to islands are made.</b></p>
        <p>The island rankings you and all other travelers report may have a <b>cap</b>.</p>
        <p>This limits the number of islands you can rank in your submission. <b>You cannot be sent to unranked islands.</b></p>
    </div>
</div>

<!-- ── Modal 2: Expected Payoff ── -->
<div class="modal-overlay" id="modal-ep">
    <div class="modal-box">
        <button type="button" class="modal-close" onclick="closeModal('modal-ep')" aria-label="Close">&times;</button>
        <div class="modal-title">Expected Payoff Task</div>
        <p>After you submit island rankings, you will report a number from <b>{{ expay_min }} to {{ C.MAX_PTS }}</b> that reflects the assignment payoffs you anticipate receiving on a slider.</p>
        <p>After you submit your number, the computer will draw a random number between <b>{{ expay_min }} and {{ C.MAX_PTS }}</b>.</p>
        <ul>
            <li>If the random number is <b>higher</b> than the number you entered, you will be paid <b>{{ expay_scale_pct }}%</b> of the <b>random number</b>.</li>
            <li>If the random number is <b>equal to or lower</b> than the number you entered, you will be paid <b>{{ expay_scale_pct }}%</b> of the <b>assignment payoff</b>.</li>
        </ul>
        <p>To earn the highest payoff, you should <b>enter the amount that makes the assignment payoff and a guaranteed payment seem equally attractive</b>.</p>
    </div>
</div>

<!-- ── Modal 3: Assignment Probabilities ── -->
<div class="modal-overlay" id="modal-ap">
    <div class="modal-box">
        <button type="button" class="modal-close" onclick="closeModal('modal-ap')" aria-label="Close">&times;</button>
        <div class="modal-title">Assignment Probabilities Task</div>
        <p>In each round, you will also be asked to report your best guess of <b>assignment probabilities</b>.</p>
        <p>These are your guesses of the likelihood of being sent to each island, given your submitted ranking.</p>
        <p>You will report one probability per island in a table like the one below.</p>

        <table class="rank-table">
            <thead><tr><th>Rank</th><th>Island</th><th>Probability (%)</th></tr></thead>
            <tbody>
                <tr><td>1</td><td><span class="island-unknown">?</span></td><td>—</td></tr>
                <tr><td>2</td><td><span class="island-unknown">?</span></td><td>—</td></tr>
                <tr><td>3</td><td><span class="island-unknown">?</span></td><td>—</td></tr>
                <tr><td>4</td><td><span class="island-unknown">?</span></td><td>—</td></tr>
                <tr><td>5</td><td><span class="island-unknown">?</span></td><td>—</td></tr>
                <tr><td>6</td><td><span class="island-unknown">?</span></td><td>—</td></tr>
                <tr>
                    <td colspan="2" style="text-align:center;">
                        <span style="display:block;">Not sent to</span>
                        <span style="display:block;">any island</span>
                    </td>
                    <td>—</td>
                </tr>
            </tbody>
        </table>

        <p style="margin-top:16px">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 {{ C.BDM_PAY }} points when you report your best guess for each island.</p>

        <button type="button" class="hint-toggle-btn" id="ap-hint-btn">Technical Details about Assignment Probability Payoffs</button>
        <div class="hint-box" id="ap-hint-box">
            <p>After your submission, we will randomly select one rank position from your submitted list.</p>
            <p>We will call your reported assignment probability at this position <b><i>p</i></b>.</p>
            <p>We will then simulate the assignment process. 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>
    </div>
</div>

<p></p>
<div class="otree-nav-buttons">{{ back_button }} {{ next_button }}</div>

<script>
var _modalOpener = null;

function openModal(id, triggerEl) {
    _modalOpener = triggerEl || null;
    var overlay = document.getElementById(id);
    overlay.classList.add('open');
    document.body.style.overflow = 'hidden';
    // Move focus into the modal so Tab stays inside it
    var closeBtn = overlay.querySelector('.modal-close');
    if (closeBtn) closeBtn.focus();
}

function closeModal(id) {
    document.getElementById(id).classList.remove('open');
    document.body.style.overflow = '';
    // Return focus to the button that opened the modal
    if (_modalOpener) { _modalOpener.focus(); _modalOpener = null; }
}

// Close on backdrop click
document.querySelectorAll('.modal-overlay').forEach(function(overlay) {
    overlay.addEventListener('click', function(e) {
        if (e.target === overlay) closeModal(overlay.id);
    });
});

// Close on Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.querySelectorAll('.modal-overlay.open').forEach(function(m) {
            closeModal(m.id);
        });
    }
});

// Hint toggle inside AP modal
document.getElementById('ap-hint-btn').addEventListener('click', function() {
    var box = document.getElementById('ap-hint-box');
    box.style.display = box.style.display === 'block' ? 'none' : 'block';
});
</script>

{{ endblock }}