{{ extends "global/Page.html" }}
{{ block title }}Instructions{{ endblock }}

{{ block content }}


<!-- Includes the background style from the UW Teton Lab experiments -->
{{ include_sibling 'uw_teton_bg.html' }}

<!-- Hide next button initially -->
<style>
    .otree-btn-next { 
        display: none; /* Hide next button */
    }
</style>

<!-- Sets timer for next button to appear -->
<script>
    setTimeout(
    function () {
                $('.otree-btn-next').show();
            }, // Shows otree next button at end of timer
    5*1000
);
</script>

<!-- Different text depending on comprehension question answer -->
{{ if player.cq_2 == "2" or player.cq_2_try2 == "2" }}<span style="color: green;">Correct!</span>{{ else }}<span style="color: red;">Incorrect</span>.{{ endif }} In this auction you should bid <b>exactly how much you value the item</b>, which in this example is $50. <br> <br>

<h4>
    <u>Final Notes</u>
</h4>

<ul>
    <li>In this auction, you should always bid the exact maximum amount you would be willing to pay.</li>
    <li>You never pay more than what the computer bids.</li>
    <li>If you don't want the item at all, you should bid zero. Since the computer's bid is always positive, you'll lose the auction and keep all your money</li>
</ul>

{{ formfields }}

{{ next_button }}

{{ endblock }}

{{ block scripts }}
<script>
// This script is included to ensure that if tags are included in form fields they are observed
$(document).ready(function (e) {
    labels = document.getElementsByTagName("label");

    for (var i = 0; i < labels.length; i++) {
        labels[i].innerHTML = labels[i].innerHTML.replaceAll("&lt;", "<").
                              replaceAll("&gt;", ">");
    }
});
</script>
{{ endblock }}