{{ extends 'global/Page.html' }}
{{ block title }}Quiz – Interface{{ endblock }}

{{ block content }}

<style>
.indented { margin-left: 2.5em; }
hr.section-divider { border: none; border-top: 4px solid #999; margin: 20px 0; }
/* Q5 layout */
.q5-row {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.q5-checks { flex: 1; min-width: 220px; }
.q5-checks ul { list-style: disc; padding-left: 2em; margin: 4px 0; }
.q5-checks li { margin: 4px 0; }
/* Static ranking widget */
.rank-box {
    border: 2px solid #aaa;
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
    min-width: 180px;
    max-width: 220px;
}
.dnd-pool {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    min-height: 54px; padding: 6px;
    border: 2px dashed #aaa; border-radius: 8px;
    margin: 0 auto 12px auto; background: #f9f9f9;
    max-width: 160px;
}
.island-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 15px;
    user-select: none; margin: 3px; flex-shrink: 0;
    cursor: default;
}
.rank-table { border-collapse: collapse; margin: 0 auto; }
.rank-table th, .rank-table td { border: 1px solid #ddd; padding: 4px 8px; text-align: center; }
.rank-table th { font-weight: bold; }
.slot-drop-zone {
    width: 42px; height: 42px; border-radius: 50%;
    border: 2px solid #888; display: flex;
    align-items: center; justify-content: center;
    margin: 0 auto; background: transparent;
}
.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>4) Complete the sentence: A higher priority score at an island gives you…</p>
<p class="indented"><label><input type="radio" name="quiz_q4" value="a"> a) …a <u>higher chance</u> of being sent there when you "apply."</label></p>
<p class="indented"><label><input type="radio" name="quiz_q4" value="b"> b) …a <u>lower chance</u> of being sent there when you "apply."</label></p>
<p class="indented"><label><input type="radio" name="quiz_q4" value="c"> c) …higher payoffs regardless of "applications."</label></p>

<hr class="section-divider">

<p>5) Suppose someone submitted the rankings on the right.</p>
<p>Which of the following can occur? Select all that apply.</p>

<div class="q5-row">
    <div class="q5-checks">
        <ul>
            <li><label>
                <input type="hidden"   name="quiz_q5_none" id="hid_q5_none" value="False">
                <input type="checkbox" id="cb_q5_none"> Not sent to any island
            </label></li>
            <li><label>
                <input type="hidden"   name="quiz_q5_a"    id="hid_q5_a"    value="False">
                <input type="checkbox" id="cb_q5_a"> Sent to Island A
            </label></li>
            <li><label>
                <input type="hidden"   name="quiz_q5_b"    id="hid_q5_b"    value="False">
                <input type="checkbox" id="cb_q5_b"> Sent to Island B
            </label></li>
            <li><label>
                <input type="hidden"   name="quiz_q5_c"    id="hid_q5_c"    value="False">
                <input type="checkbox" id="cb_q5_c"> Sent to Island C
            </label></li>
            <li><label>
                <input type="hidden"   name="quiz_q5_d"    id="hid_q5_d"    value="False">
                <input type="checkbox" id="cb_q5_d"> Sent to Island D
            </label></li>
            <li><label>
                <input type="hidden"   name="quiz_q5_e"    id="hid_q5_e"    value="False">
                <input type="checkbox" id="cb_q5_e"> Sent to Island E
            </label></li>
            <li><label>
                <input type="hidden"   name="quiz_q5_f"    id="hid_q5_f"    value="False">
                <input type="checkbox" id="cb_q5_f"> Sent to Island F
            </label></li>
        </ul>
    </div>

    <div class="rank-box">
        <p style="margin:0 0 8px 0">Please submit your ranking:</p>
        <div class="dnd-pool">
            <div class="island-icon" style="background-color:rgb(21,96,130);color:white">A</div>
            <div class="island-icon" style="background-color:rgb(25,107,36);color:white">C</div>
            <div class="island-icon" style="background-color:rgb(15,158,213);color:white">D</div>
            <div class="island-icon" style="background-color:rgb(160,43,147);color:white">E</div>
        </div>
        <table class="rank-table">
            <thead><tr><th>Rank</th><th>Island</th></tr></thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>
                        <div class="slot-drop-zone">
                            <div class="island-icon" style="background-color:rgb(233,113,50);color:white">B</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>
                        <div class="slot-drop-zone">
                            <div class="island-icon" style="background-color:rgb(209,209,209);color:#222">F</div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<button type="button" class="hint-toggle-btn" id="hint-toggle-btn">Instructions Hint</button>

<div class="hint-box" id="hint-box">
    <p>A higher priority score at an island gives you a higher chance of being sent there when you "apply."</p>
    <p>You cannot be sent to unranked islands.</p>
</div>

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


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

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

<script>
(function () {
    var KEY = 'intro18_q5';

    function syncHidden(cb) {
        var hid = document.getElementById(cb.id.replace('cb_', 'hid_'));
        if (hid) hid.value = cb.checked ? 'True' : 'False';
    }

    function saveAll() {
        var state = {};
        document.querySelectorAll('[id^="cb_q5_"]').forEach(function (cb) {
            state[cb.id] = cb.checked;
        });
        sessionStorage.setItem(KEY, JSON.stringify(state));
    }

    document.querySelectorAll('[id^="cb_q5_"]').forEach(function (cb) {
        cb.addEventListener('change', function () {
            syncHidden(this);
            saveAll();
        });
    });

    window.addEventListener('load', function () {
        var raw = sessionStorage.getItem(KEY);
        if (!raw) return;
        var state;
        try { state = JSON.parse(raw); } catch (e) { return; }
        document.querySelectorAll('[id^="cb_q5_"]').forEach(function (cb) {
            if (state[cb.id] !== undefined) {
                cb.checked = !!state[cb.id];
                syncHidden(cb);
            }
        });
    });
}());
</script>

{{ endblock }}