{{ block title }}
    Guess: How many dots are in this graph? Round {{ player.round_number}}/{{ Constants.num_rounds }}
{{ endblock }}
{{ block content }}

<div class="card bg-light instructions">
<div class="card-body">

<br>
<h2>
Below you see a <u>new</u> image.
</h2>


<img src="{{ static image_path }}" style="width: 55vw; min-width: 330px;" class="center" /> 
<br>
     <!-- This is to add the clickable box (also see block scripts at the end)-->
    <button id="info-button" type="button">Payment info</button>
    <div id="info-box" class="mt-3" style="display:none; color:darkblue;">
        You will earn additional money for a good guess. You will receive ${{ Constants.bonus_correct_belief}} if you guess the correct number.
        This amount will be reduced by ${{ Constants.bonus_belief_deviation}} for every dot by which you deviate form the correct number.

    </div>


<br><br>

 {{ formfields 'guess_i' }}

</div>
</div>


<br>


    {{ next_button }}
{{ endblock }}


{{ block scripts }}
<script>
$(document).ready(function() {
    $("#info-button").on("click", function() {
        $("#info-box").slideToggle();
    });
});
</script>
{{ endblock }}