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

{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
<link href="{% static 'MAIF_EFFORT/MAIF_EFFORT_style.css' %}" rel="stylesheet">
{% endblock %}


{% block title %}
Tâche de conversion : {{ participant.vars.reussi }} / 100
{% endblock %}

{% block content %}
{% if form.reponse.errors  %}
<div style="background-color: lightpink; padding: 2%; width: 100%;">
Vous n'avez pas donné de réponse. Veuillez réessayer.
</div>
{% endif%}

<div class="consigne_effort">


</div>

<div class="cadre"> 


    <div class="consigne">
        Quelle lettre est associée au nombre  {% for t in participant.vars.coded_word %}  {{t}} {% endfor %} ? <br>
    </div>
   


    <table class="table_effort">
        <tr class="row_effort_chars">
            {% for i in participant.vars.chars %}
                <td class="col_effort_chars"> {{ i }} </td>
            {% endfor %}
        </tr>

        <tr class = "row_effort_digits"> 
            {% for d in participant.vars.digits %}
                <td class="col_effort_digits"> {{ d }} </td>
            {% endfor %}
        </tr>
    </table>

    <div class="reponse">
        <br>
        Votre réponse : <br>
         <input type="text" name="reponse"   autofocus="autofocus" > 
         <br><br>
    </div>
    

    <button id="proposition_btn"> VALIDER </button>

</div>

{% endblock %}