{% extends "global/Page.html" %}

{% block title %}Results{% endblock %}
{% block content %}

    <p>


        <b>You answered {{ player.num_correct }} questions correctly out of {{ question_total }} total questions.</b><br><br>
        {% if player.math == 'multiplication' %}
            The following table ranks the performance of the players in your group based on questions answered correctly: <br><br>

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
 #t01 {
  width: 40%;
  background-color: #e8e8e8;
}
</style>

<table id="t01">
    <tbody>

            <tr>
                <td>
                    <b>Rank</b>
                </td>
                <td>
                    <b>Name</b>
                </td>
            </tr>
        {% for name in rank1 %}
            <tr>
                <td>
                    1
                </td>
                <td>
                    {{ name }}
                </td>
            </tr>
        {% endfor %}
        {% for  name in rank2 %}
            <tr>
                <td>
                    2
                </td>
                <td>
                    {{ name }}
                </td>
            </tr>
        {% endfor %}
        {% for  name in rank3 %}
            <tr>
                <td>
                    3
                </td>
                <td>
                    {{ name }}
                </td>
            </tr>
        {% endfor %}
        {% for  name in rank4 %}
            <tr>
                <td>
                    4
                </td>
                <td>
                    {{ name }}
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>


{% endif %}


    </p>


    {% next_button %}

{% endblock %}