{{ extends 'global/Page.html' }}
{{ block title }}Puzzle Questions{{ endblock }}

{{ block content }}

<style>
.otree-title {
    background: #EEF5FF;
    font-size: 40px;
    text-align: center;
    padding: 5% 0% 2% 0%;
}
.otree-body {
    max-width:1500px
}
.otree-btn-next {
    float: right;
    margin-right: 1%;
}
p {
    font-size: 20px;
}

</style>
<p style="text-align: right;">Question {{player.round_number}} out of 15</p>

    <div style="float:left; width:45%;">
    <img class="image" src="{{ question_data.path }}" style="width:100%;"/>
    </div>

    <div style="float:left; padding-left:4%; padding-top:2%; width:51%;">
    {{ for image in image_data }}
        <label style="text-align: left; width:24%">
            <img class="image" src="{{ image.path }}" style="width:100%;"/>
            <input type="radio" name="img_choice"  value="{{ image.name }}" class="persist">
        </label>
    {{ endfor }}

    </div>



    <br>

    {{ next_button }}

    {{ formfield_errors 'img_choice' }}

{{ endblock }}