{{ block title }}
{{ endblock }}

{{ block content }}

<style>
    .rank-box {
        font-family: serif;
        font-size: 20px;
        line-height: 1.6;
        max-width: 1000px;
    }

    .rank-title {
        font-weight: bold;
        margin-bottom: 20px;
    }

    .rank-text {
        margin-bottom: 22px;
    }

    .question-block {
        margin-top: 28px;
        margin-bottom: 28px;
    }

    .question-label {
        margin-bottom: 8px;
    }

    .rank-input input {
        width: 90px;
        font-size: 20px;
        font-family: serif;
        padding: 6px 8px;
    }
</style>

<div class="rank-box">
    <div class="rank-title">
        Menebak Peringkat
    </div>

    <div class="rank-text">
        Sekarang Anda diminta untuk menebak peringkat Anda dalam kelompok Anda pada Putaran 1 (<strong>bayaran per jawaban benar</strong>) dan Putaran 2 (<strong>kompetisi</strong>). Untuk setiap pertanyaan, pilih angka dari <strong>1 sampai 4</strong>, di mana <strong>1</strong> berarti Anda berada di peringkat pertama dalam kelompok Anda dan <strong>4</strong> berarti Anda berada di peringkat keempat dalam kelompok Anda. Anda akan menerima tambahan uang untuk setiap tebakan yang benar. Untuk setiap tebakan yang benar, Anda akan menerima <strong>1000 Rupiah</strong> di luar bayaran yang Anda peroleh dari pengerjaan tugas yang Anda kerjakan sebelumnya. Anda akan tetap menerima tambahan bayaran ini, apa pun putaran yang terpilih secara acak untuk menentukan pembayaran Anda.
    </div>

    <div class="question-block">
        <div class="question-label">
            Menurut Anda, berapa peringkat Anda dalam kelompok Anda pada Putaran 1: <strong>Bayaran per Jawaban Benar</strong>?
        </div>
        <div class="rank-input">
            {{ formfield 'round1_rank_guess' label="" }}
        </div>
    </div>

    <div class="question-block">
        <div class="question-label">
            Menurut Anda, berapa peringkat Anda dalam kelompok Anda pada Putaran 2: <strong>Kompetisi</strong>?
        </div>
        <div class="rank-input">
            {{ formfield 'round2_rank_guess' label="" }}
        </div>
    </div>
</div>

{{ next_button }}

<script>
document.addEventListener("DOMContentLoaded", function () {
    const btn = document.querySelector(".otree-btn-next");
    if (btn) {
        btn.textContent = "Lanjut";
    }

    const inputs = document.querySelectorAll('input[type="number"]');
    inputs.forEach(function(input) {
        input.setAttribute('min', '1');
        input.setAttribute('max', '4');
        input.setAttribute('step', '1');
    });
});
</script>

{{ endblock }}