{{ extends 'global/Page.html' }}
{{ block title }}Final Task{{ endblock }}

{{ block content }}

<p>
    You will now complete one final task in the experiment.
    In this final task, all payoffs are expressed in US dollars.
</p>


<div class="card mb-4">

    <div class="card-body">

        <p>
            Below are <strong>100 numbered boxes</strong>.
            A monster is hidden behind exactly one of them.
        </p>

        <p>
            Each box is equally likely to contain the monster,
            and you do not know its location.
        </p>

        <p>
            You will choose how many boxes to collect.
            Boxes are collected in numerical order beginning
            with Box 1.
        </p>

        <p>
            If the monster is contained in one of the boxes
            you collect, you earn
            <strong>$0.00</strong>.
        </p>

        <p>
            If the monster is not contained in the boxes you
            collect, you earn
            <strong>$0.10 for each box collected</strong>.
        </p>

        <p>
            Choosing 0 boxes means collecting no boxes and
            earning <strong>$0.00 for sure</strong>.
        </p>

    </div>

</div>


<h4>Boxes</h4>

<div id="box-grid">

    {{ for box_number in boxes }}

        <div
            class="bret-box"
            data-box="{{ box_number }}"
        >
            {{ box_number }}
        </div>

    {{ endfor }}

</div>


<hr>


<div class="mb-3">

    <label for="bret-choice-input" class="form-label">

        <strong>
            How many boxes would you like to collect?
        </strong>

    </label>

    <input
        type="number"
        name="bret_choice"
        id="bret-choice-input"
        min="0"
        max="100"
        step="1"
        required
        class="form-control"
        style="max-width: 180px;"
    >

    <div class="form-text">

        Enter a whole number from 0 through 100.

    </div>

</div>


<div class="alert alert-secondary">

    Boxes selected:
    <strong id="selected-count">0</strong>

    <br>

    Potential earnings if the monster is not collected:
    <strong>
        $<span id="potential-payment">0.00</span>
    </strong>

</div>


<button class="btn btn-primary">
    OK
</button>


<style>

    #box-grid {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        gap: 5px;
        max-width: 700px;
        margin-bottom: 25px;
    }

    .bret-box {
        border: 1px solid #999;
        border-radius: 4px;
        text-align: center;
        padding: 8px 2px;
        background: white;
        font-size: 14px;
    }

    .bret-box.selected {
        background: #d9edf7;
        font-weight: bold;
    }

    @media (max-width: 600px) {

        #box-grid {
            grid-template-columns: repeat(5, 1fr);
        }

    }

</style>


<script>

    const choiceInput =
        document.getElementById(
            "bret-choice-input"
        );

    const boxes =
        document.querySelectorAll(
            ".bret-box"
        );

    const selectedCount =
        document.getElementById(
            "selected-count"
        );

    const potentialPayment =
        document.getElementById(
            "potential-payment"
        );


    function updateBoxes() {

        let choice =
            parseInt(
                choiceInput.value
            );

        if (isNaN(choice)) {
            choice = 0;
        }

        if (choice < 0) {
            choice = 0;
        }

        if (choice > 100) {
            choice = 100;
        }


        selectedCount.textContent =
            choice;


        potentialPayment.textContent =
            (
                choice * 0.10
            ).toFixed(2);


        boxes.forEach(
            function(box) {

                const boxNumber =
                    parseInt(
                        box.dataset.box
                    );

                if (
                    boxNumber
                    <= choice
                ) {

                    box.classList.add(
                        "selected"
                    );

                } else {

                    box.classList.remove(
                        "selected"
                    );

                }

            }
        );

    }


    choiceInput.addEventListener(
        "input",
        updateBoxes
    );

    updateBoxes();

</script>

{{ endblock }}