{% extends extended_page_tpl %}

{% load staticfiles otree_tags %}

{% block app_styles %}
<link href="{% static 'otreeutils/understanding.css' %}" rel="stylesheet" type="text/css">
{% endblock %}

{% block app_scripts %}
<script src="{% static 'otreeutils/understanding.js' %}"></script>
{% endblock %}


{% block title %}
    {{ page_title }}
{% endblock %}

{% block content %}
 <div class="instructions well well-lg" xmlns="http://www.w3.org/1999/html">

<ul class="questions">
    {{ questions_form.as_ul }}
</ul> <br>

     <table class="table table-bordered text-center" style="width: auto; margin: auto">

                <tr >
                     <td>Number of correct answers by the Performer</td>
                     <td>Lottery earned by the Decider</td>
                </tr >

                <tr>
                     <td>0 correct answers</td>
                     <td>with 20% probability the outcome is ₹500; with 80% the outcome is ₹0.</td>

                </tr>
                <tr>
                     <td>1 correct answer</td>
                     <td>with 40% probability the outcome is ₹500; with 60% the outcome is ₹0.</td>

                </tr>
                <tr>
                     <td>2 correct answers</td>
                     <td>with 60% probability the outcome is ₹500; with 40% the outcome is ₹0.</td>
                </tr>
                         <tr>
                     <td>3 correct answers</td>
                     <td>with 80% probability the outcome is ₹500; with 20% the outcome is ₹0.</td>
                </tr>
     </table></li>  <br>
 </div>
<div style="display: none">
    {% next_button %}
</div>

<div class="fake-next">
    <input class="btn btn-primary btn-large btn-primary" type="button" value="Next"
           onclick="checkUnderstandingQuestionsForm()">
</div>

<script>
$(function() {
    setupUnderstandingQuestionsForm({{ n_questions }}, "{{ hint_empty }}", "{{ form_field_n_wrong_attempts }}", {{ set_correct_answers }});
});
</script>

{% endblock %}