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

{% block title %}
Ten Walking Tasks
{% endblock %}

{% block content %}

<div class="row my-3 bg-light px-3 py-3 rounded border">
    <div class="col">
        <div class="row">
            <div class="col">
                <p>
                    <strong>
                        In the second part of the experiment, 
                        you "walk" through your decolored ball triangle 
                        for
                        ten times.
                    </strong> 
                </p>
                
                <p>
                    At each ball that you reach on your path through the ball triangle, 
                    you must instruct the computer 
                    about the probability with which to <i>stop</i> risk-taking.

                    You can freely change your instruction from the Decoloring Task. 
                    Your instruction from the Decoloring Task 
                    is the <u>default</u> at each ball.  
                </p>

                <p>
                    The path that you walk 
                    through your decoloring is determined by coin tosses and card draws. 
                    As before, if you win a coin toss, you move up in the ball triangle and your accumulated earnings increase 
                    by £{{upTick}}. If you lose a coin toss, 
                    you move down and your accumulated earnings
                    decrease by £{{upTick}}.
                    {{ if costly }}
                    </br>
                    Instructing the computer to use a numbered ball costs £0.01. White and black balls are free.
                    {{ endif }}
                </p>

                <p>
                    Before you begin the ten Walking tasks, there will be <strong>one practice round</strong>
                    to illustrate how the Walking Tasks work. 
                    Your instructions in the practice round are not bonus-relevant.
                </p>

            </div>
        </div>

        <div class="row">
            <div class="col">
                <button id="next_page_btn" class="btn btn-primary px-3"> 
                    Start practice round
                </button>
            </div>
        </div>


        <div id="nextPageSec" class="row collapse">
            <div class="col alert alert-info">
                <p>
                    If your bonus task is a Walking Task, your bonus will be the
                    accumulated earnings at the bonus ball, plus your endowment.
                </p>
                
                Although the bonus ball determines your bonus,  
                you must <i>always</i> resolve five single risks during the Walking Tasks.
                You can thus not complete 
                a Walking Task faster by instructing the computer to stop risk-taking early.  
                You will not see the outcome of the single risks once the bonus ball is determined.
                Resolving risks after the bonus ball is determined
                does not affect your bonus. 
            </div>
        </div>
            

        <div class="row d-none">
            <div class="col">
                <button type="button" 
                        onClick= "
                                $('#nextPageSec').collapse('show');
                                document.getElementById('okayBtn').classList.add('d-none');
                                document.getElementById('next_page_btn').classList.remove('d-none');
                            " 
                        id="okayBtn" class="btn btn-primary px-3"> 
                        How is my bonus for a Walking Task determined?
                </button>
                <button id="next_page_btn" class="btn btn-primary px-3 d-none"> 
                    Start the Walking Tasks
                </button>
            </div>
        </div>
    
    </div>
</div>


{% if testing %}
    <button id="skipBtn" class="btn btn-secondary px-3">
    Skip for testing</button>
{% endif %}

{% endblock %}