{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Round {{ round_num }}
{% endblock %}

{% block content %}
<p>
   <img src= "{% static pic %}" height="400">
</p>
<p>
    The following are the balls drawn by the computer:
<style>
    #c {
          width: 50px;
        height: 50px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
        background: black;
    }
</style>
    <table>
        <tr>
            {% for c in ball_lst1 %}
                <td><div id = 'c' style= {{c}} ></div></td>
            {% endfor %}
        </tr>
        <tr>
            {% for c in ball_lst2 %}
                <td><div id = 'c' style= {{c}} ></div></td>
            {% endfor %}
        </tr>
    </table>
</p>

<p>
    {{ Q_message }}
</p>

<p>
    {% formfield player.guess_color %}
</p>
<script>

    document.getElementById('show_Q').addEventListener('change', function (e) {
        if (e.target.value === "Yes") {
            $("#Q_quiz").show();
        }
        if (e.target.value === "No") {
            $("#Q_quiz").hide();
        }
    });

</script>



    {% next_button %}

{% endblock %}