{% load otree %}
{% load staticfiles %}

{% block styles %}

    <style>

    .cover {
        width: 350px;
        object-fit: cover;
        margin-bottom: -7px;
        }

     table {
        border: none;
    }
    table td {
    border: none;
    }

    </style>

{% endblock %}

{% block title %}
    Practice question #1
{% endblock %}

{% block content %}
<div class="frame">
    <p>Suppose you observe the following die roll in a round:</p>

 <table align="center" style="width: auto; margin: auto">
     <tr><td><div class="frame-vid"><video autoplay muted> <source src="/static/{{ image_path }}" type="video/mp4">
    </video></div></td></tr>
</table>
<br>

        <table class="table" style="width: 75%;">
            <tr>
                <td style='text-align:left; vertical-align:middle'>How many points do you earn
                    for this round if you report a 3?</td>
                <td><div class="frame" style="width: 100%; padding: 0px 0px 0px 0px; margin:0;">
                    {{ formfield player.q1 }}
                </div>
                </td>
            </tr>
            <tr>
                <td style='text-align:left; vertical-align:middle'>How many points do you earn
                    for this round if you report a 5?</td>
                <td><div class="frame" style="width: 100%; padding: 0px 0px 0px 0px; margin:0;">
                    {{ formfield player.q2 }}
                </div>
                </td>
            </tr>
            <tr>
                <td style='text-align:left; vertical-align:middle'>How many points do you earn
                    for this round if you report a 6?</td>
                <td><div class="frame" style="width: 100%; padding: 0px 0px 0px 0px; margin:0;">
                    {{ formfield player.q3 }}
                </div>
                </td>
            </tr>
        </table>
<br>
<div align="center" style="width: 90%; text-align: left;  margin: -20px 0px 0px 55px; padding: 0px 0px 0px 0px;">
    <center><button type="submit" class="btn btn-primary btn-large"><strong>NEXT</strong></button></center>
    </div>

{% endblock %}