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

{% block title %}
    {% blocktrans trimmed %}Instructions Choice Phase{% endblocktrans %}
{% endblock %}


{% block content %}
  <p> {% blocktrans trimmed %}
    Here you learn about the layout and procedure of choice phases.
  {% endblocktrans %}
  </p>

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

  {% blocktrans trimmed %}
  <p>After you have moved on from learning the hidden probabilities the choice phase begins. <b>In choice phases your task is to reach or exceed a point threshold by accumulating points from the options.</b></p>
  <p>In choice phases the options are the same as in learning phases (i.e. the hidden probabilities and options will be the same as in the learning phase). However your task is not to learn about hidden probabilities, but to accumulate points.</p>
  <p>You start with 0 points. A progress bar shows your points and the threshold you want to reach or exceed (e.g., 5 points and a threshold of 29, shown below).</p>
  <p>Clicking on an option causes the option to play out a point draw according to the hidden probabilities. This increases your points on the progress bar (shown below). Your task is to reach or exceed the threshold in 5 choices.</p>
  {% endblocktrans %}
  {% blocktrans trimmed %}
      <p>The threshold will be shown like this:</p>
  {% endblocktrans %}
    <div class = "flex-row">
        <div>
            <div>
                <img class = 'center' src='{% static "img/gain1E.png" %}' / width = '60%'>
                <p class = 'example2E'>
                {% blocktrans trimmed %}
                In this case your starting points are 0 (like always), and your threshold is 29
                {% endblocktrans %}
                </p>
            </div>
        </div>
        <div>
            <div>
                <img class = 'center' src='{% static "img/gain3E.png" %}' / width = '90%'>
                <p class = 'example2E'>
                {% blocktrans trimmed %}
                In this case your points are 5, and your threshold is 29
                {% endblocktrans %}
                </p>
            </div>
        </div>
    </div>

    <h3>Comprehension Check</h3>
     {% formfields %}
    {% blocktrans trimmed %}
        <p><b>On the next page you will see an example of a choice phase. Click on "Next" to navigate to the next page.</b></p>
    {% endblocktrans %}

  {% next_button %}

{% endblock %}