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

{% block title %}
  Instructions Learning Phase
{% endblock %}


{% block content %}

  <p>You will see two options, both options offer points with some probability. You see the amount of points (e.g., 5 points and 7 points), but you will not see the probabilities. Each amount of points occurs with some constant probability (e.g., 5 points 80% of the time, 7 points 20%). <b>Your task in the learning phase is to learn about the hidden probabilities.</b>
  </p>
  
  <p>To learn about the probabilities you can click on the options. Clicking causes the option to play out a point draw according to the option's hidden probabilities and to show you the drawn amount of points. E.g., 5 points will appear in 80 of 100 clicks if the hidden probability is 80%. You can click both options until you have learned the probabilities.</p>

  <p>You can move on at any time. Once you feel you have learned the probabilities of both options you can continue to the choice phase by clicking on the “I am ready to move on” button.</p>

  <p>The maximum number of clicks available to you equals in total {{ num_samples }}, counting clicks on both options together.</p>

  <p>After you have moved on, the choice phase starts, and then a new block starts. New blocks reset the click counter and give you another {{ num_samples }} clicks to learn about the hidden probabilities</p>


  <h3>{% blocktrans trimmed %}Example of options{% endblocktrans %}</h3>

  {% if sample_condition == 1 %}
    <div class = "flex-row">
        <div>
            <img class = 'center' src='{% static "img/dfe_1.png" %}'/ width = '70%'>
            <p class = 'example2E'>
            {% blocktrans trimmed %}
                This option offers +7 points with a hidden constant probability or +5 points with 1 minus the first probability.
            {% endblocktrans %}</p>
        </div>
        <div>
            <img class = 'center' src='{% static "img/dfe_2.png" %}'/ width = '70%'>
            <p class = 'example2E'>
            {% blocktrans trimmed %}
                This option offers +3&nbsp;points with a hidden constant probability or +9 points with 1 minus the first probability.
            {% endblocktrans %}</p>
        </div>
    </div>
  {% else %}
      <div class = "flex-row">
        <div>
            <img class = 'center' src='{% static "img/gop1m.png" %}'/ width = '70%'>
            <p class = 'example2E'>
            {% blocktrans trimmed %}
                This option offers +7&nbsp;points with a probability of 20&nbsp;% or +5 points with a probability of 80&nbsp;%.
            {% endblocktrans %}</p>
        </div>
        <div>
            <img class = 'center' src='{% static "img/gop2.png" %}'/ width = '70%'>
            <p class = 'example2E'>
            {% blocktrans trimmed %}
                This option offers +3&nbsp;points with a probability of 60&nbsp;% or +9 points with a probability of 40&nbsp;%.
            {% endblocktrans %}</p>
        </div>
    </div>
  {% endif %}
    <h3>Comprehension Check</h3>
    {% formfields %}
  {% blocktrans trimmed %}
      <p><b>On the next page you will see an example of a learning phase. Click on "Next" to navigate to the next page.</b></p>
  {% endblocktrans %}
  {% next_button %}

{% endblock %}