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


{% block title %}
Stage 1 - Work
{% endblock %}

{% block content %}

<p align="justify" style="font-size:140%;">Count the zeroes in the table</p>

<p align="right" style="font-size:140%;">Total correct: {{total_correct}} </p>

<p align="center" style="font-size:140%;">Table {{round}} </p>
<div class="counting-table-wrapper">
    <table class="table table-sm border counting-table" style='font-size: 140%'>
        <tbody>
            {% for r in mat %}
            <tr>
                {% for c in r %}
                <td>{{ c }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<style>
    .counting-table {
        width: auto;
        margin: 2px auto;
    }

</style>

<!-- <p align = "center" style="font-size:140%; color:red">Solution: {{solution}}</p> -->
<!-- rembember to remove -->
<p align="justify" style="font-size:140%;">The number of zeroes is:</p>
{% formfield player.input_sum label=""%}

{% next_button %}

{% endblock %}